之前程序員的寫法
image.png
例 xxxx.ts
// 先引入
import request from '@/utils/request'
/**
* 添加點(diǎn)位
* @param position_name 位置名稱
* @param is_enable 狀態(tài) 1有效0無(wú)效
*/
export const devicePositionAdd = (param: any) =>
request({
url: '/device/business/device/devicePositionAdd',
method: 'post',
data: param
})
···
缺點(diǎn)：
api文件夾內(nèi)層級(jí)過深
api文件下 文件 太多太多... （business系統(tǒng)下api文件下有50+的 .ts）
代碼冗余
// api文件
import request from '@/utils/request'
export const ··· = (param: any) =>
request({
url: ' ··· ',
method: 'post',
data: param
})
···
// 組件頁(yè)面
import { projectList, item, stadiumList ··· } from '@/api/stadium/data'
import { couponApi ··· } from '@/api/business/coupon'
···
以上代碼 重復(fù)太多
我的寫法
- 首先是 main.ts全局 注冊(cè) axios
import request from '@/utils/request'
// 在這里掛載全局 api request
declare module 'vue/types/vue' {
interface Vue {
$request: any
}
}
Vue.prototype.$request = function(url:string, params:object) {
return request({
url: url,
method: 'post',
data: params
})
}
- 在組件中使用 （兩種方法）
第一種
/*
* @api 接口
* @params 參數(shù)
*/
this.$request(api, params).then(res => {
···
}).catch(err => {
···
})
第二種
async
const res = await this.$request(api, param)
...
- api 映射
[圖片上傳失敗...(image-75c14-1593489367921)]
一個(gè)文件解決 整個(gè)系統(tǒng)的api， 不會(huì)造成代碼冗余的情況
- api 映射寫法的規(guī)范
a. 大寫
b. 下劃線
c. GET_LIST // 獲取數(shù)據(jù)
d. ADD_DATA // 新增數(shù)據(jù)
e. DEL_DATA // 刪除數(shù)據(jù)
f. UPDATE_DATA // 修改數(shù)據(jù)
g. GET_INFO // 查詢數(shù)據(jù)
h. 如果里面還有form ，則
FORM: {
GET_INFO:
ADD_DATA:
···
}
例 2.的圖片
- 配合mixins的使用
a. 首先組件引入
```
import { Vue, Component, Mixins } from 'vue-property-decorator'
// 引入api
import { SIGNUP } from '@/api/apiList'
// 引入混入
import { List } from '@/mixins/list'
export default class extends Mixins(List) {
public URLOBJ = SIGNUP
}
```
b. list.ts 混入
例
```
export class List extends Mixins(RouterPush) {
/**
* @description 混入中定義的api ， 會(huì)被組件頁(yè)面中的URLOBJ的數(shù)據(jù)覆蓋
* 這個(gè)頁(yè)面使用了這三個(gè)接口，typescript的語(yǔ)法規(guī)范中， 必須在本頁(yè)面聲明，才可以調(diào)用，
* 否則會(huì)報(bào)undefined ，目前沒有想到好的解決辦法
*/
public URLOBJ = {
GET_LIST: '',
DEL_DATA: '',
UPDATE_DATA: ''
}
public formFilter = {
}
public listLoading = false
public dataList = []
public count = 0
// 初始化 created 里面的方法會(huì)和組件的created方法合并， 并且 先執(zhí)行
created() {
this.handleFilter()
}
/**
* @description 列表過濾方法
*/
@Watch('formFilter', { deep: true })
public handleFilter() {
this.listLoading = true
// 這里直接使用 this.URLOBJ.GET_LIST
// 每個(gè)不同的組件可以引用不同的api , 實(shí)現(xiàn)一套方法， 多組件使用
// this.formFilter 也是相同原理
// 每個(gè)頁(yè)面 定義不同的過濾字段， 實(shí)現(xiàn)一套方法， 多組件使用
this.$request(this.URLOBJ.GET_LIST, this.formFilter).then(res => {
this.listLoading = false
if (res.code === 200) {
this.dataList = res.data.list
this.count = res.data.count
}
})
}
···
}
```
優(yōu)點(diǎn)：
api 文件夾下只有一個(gè)文件 ， 簡(jiǎn)單方便，易于后期維護(hù)
axios全局注冊(cè)， 省去每個(gè)頁(yè)面引入
規(guī)范 使得api可讀性高 （增刪改查）
使用混入 一套方法 多個(gè)組件使用，不用重復(fù)書寫相同代碼
兩個(gè)使用 ，則節(jié)省50%的代碼量 ， 三個(gè)頁(yè)面使用 節(jié)省 65%的代碼量 ， 四個(gè)組件 節(jié)省 75% ...依次遞增 ， 并且方便后期維護(hù)如果當(dāng)前組件業(yè)務(wù)邏輯 和 封裝的mixins 有不同， 組件單獨(dú)定義方法 ，則可以覆蓋， 靈活性高
mixin 還可以自定義合并策略 （默認(rèn)是同名覆蓋）
