欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3 axios 實現(xiàn)自動化api配置詳解

 更新時間:2022年09月14日 11:22:33   作者:落筆憶夢  
這篇文章主要為大家介紹了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, 目錄結(jié)構(gòu)如下:

約定

代碼生成器生成的代碼需要與后端接口有預先的約定

請求 URL 的約定

前后端分離開發(fā)最佳實踐是采用 RESTful 的接口形式進行通信,在此我們對請求 URL 進行統(tǒng)一的規(guī)范約定。

請求類型前端預定的方法前綴請求方法類型api 地址的后綴映射
新增addpost/add
更新editput/edit
刪除removedelete/remove
分頁列表pageget/page
不分頁列表listget/list
導出exportget/export
詳情infoget/info
唯一校驗uniqueget/unique

請求傳參的約定

GET 請求需要中文轉(zhuǎn)碼,導出 export 請求responseType = 'blob'

if (config.method === 'get') config.paramsSerializer = (params) => qs.stringify(params, { arrayFormat: 'comma' });

分頁列表,請求參數(shù)約定

參數(shù)名說明
pageSize每頁幾條數(shù)據(jù)
pageNum頁碼,從 1 開始
needCountneedCount:1,需要總數(shù),處理不需要總條數(shù)的情況(后臺性能優(yōu)化),默認為 1

分頁列表 響應示例

code: 200,
data: {
    rows: [{
        id: "2"
    },{
        id: "4"
    },{
        id: "5"
    }],
    total: 3
},
msg: "請求成功"

響應碼 code 的約定

200:執(zhí)行成功
401:未登錄(需要重新登錄)
403:權(quán)限不足
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 = {
  // 架構(gòu)配置文件目錄
  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的資料請關注腳本之家其它相關文章!

相關文章

  • 利用Vue3和element-plus實現(xiàn)圖片上傳組件

    利用Vue3和element-plus實現(xiàn)圖片上傳組件

    element-plus提供了uploader組件,但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件,感興趣的可以了解一下
    2022-03-03
  • VUE3學習教程之全局組件和局部組件

    VUE3學習教程之全局組件和局部組件

    組件(Component)是Vue.js最強大的功能之一,組件可以擴展?HTML?元素,封裝可重用的代碼,這篇文章主要給大家介紹了關于VUE3學習教程之全局組件和局部組件的相關資料,需要的朋友可以參考下
    2022-01-01
  • vue編寫簡單的購物車功能

    vue編寫簡單的購物車功能

    這篇文章主要為大家詳細介紹了vue編寫簡單的購物車功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • 新手簡單了解vue

    新手簡單了解vue

    Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。下面我們來簡單了解下吧
    2019-05-05
  • Vue中的computed屬性詳解

    Vue中的computed屬性詳解

    這篇文章主要為大家介紹了Vue中的computed屬性,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-01-01
  • vue項目nginx二級域名配置方式

    vue項目nginx二級域名配置方式

    這篇文章主要介紹了vue項目nginx二級域名配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue實現(xiàn)將一個數(shù)組內(nèi)的相同數(shù)據(jù)進行合并

    vue實現(xiàn)將一個數(shù)組內(nèi)的相同數(shù)據(jù)進行合并

    今天小編就為大家分享一篇vue實現(xiàn)將一個數(shù)組內(nèi)的相同數(shù)據(jù)進行合并,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue3 拖拽hooks(可兼容移動端)和自定義指令拖拽的實現(xiàn)代碼

    vue3 拖拽hooks(可兼容移動端)和自定義指令拖拽的實現(xiàn)代碼

    這篇文章主要介紹了vue3 拖拽hooks(可兼容移動端)和自定義指令拖拽的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • vue中element 的upload組件發(fā)送請求給后端操作

    vue中element 的upload組件發(fā)送請求給后端操作

    這篇文章主要介紹了vue中element 的upload組件發(fā)送請求給后端操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue攔截器原理以及詳細使用方法

    Vue攔截器原理以及詳細使用方法

    這篇文章主要給大家介紹了關于Vue攔截器原理以及詳細使用的相關資料,Vue攔截器通常用于在發(fā)送請求或響應數(shù)據(jù)時對其進行一些處理或修改,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2023-08-08

最新評論