慢慢买项目说明
通过网盘分享的文件：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://localhost:3000/swagger 打开接口文档 接口文档是按照页面进行划分的
前后端在开发过程中，通过通过接口文档来进行交互的。在没有文档自动生成工具之前，都是手写文档。缺点主要有
-
麻烦
-
不容易调试
-
不容易修改
swagger是一个在线的根据代码自动生成文档的工具。在前后端交互的时候非常的方便，也很容易进行调试。
使用gulp自动化构建
中文文档：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- 配置