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() {