昆玉市网站建设_网站建设公司_JavaScript_seo优化

慢慢买项目说明

通过网盘分享的文件：1128慢慢买.rar
链接: https://pan.baidu.com/s/1tnkBfJxnCikJCSFASz_Stg?pwd=b8e8 提取码: b8e8

项目数据库

项目数据库使用的是mongodb 数据库

数据库打开方式

window 在系统根目录下输入 yarn mongodWin

Max 在系统根目录下输入 yarn mongodMac

window 打不开 提示少东西 可以安装vc++2015

win7 win8 部分电脑会提示 api-ms-win-core 可以连接同桌

项目的后台

项目后台使用的是nodejs

在文件夹的根目录下找到http文件夹，打开后在根目录输入启动命令

// npm npm i npm start // yarn yarn yarn start

接口文档

启动后台之后 在浏览器输入

打开接口文档 接口文档是按照页面进行划分的

后台配置说明

端口切换 http文件夹内bin文件里面www文件修改端口

// ---> http/bin/www // 将3000 替换成你想要的接口 var port = normalizePort(process.env.PORT || '3000');

前端页面

直接在浏览器输入http://127.0.0.1:3000

yarn

快速、可靠、安全的依赖管理工具

使用来替代npm最理想的工具

使用 npm i yarn -g 安装yarn

安装完成之后在命令窗口输入yarn -v 返回版本号证明成功

yarn命令

• 初始化一个新项目

yarn init

• 添加依赖包

yarn add 包名

• 升级依赖包

yarn upgrade 包名

• 移除依赖包

yarn remove 包名

• 安装项目的全部依赖

yarn

• 全局安装

yarn global add 包名

Swagger

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新

gulp

yarn global add gulp

自动化构建工具

gulp的使用流程一般是：

首先通过gulp.src()方法获取到想要处理的文件流

然后把文件流通过pipe方法导入到gulp的插件中

最后把经过插件处理后的流在通过pipe方法导入到gulp.dest()中

gulp.desk()方法则把流中的内容写入到文件中

gulp.src 入口文件路径

gulp.dest ; 用来写入文件的

gulp.watch 用来监视文件的变化

gulp 和 webpack 的差异

gulp 注重前端的开发流程 主要功能就是 压缩 预处理 文件 （模块化开发是附带的功能）简单来说就是一个基于node的功能插件集合体

webpack 注重模块化开发 （压缩和预处理文件是附带的一个功能）他是前端模块化开发的一整套方案提供者。

项目展示

• 开启数据库以及启动项目

• 查看项目中用到了那些东西：使用gulp打包压缩到dist文件，更新代码自动刷新

yarn和npm的说明

npm下载包遇到的问题：下载速度慢，经常下载失败，npm下载是串行的

yarn官网：https://yarn.bootcss.com/

Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，Yarn 是为了弥补 npm 的一些缺陷而出现的。

• Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。

• 同时利用并行下载以最大化资源利用率，因此安装速度更快。

• yarn的用法和npm的用法差不多

yarn命令

• 初始化一个新项目

yarn init -y

• 添加依赖包

yarn add 包名

• 升级依赖包

yarn upgrade 包名

• 移除依赖包

yarn remove 包名

• 安装项目的全部依赖

yarn

• 全局安装

yarn global add 包名 sudo yarn global add 包名

项目启动

开发项目，我们这个项目是前端口分离的，你只用管前端的代码即可。

本次开发，你得保证你电脑有后端的环境的。

后端的环境（代码已经妥当了）：

• 数据库环境

• 接口环境

数据库启动

项目数据库使用的是mongodb 数据库

• window系统yarn mongodWin

• mac系统yarn mongodMac

项目接口启动

# 安装依赖 yarn # 启动项目 yarn start

项目演示

访问地址：http://127.0.0.1:3000

接口访问地址：http://localhost:3000/swagger

项目开发

项目基本结构搭建

首页编写

接口文档

启动后台之后 在浏览器输入 http://localhost:3000/swagger 打开接口文档 接口文档是按照页面进行划分的

前后端在开发过程中，通过通过接口文档来进行交互的。在没有文档自动生成工具之前，都是手写文档。缺点主要有

• 麻烦

• 不容易调试

• 不容易修改

swagger是一个在线的根据代码自动生成文档的工具。在前后端交互的时候非常的方便，也很容易进行调试。

swagger官网

使用gulp自动化构建

官网：https://gulpjs.com/

中文文档：https://www.gulpjs.com.cn/

用自动化构建工具增强你的工作流程！

在开发过程中，有很多重复性的工作需要执行。

• less转成css

• 对css代码压缩混淆

• 对js代码压缩混淆

• 写完代码后需要刷新浏览器

• 无法共用模版

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp -----> grunt ------>webpack

环境安装

• 初始化项目

npm init -y yarn init

• 全局安装gulp

npm install gulp -g yarn global add gulp

• 作为项目的依赖进行安装

yarn add gulp --save-dev 或者 yarn add gulp --save-dev --save-dev 等同于 -D 如果这个依赖包只是在开发阶段需要用到，需要加-D

• 新建gulpfile.js文件

// 参数1： 任务名 // 参数2： 任务需要执行的内容 gulp.task('aa', function() { console.log('哈哈') })

• 执行任务

gulp 任务名; ​ gulp; 如果不接任务名，那么会执行默认的 default任务

glup任务-文件拷贝-lib

文件拷贝使用到了gulp提供的几个核心方法 gulp.task: 定义任务

gulp.src() 读取文件

gulp.pipe() 把文件交给管道处理

gulp.dest() 输出文件到某个目录

• gulp.task定义任务

• gulp.src('./src/lib/**/*.*')把文件读取成一个文件流

• gulp.pipe()把文件流交给下一个流

• gulp.dest('./dist/lib')输出文件

// 简单拷贝, 处理 lib文件夹， lib文件不需要做任何的处理，只需要拷贝到dist目录 // 任务需要加一个return， 表示任务完成 gulp.task('lib', function() { // 读取文件 // gulp.src() 读取文件 // gulp.pipe() 管道 // gulp.dest() 放到哪儿 return gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib')) })

gulp任务-js代码压缩与混淆

gulp-uglify-es: 给js代码进行压缩，处理ES6的代码

gulp-rename: 重命名

• 安装依赖

yarn add gulp-uglify-es --save-dev

• 配置任务

const uglify = require('gulp-uglify-es').default ​ gulp.task('js', function() { return gulp .src('./js/*.js') .pipe(uglify()) .pipe(gulp.dest('./dist/js')) })

• 安装重命名依赖

yarn add gulp-rename -D

• 重命名配置

task('js', function() { return src('./js/*.js') .pipe(dest('./dist/js')) .pipe(uglify()) .pipe( rename({ // 配置重命名的后缀名 suffix: '.min' }) ) .pipe(dest('./dist/js')) })

gulp任务-less处理

gulp-less: 把less变成css

gulp-rename: 重命名

gulp-minify-css: 压缩css代码

• 安装依赖包

yarn add gulp-less -D

• less任务

// less任务 task('less', function() { return src('./less/*.less') .pipe(less()) .pipe( rename({ extname: '.css' }) ) .pipe(dest('./dist/css')) })

• 安装css压缩处理包

yarn add gulp-minify-css -D

• 压缩css

// less任务 task('less', function() { return src('./less/*.less') .pipe(less()) .pipe( rename({ extname: '.css' }) ) .pipe(dest('./dist/css')) .pipe(minifycss()) .pipe( rename({ suffix: '.min' }) ) .pipe(dest('./dist/css')) })

gulp任务-图片压缩

gulp-imagemin: 可以对图片进行压缩

gulp-cache: 图片压缩比较耗时的一个任务， 如果每次都对所有的图片进行重新压缩，比较浪费时间， 会缓存下来所有已经压缩过的图片

• 安装依赖

yarn add gulp-imagemin -D

• 压缩图片的任务

task('image', function() { return src('./img/*') .pipe(imagemin()) .pipe(dest('./dist/img')) })

• 安装gulp-cachae

yarn add gulp-cache -D

• 压缩图片是比较耗时的，我们可以使用gulp-cache来缓存已经压缩过的图片

task('image', function() { return src('./img/*') .pipe(cache(imagemin())) .pipe(dest('./dist/img')) })

参考资料：https://www.cnblogs.com/yuzhongwusan/p/5417090.html

gulp任务-处理html

gulp-minify-html: 压缩html文件

gulp-html-extend: 语句当前html去导入另一个html

• 压缩html

yarn add gulp-minify-html -D

• 使用

// 处理html task('html', function() { return src('./src/*.html') .pipe(minifyHtml()) .pipe(dest('./dist')) })

• 导入html

yarn add gulp-html-extend -D

// 处理html task('html', function() { return src('./src/*.html') .pipe(extender()) .pipe(minifyHtml()) .pipe(dest('./dist')) })

在页面中，如何导入html

<!-- @@include ./template/header.html -->

gulp任务-清空任务

• 安装

yarn add del -D

• 配置任务

task('clean', function() { return del('./dist') })

gulp-任务整合series

task('build', gulp.series('clean', 'html', 'less', 'js', 'image', 'lib'))

gulp任务-监听文件的变化

// 实现一个，修改代码，会自动执行任务 // 监听的任务，，，，，，做一件事件，当我们修改了对应的文件，需要执行对应的任务 // gulp.watch() 监视文件 task('watch', function() { // 参数1：监视的文件 // 参数2： 对应的任务, 多个任务 watch('./src/**/*.html', series('html')) watch('./src/less/*.less', series('less')) watch('./src/js/*.js', series('js')) watch('./src/lib/**/*.*', series('lib')) watch('./src/img/*.*', series('img')) })

gulp任务-自动刷新

• 安装

yarn add gulp-connect -D

• 配置

​