vue3+axios自動化api
theme: channing-cyan
程式碼生成器
概述
在實踐中，我們發現相關後臺請求的程式碼重複率非常高，新增和修改都費力，並且是沒技術含量的體力活。 但又必須要這樣做，不適合以公共函式的形式重用，為了解決這個重複的體力活，我們開發了程式碼生成器，用工具來代替體力活。
對於前後端的資料互動都可以歸納為是對實體的 新增、修改、刪除、查詢。
程式碼生成器的原理是也是按照對實體的增、刪、改、查規範，利用 NodeJs 根據介面的配置檔案（包含請求路徑、請求選項）按指定模板建立統一符合開發規範的 js 檔案到工程指定目錄下。
示例
以下通過一個使用者的實體配置，講解由程式碼生成器生成的程式碼檔案。
1、新建檔案 /coder/schemas/system.js 以下配置實現使用者的增、刪、改、列表查詢、詳情查詢、介面呼叫。
javascript
module.exports = {
name: '系統管理模組',
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 的約定
前後端分離開發最佳實踐是採用 RESTful 的介面形式進行通訊，在此我們對請求 URL 進行統一的規範約定。
| 請求型別 | 前端預定的方法字首 | 請求方法型別 | 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' });
分頁列表，請求引數約定
| 引數名 | 說明 | | --------- | ----------------------------------------------------------------------- | | pageSize | 每頁幾條資料 | | pageNum | 頁碼，從 1 開始 | | needCount | needCount：1，需要總數,處理不需要總條數的情況（後臺效能優化），預設為 1 |
分頁列表 響應示例
javascript
code: 200,
data: {
rows: [{
id: "2"
},{
id: "4"
},{
id: "5"
}],
total: 3
},
msg: "請求成功"
響應碼 code 的約定
200：執行成功
401：未登入（需要重新登入）
403：許可權不足
404: 訪問資源不存在
418: 聯合登陸失敗
500：系統內部錯誤（非業務程式碼裡顯式丟擲的異常，例如由於資料不正確導致空指標異常、資料庫異常等等）
請求跨域問題解決方案
前後端分離開發模式，由於前後端可以進行單獨部署，請求跨域問題很常見，解決方法主要有兩種方式：
1.採用 nginx 代理 2.介面響應頭開啟 Cross （推薦）
響應頭需要做以下配置, 同時後端需要開放 OPTIONS 型別的請求，跨域帶 cookie 的請求時，瀏覽器先試探性發送 OPTIONS 請求，成功後才發起真正的請求
javascript
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:請求的host
如:
javascript
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://www.fbknav.cn:98
如果介面不需跨域帶 cookie 驗證資訊，可以簡單設定
javascript
Access-Control-Allow-Origin: *
全域性配置
當後端提供的介面與約定的規範不一致的時候，可以通過配置進行相應的調整做適配，但建議還是按前端建議的約定規範。
配置說明coder/config.js
```javascript module.exports = { // 架構配置檔案目錄 schemasDir: "./schemas/",
// 模板檔案目錄 templatesDir: "./templates/",
// api請求地址字首 pathPrefix: "API_HOST",
// api支援的請求方法 methods: [ "add", // 新增資料 "edit", // 更新資料 "remove", // 刪除資料 "page", // 列表資料，響應資料含有分頁資訊，如：總數、當前頁碼、頁大小 "list", // 不分頁列表資料 "export", // 根據條件匯出 "info", // 詳情查詢 "unique", // 唯一校驗 ],
// 資料請求型別對應http請求方法的對映 methodTypeMap: { add: "post", edit: "put", remove: "delete", page: "get", list: "get", export: "get", info: "get", unique: "get", },
// 資料請求型別對應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: "根據條件匯出<%=cname%>", info: "獲取<%=cname%>單條資訊詳情", unique: "<%=cname%>欄位去重校驗", },
// 是否開啟生成批量刪除 batchEnabled: true,
// 生成api檔案路徑 outApiPath: "../src/api/", }; ```
模型配置
一個標準的模型配置檔案如下，建議相同的實體操作都在一個檔案裡配置。
javascript
module.exports = {
name: "系統管理模組", // 模組名稱，用來生成註釋文件
model: {
path: "/api/users", // 介面地址路徑，必須
title: "", // 介面說明，用來生成註釋文件
name: "", // 方法名，methods + name使用駝峰法生成完整的方法名，可選
prefix: "", // 介面地址字首，可選，預設為`coder/config.js`中的pathPrefix, 名稱必須要在 src/config/index.js中定義，否則報錯
methods: [
"add", // 新增資料
"edit", // 更新資料
"remove", // 刪除資料
"page", // 列表資料，響應資料含有分頁資訊，如：總數、當前頁碼、頁大小
"list", // 不分頁列表資料
"export", // 根據條件匯出
"info", // 詳情查詢
"unique", // 唯一校驗
], // 生成請求方法，沒有該引數時預設全部，如需要自定義，書寫名稱即可
options: {}, // axios 引數選項，可選
disabled: false, // 是否禁用該配置項， 設定為true，程式碼生成器將忽略該配置
},
};
1、實現對一個實體進行增、刪、改、查、匯出、唯一性校驗
javascript
module.exports = {
name: "系統管理模組",
model: {
path: "/api/user",
},
};
2、只需要增、刪、改、查中得某些操作，可以指定生成你需要的方法
javascript
module.exports = {
name: "系統管理模組",
model: {
path: '/api/user'，
// 需要生成的方法，可以按需要設定
methods: ['add', 'edit', 'remove', 'list', 'info'],
}
}
3、自定義方法配置
javascript
module.exports = {
name: "系統管理模組",
model: {
title: "登入介面",
name: "login",
methods: "auth",
path: "/auth/login",
options: {
method: "post",
},
},
};
4、指定請求介面地址字首
javascript
module.exports = {
name: "系統管理模組",
model: {
title: "登入介面",
name: "login",
methods: "auth",
prefix: "OTHER_PATH", // 設定與全域性配置不同的字首，OTHER_PATH 在 src/config/index.js中定義
path: "/auth/login",
options: {
method: "post",
},
},
};