# vue_shop

**Repository Path**: ruxin736/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: 一个基于vue+element-ui+nodejs的电商后台管理系统，支持用户登录，用户管理，分配权限，商品管理，订单管理，数据统计等功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2020-05-17
- **Last Updated**: 2023-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_shop

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).



# 界面预览

登陆页面

![](https://gitee.com/ruxin736/images/raw/master/登录.png)

添加商品页面

![](https://gitee.com/ruxin736/images/raw/master/添加商品.png)

商品分类页面

![](https://gitee.com/ruxin736/images/raw/master/商品分类参数.png)

权限管理

![](https://gitee.com/ruxin736/images/raw/master/权限管理.png)



# 项目准备

## Vue项目初始化

1. 全局安装Vue脚手架 `npm install -g @vue/cli`；
2. 运行Vue项目可视化管理面板 `vue ui`；
3. 创建Vue项目；
4. 在插件中配置Element-UI，搜索`vue-cli-plugin-element`插件并安装；
5. 在运行依赖中配置Axios，搜索`axios`并安装。

## 调试后台服务器接口

1. 安装phpStudy（用不到Apache，可将其停止），导入`/vue_api_server/db/mydb.sql`数据库。

   MySQL管理器 => MySQL导入导出 => 输入密码root => 选择要还原的文件，即素材中的`/vue_api_server/db/mydb.sql`数据库，还原到数据库名为mydb => 点击导入

   弹出的对话框自动关闭后即为导入完成，在`D:\phpStudy\MySQL\data`中查看是否有mydb文件夹，若存在，则导入成功。

2. 打开`vue_api_server`文件夹，使用`npm install`安装依赖项；

3. 安装完成后，`node app.js`即可查看可用的接口；

4. 安装postman接口调试工具。



# 登录/退出

**业务流程**

1. 在登录页面输入用户名和密码；
2. 调用 后台接口进行验证；
3. 通过验证之后，根据后台的响应状态跳转到项目主页。

**相关技术栈**

- http 无状态；
- cookie 在客户端记录状态；
- session 在服务器端记录状态；
- token 维持状态。

客户端和服务器端接口之间不存在跨域问题，则使用cookie和session维持登录状态；若存在跨域问题，则使用token维持登录状态。

**登录页面布局**

通过 Element-UI 组件实现布局，具体涉及：

- el-form
- el-form-item
- el-input
- el-button

**先对初始文档进行清理**

1. 用webstorm打开vue_shop项目文件，使用`git status`确认当前项目状态是否clean，若不是，则可在终端依次执行`git add .`,`git commit -m "add files"`。

2. 终端执行`git checkout -b login ` 创建一个新的分支进行开发，开发完毕后再合并到master。可使用`git branch`命令查看当前的所有分支，目前应该有两个：login和master，前面带 * 的即为当前正在开发的分支。
3. 终端执行`vue ui`打开ui界面，在任务中运行serve，编译完成后启动app，查看编译效果。
4. 第一次编译结果是一个默认页面，可以对main.js，App.vue，以及router.js文件进行清理，并删除与项目无关的默认组件。

**接下去实现登录组件**

1. 先在`plugins/element.js`文件中按需导入elementui；
2. 进行登录组件的CSS样式设计，怎么开心怎么来；
3. 使用`v-model`进行表单数据的双向绑定；
4. 为`<el-form>`添加`:rules="loginFormRules"`验证规则，并在各`<el-form-item>`中设置`prop`属性，以对应相应的验证规则；
5. 为Login按钮添加点击事件，实现表单数据在提交前进行格式验证，若验证通过则向服务器发送ajax请求。表单的格式验证使用form表单中的validate方法。要发送ajax请求，首先在main.js中导入axios，设置请求的根路径，并挂载到Vue原型方法中。在客户端通过post请求得到服务器的返回数据后，解构出返回数据中的data，根据data中的状态码是否为200，判断登录成功与否；
6. 导入elementui中的弹窗提示messege，并全局挂载`Vue.prototype.$message = Message`。在Login按钮的点击事件中，根据登录成功与否，弹出相应提示；
7. 若登录成功，则将服务器返回数据中的 token 保存到客户端的sessionStorage中。因为项目中除了登录之外的其他API接口只能在登录后才能访问，客户端保存的token在网站登录成功后才能生效，所以需要保存在sessionStorage中。然后设置编程式导航，跳转到home页面；
8. 在配置路由的index.js中添加路由守卫，使用`router.beforeEach()`方法，如果要访问的页面是登录页面，则放行；如果要访问的不是登录页面，则先判断是否有token，如果没有，则强制跳转到登录页面，如果有，则放行。

**接下去实现退出功能**

1. 在Home.vue组件中添加退出按钮，并为该按钮添加点击事件；
2. 点击事件的执行函数主要进行两件事：首先`window.sessionStorage.clear() `清空客户端存储的token；然后使用编程式导航跳转到登录页面。

**代码格式化问题**

webstorm里面使用 `Alt+Ctrl+L` 自动实现的代码格式和Vue项目中ESLint规定的格式冲突，出现冲突时，会自动出现错误提示，但是一个个去修改太麻烦。可以在Settings => Keymap中搜索eslint，并为其设置快捷键 `Alt+L`，这样就可以一键格式化代码。

**提交代码到码云**

1. `git status` 查看当前项目的状态，文件名为红色的是修改过或新增的文件；
2. `git add .` 将修改过的文件全部添加到暂存区中；
3. `git commit -m "完成了登录功能"` 将暂存区中的文件全部添加到本地仓库中，-m 表示提交消息；
4. `git branch` 检查当前所处的分支，当前应该处于login分支；
5. `git checkout master` 切换到master分支；
6. `git merge login` 将login分支中的代码合并到master分支中；
7. `git push` 推送master分支到码云，注意此时码云中只有一个master分支，没有login分支；
8. `git checkout login` 切换到login分支；
9. `git push -u origin login` 推送login分支到码云，因为这是第一次推送login分支，云端仓库中还没有该分支，所以不能直接使用`git push`。



# 主页布局

**首先对首页进行基本的样式布局**

1. 使用elementui中的container布局容器，记得在element.js文件中进行导入；
2. 在头部区域放置logo、名称、以及退出按钮，使用flex布局实现两端对齐，以及logo和文字的居中对齐；
3. 在侧边栏使用elementui中的NavMenu菜单栏，因为只需要两级菜单，所以只保留`<el-menu>`、`<el-submenu>`、以及`<el-menu-item>`

**设置axios请求拦截器**

除了登录接口，任何访问后台的操作都需要token权限验证，所以需要在客户端发送请求前加上存储的token，以保证用户拥有获取数据的权限。

在main.js中，在将axios挂载到vue原型之前添加以下代码，通过axios请求拦截器添加 token，为每一次的API请求挂载一个 token。

```javascript
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
```

**通过接口获取左侧菜单数据**

1. 查询接口文档，确定左侧菜单数据的请求路径、请求方法、以及返回数据的格式；
2. 在Home组件的`methods`中定义获取菜单的方法`getMenuList()`，使用async修饰，并将数据存储到`data`中；
3. 因为侧边栏的菜单列表是在页面渲染前就需要被初始化好，所以在`creates()`生命周期函数中执行`getMenuList()`。
4. 得到菜单列表数据后，通过`v-for`双重循环渲染左侧菜单；
5. 修改`<template>`中`<i>`标签的class，可以更改列表左侧的图标。因为菜单列表是循环渲染上去的，要实现一级菜单列表使用不同的图标，可以在`data`中定义一个存储图标的对象`inconObj`。该对象中的键是列表id，值是对应的iconfont名字。循环渲染时，使用`<i :class="iconsObj[item.id]"></i>`；
6. 菜单标签`<el-submenu>`和`<el-menu-item>`中有一个属性`index`，属性值必须是字符串，每个循环渲染出的列表都必须有一个单独的index属性值，否则点击列表时会出现所有列表同时折叠和展开的问题，可以使用`:index="item.id+''"`，即将该属性值与id绑定，并在后面凭借上一个空字符串，从而将属性值转换成字符串形式；
7. 在菜单栏`<el-menu>`上方添加一个实现侧边栏的折叠/展开的`<div>`标签，并为其添加点击事件，控制`<el-menu>`标签的`collapse`属性，若属性值为true则为折叠，否则为展开。默认的折叠动画并不丝滑，所以可以直接将其取消，`:collapse-transition="false"`；
8. 将`<el-aside>`标签的`width`属性设置为`:width="isCollapse?'64px':'200px'"`，根据侧边栏折叠与否，动态地改变侧边栏宽度。

**侧边栏的右边框不平整问题**

因为`<el-menu>`元素有一个边框，所以当导航栏右边框的一级菜单展开和折叠时，侧边栏右侧会有凹凸不平的问题，可以将`<el-menu>`的右边框去除`border-right: none;`。

**首页添加子级路由**

1. 新建一个Welcome.vue组件，在router的js文件中导入该组件，并将其作为Home组件的子组件，并 为Home组件重定向为Welcome组件，在Home组件的主体区域添加路由占位符，实现进入'/home'路径时，主体区域显示welcome页面；
2. 在Home.vue中，在`<el-menu>`标签中将`router`属性设置为true，即实现将所有的侧边栏二级菜单改造为子级路由链接，并且会根据菜单的`index`属性作为路径进行路由跳转。本来在`index`属性中绑定的是id，但是不适合用来作为路径，所以将其修改为`:index="'/'+subItem.path"`；
3. 此时点击二级菜单时，出现无法高亮的问题，可以通过设置`<el-menu>`的`default-active`属性来实现当前激活菜单高亮显示。先给每一个二级菜单`<el-menu-item>`添加点击事件，并传入当前菜单的路径`@click="saveNavState('/'+subItem.path)"`，然后在该点击事件的处理函数中，将传入的路径存储到sessionStorage中，并将该路径赋值给data中的`activePath`，将`default-active`属性值绑定为`activePath`；
4. 在`created()`中将sessionStorage中存储的`activePath`赋值给`this.activePath`，刷新页面保持当前激活菜单高亮显示。



# 用户列表功能

**用户列表功能实现**

1. 新建Users.vue组件，并在路由的js文件中将其作为子路由添加到Home组件的路由中；

2. 使用element-ui中的面包屑组件实现顶部路径导航；

3. 使用element-ui中的Card组件实现卡片视图区域的主体框架，并使用Input组件实现搜索框和搜索按钮，添加el-button作为添加用户按钮，使用Layout组件中的分栏布局来划分搜索框和按钮的布局；

4. 在methods中定义获取用户列表的方法`getUserList()`。首先查询接口文档，确定请求数据的方法和必须的参数，将返回的数据存储到data中。并在`created()`添加该方法，从而页面加载完成时便获取所有的用户列表数据；

5. 使用element-ui中的Table组件来展示用户列表。在“状态”一栏中，使用作用域插槽获取每一行的数据，再在`<el-switch>`标签中使用`v-model="scope.row.mg_state"`实现用户当前状态的双向绑定，并为该标签添加状态改变事件，并将作用域插槽中的数据作为事件参数传递，`@change="userStateChanged(scope.row)`；

6. 查询接口文档，对照"修改用户状态"的接口定义`userStateChanged(userInfo)`函数，实现用户状态更新；

7. 在操作栏中有"修改"、"删除"、"分配角色"三个按钮，使用element-ui中的Tooltip组件实现鼠标放到按钮上方时有文字提示；

8. **列表分页**：使用element-ui中的Pagination组件实现列表分页，并修改该组件中绑定的两个事件：`@size-change="handleSizeChange"`，`@current-change="handleCurrentChange"`，当每页显示条数或当前页码值改变时，分别触发这两个事件，在事件处理函数中，会将新的数据赋值给`this.queryInfo`对象的对应属性，并重新调用获取用户列表的方法`getUserList()`。同时还要修改该标签中的属性绑定；

9. **搜索功能**：为搜索框中的搜索按钮`<el-button>`添加点击事件`@click="getUserList"`，同时也要将搜索框输入栏`<el-input>`进行数据的双向绑定`v-model="queryInfo.query"`，从而实现搜索功能。然后在输入栏`<el-input>`添加`clearable`属性和`@clear="getUserList"`，从而实现清空搜索框，重新展示完整的用户列表；

10. **添加用户功能**：

    1. 使用element-ui中的Dialog组件，添加“添加用户”对话框，并在该组件中使用Form组件进行基本的布局；

    2. 为“添加用户”按钮添加点击事件`@click="addDialogVisible=true"`，即实现点击该按钮，便显示添加用户的对话框；

    3. 修改添加用户对话框dialog中的属性，并为form表单添加数据绑定和校验规则。注意表单中的“邮箱”和"手机"需要使用自定义规则；

    4. 为`<el-dialog>`添加对话框关闭事件`@close="addDialogClosed"`，在事件处理函数中使用`this.$refs.addFormRef.resetFields()`，从而实现关闭对话框就清空对话框中的表单数据，再次打开对话框时显示的是一个空的表单；

    5. 为对话框的"确定"按钮添加提交用户数据的点击事件`@click="addUser"`，在该事件处理函数中，使用`this.$refs.addFormRef.validate()`函数进行表单格式的预验证，验证后的操作在该函数的回调函数中进行。

       【注意】案例里面没有"确认密码"这个需求，是我自己加上去的，所以后台的API接口里面也无法接收这个数据，但是表单中的所有数据都绑定到了`addForm`这个对象中，所以在提交该表单数据前，需要使用`delete this.addForm.passwordCheck`来删除表单对象中为确认密码而额外添加的属性`passwordCheck`。

       查询接口文档，将验证通过的数据post到服务器端，得到返回数据后使用`this.$message`弹出显示该请求成功与否，然后`this.addDialogVisible = false`关闭该"添加用户"对话框，然后调用获取用户列表，显示新的列表数据；

11. **修改用户功能**：

    1. 为“操作”栏中的“修改”按钮添加点击事件`@click="showEditDialog(scope.row.id)`，使用作用域插槽传入该行用户的id；

    2. 使用element-ui中的Dialog组件，添加“修改用户”对话框，并在该组件中使用Form组件进行基本的布局；

    3. 修改添加用户对话框dialog中的属性，并为form表单添加数据绑定和校验规则；

    4. "修改"按钮的点击事件处理函数中，先根据传入的用户id向后台获取该用户的信息，绑定到表单中，然后通过`this.editDialogVisible = true`显示“修改用户”对话框；

    5. 为`<el-dialog>`添加对话框关闭事件`@close="editDialogClosed"`，在事件处理函数中使用`this.$refs.editFormRef.resetFields()`，从而实现关闭对话框就清空对话框中的表单数据，再次打开对话框时显示的是一个空的表单；

    6. 为对话框的"确定"按钮添加提交用户数据的点击事件`@click="editUser"`，在该事件处理函数中，使用`this.$refs.editFormRef.validate()`函数进行表单格式的预验证，验证后的操作在该函数的回调函数中进行。

       查询接口文档，将验证通过的数据put到服务器端，得到返回数据后使用`this.$message`弹出显示该请求成功与否，然后`this.editDialogVisible = false`关闭该"修改用户"对话框，然后调用获取用户列表，显示新的列表数据；

12. **删除用户功能**：

    1. 要实现点击“删除”按钮，先弹窗询问用户是否真的要删除。首先导入element-ui中的MessageBox组件，将该组件的confirm方法挂载到Vue实例上，`Vue.prototype.$confirm = MessageBox.confirm`；
    2. 然后为"删除"按钮绑定点击事件`@click="removeUserById(scope.row.id)"`，通过作用域插槽传入当前要删除用户的id；
    3. 在点击事件的处理函数中，先利用`this.$confirm()`方法弹出提示信息框，若用户点击“确定”，则函数返回字符串“confirm”，点击“取消”，则会抛出一个错误，此时可以在方法后面用`.catch(err=>err)`兜住错误。若用户取消删除，则直接返回。若用户确认删除，则根据接口文档中的API执行删除操作，得到后台的返回信息后，弹窗显示删除成功与否，并重新调用获取用户列表函数。

**提交代码到码云**

1. `git checkout -b user` 创建新的user分支，并跳转到该分支上；
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了用户列表功能"` 将代码添加到本地仓库；
4. `git push -u origin user` 在云端创建一个user分支，并将代码上传到该分支上；
5. `git checkout master` 切换到master分支；
6. `git merge user` 将user分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端

**git提交出错**

提交错放到了login分支上，本来应该是新建一个user分支，并提交到user分支上，此时可以：

1. `git reset --hard`  在login分支下执行该命令，即撤销当前分支的变化
2. `git checkout -b user` 创建并跳转到一个新的user分支，并将该变化放到user分支上



# 权限管理功能

**创建分支并推送**

1. `git checkout -b rights` 创建一个新的rights分支，并跳转到该分支上；
2. `git branch` 查看所有分支，确定当前处于rights分支；
3. `git push -u origin rights` 在云端创建一个rights分支，并把本地的rights分支上传。

**业务分析**

权限管理模块主要实现控制不同用户的操作权限，具体通过给用户分配不同的角色，而每个角色包括不同的功能权限。也就是先给每个角色限定好了权限，只要给用户分配了不同的角色，也就实现了给用户不同的权限。

**权限管理功能实现**

1. **权限列表**

   1. 新建Rights.vue组件，并添加到Home组件的子路由中；
   2. 使用element-ui中的面包屑导航组件实现导航栏；
   3. 查询接口文档，定义获取权限列表的方法`getRightsList()`，并将其添加到`created()`中。这里后台返回的数据可选择列表形式或树状形式，这里使用列表形式；
   4. 用element-ui中的Card组件以及Table组件实现基本的页面布局，和数据渲染；
   5. 在"权限等级"一栏中，使用不同样式的Tag组件表示不同等级的权限，使用作用域插槽获取所在行的等级，然后用`v-if`显示对应等级的标签。

2. **角色列表**

   1. 新建Rights.vue组件，并添加到Home组件的子路由中；

   2. 使用element-ui中的面包屑导航组件实现导航栏；

   3. 查询接口文档，定义获取角色列表的方法`getRolesList()`，并将其添加到`created()`中，将返回的数据存储到`data`的`rolesList`数组中；

   4. 用element-ui中的Card组件以及Table组件实现基本的页面布局，和数据渲染；

   5. 在表格索引列前面加上一个展开列，`<el-table-column type="expand">`，用于展示当前角色所有权限的树状图，并`<el-row>`和`<el-col>`进行布局。

      首先使用作用域插槽获取当前行的数据，然后用`v-for="(item1,i1) in scope.row.children"`循环渲染多个行，每个一级权限占用一行。每一行又分成两列，第一列用`<el-tag>`渲染一级权限，第二列渲染二级权限和三级权限。

      第二列中又用`v-for="(item2,i1) in item1.children"`循环渲染多个行，每个二级权限占用一行。每一行又分成两列，第一列用`<el-tag>`渲染二级权限，第二列在`<el-tag>`标签中用`v-for="item3 in item2.children"`循环渲染三级权限；

   6. 通过设置global.css中的`#app`样式`min-width:1366px` 解决当页面宽度减小导致三级权限换行的问题，设置最小宽度之后，页面会按需自动出现滚动条；定义一个垂直居中的样式`.vcenter{display:flex;align-items:center}`，给一级权限和二级权限的`<el-row>`添加该样式，实现在所处行中`<el-tag>`的垂直居中显示。

   7. 为表示权限的`<el-tag>`标签加上`closable`属性，并绑定标签关闭事件`@close="removeRightById()"`，在该事件处理函数中，先利用`this.$confirm()`方法弹窗提示用户是否确认删除，查询接口文档，定义删除操作的请求，该请求需要提供删除角色的id和删除权限的id，所以需要在事件处理函数中传入两个参数`removeRightById (role, rightId)`，第一个为当前的角色信息，第二个为要删除的权限id。

      【注意】在删除操作成功之后，需要更新当前的权限列表，但是不能是使用先前定义的获取角色列表的方法`getRolesList()`，因为这样会导致列表更新后，原本处于打开状态的展开列自动折叠上，所以这里直接将后台返回的数据赋值给当前的角色信息即可，`role.children = res.data`。

   8. 为角色列表中的"分配权限"按钮添加点击事件`@click="showSetRightDialog(scope.row)`，使用作用域插槽传入该行角色信息；

   9. 使用element-ui中的Dialog组件，添加“分配权限”对话框，并在该组件中使用Tree组件实现树形空间布局，对树形空间中的属性进行数据绑定，`:data="rightsList" :props="treeProps"`，在treeProps`对象中定义树形控件显示的标签和值；

   10. 在`showSetRightDialog(role)`函数中，先根据接口文档获取当前角色权限的数据，将后台返回的数据赋值给`this.rightsList`，然后该数据通过绑定显示到树形控件中。

       给树形控件添加实现默认选中效果的属性`:default-checked-keys="defKeys"`，其中`defkeys`数组中保存了默认选中节点的id，主要通过定义一个递归函数来获取当前角色所有的三级权限，也就是获取权限树形列表中的所有叶节点。

       最后显示“分配权限”对话框；

   11. 为“分配权限”对话框`<el-dialog>`添加关闭事件`@close="setRightDialogClosed"`，在该事件处理函数中清空默认选中项`this.defKeys=[]`；

   12. 给“分配权限”对话框的“确定”按钮添加点击事件`@click=allotRights`，该事件处理函数中主要实现提交修改后的权限数据。查询接口文档，要求使用put方法，路径中需要加上当前角色id，传入的数据对象为树形控件中所有被选中的叶子节点key和半选中节点key，且组成以`，`分割的字符串。

       当前角色的id可以在显示对话框的时候，在`showSetRightDialog(role)`函数中记录下来，并存储到`data`中。

       然后在`allotRights()`函数中使用树形控件自带的`getCheckedKeys()`方法和`getHalfCheckedKeys()`方法来获取节点key，然后通过展开运算符组合到数组中，`const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]`，最后利用数组的`join()`方法并结成字符串。

       提交成功之后，调用获取角色列表方法`getRolesList()`方法更新数据，最后关闭对话框。

3. 角色列表页面中的“添加角色”按钮，以及角色列表中的“编辑”和“删除”按钮的功能实现和之前的类似，再次不再做详细描述。

**用户管理功能补充**

实现用户列表中的分配角色功能

1. 为用户列表中的"分配角色"按钮添加点击事件`@click="showSetRoleDialog(scope.row)`，使用作用域插槽传入当前行的用户信息，

2. 使用element-ui中的Dialog组件，添加“分配角色”对话框，并在该组件中，

3. 在该处理函数中，根据接口文档获取该用户的角色数据，并存储到`data`中的`roleList`中，然后打开“分配角色”对话框；

4. 在“分配角色”对话框中添加Select选择器，用`v-for="item in rolesList"`循环产生角色选项`<el-option>`；

5. 给“分配角色”对话框的“确定”按钮添加点击事件`@click=saveRoleInfo`，该事件处理函数中主要实现对提交修改后的用户角色数据。查询接口文档，要求使用put方法，路径中需要加上当前角色id，传入的数据对象为选择器中被选中的角色id。

   当前角色的id可以在显示对话框的时候，在`showSetRightDialog(userInfo)`函数中记录下来，并存储到`data`中，`this.userInfo=userInfo`。

   而select选择器中被选中的角色id可使用`v-model="selectedRoleId"`双向绑定。

   提交完成后，调用获取用户列表方法`getUserList()`方法更新数据，最后关闭对话框。

6. 为“分配角色”对话框`<el-dialog>`添加关闭事件`@close="setRoleDialogClosed"`，在该事件处理函数中清空在`data`中存储的当前选中角色id和当前分配角色的用户信息

   ```
   this.selectedRoleId = ''
   this.userInfo = ''
   ```

**提交代码到码云**

1. `git branch` 确认当前处于rights分支
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了权限管理功能"` 将代码添加到本地仓库；
4. `git push` 提交代码到云端的rights分支；
5. `git checkout master` 切换到master分支；
6. `git merge rights` 将rights分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端



# 商品管理功能

## 商品分类

**创建分支并推送**

1. `git branch` 确认当前处于master主分支上；
2. `git checkout -b goods_cate` 创建一个新的goods_cate分支，并跳转到该分支上；
3. `git branch` 查看所有分支，确定当前处于goods_cate分支；
4. `git push -u origin goods_cate` 在云端创建一个goods_cate分支，并把本地的goods_cate分支上传。

**商品分类表格**

1. 新建Cate.vue组件，并添加到Home组件的子路由中；

2. 使用element-ui中的面包屑导航组件实现导航栏；

3. 查询接口文档，定义获取商品分类的方法`getCateList()`，并将其添加到`created()`中，将返回的数据存储到`data`的`cateList`数组中；

4. 用element-ui中的Card组件实现基本的页面布局，卡片视图区域中主要分成三部分，第一部分放置一个“添加分类”的按钮，第二部分使用`<tree-table>`渲染商品分类数据表格，第三部分是分页区域；

5. **表格区域**：
   1. 要使用`<tree-table>`，需要先在Vue可视化界面中安装运行依赖`vue-table-with-tree-grid`，可在查看详情中找到相关代码示例。然后在主入口文件main.js中导入需要的组件，`import TreeTable from 'vue-table-with-tree-grid'`，并将其挂载到Vue组件中，`Vue.component('tree-table', TreeTable)`；
   2. 在Cate组件的卡片视图区域使用该TreeTable组件，定义模板列并添加自定义列。需要对`<tree-table>`标签中进行属性的配置，首先`:data="cateList" :columns="columns"`，其中`data`绑定的是表格的数据源，`columns`绑定的是表格中列的定义(标签和数据)；其次`:selection-type="false" :expand-type="false"`，去除表格默认的复选框和展开列；`show-index index-text=""`，显示数据索引，此处索引名称设置为空；`border :show-row-hover="false"`，显示纵向分隔边框，取消鼠标悬停时的高亮效果；
   3. “操作”一栏中的“编辑”和“删除”按钮和之前的工作类似，略。
   
6. **添加分类**：

   1. 为“添加分类”按钮绑定点击事件，`@click="showAddCateDialog"`，显示添加分类的对话框，对话框内包含一个输入分类名称的输入框和一个选择父级分类的选择器；

   2. 因为分类等级最多为三级，所以父级分类最多为两级，在`showAddCateDialog()`事件处理函数中，除了要显示对话框，还需要获取第一级和第二级所有分类，并渲染到级联选择器中；

   3. 为级联选择器配置属性，

      `v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" clearable`，将选择中分类的id保存到`selectedKeys`数组中，数据源为`parentCateList`，级联器显示的标签、值、触发方式、能否选中任意一级等定义在`cascaderProps`中，并且可一键清除选中内容；

      【注意】为级联器添加`max-height`，否则级联选择器会默认将所有内容全部显示，高度过长。

   4. 然后，为级联选择器绑定改变事件`@change="parentCateChanged"`，当选择器选中内容发生改变时触发该事件。此处，级联器中配置了可选择任意一级，而选中的等级不同，selectedKeys数组长度也不同。在提交分类时，需要提供所选分类中的最后一级id作为父级分类id。所以在该函数中，需要始终将selectedKeys数组中的最后一个id作为父级分类id，实现逻辑如下：如果级联器中的选中内容有变化，则将selectedKeys数组中的最后一个赋值给pid，数组长度作为分类等级；如果没有变化，则默认pid为0，分类等级为一级(值为0)；

   5. 提交分类时根据接口文档实现提交即可；

   6. 在“添加分类”对话框的关闭事件中，除了要重置表单，还需要将步骤4中的保存的相关数据清空；

**提交代码到码云**

1. `git branch` 确认当前处于goods_cate分支
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了商品分类功能"` 将代码添加到本地仓库；
4. `git push` 提交代码到云端的goods_cate分支；
5. `git checkout master` 切换到master分支；
6. `git merge goods_cate` 将goods_cate分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端

## 分类参数

**需求分析**

1. 顶部面包屑导航栏；
2. 警告：只允许为第三级分类设置相关参数；
3. 选择商品分类的级联框，只能选择第三级分类；
4. 只有选中第三级分类后，才显示和添加该分类的动态参数和静态属性；
5. 动态参数/静态属性列表可编辑和删除；
6. 列表展开列中显示该行参数/属性的具体tag标签，且可以添加tag。

**创建分支并推送**

1. `git branch` 确认当前处于master主分支上；
2. `git checkout -b goods_params` 创建一个新的goods_params分支，并跳转到该分支上；
3. `git branch` 查看所有分支，确定当前处于goods_params分支；
4. `git push -u origin goods_params` 在云端创建一个goods_params分支，并把本地的goods_params分支上传。

**分类参数表格**

1. 新建Params.vue组件，并添加到Home组件的子路由中；

2. 使用element-ui中的面包屑导航组件实现导航栏；

3. 用element-ui中的Card组件实现基本的页面布局，卡片视图区域中主要分成三部分，第一部分使用element-ui中的Alert组件实现警告区域；第二部分使用`<el-row>`和`<el-col>`包裹一个级联选择器，用于选择商品分类；第三部分用Tabs组件实现标签页区域；

4. **选择商品分类**：

   1. 查询接口文档，定义获取商品分类的方法`getCateList()`，并将其添加到`created()`中，将返回的数据存储到`data`的`cateList`数组中，再渲染到级联选择器中。

   2. 为级联选择器添加改变事件`@change="handleCascaderChanged"`，当级联选择器中的选定内容发生变化时触发，该事件处理函数中需要执行获取所选择商品类的动态参数和静态属性的请求操作。

      【注意】此处只能选择第三级，所以在该事件处理函数中需要先判断保存已选项id的数组`selectedCateKeys`长度是否为3，若不是，则清空该数组，从而实现只能选择第三级分类。

      在 ”商品分类“ 页面中 ”添加分类” 对话框中的级联选择器里，为实现可选择任意一项，

      在配置级联选择器对象`cascaderProps`时需设置`checkStrictly: true`，若将该属性设置为false，则是实现只能选择分类中的最后一项，包括第二级分类，所以不能满足需求。

5. **动态参数/静态属性**：两个列表的实现方式一样，只是绑定的数据不同，所以此处以动态参数表格为例

   1. 用Tabs组件实现tab标签页，分为动态参数和静态属性两个标签页，在`<el-tabs>`标签中配置属性`v-model="activeName"`，双向绑定了被激活的标签页名称，可根据该名称获取相应的数据或进行相应的操作；

   2. 为`<el-tabs>`标签添加点击事件`handleTabClick`，该事件处理函数执行的操作和级联选择器改变事件相同，所以可以将获取参数的函数单独封装`getParamsData()`，然后在事件处理函数会中调用。

   3. 该获取参数的方法`getParamsData()`，需要解决一个bug，就是根据需求，只能对第三级分类进行参数的编辑，但是当列表中已经渲染出了某一个第三级分类的参数列表时，级联选择器切换到某一个没有第三级分类的第二级分类时，列表中仍显示的是上一个第三级分类的相关参数。

      解决办法：在`getParamsData()`中，获取参数前先对级联器中保存已选分类id的数组`selectedCateKeys`进行判断，若长度不为3，则清空该数组，以及保存了动态参数和静态属性的数组；

   4. 用Table组件渲染上述方法获取的动态参数表格和静态属性表格，主要有四列，展开列、排序列、“参数名称”、“操作“，其中后四列的实现和之前的工作类似；

   5. 在展开列中，使用自定义模板和作用域插槽，循环渲染Tag标签，并添加动态编辑标签。动态编辑标签由一个`<el-input>`标签和一个`<el-button>`标签之间通过`v-if`和`v-else`切换实现。

      对于input输入框，重点需要监听失焦事件和键入enter事件，`@keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"`，该执行函数中需要先对输入的内容进行判断，若输入的全是空格，则将输入的数据强制转换成空字符串，并将标签转换成按钮形式；若输入的是合法数据，则将新增的tag保存到该行的参数数组中，最后向后台提交新增的数据；

      对于button按钮，需要添加一个点击事件`@click="showInput(scope.row)"`，在该处理函数中先将该tag转换成输入框，`row.inputVisible = true`，然后实现文本框自动获取焦点

      ```javascript
      // $nextTick 当页面上的元素被重新渲染之后，执行回调函数
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
      ```

   6. 为tag标签添加关闭事件`@close="handleClosed(i,scope.row)`，该事件处理函数中先在该行的参数数组中将该标签删除，然后向后台提交修改后的数据，该请求操作和上一个新增tag后的请求操作一样，所以此处也可以将其封装成一个函数，需要时调用即可。

6. **添加参数/属性按钮**：该按钮的实现方式和之前的工作类似，只是需要注意，因为两者的弹出框样式是一样，只是绑定的数据不一样，所以此处两者共用一个弹出框。但是两个弹出框的显示标题不一样，所以需要添加一个计算属性，用于动态计算当前弹出框的标题，`:title="'添加'+titleText"`，其中`titleText`为在`computed:{}`中定义的计算属性，根据当前激活的tab标签页名称返回相应的字符串。

**提交代码到码云**

1. `git branch` 确认当前处于goods_params分支
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了分类参数功能"` 将代码添加到本地仓库；
4. `git push` 提交代码到云端的goods_params分支；
5. `git checkout master` 切换到master分支；
6. `git merge goods_params` 将goods_params分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端

## 商品列表

**创建分支并推送**

1. `git branch` 确认当前处于master主分支上；
2. `git checkout -b goods_list` 创建一个新的goods_list分支，并跳转到该分支上；
3. `git branch` 查看所有分支，确定当前处于goods_list分支；
4. `git push -u origin goods_list` 在云端创建一个goods_list分支，并把本地的goods_list分支上传。

**商品列表实现**

1. 新建List.vue组件，并添加到Home组件的子路由中;

2. 基本布局可参考用户列表；

3. 商品列表中有一列”添加时间“，但是后台返回的数据是一串数字，所以需要进行时间格式的转换。在main.js中给Vue添加一个全局的过滤器`Vue.filter('dateFormat', callback)`，过滤器名称为dataFormat，在callback回调函数中将时间转换成所以定义的格式。

   然后在商品列表显示”添加时间“的`<el-table-column>`中使用作用域插槽，并调用dataFormat过滤器转换时间格式，`<template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>`；

4. 商品列表中的”删除“也是常规操作；

5. **添加商品**：

   1. 点击”添加商品“按钮，跳转到添加商品的页面，为该按钮添加一个点击事件`@click="goAddPage"`，该事件处理函数中通过编程式导航跳转到添加商品页面`this.$router.push('/goods/add')`；

   2. 新建Add.vue组件，并添加到Home组件的子路由中，注意该组件的路由路径为`'/goods/add'`；

   3. 首先面包屑导航区，然后是卡片视图，卡片视图中主要分成三部分，第一部分为警告区域，提示”添加商品信息“，第二部分用Steps组件实现步骤条，第三部分为tab标签页，各标签页中为具体的商品信息表单。

      【注意】虽然第三部分显示出来的效果是标签页中有表单，但是`<el-tabs>`标签中不能嵌套`<el-form>`标签，所以此处应该是在`<el-form>`中嵌套`<el-tabs>`标签，然后在各标签页面板`<el-tab-pane>`中嵌套`<el-form-item>`标签 。相当于是，所有需要填写的商品信息组成一个完整的表单，绑定到`:model="addForm"`，而表单中当前显示那几个表单项则由标签页来决定。

   4. Steps组件中，将控制当前激活步骤高亮显示的属性进行绑定`:active="activeIndex"`，在`data`中的`activeIndex`为哪一步的索引，哪一步就会高亮显示，以便后续动态控制；

   5. Tabs组件中设置位置属性`tab-position="left"`，转换成左侧标签页。将标签页与Steps组件中控制高亮的属性进行双向绑定`v-model="activeIndex"`，然后将每一个`<el-tab-pane>`中的`name`属性设置成相应的索引，哪一个标签被激活了，就会向`data`中的`activeIndex`传递一个索引值，然后控制Steps步骤条中对应步骤的高亮显示。

      【注意】`<el-steps>`中`:active="activeIndex"`绑定的属性值是number类型，而`<el-tabs>`中`v-model="activeIndex"`返回的属性值为string类型，所以需要将`<el-steps>`中的属性修改为`:active="activeIndex-0"`，从而将字符串类型转换成数字类型。

   6. **“基本信息”标签页**：常规的表单操作，略；

   7. **阻止标签页的切换**：给Tabs标签绑定一个方法`:before-leave="beforeTabLeave"`，在该方法中`beforeTabLeave (activeName, oldActiveName)`，默认有两个参数，即将要跳转到的标签页名称和当前的标签页名称。可先判断当前标签页中的必填项是否填写，若没有，则`return false`，即可实现阻止标签页的切换；

   8. 在后面的标签页中，需要在显示前先获取相关的数据，所以给`<el-tabs>`添加一个点击事件`@click="tabClicked"`，在该事件处理函数中根据当前激活的标签页`activeIndex`进行对应的数据获取操作；

   9. **“商品参数”标签页**：在`tabClicked()`中定义`activeIndex==='1'`时，获取商品参数的请求，此处获取的是动态参数，然后将获取到的数据保存到`data`的`manyTableData`数组中。在该标签页面板中，先根据`manyTableData`数组循环产生`<el-form-item>`表单项，然后再在各表单项中添加复选框组`<el-checkbox-group>`，在复选框组中循环产生复选框`<el-checkbox>`；

   10. **“商品属性”标签页**：在`tabClicked()`中定义`activeIndex==='2'`时，获取商品属性的请求，此处获取的是静态属性，然后将获取到的数据保存到`data`的`onlyTableData`数组中。在该标签页面板中，先根据`onlyTableData`数组循环产生`<el-form-item>`表单项，然后再在各表单项中添加文本框`<el-input>`，文本框中的内容和数组双向绑定；

   11. **“商品图片”标签页**：使用Upload上传组件实现图片的上传，配置`<el-upload>`标签中的相关属性和方法如下：

       首先，`:action="uploadURL"`绑定上传的后台路径，此路径需要结合main.js中绑定的axios根路径和接口文档中的上传路径，此处拼接在一起为`uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload'`，若只写了接口文档中给出的路径，则会变成该页面在浏览器中的访问路径，这是不对的；

       然后`list-type="picture"`，表示使用的是带有预览图效果的上传组件；

       接着绑定一个图片上传成功的处理函数`:on-success="handleSuccess"`，默认有一个响应参数`handleSuccess(response)`，该响应参数中包含了图片上传成功后的一个临时路径，需要按照接口文档中给出的图片信息的格式，将该临时路径拼接成一个图片信息对象，然后push到表单的图片属性数组`addForm.pics`中。但是此时，查看浏览器中的network响应，图片上传是不成功的，提示原有是token无效，这是因为没有给这个axios请求添加一个token，所以还需要在标签中绑定一个请求头对象`:headers="headerObj"`,在该对象中授权本地存储的token，`headerObj: { Authorization: window.sessionStorage.getItem('token') },`；

       然后绑定一个删除的处理函数`:on-remove="handleRemove"`，在该函数中有一个默认的参数`handleRemove(file)`，该参数中包含要删除图片的临时路径，先获取要删除图片的临时路径，在`addForm.pics`数组中找到该图片的索引，利用该索引将对应的图片信息对象从`addForm.pics`数组中splice掉；

       最后绑定一个图片预览函数`:on-preview="handlePreview"`，该函数中也有一个默认的参数`handlePreview(file)`，包含有要预览图片的临时路径，获取该路径，并存储到`data`中，然后打开预览图片的对话框。该对话框也是用Dialog组件实现，不需要底部的点击按钮，对话框中添加一个`<img>`标签，图片的src路径绑定为`data`中存储的预览图片临时路径，然后为该标签添加一个类，设置css属性`width: 100%`，使得图片在对话框中缩放。

   12. **“商品内容”标签页**：需要使用到富文本编辑器。先在可视化面板中安装运行依赖插件`vue-quill-editor`，可在查看详情中查询使用方式。在`<quill-editor>`标签中双向绑定编辑器中的输入内容`v-model="addForm.goods_introduce"`，并为其在全局样式global.css文件中添加一个css样式，`min-height:300px`，在下方添加一个`<el-button>`，并绑定一个添加商品的点击事件`@click="addGood"`。

   13. **添加商品**：在添加商品的函数`addGood()`中，先对`addForm`表单进行预验证，验证通过后进行表单数据的提交操作。

       首先需要根据接口文档中给定的提交信息的格式，对`addForm`表单中存储的数据进行格式转换。【注意】在提交选择的商品分类`goods_cat`中，接口文档要求的是字符串，但是`addForm`中存储的是数组，所以需要将其用join()方法转换成字符串。但是此处若直接对`addForm`表单中的`goods_cat`属性值进行处理的话会报错，因为级联选择器中双向绑定的是一个数组，若此时将其转换成了字符串，对于级联选择器来说是不合法的，所以不能直接对`addForm`进行操作。

       需要先将`addForm`进行深拷贝，产生一个和`addForm`内容相同，但是独立的新表单对象。此时需要用到一个`lodash`插件。先在可视化面板中安装运行依赖插件`lodash`，然后在Add.vue组件的`<script>`中，先进行导入`import _ from 'lodash'`，然后在`addGood()`函数中进行深拷贝`const form = _.cloneDeep(this.addForm)`。此时操作`form`表单对象中的`goods_cat`就不会对级联选择器产生影响。

       需要提交的数据处理完成后，根据接口文档给出的请求路径和请求方式进行上传即可；

       上传完成后利用编程式导航回到“商品列表”页面，`this.$router.push('/goods')`。

**提交代码到码云**

1. `git branch` 确认当前处于goods_list分支
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了商品列表功能"` 将代码添加到本地仓库；
4. `git push` 提交代码到云端的goods_list分支；
5. `git checkout master` 切换到master分支；
6. `git merge goods_list` 将goods_list分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端



# 订单管理功能

**创建分支并推送**

1. `git branch` 确认当前处于master主分支上；
2. `git checkout -b order` 创建一个新的order分支，并跳转到该分支上；
3. `git branch` 查看所有分支，确定当前处于order分支；
4. `git push -u origin order` 在云端创建一个order分支，并把本地的order分支上传。

**订单列表实现**

1. 新建Order.vue组件，并添加到Home组件的子路由中;
2. 基本布局可参考“商品列表”；
3. **修改地址对话框**：
   1. 为商品列表中的"修改地址"按钮添加点击事件`@click="showAddressDialog`，显示“修改地址”对话框，对话框的表单中主要包含一个选择地址的级联框和输入详细地址的文本框；
   2. 先将citydata.js文件复制到Order.vue组件的同级目录下，然后在组件的`<script>`标签中进行导入，`import cityDate from './citydata.js'`。级联选择器中绑定的数据源即为该js文件，`:options="cityDate"`；
   3. 其余的表单信息绑定和验证操作参考之前代码。
4. **查看物流对话框**：
   1. 为商品列表中的"查看物流"按钮添加点击事件`@click="showProgressDialog`，显示“物流进度”对话框，并根据接口文档获取物流信息，保存到`data`中。对话框的表单中主要包含一个显示物流进度的时间线；
   2. 【注意】由于vue-cli-plugin-element插件的版本过低，暂不支持element-ui中的Timeline组件，所以在项目的插件文件夹plugins中手动加上timeline和timeline-item文件，然后在element.js中进行导入并挂载到Vue上；
   3. 此时在“物流进度”对话框中使用`<el-timeline>`和`<el-timeline-item>`标签即可，用`v-for`循环渲染出多个`<el-timeline-item>`标签；
   4. 在该组件的style样式中导入插件文件夹plugins中的时间线的css样式文件，即可为Timeline组件添加样式

**提交代码到码云**

1. `git branch` 确认当前处于order分支
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了订单列表功能"` 将代码添加到本地仓库；
4. `git push` 提交代码到云端的order分支；
5. `git checkout master` 切换到master分支；
6. `git merge order` 将order分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端



# 数据统计功能

**创建分支并推送**

1. `git branch` 确认当前处于master主分支上；
2. `git checkout -b report` 创建一个新的report分支，并跳转到该分支上；
3. `git branch` 查看所有分支，确定当前处于report分支；
4. `git push -u origin report` 在云端创建一个report分支，并把本地的report分支上传。

**数据报表实现**

1. 新建Report.vue组件，并添加到Home组件的子路由中;
2. 基本布局为一个面包屑导航和一个卡片视图区域，在卡片视图区域中使用echarts组件实现绘图；
3. 在可视化面板中安装运行依赖echarts，并在该组件的`<script>`节点中导入，`import echarts from 'echarts'`；
4. 在卡片视图区域为echarts准备一个设定了宽高的Dom，`<div id="main" style="width: 750px;height: 400px"></div>`；
5. **使用echats渲染数据**：因为echats需要先获取页面中的元素，然后再进行渲染数据，所以以下操作需要在`mounted()`中进行，因为在该钩子函数中，页面上的元素已经渲染完毕，可使用第三方插件来操作dom元素
   1. 基于准备好的dom，初始化echarts实例，`var myChart = echarts.init(document.getElementById('main'))`；
   2. 准备数据和配置项。根据接口文档从后台获取数据，然后使用lodash中的merge方法，将获取到的数据和绘图的配置项`options`进行合并，`options`需要先存储在`data`中，`const result = _.merge(res.data, this.options)`；
   3. 准备好数据后即用echarts实例展示数据，`myChart.setOption(result)`。

**提交代码到码云**

1. `git branch` 确认当前处于report分支
2. `git add .` 将代码添加到暂存区；
3. `git commit -m "完成了数据报表功能"` 将代码添加到本地仓库；
4. `git push` 提交代码到云端的report分支；
5. `git checkout master` 切换到master分支；
6. `git merge report` 将report分支合并到master分支上；
7. `git push` 将master分支中的代码上传到云端



# 项目优化

## 添加页面加载进度条

1. 在可视化面板中安装运行依赖`nprogress`，然后在入口文件main.js中导入相关的js文件和css文件

   ```
   import NProgress from 'nprogress'
   import 'nprogress/nprogress.css'
   ```

2. 在request拦截器中展示进度条，调用方法`NProgress.start()`，在response拦截器中隐藏进度条，调用方法`NProgress.done()`

   ```javascript
   // 在request拦截器中展示进度条 NProgress.start()
   axios.interceptors.request.use(config => {
     // console.log(config)
     NProgress.start()
     config.headers.Authorization = window.sessionStorage.getItem('token')
     // 最后必须是 return config,固定写法
     return config
   })
   // 在response拦截器中隐藏进度条 NProgress.done()
   axios.interceptors.response.use(config => {
     NProgress.done()
     return config
   })
   ```



## 解决开发/生产环境中的console冲突

开发环境中使用console来调试，但是在生产环境中不允许有console，可安装`babel-plugin-transform-remove-console`插件，来移除生产环境下的console。

1. 在可视化面板中安装开发依赖`babel-plugin-transform-remove-console`；

2. 在babel.config.js文件的`plugins`数组中添加插件`'transform-remove-console'`。这样直接添加的话会产生一个问题，就是不管时开发环境还是生产环境，console都被移除了，这显然时不符合我们的需求的，所以可以对babel.config.js配置文件进行进一步的修改；

3. 新建一个数组，用于存放发布阶段使用的babel插件，当使用是编译命令中含有`--mode production`时，将需要用到的插件添加到该数组中，然后使用扩展运算符将该数组添加到`plugins`数组中

   ```javascript
   // 项目发布阶段使用的babel插件
   const prodPlugins = []
   if (process.env.NODE_ENV === 'production') {
     prodPlugins.push('transform-remove-console')
   }
   
   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ],
     plugins: [
       [
         'component',
         {
           libraryName: 'element-ui',
           styleLibraryName: 'theme-chalk'
         }
       ],
       // 发布产品时使用的插件数组
       ...prodPlugins
     ]
   }
   ```



## 生成项目报告

方式一：命令行

```
vue-cli-service build --report
```

方式二：可视化面板

在可视化面板中的**仪表盘**和**分析**中可直接看到项目相关报告



## 修改webpack默认配置

> 通过vue-cli3.0生成的项目，默认隐藏了所有的webpack配置项，目的是屏蔽项目的配置过程，让程序员将工作重心放在具体功能和业务逻辑上。
>
> 但是若需要修改webpack默认配置，可以在项目根目录下创建一个vue.config.js配置文件，在该文件中对项目的打包过程做自定义配置。
>
> 具体配置可参考：https://cli.vuejs.org/zh/config/#vue-config-js



**1. 为开发模式和发布模式指定不同的打包入口**

默认情况下，vue项目的开发模式和发布模式共用一个打包的入口文件，即src/main.js。为将项目的开发过程和发布过程相分离，可以为其指定各自的入口文件，即：

- 开发模式入口文件：src/main-dev.js
- 发布模式入口文件：src/main-prod.js

实现方式：

在vue.config.js导出的配置对象中，新增**configureWebpack**或**chainWebpack**节点，来配置webpack的打包配置。两者的作用相同，唯一区别是修改webpack配置的方式不同：

- chainWebpack通过链式编程来实现修改；
- configureWebpack通过操作对象来实现修改。

使用chainWebpack实现

```javascript
module.exports = {
  chainWebpack: config => {
      // 判断当前的编译命令是否为production
    config.when(process.env.NODE_ENV === 'production', config => {
        // 找到当前默认的入口文件，清除，然后添加到指定的入口文件
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}
```

**2. 通过externals加载外部CDN资源**

默认情况下，通过import语法导入的第三方依赖包，最终都会被打包合并到同一个文件中，导致单个文件体积过大。主要针对的是项目发布的文件。

可使用webpack的externals节点，配置并加载外部的CDN资源，凡是声明在externals节点中的第三方依赖包都不会被打包到一个文件中，而是在window全局查找该导入的对象，然后直接使用。

实现方式：

首先在vue.config.js文件的发布模式中新增一个`externals`节点：

```javascript
config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })
```

然后在public/index.html文件中引入不希望被打包进去的css文件，同时在main-prod.js文件中删除导入这些css文件的代码：

```
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
```

接着，将`externals`节点中声明的包的js文件也导入到public/index.html文件中，实现可以在window对象中全局使用

```
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
```

**3. 通过CDN优化ElementUI的打包**

首先在public/index.html文件中添加上element-ui的css文件和js文件，然后在main-prod.js文件中注释掉导入element.js文件的代码

```
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
```



## 首页内容定制

> 通过插件实现不同打包环境下，首页的展示不同的内容。

首先在vue.config.js文件中声明一个控制内容显示的参数，若是发布模式，则返回true，否则返回false

```javascript
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
    config.entry('app').clear().add('./src/main-prod.js')
    config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
    })
    // 声明变量 isProd
    config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
    })
})

// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
    config.entry('app').clear().add('./src/main-dev.js')
    config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
    })
})
```

然后在public/index.html文件中，修改`<title>`标签

```html
<title><%= htmlWebpackPlugin.options.isProd?'':'dev - '%>电商后台管理系统</title>
```

将引入的js文件和css文件也根据该变量进行按需导入，发布模式下导入，开发模式下不导入

```html
<% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<% } %>
```



## 路由懒加载

打包构建项目时，JavaScript包会非常大，影响页面加载，需要将不同路由对应的组件分割成不同的代码块，当该路由被访问是才加载对应的组件，从而提高加载效率。

首先在可视化面板中安装开发依赖`@babel/plugin-syntax-dynamic-import`，然后在babel.config.js文件的plugins数组中导入

```javascript
plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 发布产品时使用的插件数组
    ...prodPlugins,
    // 路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
```

然后修改路由的index.js文件中的路由导入方式

```javascript
// 原本的导入方式
// import Login from '../components/Login.vue'
// import Home from '../components/Home.vue'
// import Welcome from '../components/Welcome.vue'

// 路由懒加载的导入方式
// webpackChunkName 表示：将Loigin,Home,Welcome三个组件打包在一个名为login_home_welcome的组件中，只要加载了该组件，便同时导入了这三个组件 
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

// import Users from '../components/user/Users.vue'
// import Rights from '../components/power/Rights.vue'
// import Roles from '../components/power/Roles.vue'
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

// import Cate from '../components/goods/Cate.vue'
// import Params from '../components/goods/Params.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

// import List from '../components/goods/List.vue'
// import Add from '../components/goods/Add.vue'
const List = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')

// import Order from '../components/order/Order.vue'
// import Report from '../components/report/Report.vue'
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')
```



# 项目上线

**1.通过node创建web服务器**

> 创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹托管为静态资源。

首先新建一个vue-shop-server文件夹，用webstorm打开，在终端运行命令`npm init -y`初始化项目，然后安装express`npm i express -S`，将vue-shop文件夹中生成的dist文件夹复制到vue-shop-server文件夹中，在项目文件根目录下新建一个app.js文件，在该文件中进行服务器的搭建和资源的托管，代码如下：

```javascript
const express = require('express')
// 创建web服务器
const app = express()
// 托管静态资源
app.use(express.static('./dist'))
// 启动web服务器
app.listen(80, () => {
    console.log('web server running at http://127.0.0.1')
})
```

在终端运行`node app.js`，若打印出`web server running at http://127.0.0.1`，则说明服务器床架成功，用浏览器访问http://127.0.0.1即可。

**2.开启gzip配置**

> 使用gzip减小文件体积，加快传输速度。

首先终端运行命令`npm i  compression -S`安装compression包，然后在app.js文件中进行导入和使用：

```javascript
const express = require('express')
const compression = require('compression')
// 创建web服务器
const app = express()
// 需要先压缩静态资源
app.use(compression())
// 然后再托管静态资源
app.use(express.static('./dist'))
// 启动web服务器
app.listen(80, () => {
    console.log('web server running at http://127.0.0.1')
})
```

**3.配置https服务**

> 传统的HTTP协议传输的数据都是明文的，不安全。HTTPS协议会对传输数据进行加密处理，可防止数据被中间人窃取，更加安全。

首先在https://freessl.cn/上申请SSL证书，将生成的公钥`full_chain.pem`和私钥`private.key`放到vue-shop-server文件夹的项目根目录中，然后在app.js文件中进行导入和配置：

```javascript
const https = require('https')
const fs = require('fs')
const  options = {
    cert: fs.readFileSync('./full_chain.pem'),
    key: fs.readFileSync('./private.key')
}
// https默认在443端口，http默认在80端口
https.createServer(options, app).listen(443)
```

**4.使用pm2管理应用**

> 当关闭powershell中运行的服务器时，浏览器便无法访问http://127.0.0.1页面，给开发带来不便。可使用pm2管理应用，在后台运行服务器，即使关闭终端窗口也不会影响页面的访问。

常用命令 ：

- `pm2 start app.js --name 自定义名称`  启动项目
- `pm2 ls`  查看正在运行的项目
- `pm2 restart 自定义名称`  重启项目
- `pm2 stop 自定义名称`  停止项目
- `pm2 delete 自定义名称`  删除项目

首先在cmd终端输入命令`npm i pm2 -g`全局安装pm2，

然后在vue-shop-server文件夹下重启项目，在powershell中输入命令 `pm2 start app.js --name web_vueshop` ，其中`--name`是自定义名称，后续可用该自定义名称进行操作，启动项目之后，也会配置一个id值，也可以将自定义名称换成id值进行相关操作。