vue3 axios 實現(xiàn)自動化api配置詳解
概述
在實踐中，我們發(fā)現(xiàn)上述的代碼重復率非常高，新增和修改都費力，并且是沒技術含量的體力活。 但又必須要這樣做，不適合以公共函數(shù)的形式重用，為了解決這個重復的體力活，我們開發(fā)了代碼生成器，用工具來代替體力活。
對于前后端的數(shù)據(jù)交互都可以歸納為是對實體的 新增、修改、刪除、查詢。
代碼生成器的原理是也是按照對實體的增、刪、改、查規(guī)范，利用 NodeJs 根據(jù)接口的配置文件（包含請求路徑、請求選項）按指定模板創(chuàng)建統(tǒng)一符合開發(fā)規(guī)范的 js 文件到工程指定目錄下。
示例
以下通過一個用戶的實體配置，講解由代碼生成器生成的代碼文件。
1、新建文件 /coder/schemas/system.js 以下配置實現(xiàn)用戶的增、刪、改、列表查詢、詳情查詢、接口調(diào)用。
module.exports = {
name: '系統(tǒng)管理模塊',
model: [
{
title: '菜單管理',
name: 'menu',
methods: ['add', 'remove', 'edit', 'list', 'info'],
path: '/system/menu',
},
TIP
新建實體配置文件必須要在/coder/schemas/目錄下，可以建目錄。
2、運行命令 npm run coder 生成代碼，代碼文件目錄在 src/api/system.js, 目錄結構如下：
約定
代碼生成器生成的代碼需要與后端接口有預先的約定
請求 URL 的約定
前后端分離開發(fā)最佳實踐是采用 RESTful 的接口形式進行通信，在此我們對請求 URL 進行統(tǒng)一的規(guī)范約定。
| 請求類型 | 前端預定的方法前綴 | 請求方法類型 | api 地址的后綴映射 |
|---|---|---|---|
| 新增 | add | post | /add |
| 更新 | edit | put | /edit |
| 刪除 | remove | delete | /remove |
| 分頁列表 | page | get | /page |
| 不分頁列表 | list | get | /list |
| 導出 | export | get | /export |
| 詳情 | info | get | /info |
| 唯一校驗 | unique | get | /unique |
請求傳參的約定
GET 請求需要中文轉碼，導出 export 請求responseType = 'blob'
if (config.method === 'get') config.paramsSerializer = (params) => qs.stringify(params, { arrayFormat: 'comma' });
分頁列表，請求參數(shù)約定
| 參數(shù)名 | 說明 |
|---|---|
| pageSize | 每頁幾條數(shù)據(jù) |
| pageNum | 頁碼，從 1 開始 |
| needCount | needCount：1，需要總數(shù),處理不需要總條數(shù)的情況（后臺性能優(yōu)化），默認為 1 |
分頁列表 響應示例
code: 200,
data: {
rows: [{
id: "2"
},{
id: "4"
},{
id: "5"
}],
total: 3
},
msg: "請求成功"
響應碼 code 的約定
200：執(zhí)行成功
401：未登錄（需要重新登錄）
403：權限不足
404: 訪問資源不存在
418: 聯(lián)合登陸失敗
500：系統(tǒng)內(nèi)部錯誤（非業(yè)務代碼里顯式拋出的異常，例如由于數(shù)據(jù)不正確導致空指針異常、數(shù)據(jù)庫異常等等）
請求跨域問題解決方案
前后端分離開發(fā)模式，由于前后端可以進行單獨部署，請求跨域問題很常見，解決方法主要有兩種方式：
1.采用 nginx 代理 2.接口響應頭開啟 Cross （推薦）
響應頭需要做以下配置, 同時后端需要開放 OPTIONS 類型的請求，跨域帶 cookie 的請求時，瀏覽器先試探性發(fā)送 OPTIONS 請求，成功后才發(fā)起真正的請求
Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:請求的host
如:
Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:http://www.fbknav.cn:98
如果接口不需跨域帶 cookie 驗證信息，可以簡單設置
Access-Control-Allow-Origin: *
全局配置
當后端提供的接口與約定的規(guī)范不一致的時候，可以通過配置進行相應的調(diào)整做適配，但建議還是按前端建議的約定規(guī)范。
配置說明coder/config.js
module.exports = {
// 架構配置文件目錄
schemasDir: "./schemas/",
// 模板文件目錄
templatesDir: "./templates/",
// api請求地址前綴
pathPrefix: "API_HOST",
// api支持的請求方法
methods: [
"add", // 新增數(shù)據(jù)
"edit", // 更新數(shù)據(jù)
"remove", // 刪除數(shù)據(jù)
"page", // 列表數(shù)據(jù)，響應數(shù)據(jù)含有分頁信息，如：總數(shù)、當前頁碼、頁大小
"list", // 不分頁列表數(shù)據(jù)
"export", // 根據(jù)條件導出
"info", // 詳情查詢
"unique", // 唯一校驗
],
// 數(shù)據(jù)請求類型對應http請求方法的映射
methodTypeMap: {
add: "post",
edit: "put",
remove: "delete",
page: "get",
list: "get",
export: "get",
info: "get",
unique: "get",
},
// 數(shù)據(jù)請求類型對應api地址的后綴映射
methodSuffixMap: {
add: "/add",
edit: "/edit",
remove: "/remove",
page: "/page",
list: "/list",
export: "/export",
info: "/info",
unique: "/unique",
},
// 請求方法對應的中文注釋
methodCommentMap: {
add: "新增<%=cname%>",
edit: "更新<%=cname%>",
remove: "刪除<%=cname%>",
page: "獲取<%=cname%>分頁列表",
list: "獲取<%=cname%>不分頁列表",
export: "根據(jù)條件導出<%=cname%>",
info: "獲取<%=cname%>單條信息詳情",
unique: "<%=cname%>字段去重校驗",
},
// 是否開啟生成批量刪除
batchEnabled: true,
// 生成api文件路徑
outApiPath: "../src/api/",
};
模型配置
一個標準的模型配置文件如下，建議相同的實體操作都在一個文件里配置。
module.exports = {
name: "系統(tǒng)管理模塊", // 模塊名稱，用來生成注釋文檔
model: {
path: "/api/users", // 接口地址路徑，必須
title: "", // 接口說明，用來生成注釋文檔
name: "", // 方法名，methods + name使用駝峰法生成完整的方法名，可選
prefix: "", // 接口地址前綴，可選，默認為`coder/config.js`中的pathPrefix, 名稱必須要在 src/config/index.js中定義，否則報錯
methods: [
"add", // 新增數(shù)據(jù)
"edit", // 更新數(shù)據(jù)
"remove", // 刪除數(shù)據(jù)
"page", // 列表數(shù)據(jù)，響應數(shù)據(jù)含有分頁信息，如：總數(shù)、當前頁碼、頁大小
"list", // 不分頁列表數(shù)據(jù)
"export", // 根據(jù)條件導出
"info", // 詳情查詢
"unique", // 唯一校驗
], // 生成請求方法，沒有該參數(shù)時默認全部，如需要自定義，書寫名稱即可
options: {}, // axios 參數(shù)選項，可選
disabled: false, // 是否禁用該配置項， 設置為true，代碼生成器將忽略該配置
},
};
1、實現(xiàn)對一個實體進行增、刪、改、查、導出、唯一性校驗
module.exports = {
name: "系統(tǒng)管理模塊",
model: {
path: "/api/user",
},
};
2、只需要增、刪、改、查中得某些操作，可以指定生成你需要的方法
module.exports = {
name: "系統(tǒng)管理模塊",
model: {
path: '/api/user'，
// 需要生成的方法，可以按需要設置
methods: ['add', 'edit', 'remove', 'list', 'info'],
}
}
3、自定義方法配置
module.exports = {
name: "系統(tǒng)管理模塊",
model: {
title: "登錄接口",
name: "login",
methods: "auth",
path: "/auth/login",
options: {
method: "post",
},
},
};
4、指定請求接口地址前綴
module.exports = {
name: "系統(tǒng)管理模塊",
model: {
title: "登錄接口",
name: "login",
methods: "auth",
prefix: "OTHER_PATH", // 設置與全局配置不同的前綴，OTHER_PATH 在 src/config/index.js中定義
path: "/auth/login",
options: {
method: "post",
},
},
};以上就是vue3 axios 實現(xiàn)自動化api配置詳解的詳細內(nèi)容，更多關于vue3 axios 自動化api的資料請關注腳本之家其它相關文章！
相關文章
electron-vite新一代electron開發(fā)構建工具
這篇文章主要介紹了electron-vite新一代electron開發(fā)構建工具，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Echarts實現(xiàn)一張圖現(xiàn)切換不同的X軸(實例代碼)
這篇文章主要介紹了Echarts 如何實現(xiàn)一張圖現(xiàn)切換不同的X軸,通過動圖給大家展示效果，實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下2021-11-11
flutter使用tauri實現(xiàn)一個一鍵視頻轉4K軟件
這篇文章主要為大家介紹了flutter使用tauri實現(xiàn)一個一鍵視頻轉4K軟件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue使用自定義的icon圖標的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
vue項目實現(xiàn)記住密碼到cookie功能示例(附源碼)
本篇文章主要介紹了vue項目實現(xiàn)記住密碼到cookie功能示例(附源碼)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
今天小編就為大家分享一篇vue組件開發(fā)之用戶無限添加自定義填寫表單的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue中使用md5進行數(shù)據(jù)加密的實現(xiàn)方法
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)安全是一個不可忽視的重要環(huán)節(jié),Vue.js作為一個流行的前端框架,不僅提供了強大的數(shù)據(jù)綁定和組件化功能,還支持與各種后端服務的集成,本文將探討如何在Vue應用中使用MD5算法來加密數(shù)據(jù),從而提升應用的安全性,需要的朋友可以參考下2024-10-10
本文通過實例代碼給大家介紹了vue生命周期和react生命周期對比 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
在日常業(yè)務開發(fā)中我們會經(jīng)常封裝一些業(yè)務組件,下面這篇文章主要給大家介紹了關于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12