Vue(day9)

添加用户

1. 弹出对话框 ok
2. 绑定表单数据
3. 点击确定,发送请求,添加用户

   添加之后处理

• 1. 关闭 对话框
• 2. 刷新页面
• 3. 提示成功
• 4. 重置表单

假如有个需求, 只要关闭对话框,就要重置表单

监听对话框的关闭
事件 closed 对话框关闭了 会自动调用

// 添加 closed 事件
 @closed="dialogClosed"

// 监听对话框关闭
  dialogClosed() {
    // console.log('对话框关闭了')
    this.$refs.addUserForm.resetFields()
  }

删除用户

1. 注册事件 => 弹出确认框
2. 自定义列 传递数据

• @click='delUser(scope.row.id)'
• delUser(id)

3. 发送请求删除用户

• 格式 : axios.delete(url,config)

插槽

修改状态

1. 绑定当前用户自己的状态 v-model='scope.row.mg_state'
2. 注册 change 事件 传递当前对象 @change='stateChanged(scope.row)'
3. stateChanged(row) {
   const {id,mg_state:mgState} = row
   }
4. 格式 : axios.put(url,data,config)

总结格式 (注意一下)

其他 => github => axios

• axios.get(url,config) config=

• axios.delete(url,config)

• axios.post(url,data,config)

• axios.put(url,data,config)

axios 的三个问题

• 问题 1. 每次都要添加基准路径

  在 main.js 配置一下

axios.defaults.baseURL = 'https://api.example.com'

• 问题 2. 每个组件页面都要引入 axios

  main.js
  给 vue 的原型加 : Vue.prototype.$axios = axios
  所有的vue实例都可以使用 , 组件本质就是vue实例 this.$axios

• 问题 3. 每次请求都要携带 token

  使用 请求拦截器 , 每次发送请求都要经过这个拦截器, 我们就不要每次写代码的时候自己写 token 了
  让拦截器帮我们去添加这个 token

axios.interceptors.request.use(
  function(config) {
    config.headers.Authorization = localStorage.getItem('token')

    return config
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error)
  }
)

token 过期了怎么处理 ?? (响应拦截器)

7 天 1 月

• 方式 1 : 我们和后台约定好, 100010 (过期) , 过期了怎么办 ? 跳转到登录页

// 方式1 :
if (response.data.meta.status === 100010) {
  //1.跳转 过登录页
  this.$router.push('/login')
}

• 方式 2 : 和后台约定好, 7 天过期 (6 天的时候) , 返回给我们一个 token 字段

  返回给我们的 token 是最新的, 把本地旧的替换掉

// 方式2 :
if (response.data.data.token) {
  localStorage.setItem('token', token)
}

编辑用户

1. 弹出对话框 ok
2. 展示已知信息

   点击编辑小图标的时候, 获取当前行的对象 => 通过方法传递 => 赋值 给 editUserForm(表单绑定过的)

3. 发送请求