首先我们对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() {