这是我参与「第四届青训营 」笔记创作活动的第12天

我在做PC端-CMS数据管理类项目，听老师讲完后，做的笔记

封装网络请求库axios

新建工具文件夹utils 建立request.js文件 对axio二次封装

const axios = theAxios.create({
  baseURL: '服务器基地址',
  timeout: 20000
})

然后新建接口文件夹api,建立index.js

// 注册
export const registerAPI = (obj) =>
  axios({
    url: '/api/reg',
    method: 'POST',
    data: obj
  })

对于所有接口, 接口名都统一在后缀加API, 便于识别。 而当接口过多时，就应该建立其他接口文件，例如articleAPI.js文件

export * from './articleAPI' // 即引入也导出

只需在index.js中写入这一行代码，

Vue.use作用

它其实是给Vue扩展一些功能，给Vue添加插件

Vue.use((Vue) => {
    Vue.pprototype.$message = () => {}
    Vue.component()
    // ...
})
Vue.use({
    install(Vue) {
        Vue.prototype.$a = 10
        Vue.component()
        // ...
    }
})

其实就是我们把函数或对象里的install方法交给Vue.use, 它会调用你的函数或对象里的install方法，那你就可以在函数或者在对象里的install方法里面添加一些Vue全局功能，全局属性，全局方法，全局组件，全局自定义组件......

el-form表单数据问题

问题：

页面一打开 先点击修改按钮（里面都是同步代码），数据回显，此时el-form挂载resetFields绑定的初始值（为数据回显的值）而不是data里面的空字符串， 而添加按钮里面，在对话框关闭时需清除表单里面的值，所以调用了resetFields方法， 再一次打开时表单时出现（数据回显里的值）而不是空字符串

原因：

vue数据改变（先执行同步所有代码）再去更新DOM（异步代码）

解决：

方式一

不掉用resetFields方法，手动将表单里的属性值置空（当表单里的数据过多时，略显麻烦）

方式二

      this.$nextTick(() => {
        this.dialogForm.cate_name = row.cate_name
        this.dialogForm.cate_alias = row.cate_alias
      })

让同步代码变为异步代码（让回显的值稍微慢点执行）定时器也行

图片文件

将图片文件做纯前端的预览

const files = e.target.files // 拿到图片文件对象

方式一

this.img = = URL.createObjectURL(files[0]) // 临时地址，只能在本机使用

方式二

      const fr = new FileReader()
      fr.readAsDataURL(files[0])
      fr.onload = e => { // onload等待把文件读成base64字符串后会触发onload事件函数
        this.img = e.target.result  // e.target.result的值就是读完的结果
      }