电商后台管理系统（下）

整体项目中的难点

1. 利用递归完成分配权限的渲染

// 通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中
    getLeafKeys (node, arr) {
      // 如果当前 node 节点不包含 children 属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => {
        this.getLeafKeys(item, arr)
      })
    },

2.添加商品的深拷贝

add () {
      // console.log(this.addForm)
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('请填写必要的表单项！')
        }
        // 执行添加业务逻辑
        // lodash cloneDeep(obj)
        const form = _.cloneDeep(this.addForm)
        form.goods_cat = form.goods_cat.join(',')
        // 处理动态参数
        this.manyTableData.forEach(item => {
          const newInfo = {
            attr_id: item.attr_id,
            attr_vals: item.attr_vals.join(' ')
          }
          this.addForm.attrs.push(newInfo)
        })
        // 处理静态属性
        this.onlyTableData.forEach(item => {
          const newInfo = {
            attr_id: item.attr_id,
            attr_vals: item.attr_vals
          }
          this.addForm.attrs.push(newInfo)
        })
        form.attrs = this.addForm.attrs
        console.log(form)
        // 发送请求添加商品
        // 商品的名称，必须是唯一的
        const { data: res } = await this.$http.post('goods', form)
        if (res.meta.status !== 201) {
          return this.$message.error('添加商品失败！')
        }
        this.$message.success('添加商品成功！')
        this.$router.push('/goods')
      })
    }

这里使用的时lodash插件的深拷贝方法，我们也可以自己手写实现

3.element-UI图片上传组件的使用

template

<el-upload
  action="http://127.0.0.1:8888/api/private/v1/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  list-type="picture"
  :headers="headers"
  :on-success="handleSuccess"
>
<!-- action：必选参数，上传的地址，因为这使用的不是 axios ，所以要写完整的路径 -->
<!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
<!-- on-remove 文件列表移除文件时的钩子 -->
<!-- list-type 文件列表的类型，这里不需要修改 -->
<!-- header 设置上传的请求头部 -->
<!-- on-success 文件上传成功时的钩子 -->

<!-- 点击图片，弹出的预览框 -->
<el-dialog :visible.sync="previewVisible" width="60%">
	<img :src="previewImg" />
</el-dialog>

data

addForm: {
        goods_name: "",
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        goods_cat: [],
        pics: [], // 存储上传图片的数组
        goods_introduce: "",
},

// 因为 element-ui 中没有封装 axios ，所以要单独设置请求头，
headers: {
        Authorization: window.sessionStorage.getItem("token"),
},
    
// 需要预览的图片
previewImg: "",

// 控制预览窗口的显示和隐藏
previewVisible: false,

methods

// 点击文件列表中已上传的文件时的函数方法
handlePreview(preFile) {
  // console.log(preFile);
  // 将要预览的图片的路径提取出来，并赋给 data 中的 previewImg
  this.previewImg = preFile.response.data.url;
  console.log(this.previewImg);
  // 点击图片弹出对话框
  this.previewVisible = true;
},
    
// 文件列表移除文件时的函数方法
handleRemove(delFile) {
  // 将要删除的图片的 tmp_path 提取出来
  console.log(delFile.response.data.tmp_path);
  // 用 findIndex 方法找到 data 中定义的 addForm.pics 数组里面对应的索引值
  let index = this.addForm.pics.findIndex((item) => {
    return item.pic == delFile.response.data.tmp_path;
  });
  console.log(index);
  // 用 splice 方法删除数组中对应的数据
  this.addForm.pics.splice(index, 1);
  console.log(this.addForm.pics);
},
    
// 文件上传成功时的函数方法
handleSuccess(res) {
  // 参数 res 为上传成功是返回的数据
  console.log(res);
  // 将 res 中的 tmp_path 提取出来，以对象的形式 push 到 data 中定义的 addForm.pics 数组中
  this.addForm.pics.push({
    pic: res.data.tmp_path,
  });
  console.log(this.addForm.pics);
},