1、登录界面

1.1登录状态值token

什么是token

Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

基于Token的身份验证的过程如下:

客户端使用用户名跟密码请求登录
服务端收到请求，去验证用户名与密码
验证成功后，服务端会签发一个 Token，再把这个 Token发送给客户端
客户端收到 Token 以后可以把它存储起来，比如放在Cookie 里或者 Local Storage 里
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，+ 就向客户端返回请求的数据

2、用户列表

2.1分配角色

点击分配角色按钮，通过scope.row获取需要被分配角色的用户信息，同时通过get请求获取所有的角色信息。

const { data: res } = await this.$http.get('roles')
this.assignuser = res.data

通过

<p>分配新的角色：
<el-select placeholder="请选择" :data='assignuser' v-model="assignid">
    <el-option v-for="item in assignuser" :key="item.id" :label="item.roleName" :value="item.id">
     </el-option>
</el-select>
</p>

来进行数据的绑定，遍历数组assignuser，获取全部的角色信息。v-model="assignid"进行双向绑定，代表已经选中的角色id值。通过这个id值进行数据请求，通过put提交数据，随后更新整个数据列表。

   // 点击确认按钮，分配角色
    async SaveRoleInfo() {
      if (this.assignid) {
        const { data: res } = await this.$http.put(`users/${this.adduserInfo.id}/role`, { rid: this.assignid })
        if (res.meta.status !== 200) {
          this.$message.error('更新角色失败')
        }
        this.$message.success('更新角色成功')
      } else {
        this.$message.console.error('请选择要分配的角色')
      }
    },

角色列表

展开行功能

展开行功能主要运行element组件的Table表格组件
- element组件 table表格展开行代码如下

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
  </el-table>

在项目中，设置请求体为{params:{type:tree}},获取属性树型数据列表。展开行代码如下：

<el-table-column type="expand">
   <template slot-scope="scope">
       <el-row v-for='firstItem in scope.row.children' :key='firstItem.id' class="firstRow">
         <el-col :span="6">
           <el-tag type="primary" closable @close='deleteroles(scope.row,firstItem.id)'>
             {{firstItem.authName}}
           </el-tag>
           <i class="el-icon-caret-right"></i>
         </el-col>
         <el-col :span="18">
           <el-row v-for="secondItem in firstItem.children" :key="secondItem.id" class="secondRow">
             <el-col :span="6">
              <el-tag type="success" closable @close='deleteroles(scope.row,secondItem.id)'>
               {{secondItem.authName}}
               </el-tag>
              <i class="el-icon-caret-right"></i>
            </el-col>
            <el-col :span="18">
               <el-col :span="5" v-for="thirdItem in secondItem.children" :key="thirdItem.id" class="thirdCol">
                  <el-tag type="warning" closable @close='deleteroles(scope.row,thirdItem.id)'>
                   {{thirdItem.authName}}
                  </el-tag>
               </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
   </template>
</el-table-column>

在该代码中，用<template slot-scope="scope">包裹同一行数据,通过Layout 布局将一行设置两个分栏。通过遍历v-for='firstItem in scope.row.children'获取一级权限说明，随后，遍历v-for="secondItem in firstItem.children"获取二级权限说明，最后，遍历v-for="thirdItem in secondItem.children"获取二级权限说明。
设置close指令删除角色指定权限。
- 例：删除一级权限

<el-tag type="primary" closable @close='deleteroles(scope.row,firstItem.id)'>
    {{firstItem.authName}}
</el-tag>

 // 删除角色指定权限
    async deleteroles(role, sid) {
      const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${sid}`)
      // console.log(res)
      if (res.meta.status === 200) {
        console.log(res.data)
        //进行局部更新，不刷新数据列表
        role.children = res.data
      } else {
        this.$message.error('删除角色权限失败')
      }
    },

2.2 分配权限

// 分配权限功能
    async showSetRightDialog(role) {
      this.roleId = role.id
      // 获取所有权限数据
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) {
        this.$message.error('获取权限失败')
      }
      this.rightList = res.data
      console.log(res.data)
      // 递归获取三级节点的id值
      this.getleafKey(role, this.defKeys)

      this.$refs.addPermissionDialog.showpermission()
    },

    // 通过递归的形式获取角色下所有三级权限的id下的id值,并保存到数组defKey里面
    getleafKey(node, arr) {
      if (!node.children) {
        // 如果当前节点不包含children属性,证明为三级节点
        return arr.push(node.id)
      }
      node.children.forEach(item => {
        this.getleafKey(item, arr)
      })
    },

首先点击分配权限按钮，获取所有的权限信息，随后在子组件，通过树形控件动态获取权限列表:data='',通过:props='treeProps'，树型控件的属性绑定对象

  treeProps: {
        children: 'children',
        label: 'authName'
  }

通过递归的形式获取角色下所有三级权限的id下的id值,并保存到数组defKey里面。运用¶Tree 树形控件中的:default-checked-keys='defKeys'默认勾选的节点的 key 的数组。
通过即将被分配权限的id值roleId，来进行数据请求，为角色分配权限

 // 点击为角色分配权限
    async allotRights() {
      const keys = [...this.$refs.treeref.getCheckedKeys(), ...this.$refs.treeref.getHalfCheckedKeys()]
      // console.log(keys)
      const strKeys = keys.join(',')
      // console.log(strKeys)
      const { data: res } = await this.$http.post(`roles/${this.roleIds}/rights`, { rids: strKeys })
      if (res.meta.status === 200) {
        this.$message.success('分配权限成功')
        this.getRoleslist()
        this.hidepermission()
      }
    }

¶Tree 树形控件方法：
- /getCheckedKeys：若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组/
- /getHalfCheckedNodes：若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组/

3、商品列表

3.1 添加商品

element Steps 步骤条 //:active="0" 默认显示"基本信息"

 <!-- 步骤条 -->
      <el-steps :space="200" :active="activeIndex - 0" finish-status="success" style="margin-top:15px" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

3.2级联选择器

部分代码如下

   <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader expand-trigger="hover" v-model="addForm.goods_cat" :props='cateProps' :options="cateList" @change="handleChange"></el-cascader>
            </el-form-item>

expand-trigger="hover" 默认触发方式是鼠标悬停到上方触发
:props='cateProps' 配置选项

        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },

:options="cateList" 数据源是"cateList"

3.3上传图片

 <!-- active表示图片要上产到的api地址 -->
  <el-upload :headers='headersObj' :on-success="headleSuccess" action="http://127.0.0.1:9000/api/private/v1/upload" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
       <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>

headers：设置上传的请求头部

 // 图片上传组件的headers请求头对象
      headersObj: {
        Authorization: window.sessionStorage.getItem('token')
      },

:on-success="headleSuccess"：文件上传成功时的钩子

// 监听图片上传成功的事件
    headleSuccess(response) {
      // 1、拼接得到一个图片信息对象
      const picInfo = { pic: response.data.tmp_path }
      // 2、将图片信息对象，push到pics上
      this.addForm.pics.push(picInfo)
      console.log(this.addForm)
    },

:on-remove="handleRemove"：文件列表移除文件时的钩子

 // 处理移除图片的操作
    handleRemove(file) {
      // 1、获取将要删除图片的临时路径
      const filepics = file.response.data.tmp_path
      // 2、pics中找到对应图片的索引值，
      const i = this.addForm.pics.findIndex(x => x.pic === filepics)
      // 3、调用splice方法，把图片信息对象从pics数组中移除
      this.addForm.pics.splice(i, 1)
    },

3.4 富文本编辑

安装'vue-table-with-tree-grid'插件，在main.js中进行全局注册，同时导入富文本编辑器对应的样式

main.js:

import ZKTable from 'vue-table-with-tree-grid'
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器对应的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)

页面样式:

<!-- 富文本编辑器组件 -->
            <quill-editor v-model='addForm.goods_introduce'></quill-editor>

4、数据报表

安装'echarts'插件
在页面中导入‘echarts’
- import echarts from 'echarts'
在页面中准备一个具有大小的Dom
- <div id="main" style="width: 600px; height: 400px"></div>
在data中放入数据

  data() {
    return {
      // 需要合并的的数据
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },

在mounted中初始化echarts实例，同时请求数据

 // 此时页面中的元素已经被渲染完毕
  async mounted() {
    // 3、 基于准备好的Dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) {
      this.$message.success('获取折线图参数失败')
    }
    // 4、准备数据和配顶项
    const newRes = _.merge(res.data, this.options)
    // 5、展示数据
    myChart.setOption(newRes)
  }

后台管理项目总结