vue3axios实现自动化api配置详解
概述
示例
约定
请求 URL 的约定
请求传参的约定
分页列表，请求参数约定
分页列表 响应示例
响应码 code 的约定
请求跨域问题解决方案
全局配置
配置说明coder/config.js
模型配置
1、实现对一个实体进行增、删、改、查、导出、唯一性校验
2、只需要增、删、改、查中得某些操作，可以指定生成你需要的方法
3、自定义方法配置
4、指定请求接口地址前缀
概述在实践中，我们发现上述的代码重复率非常高，新增和修改都费力，并且是没技术含量的体力活。 但又必须要这样做，不适合以公共函数的形式重用，为了解决这个重复的体力活，我们开发了代码生成器，用工具来代替体力活。
对于前后端的数据交互都可以归纳为是对实体的 新增、修改、删除、查询。
代码生成器的原理是也是按照对实体的增、删、改、查规范，利用 NodeJs 根据接口的配置文件（包含请求路径、请求选项）按指定模板创建统一符合开发规范的 js 文件到工程指定目录下。
示例以下通过一个用户的实体配置，讲解由代码生成器生成的代码文件。
1、新建文件 /coder/schemas/system.js 以下配置实现用户的增、删、改、列表查询、详情查询、接口调用。
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 进行统一的规范约定。
| 新增 | 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 |
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 请求，成功后才发起真正的请求
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: *
全局配置
当后端提供的接口与约定的规范不一致的时候，可以通过配置进行相应的调整做适配，但建议还是按前端建议的约定规范。
配置说明coder/config.jsmodule.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/",
};
模型配置
一个标准的模型配置文件如下，建议相同的实体操作都在一个文件里配置。
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、实现对一个实体进行增、删、改、查、导出、唯一性校验
module.exports = {
name: "系统管理模块",
model: {
path: "/api/user",
},
};
2、只需要增、删、改、查中得某些操作，可以指定生成你需要的方法
module.exports = {
name: "系统管理模块",
model: {
path: '/api/user'，
// 需要生成的方法，可以按需要设置
methods: ['add', 'edit', 'remove', 'list', 'info'],
}
}
3、自定义方法配置
module.exports = {
name: "系统管理模块",
model: {
title: "登录接口",
name: "login",
methods: "auth",
path: "/auth/login",
options: {
method: "post",
},
},
};
4、指定请求接口地址前缀
module.exports = {
name: "系统管理模块",
model: {
title: "登录接口",
name: "login",
methods: "auth",
prefix: "OTHER_PATH", // 设置与全局配置不同的前缀，OTHER_PATH 在 src/config/index.js中定义
path: "/auth/login",
options: {
method: "post",
},
},
};
以上就是vue3 axios 实现自动化api配置详解的详细内容，更多关于vue3 axios 自动化api的资料请关注软件开发网其它相关文章！