vue&element項目實戰 之api模塊化與公共字典

4.api模塊化配置

步驟一:編寫字典api即dic.js

import request from '@/utils/request'
// 查詢字典列表
export const getDicList = (param) => request({ url: '/sys-dictionary/queryList', params: param, method: 'post' })
// 刪除字典
export const deleteDic = (id) => request({ url: `/sys-dictionary/delete?id=${id}`, method: 'post' })
// 刪除字典
export const saveOrUpdateDic = (param) => request({ url: '/sys-dictionary/saveOrUpdate', params: param, method: 'post' })

 

步驟二:編寫index.js,進行統一模塊引入

import * as user from '@/api/user'
import * as dic from '@/api/dic'

export default {
  user,
  dic
}

 

步驟三:將api的index掛載到vue實例上,即在main.js中添加如下2行代碼

// 引入api文件
import api from '@/api/index'
// 將api接口掛載到vue實例上
Vue.prototype.$api = api

處理完成後的結果如下:

 以後要加入新的模塊只需要在index中引入即可

5.公共字典

步驟一:將這幾個工具js拷貝到項目的 utils路徑下:

步驟二:在App.vue中加載字典基礎數據

<script>
import { EnumUtility } from '@/utils/EnumUtility'
export default {
  name: 'App',
  mounted() {
    this.queryDicList()
  },
  methods: {
    async queryDicList() {
      const param = {
        status: 0
      }
      const result = await this.$api.dic.getDicList(param)
      // eslint-disable-next-line no-cond-assign, no-constant-condition
      if (result.code = '100') {
        const enumUtility = new EnumUtility()
        enumUtility.Set(result.data)
      }
    }
  }
}
</script>

 

 步驟三:測試

訪問頁面看到如下說明字典數據已加載完成

 

 完美!