项目介绍

黑马后台管理系统是一个电商后台管理系统的前端项目，基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能

开发技术

此项目开发我用到的技术有：vue2+node.js+webapck element axios router vuex

项目的开发流程：

1. 项目选型

2. 搭建登录注册页，权限管理，封装接口，vuex，路由配置，环境配置， 本地代理

3. 主功能页面：按照各个页面业务需求进行开发

4. 打包项目

5. 代码整理，代码注释

分模块

这个项目大致分为了：登录，退出登录，用户管理，权限管理，商品管理，订单管理，数据统计7部分

登录模块

实现用户登录功能的逻辑是： ①在登录页面输入账号和密码进行登录，将数据发送给服务器 ②服务器返回登录的结果，登录成功则返回数据中带有token ③客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。

首先在点击登录时候进行登陆的的表单验证

然后在request.js中添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装，这里我用到了async，await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好。

在封装里处理token过期清除本地存储返回登录页。

跳转成功了我又去配置了路由守卫，判断是不是有token，有没有权力让他去进入主页面

侧边栏的布局以及渲染 请求数据

在element-ui中也提供了相应的组件，在NavMenu导航菜单中可以找到相应的组件对应的区域

• :router 开启路由模式，设置el-menu-item的index值 为路由标识

• 动态渲染：不同身份登录，权限控制

data中定义一个数组leftmenu来接收左侧菜单数据

 

退出模块

调用接口，删除本地中的token，并跳转到登录页

用户管理模块

添加编辑

• 展示：现有用户数量 GET

• 增加：用户名、密码、邮箱、手机，新增后重新加载页面 POST

• 删除：删除后重新加载页面 PUT

• 修改：DELETE 1.改基本信息：手机、邮箱 2.改角色：关系到权限

• 组件 面包屑、搜索框、表格、分页组件、switch状态转换

请求数据状态切换、分页、面包屑导航切换然后对添加和编辑的表单进行验证，然后为了优化项目

我把添加和编辑的封装到组件进行复用，使页面解构更清晰。

搜索功能的实现

将值利用绑定到queryInfo.query

分页!

@size-change: 监听pagesize改变的事件 @current-change: 监听页码值改变的事件 :current-page: 当前页 :page-sizes：一页的的信息条数 :page-size: 当前的页数 layout: 控制显示内容 :total：总共的信息条数

权限管理模块

角色列表

• 添加角色（简单提交）

• 编辑、删除（简单slot-scope传参、delete请求）

• 分配角色（tag）

• 权限展示（表格展开行）

角色列表页面一个重点就是利用了element ui中的 table表格插件的展开行

分配权限也是利用利用了element ui中的 tree树形控件来完成的

 <!-- 表格 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="expand">
          <template v-slot="scope">
            <!-- 当前角色权限渲染 -->
            <el-row
              v-for="(item, i1) in scope.row.children"
              :key="item.id"
              :class="[i1 === 0 ? '' : 'bdtop', 'vcenter']"
            >
              <el-col :span="6">
                <!-- 一级 -->
                <el-tag closable>{{ item.authName }}</el-tag>
              </el-col>
              <el-col :span="18">
                <!-- 二级 -->
                <el-row
                  v-for="(it, i2) in item.children"
                  :key="it.id"
                  :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']"
                >
                  <el-col>
                    <el-tag
                      type="success"
                      closable
                      @close="delRight(scope.row, it.id)"
                      >{{ it.authName }}</el-tag
                    >
                  </el-col>
                  <!-- 三级 -->
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      closable
                      v-for="i in it.children"
                      :key="i.id"
                      @close="delRight(scope.row, i.id)"
                      >{{ i.authName }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" align="center">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button type="warning" size="mini" @click="showfen(scope.row)"
              >分配权限</el-button
            >
          </template>

展开所有的权限（树形结构自带的属性：default-expand-all） 显示：先勾选上拥有的三级权限（三层forEach，获得所有三级权限的集合，赋值给checklistArr） :default-checked-keys="checklistArr"

ref 绑定后方便使用他的事件

this.$refs.tree.getCheckedKeys() 返回目前被选中的节点的 key 所组成的数组 this.$refs.tree.getHalfCheckedKeys() 返回目前半选中的节点的 key 所组成的数组 data 是绑定的数据 []

show-checkbox 显示复选框

node-key 节点的key

default-expand-all 是否默认展开所有节点

default-checked-keys 默认勾选的节点的 key 的数组

props 配置选项

权限列表

重点在于权限等级可以利用插槽和v-if v-else-if来判断权限的等级

商品管理

在商品管理页面又被分为了:商品分类 分类参数 商品列表三个页面

商品列表

添加编辑

分页、面包屑导航切换然后对添加和编辑的表单进行验证，然后为了优化项目

我把添加和编辑的封装到组件进行复用，使页面更清晰。

搜索功能的实现

将值利用绑定到queryInfo.query

分页 @size-change: 监听pagesize改变的事件 @current-change: 监听页码值改变的事件 :current-page: 当前页 :page-sizes：一页的的信息条数 :page-size: 当前的页数 layout: 控制显示内容 :total：总共的信息条数

上传图片 （Upload组件、百度Web Uploader）

请求上传接口，需要设置token（这里不是发axios请求）

• :on-remove 文件列表移除文件时的钩子

• on-success 文件上传成功时的钩子

• headers 设置上传的请求头部

• action 上传地址

• on-preview 点击文件列表中已上传的文件时的钩子

• list-type 文件列表的类型

• 

分类参数

这一模块数据 分为了 动态参数和静态属性 所以分别发送不同的请求，获得数据保存在本地，再利用tabs组件进行渲染即可，添加，修改，删除功能

• 级联选择器 type=3 展示出三级分类

• 动态（涉及列表展开）、静态参数

• 查询名称、价格、重量、参数管理

• 添加商品详细描述（名称、价格、重点、数量、分类、参数、属性、图片）

• 步骤条组件+纵向tabs组件（需要包裹在el-form里）（并列关系）

• 上传图片

商品分类

在这个页面我们用了一个新的组件tree-table 树形表格 首先我们要下载表格vue-table-with-tree-grid插件，全局引入

show-index                   //序号
​
•        align="center"               //表格文字是否剧中
​
•        width="220px"
​
•        index-text="#"               // 设置序号的label属性
​
•        :data="list"                      //表格所有数据
​
•        :columns="columns"       //设置属性

我认为添加分类是整个项目的及大难点之一，是一个三级联动的

  options:数据源
​
   props:      //靶子对象
​
   value:      //选中的属性
​
•    label:  //显示的名称
​
•    children:  //嵌套的结构
​
•     v-model:  //选中数组
​
•      @changed:  //选择项发生变化时候 触发的函数

 

订单列表

添加编辑

• 展示：现有用户数量 GET

• 增加：用户地址、手机，新增后重新加载页面 POST

• 删除：删除后重新加载页面 PUT

• 修改：DELETE 1.改基本信息：手机号，用户地址 2.改角色：关系到权限

• 组件 面包屑、搜索框、表格、分页组件、switch状态转换

请求数据状态切换、分页、面包屑导航切换然后对添加和编辑的表单进行验证，然后为了优化项目

我把添加和编辑的封装到组件进行复用，使页面解构更清晰。

搜索功能的实现

将值利用绑定到queryInfo.query

分页
@size-change: 监听pagesize改变的事件
@current-change: 监听页码值改变的事件
:current-page: 当前页
:page-sizes：一页的的信息条数
:page-size: 当前的页数
layout: 控制显示内容
:total：总共的信息条数

数据统计

// 安装echarts库 npm install echarts -S

// 导入echarts接口 import echarts from ‘echarts’

 

项目难点

【难点1】权限管理

1.创建vue实例的时候讲vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限

的公共页面.

2.当用户登录后,获取用户的role,讲role和路由表每个页面的需要的权限作比较,生成最终用户,

可访问的路由表.

3.调用router.addRoutes添加用户可访问的路由.

4.使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

【难点2】三级权限展示，树形结构，row、col的结构

请求角色列表的产物，因此数据包含在getRoleList的返回值里。 理解el-row和el-col的关系，两者包含成为一维。

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
​
​
​
{
    "data": [
        {
            "id": 30,
            "roleName": "主管",
            "roleDesc": "技术负责人",
            "children": [
                {
                    "id": 101,
                    "authName": "商品管理",
                    "path": null,
                    "children": [
                        {
                            "id": 104,
                            "authName": "商品列表",
                            "path": null,
                            "children": [
                                {
                                    "id": 105,
                                    "authName": "添加商品",
                                    "path": null
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
}
​
​
​
<el-row v-for="(item1,i) in scope.row.children" :key="i" class="expand">
    <!-- 第一列中放一级标签 -->
    <el-col :span="4">
        <!-- 可移除标签，这里展示一级标签,绑定取消权限方法 -->
        <el-tag class="expand" closable @close="delRight(item1.id,scope.row)">{{item1.authName}}</el-tag>
    </el-col>
    <el-col :span="20">
        <!-- 第二列也是一行两列 -->
        <el-row v-for="(item2,index) in item1.children" :key="index">
            <!-- 第二行第一列中放二级标签 -->
            <el-col :span="4">
                <el-tag class="expand" type="success" closable @close="delRight(item2.id,scope.row)">{{item2.authName}}
                </el-tag>
            </el-col>
            <el-col :span="20">
                <el-tag class="expand" @close="delRight(item3.id,scope.row)" closable type="warning"
                    v-for="(item3,indexInner) in item2.children" :key="indexInner">{{item3.authName}}</el-tag>
            </el-col>
        </el-row>
    </el-col>
</el-row>

【难点3】分配权限，树形结构el-tree 全选、半选（如何展示）

展开所有的权限（树形结构自带的属性：default-expand-all） 显示：先勾选上拥有的三级权限（三层forEach，获得所有三级权限的集合，赋值给checklistArr） :default-checked-keys="checklistArr" 提交：需要获取所有的一、二、三级权限的集合（全选+半选），传参修改

//显示
​
editRight(role) {
    // checklist权限的集合，是个树形结构
    this.checklist = role.children
    this.currentRoleId = role.id
    var tmpArr = []
    this.checklist.forEach(item1 => {
        var item2 = item1.children
        item2.forEach(item2 => {
            var item3 = item2.children
            item3.forEach(item3 => {
                tmpArr.push(item3.id)
            })
        })
    })
    this.checklistArr = tmpArr
}
​
//提交
​
async confirmRole() {
    let arr1 = this.$refs.mytree.getCheckedKeys()
    let arr2 = this.$refs.mytree.getHalfCheckedKeys()
    let arr = [...arr1, ...arr2]
    const res = await this.$http.post(`roles/${this.currentRoleId}/rights`, { rids: arr.join(',') })
}

【难点4】树形组件element-tree-grid在表格中的运用（组件选择、配置）

表格样式：树形结构 +【是否有效】【级别】【操作】字段； 组件选择：由于第一列的el-table-column要展示为树形结构，因此使用组件element-tree-grid，all props of el-table-column are supported； 在获取到三级商品分类后，element-tree-grid只需要绑定好对应的属性，即可显示。

 <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="#" align="center"></el-table-column>
      <el-table-column prop="authName" label="权限名称" align="center">
      </el-table-column>
      <el-table-column prop="path" label="路径" align="center">
      </el-table-column>
      <el-table-column label="权限等级" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.level == 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level == 1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
      </el-table-column>
    </el-table>

【难点5】级联选择器-添加分类（理解接口type参数）

由于最细添加的是三级分类（或者添加一级、二级分类），因此级联选择器只用展示一、二级的父类，请求分类接口，type=2 value / v-model： 选中项绑定值，是一个数组 级联选择器的handleChange方法，能获取到最接近一层的父类参数分类id，配置级别和分类名称，组成一个obj作为参数发POST请求

<el-dialog
     @close="clearDefault"
      title="分配权限"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-tree
        show-checkbox
        default-expand-all
        :default-checked-keys="defaultKeys"
        node-key="id"
        :data="rightstree"
        :props="Propslist"
         ref="treeData"
      ></el-tree>

【难点6】分类参数 – 只允许为三级分类设置参数

• 级联选择器 type=3 展示出三级分类

• 动态（涉及列表展开）、静态参数

如何限定只让第三级被选中：

handleChange () {
  if (this.selectedOptions.length !== 3) {
    this.$message.warning('商品只能添加到三级分类')
    this.selectedOptions.length = 0
  }
}

【难点7】什么时候渲染出参数，tabs标签页改造

在el-tab-pane里含了el-table–绑定dynamicAttrs el-button 在点击了级联选择器器之后，渲染出动、静态参数

async handleChange() {
    if (this.value.length === 3) {
        if (this.active === '1') {
            // 动态参数
            const res = await this.$http.get(`categories/${this.value[2]}/attributes?sel=many`)
            this.dynamicAttrs = res.data.data
            this.dynamicAttrs.forEach((item) => {
                // 把attr_vals转为数组类型
                item.attr_vals = item.attr_vals.split(',')
            })
        } else if (this.active === '2') {
            const res1 = await this.$http.get(`categories/${this.value[2]}/attributes?sel=only`)
            this.staticAttrs = res1.data.data
        }
    }
}

项目收获

1.从头下手，到做一遍后，后面的几个模块比较相似，自己进行了实现

2.最大收获就是从拿到一个项目开始，梳理它的功能模块，然后各个模块再细分为单个功能例如添加，删除，修改等，然后逐个功能进行实现

3.在实现各个功能的时候，从老师那里学到了很多逻辑，包括思考问题的方式，比如这个项目，各个功能要做的大同小异，无非是拿到数据，进行处理，然后渲染，监听用户操作，修改数据，提交请求

4.还有就是之前没有怎么用过的 作用域插槽，层级选择器，树状结构，出现在项目中，

5.然后就是对于 axios拦截器的使用，比如登录时用到的request，在发起请求时为请求添加token，存储token，还有另一个 response,在获得数据时，添加loading效果;

6.然后就是帮助自己 复习了Vue-router，更加熟悉了路由的操作；

7.对Element-ui的使用更加熟练

8.还学会了封装全局的按钮鉴权，封装添加修改的的表单元素