Vue 后台管理系统

登陆

使用了element-ui的el-form组件

• 用户名 ：前端校验规则---不为空
• 密码 ：前端校验规则---不为空
• 登录按钮 ：
  1. 当前端校验不通过时，使用element-ui的message组件提示，
  2. 使用axios请求登录接口，并将账户密码发送给后端，
  3. 后端返回数据，通过后端数据包里的code码在全局api.js文件里在处理，如果code码为0，直接提示用户，
  4. 如果为1,将返回的数据存入vuex，并使用vue-router导航到首页，
  5. 返回的数据：
     • uid（用户id:每一个接口都需要带上）
     • username(用户名)
     • token值（我们将其放入cookie里 后端会根据token值b判断用户是否合法)；cookie会随着http请 求发送到服务器
     • token：本次登录时间，当前密码的后三位，设备的ip地址 ，一些混淆的值 uigugiui84
     • loginState：（登录状态） 0 失败 1成功
     • head ：头像地址 例如 http：//asdads.png

首页

首页开发流程;

1. 当首页被打开时，在mounted钩子函数中，发起自动请求返回数据,将数据渲染到图表和购物车摘要以及订单的摘要模块

2. 首页组成部分 2.1 图表：公司运营销售的概览，库存，总售价 2.2 购物车摘要，总条数，总价格， 2.3 订单摘要信息：总条数，总售价，毛利润

3. 二级路由 归属于首页下面的二级路由 3.1 统计表 使用element-ui中的 el-table 创建表格，表头和数据都是通过后台接口返回后动态生成的 分页器 3.2 图表视图（数据可视化） 使用百度的echarts里的饼状图（pie），通过接口返回的数据动态渲染的 在饼状图上添加事件以及更新数据

购物车

购物车统计页面开发流程

组成部分

1. 筛选条件 1.1 时间，产品名称，客服，供货商

2. 表格 2.1 表头和数都是通过接口动态生成的 2.2 使用el-table 固定表头，合并单元格，统计价格

3. 分页器 3.1 是根据接口返回数据的条数total，或者使用数据的length 3.2 如果总条数是0则使用v-if不显示分页器

逻辑流程

1. 进入购物车统计页面后，在 mounted 函数中用接口请求购物车统计数据
2. 拿到数据之后分别传递给表格和分页器组件
3. 当用户在筛选条件组件中选中了一些筛选条件后，点击搜索按钮时，通过子传父的$emit方法将筛选数据传递给父组件
4. 父组件在筛选条件组件上使用v-on绑定监听函数获取到筛选条件后，请求筛选接口
5. 接口返回新的的数据，然后将数据重新赋值给表格的数据对象，更新表格

订单

结构和购物车一致，只是在表格的数据里不同，有后台接口决定

用户管理

组成部分

• 搜索 查询用户的input输入框 添加用户按钮 点击添加 之后，弹出一个弹框，里面是一个表单，有用户名，权限，密码， 确认密码 点击确认按钮后，将数据通过添加用户接口传给后端 后端返回成功或失败的状态 如果成功了，我们将添加这一条数据插入表格的数据对象里，使表格更新

• 表格 表头：用户名 权限，操作

  在表格里的操作项，有编辑和删除 表格是一个可复用的动态生成组件，当点击编辑或者删除按钮的时候，使用子传父方法，将当前行表格数据发送给父组件 父组件根据传过来的参数，控制弹框的内容显示 当用户在弹框里进行操作后，点击确认后，调用相应的接口 接口返回状态后，前端自动更新表格数据

• 分页 表格数据的条数

权限管理

• 当用户登录以后，后端返回的数据有：uid token username role,loginState;

• 其中role表示权限 ：1 管理员 2 普通账户

  1. 权限管理分别在两个地方实现： 1.1 在路由的拦截器（路由守卫）通过用户信息里的role判断 1.2 在动态生成导航是，通过用户信息里的role判断
  2. 当role为1的时候，管理员可以查看所有后台管理系统的功能和操作
  3. 当为2的时候，普通账户只可以查看首页和统计类的功能页面，用户管理页面则不能看