vue3 axios 实现自动化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 进行统一的规范约定。

请求类型 前端预定的方法前缀 请求方法类型 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

分页列表 响应示例

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.js

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/",
};

模型配置

一个标准的模型配置文件如下,建议相同的实体操作都在一个文件里配置。

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的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue3在Setup中使用axios请求获取的值方式

    目录 Setup中使用axios请求获取的值 Vue3+Setup使用知识点 Setup中使用axios请求获取的值 上次我们使用axios给项目搞上了网络请求,从此项目数据不再是静态的.对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式,写此日记记录踩坑过程. axios返回的项目数据无法通过函数返回值返回,如何获取返回值呢? <script> import { defineComponent, reactive, onMounted, toRefs, ref } from &q

  • 关于vue3.0使用axios报错问题

    vue-cli3.0使用axios的时候出现错误,记录一下 报错信息: Uncaught TypeError: Cannot set property $axios of #<Vue> which has only a getterat eval (main.js?56d7:12)at Module../src/main.js (app.js:11102)at __webpack_require__ (app.js:724)at fn (app.js:101)at Object.0 (app.

  • vue3如何实现挂载并使用axios

    目录 vue3挂载并使用axios vue全局挂载axios vue3挂载并使用axios 首先在main.js中引入axios并挂载到app.config.globalProperties上 axios配置文件放置./assets/js/axios main.js import { createApp } from 'vue' import App from './App.vue' import './index.css' import axios from './assets/js/axio

  • Vue3如何使用axios发起网络请求

    目录 Vue3使用axios发起网络请求 1.何为Axios? 2.如何安装Axios 3.如何封装网络请求和全局实例化axios 4. api.js是什么? 5.http.js是什么? 6.request.js是什么? 7.如何在Vue文件中请求封装好的API呢? Vue3.0请求接口的例子 Vue3使用axios发起网络请求 即使是小型项目也会涉及到请求后端API,除非你的网站展示的是一些不需要维护的静态数据,第三篇文章我们来给Vue项目搞上axios. 1.何为Axios? 请看官方对Ax

  • vue3学习笔记简单封装axios示例实现

    目录 简介 openapi 基本配置 拦截器 api请求 数据渲染 简介 axios是一个基于promise的网络请求库,管理后台使用的场景通常 获取后端api数据,然后交给页面渲染 还是在前面的示例项目上操作,安装axios最新0.27.2版本 cd HELLO-WORLD npm install axios 复制代码 openapi 在网上找到一个开放的openapi地址,免费且无需认证就可以使用 方便开发时模拟接口数据,但不能使用在生产环境中 该openapi返回json数据,比较符合我们

  • Vue3全局挂载使用Axios学习实战

    目录 引言 一.全局挂载 二.全局使用 引言 在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI. 一.全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: import Vue from 'vue' import router from '@/router' impo

  • vue3 axios 实现自动化api配置详解

    目录 概述 示例 约定 请求 URL 的约定 请求传参的约定 分页列表,请求参数约定 分页列表 响应示例 响应码 code 的约定 请求跨域问题解决方案 全局配置 配置说明coder/config.js 模型配置 1.实现对一个实体进行增.删.改.查.导出.唯一性校验 2.只需要增.删.改.查中得某些操作,可以指定生成你需要的方法 3.自定义方法配置 4.指定请求接口地址前缀 概述 在实践中,我们发现上述的代码重复率非常高,新增和修改都费力,并且是没技术含量的体力活. 但又必须要这样做,不适合以

  • vue3+electron12+dll开发客户端配置详解

    当前使用的版本为 @vue/cli4 创建的 vue3.0 + typescript + electron 12 版本创建,其他版本暂未测试.网上资料良莠不齐,因此花费时间依次试验,达到一个目前最优解. 修改仓库源 由于electron版本的未知性,可能存在serve可用而build之后打开白屏的情况,因此需要谨慎对待.最好在版本可用的情况下commit一个版本,方便代码回滚,如果谁有更好的资料希望共享. 在开始配置前,可以将yarn和npm的rc文件稍作修改,使用命令或者文件直接修改.npmr

  • Vue3进阶主题Composition API使用详解

    目录 什么是Composition API 为什么Vue3推荐使用Composition API 总结 什么是Composition API Composition API 是 Vue3 中引入的一种新的 API 风格,旨在提高代码的可读性.可维护性和可重用性.Composition API 不同于 Vue2 中的 Options API,它采用了一种基于函数的编程方式,将组件内的逻辑分解成更小的可组合函数单元,以实现更加灵活和高效的代码组织方式. 为什么Vue3推荐使用Composition

  • Vue3中的组合式 API示例详解

    目录 为什么要有组合式 API? 更好的逻辑复用 更灵活的代码组织 更好的类型推导 生产包体积更小 与选项式 API 的关系 组合式 API 是否覆盖了所有场景? 可以同时使用两种 API 吗? 选项式 API 会被废弃吗? 组合式 API 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件.它是一个概括性的术语,涵盖了以下方面的 API: 响应性 API:例如ref()和reactive(),使我们可以直接创建响应式状态.计算属性和侦听器. 生命周期钩子:例如o

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • 史上最全Android build.gradle配置详解(小结)

    Android Studio是采用gradle来构建项目的,gradle是基于groovy语言的,如果只是用它构建普通Android项目的话,是可以不去学groovy的.当我们创建一个Android项目时会包含两个Android build.gradle配置详解文件,如下图: 一.Project的build.gradle文件: 对应的build.gradle代码如下: // Top-level build file where you can add configuration options

  • JavaScript axios安装与封装案例详解

    1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios' Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: true, // send cookies when cross

  • vue3 name 属性的使用技巧详解

    目录 引言 使用步骤 引言 如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理. 对于 vue@3.2.34 及以上版本,在使用 <script setup> 的单文件组件时,vue 会根据组件文件名,自动推导出 name 属性.也就是名为 MyComponent.vue 或 my-component.vue 的文件, name 属性为 MyComponent,而当你在组件内显示定义 name 属性时,会覆盖推

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

随机推荐