后台管理系统实战步骤

课程安排

  1. day01 完成用户模块和品牌管理模块
  2. day02 理解后管项目搭建的方方面面
  3. day03 完成分类模块
  4. day04-day05 完成商品模块
  5. day06 完成首页模块

day01 用户模块

1. 了解项目结构
  1. vue.config.js // 配置项目
  2. evn.development env.production // 配置环境变量
  3. router
  4. vuex
  5. utils
  6. views

2. 掌握登录流程
  1. 点击登录按钮
  2. this.$store.dispatch(“LoginAC”, this.ruleForm)
    派发了一个action: LoginAC
  3. LoginAC 发送请求取登录
  4. 登录成功之后, 根据角色动态添加路由, 并且修改username,realname,role, token状态
  5. 然后跳转到首页

3. 掌握用户权限管理
  1. router.addRoutes // 动态添加路由
  2. 根据后台返回用户角色(role字段), 动态添加路由
  3. 动态添加路由时, 路由配置一定要加上 name

5. 掌握如何创建一个模块
  1. 先创建用户列表组件
  2. 配置路由
  3. 静态页面
  4. 动态数据渲染

  5. 单元格数据格式化

    1. formater 格式化单元格 `:formater ="formatXXX"`  // formatXXX是一个方法

  6. 操作按钮(删除和编辑按钮)

    • 删除按钮切记要加弹窗, 危险动作要警示用户谨慎操作
    • scope是饿了么提供的一个变量, 里面存储了单元格所有相关信息
    • scope.$index 所在行下标(从0开始)
    • scope.row 所在行对应的对象
      1. <template slot-scope="scope"> 
      2. <el-button @click="edit(scope)" type="primary" icon="el-icon-edit" circle>
      3. </el-button> 
      4. <el-button @click="del(scope)" type="danger" icon="el-icon-delete" circle>
      5. </el-button>
      6. </template>

6. 掌握使用饿了么UI库
  1. el-card 设置样式为: magin: 10px;
  2. el-table
    • border 添加边框
    • stripe 添加斑马纹
    • 表格宽度设置 style:{width:xx%}
    • 单元格宽度设置 width="80" 不设置就平分
    • formater 格式化单元格 :formater ="formatXXX"
    • 单元格文字居中 align=”center”
    • slot-scope=”scope” scope提供了单元格的相关数据
      scope.$index 下标
      scope.row 行数据
  3. el-button

7.添加和编辑用户
  1. el-form表单的使用
  2. 添加和编辑公用一个表单(这个表单就做成公共组件)
    • 设计使用者需要传入的属性
    • 给使用者提供的事件
    • 给使用者提供的插槽

  3. 父组件修改子组件数据

    • step1 在父组件里给子组件添加ref属性, 比如 ref=”son”

    • step2 父组件可以使用 this.$refs[‘son’]来获取子组件的实例, 从而修改子组件的数据 ```vue // 父组件

// 子组件

``` 4. 子组件修改父组件数据 - 父组件使用 :msg.sync="msg" - 子组件使用 $emit('update:msg', '新数据') ```vue // 方式一: // 父组件

// 子组件

``` ```vue // 方式2 父组件给子组件传对象 // 父组件

// 子组件

``` ##### 8.编辑用户 1. 从列表页跳转到编辑页面 ```vue edit(scope) { this.$router.push({ path: '/user/edit', query: { id: scope.row.id } }) }, ``` 2. 新建表单(编辑和添加共用) - 确认按钮的文字由使用者传入 - 表单的数据fromData由使用者传入 作业: 1. 完成用户模块的编辑和添加 1. 完成品牌模块列表, 编辑, 添加
品牌模块有两个字段: 名称, 公司地址 ## day02 分类模块 ##### 一级分类 1. 配路由和组件 1. 做好静态页面 1. 请求数据, 替代静态页面 1. 添加删除功能 1. 增加和编辑功能 1. 配路由和组件 1. 公共组件静态 1. 实现添加和编辑的功能 ##### 使用弹窗实现编辑和添加功能 1. dialog组件的使用 1. ref的使用 ```vue // 父组件修改子组件状态 1. 给子组件添加ref,比如ref="form" 2. 父组件通过this.refs['form']获得子组件实例 ``` 3. From公共组件设计 3. 变量控制状态 ```vue // 当前修改的行的下标 currIndex: '', // 提交的类型 submitType: "", // 表单的标题 title: "", // 表单数据 ``` 5. 编辑功能实现 5. 添加功能实现 ##### 二级分类 1. 需要个更新yunmi-server代码 ```html git checkout . // 清除修改 git clean -fd // 清除新建文件 git pull origin master // 更新代码 ``` 2. 二级分类列表需要传入参数 parentId ```vue 查看下级 toLeval2(scope) { this.$router.push('/type/list2', {id: scope.row.id}); } ``` 3. 获取二级分类列表 ```json this.$axios.get('/subType/all',{parentId: this.$route.query.id}); ``` ## day03 首页模块 ##### (一) canvas 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ```html ``` ##### (二) canvans主要用来做数据可视化 1. 百度地图用的就是canvas 1. 各种图标也是使用canvas进行绘制 1. 一个基于 JavaScript 的开源可视化图表库 [链接](https://echarts.apache.org/zh/index.html) ##### (三) 在首页模块应用echarts 1. 获取数据 ```javascript this.$axios.get('/count/all'); ``` 2. 画图 ```javascript 
  1. ```javascript
  2. // 首页详细代码
  3. <template>
  4.   <div class="home-index">
  5.     <el-card class="box-card">
  6.       <div class="flex jc-c">
  7.         <div id="week"></div>
  8.         <div id="year"></div>
  9.       </div>
  10.     </el-card>
  11.   </div>
  12. </template>
  14. <script>
  15. import * as echarts from "echarts";
  16. export default {
  17.   data() {
  18.     return {
  19.       orderData: [],
  20.       weekData: [],
  21.       yearData: [],
  22.     };
  23.   },
  25.   created() {
  26.     this.getData();
  27.   },
  29.   mounted() {},
  31.   methods: {
  32.     // 获取数据
  33.     async getData() {
  34.       try {
  35.         let res = await this.$axios.get("/count/all");
  36.         this.orderData = res.result.orderData;
  37.         this.weekData = res.result.weekData;
  38.         this.yearData = res.result.yearData;
  39.         // 拿到数据之后开始画图
  40.         this.drawWeek();
  41.         this.drawYear();
  42.       } catch (error) {
  43.         // todo
  44.       }
  45.     },
  47.     // 绘制周数据
  48.     drawWeek() {
  49.       // 获取节点
  50.       let chartDom = document.getElementById("week");
  51.       // 初始化
  52.       let myChart = echarts.init(chartDom);
  53.       let option = {
  54.         // 标题
  55.         title: {
  56.           text: "本周销量",
  57.           x: "center",
  58.         },
  59.         // 横坐标
  60.         xAxis: {
  61.           type: "category",
  62.           // 横坐标数据
  63.           data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  64.         },
  65.         // 纵坐标
  66.         yAxis: {
  67.           type: "value",
  68.         },
  69.         series: [
  70.           {
  71.             // 纵坐标数据
  72.             data: this.weekData,
  73.             type: "bar",
  74.             // 是否显示背景
  75.             showBackground: true,
  76.             // 背景颜色
  77.             backgroundStyle: {
  78.               color: "rgba(180, 180, 180, 0.2)",
  79.             },
  80.           },
  81.         ],
  82.       };
  84.       myChart.setOption(option);
  85.     },
  87.     // 绘制年度数据
  88.     drawYear() {
  89.       var chartDom = document.getElementById("year");
  90.       var myChart = echarts.init(chartDom);
  91.       var option = {
  92.         // 标题
  93.         title: {
  94.           text: "本周销量",
  95.           x: "center",
  96.         },
  97.         // 横坐标
  98.         xAxis: {
  99.           type: "category",
  100.           // 横坐标数据
  101.           data: [
  102.             "1月",
  103.             "2月",
  104.             "3月",
  105.             "4月",
  106.             "5月",
  107.             "6月",
  108.             "7月",
  109.             "8月",
  110.             "9月",
  111.             "10月",
  112.             "11月",
  113.             "12月",
  114.           ],
  115.         },
  116.         // 纵坐标
  117.         yAxis: {
  118.           type: "value",
  119.         },
  120.         series: [
  121.           {
  122.             // 纵坐标数据
  123.             data: this.yearData,
  124.             type: "bar",
  125.             // 是否显示背景
  126.             showBackground: true,
  127.             // 背景颜色
  128.             backgroundStyle: {
  129.               color: "rgba(180, 180, 180, 0.2)",
  130.             },
  131.           },
  132.         ],
  133.       };
  135.       myChart.setOption(option);
  136.     },
  137.   },
  138. };
  139. </script>
  141. <style lang="less">
  142. #week {
  143.   width: 35%;
  144.   height: 400px;
  145. }
  146. #year {
  147.   width: 65%;
  148.   height: 400px;
  149. }
  150. </style>

day04 商品模块新知识点

(一) 列表页
  1. 上架和下架, 使用 el-select 组件, 调用接口changeStatus, 需要更新服务器代码
  2. 分页组件
    1. 分页组件的使用
    2. 组件的事件,点击数字需要分页
    3. 总页数

  3. 搜索按钮

    1. 输入内容, 回车进行搜索,点击按钮也同样可以执行搜索

      1. 需要重置当前页, 不然会有bug
      2. 当只有一页时候隐藏分页
        1. <el-pagination
        2.  :current-page="currPage"
        3.   :hide-on-single-page="true"
        4.  @current-change="changePage"
        5.  background
        6.  layout="prev, pager, next"
        7.  :total="totalPage"
        8. >
        9. </el-pagination>

    2. 点击清除按钮,显示搜索前的数据

    3. 删除至空的时候也显示搜索前的数据
      (二) 编辑和添加页面

  4. 编辑和添加组件共用一个form表单

  5. 商品编号置灰不可以进行修改,添加的时候不显示商品编号
  6. 商品品牌的逻辑
  7. 级联选择器的逻辑
    1. 使用 el-cascader 组件
    2. 构造级联选择器需要的数据, 使用map
  8. typeMsg和brandMsg只是为了方便前端展示而设置的字段
  9. 重置表单内容
    1. 需要添加prop
    2. 重置的时候回到初始值
  10. 上传图片, 饿了么也有组件, 调接口就好