vue后台管理项目总结

首先我们对api进行封装：

在src目录下创建 api的文件夹，在api文件夹里创建api.js文件 和 http.js文件。我们在里边分别进行接口文件和axios的封装。

1.http.js 里 先引入axios然后在axios.create方法里面配置请求的公共地址和超时时间。再创建请求拦截器和响应拦截器，请求拦截里可以设置loading加载，还可以读取本地存储里的token，如果token存在的话就给请求头统一加token（let token=localstorage.getitem('token'），这样就不用每次进后台，每个页面都加了。响应拦截里 先定义一个code来存放响应的状态码（let code=res.data.meta.status），判断res.data.meta.status是否是无效token（res.data.meta.msg=="无效token"）如果过期的话就在.then(()=>{location.href='/login'})让他跳转到 login页面。否则就.catch(()=>{}).然后根据我们刚刚定义的状态码 对错误状态码进行精细控制，再在error里进行错误信息的处理，返回promise.reject(error) 最后用export default 导出这个axios的实例对象。

2.在api.js文件里存放我们请求需要的路径 导入我们封装好的axios，最后用export导出

登录页面的实现：

 1.使用element-ui组件或者其他组件进行静态布局 2.根据接口文档,模拟json数据 3.测试接口  4.验证规则:利用elment表单插件,判断验证规则是否通过，如果通过,获取前端用户输入信息,传入接口,发送请求 5.发送接口成功,后台验证数据后返回token，前台做下一步跳转 *** 作，同时提醒用户是否登录成功与失败信息 6.存储token,跳转页面

用户管理》用户列表》user.vue

 

分页：

本接口主要是后台分页：后台要求传入当前页数pagenum,每页条数pagesize。后台会返回总条数total,当前页数pagesize。使用分页插件实现分页样式，当条数改变时传入条数提交接口，当页数改变时传入页数提交接口 。

分页插件 @size-change(条数改变时触发)

        @current-change(页数发生改变时触发)

        :current-page(设置当前页码)

        :page-size(设置每页的数据条数)  layout是布局样式

        :total(设置总页数)

增加：

首先定义addform表单 给addform表单里的账号密码进行正则验证（ this.$refs.addFormRef.validate(async valid => {}）），如果正则验证通过的话就调用添加接口判断状态码if（res.data.status==200）{成功： this.$message.success(res.meta.msg)}

    addUser() {

      this.$refs.addFormRef.validate(async valid => {

        if (!valid) return

        const res= await adduser(this.addForm)

        if (res.meta.status === 201) {

           this.$message.success(res.meta.msg)

          // 隐藏添加用户的对话框

          this.addDialogVisible = false

          // 重新获取用户列表数据

          this.getUserList()

        }

})

    },

编辑：先调用根据id查询 的接口 显示出原有的 数据。定义修改表单 进行验证 如果验证通过的话 就发起修改用户信息的数据请求

    editUserInfo() {

      this.$refs.editFormRef.validate(async valid => {

        if (!valid) return

        // 发起修改用户信息的数据请求

        const res= await edituser(

          {

            id: this.editForm.id,

            email: this.editForm.email,

            mobile: this.editForm.mobile

          }

               if (res.meta.status === 200) {

           // 关闭对话框

          this.editDialogVisible = false

          // 刷新数据列表

          this.getUserList()

          // 提示修改成功

          this.$message.success('更新用户信息成功！')         

        }

      })

    },

删除：根据id删除对应的用户信息 先d框询问是否删除，确定之后调用删除的接口

   async removeUserById(id) {

      // d框询问用户是否删除数据

      const confirmResult = await this.$confirm(

        '此 *** 作将永久删除该用户, 是否继续?',

        '提示',

        {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }

      ).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm

      // 如果用户取消了删除，则返回值为字符串 cancel

      // console.log(confirmResult)

      if (confirmResult !== 'confirm') {

        return this.$message.info('已取消删除')

      }

      const res = await deluser(id)

      if (res.meta.status === 200) {

          this.$message.success('删除用户成功！')

          this.getUserList()

      }

    },

查询：给查询的input进行双向数据绑定，将双向数据绑定的值放在渲染列表里请求的参数里 然后绑定点击事件 触发这个事件就行了

    async getUserList() {

   

       const res=await userlist(this.queryInfo)

   

        // console.log('用户列表',res);

      if (res.meta.status === 200) {

         this.userlist = res.data.users

         this.total = res.data.total

        this.$message.success(res.meta.msg)

      }  

    },

更改用户状态：

1.注意这里后台要求请求方式为put请求，也就是相当于axios的更新请求 2.注意这里点击切换时，把切换后的状态发送给后台存储。如果ajax发送失败，取反不改变当前用户数据里状态

    //接口要求：传入当前行信息-当前id,与用户状态(即在页面内数据绑定的那行的状态)

   async userStateChanged(userinfo) {

      console.log(252,userinfo) //当前用户对象

       const res = await changestatus({"id":userinfo.id,"status":userinfo.mg_state})

      if (res.meta.status === 200) {

         this.$message.success(res.meta.msg)

      }

      //除非提交失败，不能更改状态

      else{

          userinfo.mg_state = !userinfo.mg_state

          // this.$message.error('修改状态失败')

      }

    },

权限管理》角色列表

分配权限：

分配权限的样式设计需要引用element-ui样式分配权限的对话框 el-tree树形组件-show-checkbox:显示复选框node-key:设置选中节点对应的值 default-expand-all:是否默认展开所有节点:default-checked-keys 设置默认选中项的数组 ref:设置引用1.d框显示,布局调用el-tree组件, :props="treeProps" 绑定数据里的字 :default-checked-keys="defKeys" 默认选中   2.获取所有权限的数据  const res= await this.$http.get('rights/tree') ,渲染绑定  

3.默认选中如何实现？通过递归的形式，获取当前角色下所有最后一次出现children中的id，并保存到 默认defKeys 选中数组中 。递归会不断的遍历当前角色下childen是不是有值，如果没有，就拿当前层级下的id

4.提交更新权限-点击为角色分配权限-注意这里调用element两个方法来记录你选中了那些：1个是全选中方法getCheckedKeys()，1个是半选中方法getHalfCheckedKeys,在把它们合并成数组[105,116,117,150,101,104]。注意接口提交的时候要的是字符串

    async showSetRightDialog(role) {

        console.log('角色信息',role);

         this.roleId=role.id   //存储下角色id,更新时使用

         this.setRightDialogVisible=true  //打开窗口

         this.defKeys = []  //打开时把上次的选中清空下，防止累加重复

         //1.请求所有权限列表

          let res=await allrights('tree')

          console.log('所有权限',res);

          if (res.meta.status === 200) {

             

              this.$message.success(res.meta.msg)

              this.rightslist=res.data

              console.log('当前角色下所有权限',role);

            let arr=[]

            function fn(role){

                if(! role.children ){ return arr.push(role.id)}

                role.children.forEach(item=>fn(item))

            }

            fn(role)

            console.log('默认选择权限',arr);

            this.defKeys=arr

          } 

    },

商品管理》商品列表

这个页面主要就是请求接口进行渲染 然后进行增删改查 *** 作

分类参数：页面里的tag标签实现思路  1.下拉选择@change绑定数组[1,2,3]，请求参数列表，传分类catID(数组中最后1个)和选择项tab切换里的属性activename(绑定v-model，通过name拿到)  2.拿到数据渲染，渲染到table表格里，别忘记给prop绑定自己数据字段  3.渲染的tag标签-给外面套一个作用域插槽,作用就是获取到当前行数据，给当前行绑定value,绑定是否可见  4.tag标签输入内容触发方法-把输入的内容加到原来数据里attr_vals里，合到一起提交  5.提交tab标签接口-需要大分类id,属性id,属性名字,tag拼接后的字符串,当前在哪个tab切换里

订单列表

思路- 0.布局-用到步骤条el-step组件,每个tab组件里套着表单组件。步骤条与tab如何联动？，可给tab声明1个激活索引v-model="activeIndex"同时每个tab子项给到name=“索引”，步骤条调用该索引   1.tab切换验证：切换下一个,得验证上一个是否选择？可用离开之前属性-:before-leave 调用方法，判断用户是否选择了下拉的3级列表  2.点击商品属性或商品参数面板，要根据上次选择的3级分类id请求对应数据。你怎么知道它点击的是商品属性，还是商品参数？点击时@tab-click="tabClicked"通过判断当前激活索引是多少，做相应的接口请求 4.提交必须的参数接口-看是否能提交进去,正则验证

点击上传-1.上传成功，会触发成功的事件，通达file文件里流信息，拿到临时路径存储后台要求的字段里 2.本地删除-从file流协议里找到你要删除的那个临时路径，从提交的数组中splice切掉 3.预览功能-通达file文件里流获取后台返回的正式地址，写到图片src里。

图片处理：

图片预览效果：

通过点击时当前文件流信息，获取后台会返回1个正式路径地址，你把此路径写入到图片中即可

  handlePreview(file){

           console.log(228,file);

          let url=file.response.data.url

           this.previewPath=url

           this.previewVisible=true

     },

   移除图片 *** 作：

在移除的时候删除的是临时路径 1. 如何获取将要删除的图片的临时路径 ?删除时会响应当前文件信息， 从提交表单图片pics数组中，找到这个图片对应的索引值。从该数组中splice切除掉

监听图片上传成功的事件-response[{pic:临时路径地址}]

    0.点击上传成功后 ,后台会返回临时路径和正式地址 1. 拼接得到一个图片信息对象 const picInfo = { pic: response.data.tmp_path } ！！注意，因为后端接口需要传pic字段，所以拼接下  2. 将图片信息对象picInfo，push 到表单图片pics数组中

   handleSuccess(res){

          console.log(230,res); //成功响应有临时路径，还有正式地址

          let picStr={'pic':res.data.tmp_path}   //注意要按照接口里要求的键拼接 {'pic':'上传成功后的临时路径'}

           this.addForm.pics.push(picStr)  

    },

添加商品：

 add(){

           

           this.$refs['addFormRef'].validate(async (valid) => {

             //验证通过

              if (valid) {

                //此处有bug-当提交商品失败后,如果用户没有在次选择级联会有报错提醒用户，选择级联

                // this.addForm.goods_cat= this.addForm.goods_cat.join(',')

                //解决办法—深拷贝一份,表单绑定时用数据，提交接口时用深复制后的数据

                const form =JSON.parse(JSON.stringify(this.addForm))

                //提交接口-商品分类要字符串，声明的时候是数组，最后要转换下

                form.goods_cat=form.goods_cat.join(',')

                // 处理动态参数

                this.manyTableData.forEach(item => {

                  const newInfo = {

                    attr_id: item.attr_id,

                    attr_value: item.newVals.join(' ')

                  }

                  this.addForm.attrs.push(newInfo)

                })

                // 处理静态属性

                this.onlyTableData.forEach(item => {

                   const newInfo = {

                    attr_id: item.attr_id,

                    attr_value: item.newVals.join(' ')

                  }

                  this.addForm.attrs.push(newInfo)

                })

               

               form.attrs = this.addForm.attrs

                console.log(form)

                //提交接口

              const res=await addgoods(form)

                if(res.meta.status ===201){

                     this.$message.success(res.meta.msg)

                     this.$router.push('/goods')

                }

              } else {

                this.$message.error('请填写必要的商品信息')

                return false;

              }

        });

       }

数据统计》数据报表

0.安装echarts,建议不要装最新的,装这个 cnpm i echarts@4.9.0 -S

1. 导入 echarts——找百度echarts文档类似图表 https://echarts.apache.org/examples/zh/index.html   复杂版本的echarts图表 https://www.makeapie.cn

!!!注意此处,首页加载优化代码抽离时-已经在vue.config.js里配置过代码拆分抽离，此处按照常理生产环境可以注释掉，但是因为开发环境也要用，所以不能注释。在此处不注释，生产环境打包时会抽离掉.从中获取我们想要的。