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