# management-system

**Repository Path**: bcygsws/management-system

## Basic Information

- **Project Name**: management-system
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-26
- **Last Updated**: 2023-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_shop_manage

## 后台管理系统登录页的实现

### 技术栈

- vue 2.x+Element UI+Echarts+vue-router+ES6/7+babel+webpack4.x

### 项目启动和打包

- 项目启动: npm run serve
- 项目打包：npm run build

### 登录页 UI

- 登录背景区：html,body,#app height 均为 100%
- 登录操作区：
  - logo 区：圆角和阴影
  - 表单交互区：element-ui 表单组件和字体图标，注意：文本输入框内部图标，prefix-icon 和 suffix-icon 属性的属性

### 登录页校验

- 表单验证，动态绑定验证规则对象 loginRules 和 model 数据对象
- 后台用户数据请求和响应，axios 包 实现数据请求（使用 ES7 中 await 和 async 简化 promise 操作），请求路径：'/login'，请求方式：post,请求参数{username:值,password:值}
- “登录”按钮点击时，将进行以下两个操作：
  - 将登录成功请求返回的 token，存储在 sessionStorage 中
  - 路由跳转至'/home'主页，以编程式导航的方式

### 登录页路由导航门卫和 Token 令牌

- Token 的存储：在登录成功后，Token 令牌存放于 sessionStorage 中
- Token 拦截数据请求：为保证数据安全，每次向后台请求数据时，axios 请求拦截器都将执行，为 headers 添加 Authorization 字段，后台在收到请求时，将该字段与本用户的 token 比较。如果值相同，就响应请求，并返回请求数据
- Token 控制路由导航-不允许通过输入 url 地址来实现路由跳转。'./router/index.js'中 router.beforeEach(),根据要去往的路径(to.path)和是否携带 Token 令牌来控制路由的跳转

### home 主页的实现

- 通过路由导航门卫校验且账号、密码输入正确的情况下，进入 home 主页，'/home'和'/login'是同一级的路由，编程式导航的方式实现 login---home 主页的跳转
- home 路由主页包含'/welcome'、'/users'、'/roles'、'/rights'、'/categories'、'/params'、'/goods'、'/orders'、'/reports'等 9 个子路由

### 默认的 welcome 子路由

- 用作欢迎页面

### 数据请求左侧的菜单列表

- 使用 NavMenu 导航菜单组件渲染
- 注意选中的路由在页面刷新后，仍旧保持选中状态，且在一级标题中展开。解决：为每个二级子项 el-menu-item 添加 click 事件,并将二级子项渲染数组中的 path 属性拼接成当前路径，例如：handleItemSelected('/' + val.path)，拿到参数 activePath 后要存放于 sessionStorage 中，并赋给 data 中变量 active-path,并将其赋给 el-menu 的 default-active 绑定的属性值。其次，需要在生命周期钩子 Created 中拿到 sessionStorage 中保存的变量值。原因：在刷新页面时，页面中的组件将重新渲染，activePath 将又回到默认值'',default-active 属性值也为'',页面刷新前的选中状态就不能维持了

## 菜单列表项-用户管理

### 用户列表（分配角色与权限管理有关，在权限管理功能实现后开发）

#### 用户列表 UI 界面

- 面包屑导航，展示路由层级
- layout 布局，实现检索、添加用户数据的功能
- table 表格，有序展示用户账号信息相关数据

#### 业务逻辑

- 在文本框中输入账号名的部分字符，点击“搜索”按钮，进行搜索。如果输入过程中出现错误，可以点击文本框末尾的按钮，进行清除。如果正确输入，点击“搜索”按钮，完成搜索
- 设定 page.query 初始值为'',复用 getUserList 方法
  - 列表的初始化，在 created 钩子中该方法
  - 清除文本框内容后 clear 事件的处理函数
  - 正确输入检索关键字符，click 事件的处理函数
- 用户状态更改，当 switch 开关关闭时，表示该行的账号将被锁定，无法成功登录了
- 用户账号的操作：用户信息更改（账号名无法修改，可以修改邮箱和手机号）、删除账号、在 select 选择器中为该账号重新分配角色

## 菜单列表项-权限管理

### 权限列表

#### 权限列表 UI 和业务逻辑

- 渲染管理系统中所有角色的三级权限

### 角色列表

#### 角色列表 UI

- 面包屑导航标示操作路径
- layout 布局中设置“添加角色”按钮
- 带扩展列的 table 表格展示角色信息和操作区域
- 扩展列中，仍然使用 layout 布局渲染，可操作每个角色的权限列表

#### 业务逻辑

- 点击“添加角色”按钮，弹出对话框，在对话表单中填写符合表单校验规则的字符。“确定”按钮提交到数据库，“取消”按钮关闭对话框，操作取消
- table 表格中，操作区包含“编辑”、“分配权限”、“删除”三个操作
  - “编辑”角色功能类似添加角色，不同点在于编辑前，需要将原角色信息渲染在对话框的表单中
  - “删除”操作，使用全局组件 MessageBox 来模拟，项目中自定义引入，可以直接调用 confirm 方法，根据返回值（confirm、cancel）鉴别点击的是“确定”或者“取消”来实现
  - “分配权限”按钮点击时，弹出对话框。对话框中渲染一个树形控件。:data 属性值为数据源，:props 属性值为节点配置对象，node-key 属性声明，表示将通过获取 key
    的方式来获取节点，default-checked-keys 属性中，通过递归当前行的数据，所有被选中的三级权限的 id 存入 defaultKeys 数组
- 扩展列展示区渲染当前角色可以操作的所有一级、二级、三级权限

## 菜单列表项-商品管理

### 商品分类 UI

- 面包屑导航，设置当前路由选项
- "添加分类"按钮，点击级联选择器，可以添加二级和三级分类
- 添加树形表，包 vue-table-with-tree-grid,使用时需要导入该包，并且使用 vue.component 声明为全局组件
- 树形表的每一级分类数据，都可以进行编辑和删除操作
- 底部页码自由切换:el-pagination
  - 附注：vue-table-with-tree-grid；官网使用详情：[vue-table-with-tree-grid 使用介绍](https://github.com/MisterTaki/vue-table-with-tree-grid)

### 商品分类业务逻辑

- 点击“添加分类”按钮，弹出对话框。表单中第一行输入分类名称，第二行选择父级分类，父级可以是一级分类或者二级分类；注意：级联选择器中单选框的外观隐藏、行为保留的处理
- 树形表格中依次展示各级分类的名称，在树形表各分支上，可以进行编辑和删除操作
- 页面底部区域：点击对应区域，将选择每页显示的条数和页码

### 分类参数 UI

- 面包屑导航-指示当前路由选项
- Alert 警告信息提示框
- Tabs 标签页
- 标签页内容区：按钮+table 表格

### 分类参数业务逻辑

- 选择商品分类，级联选择器中只有选中了某一个三级分类，tab 页选项中“添加参数”和“添加属性”按钮，才允许点击。同时，table 表格中也不会显示任何参数或属性内容
- el-tabs 的 v-model="activeName"和其子项 el-tab-pane 中 name 属性对应，activeName 的值等于某个 name 值，表示 tabs 页选中该子项；el-tabs 中绑定的@tab-click 事件，可以在切换时打印当前 activeName 值
- 点击“添加参数”或者“添加属性”按钮，添加动态参数或者静态属性
- 点击“编辑”按钮，添加参数或者属性名称；点击“删除”按钮，删除本行数据
- 点击展开列，可以对某一行的参数或者属性，添加相应的参数值或者属性值

### 商品列表 UI

- 面包屑导航，设置当前路由选项
- 商品搜索框和点击“搜索”按钮，“添加商品”按钮
- table 表格展示批量商品信息，包括商品的名称、价格、重量、创建时间以及商品信息的更改和移除

### 商品列表业务逻辑

- 在文本框中输入商品名称的部分字符，可以对满足检索条件的商品进行查询
- 点击“添加商品”按钮，跳转至“添加商品”页面('/goods/add')
- 表格展示批量的商品信息数据
- 底部可以进行页码切换

### 添加商品 UI

- 面包屑导航指示当前操作路径
- 警告条显示操作内容名称
- 步骤条 steps 指示当前操作第几步
- tabs 标签页切换操作的内容,包括：基本信息、商品参数、商品属性、商品图片和商品内容五步
- 图片上传，分别处理图片上传成功、移除上传图片、图片预览操作(使用绝对路径)
- 商品内容中是对某个商品的描述性文字，使用可以更加精细化控制文本样式的 vue-quill-editor（富文本编辑器组件）实现
- 上述步骤，包括基本信息、商品参数、商品属性、商品图片、商品内容五个步骤完成后，点击“添加商品”按钮，添加商品

### 添加商品业务逻辑

- tab 标签页中，包括基本信息、商品参数、商品属性、商品图片、商品内容五个选项
- 基本信息选项中，依次填入商品名称、商品价格、商品数量、商品重量、商品分类（要求选中的是三级分类,否则 tabs 标签页无法切换到其他选项）
- 商品参数和商品属性内容区，分别渲染动态参数和静态属性
- 商品图片中

## 打包前准备

### 生产环境下，代码中不允许有 console 语句

- 在图形界面中，点击安装依赖/开发依赖，搜索包 babel-plugin-transform-remove-console，安装该包。if 分支作判断，开发模式不配置，发布模式配置该包
- 在 babel.config.js 文件中配置该插件，在 plugins 节点新增一个选项'transform-remove-console'(注意；不包含包名中 babel-plugin 部分)

## 优化和上线

### 项目优化策略

- 生成打包报告
  - 通过命令行参数的形式生成报告 vue-cli-service build --report
  - 通过可视化面板直接查看报告

### 修改 webpack 默认配置

- vue-cli 工具生成的项目，默认隐藏了 webpack 的配置项，让程序员的工作重心放到具体的功能和逻辑实现上
- 通过修改 vue.config.js 来更改默认配置项，比如：a.在 chainWebpack 节点，配置更改不同开发模式下的入口文件

### 通过 externals 加载外部 CDN 资源

- 在 vue.config.js 中添加 externals 节点，config.set('externals',{原包名：引用 CDN 中包})
- 在 public/index.html 中，添加引入的 CDN,引入外部 CDN 资源
- <%if(htmlWebpackPlugin.options.isProd){ %>引的 CDN 资源包括 css 和 js 文件<% } %>

### 路由懒加载

- 安装开发依赖 npm install --save-dev @babel/plugin-syntax-dynamic-import 货在图形界面中安装
- 在 babel.config.js 中 plugins 节点中增加一个元素 '@babel/plugin-syntax-dynamic-import'
- 在路由文件 router/index.js 文件，将导入的组件都改成动态加载的方式，如：const Foo=()=>import(/_ webpackChunkName: "组块名称 " _/'.vue 文件路径')

## 项目上线相关配置

### nginx 上测试

- 双击 nginx.exe 启动，在浏览器地址栏输入本机 ip,出现欢迎页面，nginx 正常
- 在 nginx.conf 文件中配置，打包文件的 root(路径中斜杆改成递增的/)和 index
- 重载更改后的配置文件 nginx.exe -s reload
- 在 url 中再次输入 ip，项目开启

### 配置 HTTPS 服务

### 使用 pm2 管理应用

### phpstudy 进行数据库还原方式一（测试发现弹出黑框后，只导入了部分文件，数据库文件缺失）

- 首先打开 phpstudy，默认 Apache 和 Mysql 服务都是开启的，先停掉暂时不使用的 Apache 服务
- phpstudy 默认 MySQL 密码为'root'
- 找到 db 中.sql 后缀文件，填入数据库名称，数据库名称是 sql 文件名（xxx.sql 数据库名为：'xxx'）

### phpstudy 数据库还原方式二（使用图形化界面，MySQL front 推荐使用）

- MySQL 管理器--->MySQL-Front 可以打开图像化界面
- 界面打开后，手动创建一个数据库文件夹，名称为 xxx.sql 的文件名
- 选择新建的 xxx 文件夹，右键选择输入--->sql 文件（路径调整到准备好的 sql 文件目录），导入.sql 文件时，注意在弹框中，将字符集（默认 ANSI）,选择为'utf-8',否则导入时可能报错
- 等待数据库还原完成即可