feat: 优化接口配置设计,注册的网络请求会自动注册到 vue 原型 $api 上,修改了一些旧的接口调用方式

src/api/components.markdown.js

@@ -1,9 +0,0 @@
-import request from '@/plugin/axios'
-
-export function componentsMarkdownBase (url) {
-  return request({
-    baseURL: process.env.BASE_URL,
-    url,
-    method: 'get'
-  })
-}

src/api/demo.business.issues.142.js

@@ -1,18 +0,0 @@
-import request from '@/plugin/axios'
-
-export function fetch () {
-  return request({
-    url: '/demo/business/issues/142/fetch',
-    method: 'get'
-  })
-}
-
-export function detail (id) {
-  return request({
-    url: '/demo/business/issues/142/detail',
-    method: 'get',
-    params: {
-      id
-    }
-  })
-}

src/api/demo.business.table.1.js

@@ -1,9 +0,0 @@
-import request from '@/plugin/axios'
-
-export function businessTable1List (params) {
-  return request({
-    url: '/demo/business/table/1/fetch',
-    method: 'get',
-    params
-  })
-}

src/api/demo.playground.log.ajax.js

@@ -1,8 +0,0 @@
-import request from '@/plugin/axios'
-
-export function getInvalidUrl () {
-  return request({
-    url: '/invalid-url',
-    method: 'get'
-  })
-}

src/api/demo.plugins.mocks.ajax.js

@@ -1,8 +0,0 @@
-import request from '@/plugin/axios'
-
-export function pluginMocksAjax () {
-  return request({
-    url: '/demo/plugins/mock/ajax',
-    method: 'get'
-  })
-}

src/api/index.js

@@ -0,0 +1,7 @@
+import { assign, map } from 'lodash'
+import { request } from './service'
+
+const files = require.context('./modules', false, /\.js$/)
+const generators = files.keys().map(key => files(key).default)
+
+export default assign({}, ...map(generators, generator => generator({ request })))

src/api/modules/component.markdown.js

@@ -0,0 +1,13 @@
+export default ({ request }) => ({
+  /**
+   * @description 登录
+   * @param {Object} data 登录携带的信息
+   */
+  COMPONENT_MARKDOWN_GET ({ url = '' } = {}) {
+    return request({
+      baseURL: process.env.BASE_URL,
+      url,
+      method: 'get'
+    })
+  }
+})

src/api/modules/demo.js

@@ -0,0 +1,44 @@
+export default ({ request }) => ({
+  /**
+   * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
+   * @description 列表
+   */
+  DEMO_BUSINESS_ISSUE_142_LIST () {
+    return request({
+      url: '/demo/business/issues/142/fetch',
+      method: 'get'
+    })
+  },
+  /**
+   * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
+   * @description 详情
+   */
+  DEMO_BUSINESS_ISSUE_142_DETAIL ({ id } = {}) {
+    return request({
+      url: '/demo/business/issues/142/detail',
+      method: 'get',
+      params: {
+        id
+      }
+    })
+  },
+  /**
+   * @description https://d2.pub/d2-admin/preview/#/demo/business/table/1
+   * @description 列表
+   */
+  DEMO_BUSINESS_TABLE_1_LIST () {
+    return request({
+      url: '/demo/business/table/1/fetch',
+      method: 'get'
+    })
+  },
+  /**
+   * @description 错误日志示例 请求一个不存在的地址
+   */
+  DEMO_LOG_AJAX () {
+    return request({
+      url: '/invalid-url',
+      method: 'get'
+    })
+  }
+})

src/api/modules/sys.user.js

@@ -0,0 +1,13 @@
+export default ({ request }) => ({
+  /**
+   * @description 登录
+   * @param {Object} data 登录携带的信息
+   */
+  SYS_USER_LOGIN (data = {}) {
+    return request({
+      url: '/login',
+      method: 'post',
+      data
+    })
+  }
+})

src/api/service.js

@@ -1,7 +1,8 @@
-import store from '@/store'
 import axios from 'axios'
 import { Message } from 'element-ui'
+import { get } from 'lodash'
 import util from '@/libs/util'
+import store from '@/store'
 
 // 创建一个错误
 function errorCreate (msg) {
@@ -34,20 +35,11 @@ function errorLog (error) {
 }
 
 // 创建一个 axios 实例
-const service = axios.create({
-  baseURL: process.env.VUE_APP_API,
-  timeout: 5000 // 请求超时时间
-})
+const service = axios.create()
 
 // 请求拦截器
 service.interceptors.request.use(
-  config => {
-    // 在请求发送之前做一些处理
-    const token = util.cookies.get('token')
-    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
-    config.headers['X-Token'] = token
-    return config
-  },
+  config => config,
   error => {
     // 发送失败
     console.log(error)
@@ -105,4 +97,16 @@ service.interceptors.response.use(
   }
 )
 
-export default service
+export function request (config) {
+  const token = util.cookies.get('token')
+  const configDefault = {
+    headers: {
+      Authorization: token,
+      'Content-Type': get(config, 'headers.Content-Type', 'application/json')
+    },
+    timeout: 5000,
+    baseURL: process.env.VUE_APP_API,
+    data: {}
+  }
+  return service(Object.assign(configDefault, config))
+}

src/api/sys.login.js

@@ -1,9 +0,0 @@
-import request from '@/plugin/axios'
-
-export function accountLogin (data) {
-  return request({
-    url: '/login',
-    method: 'post',
-    data
-  })
-}

src/components/d2-markdown/index.vue

@@ -12,7 +12,6 @@ import marked from 'marked'
 import highlight from 'highlight.js'
 import bandupan from './plugin/baidupan'
 import 'github-markdown-css'
-import { componentsMarkdownBase } from '@api/components.markdown'
 export default {
   name: 'd2-markdown',
   props: {
@@ -64,7 +63,7 @@ export default {
     },
     // 从 url 加载原始数据
     async getReadme (url) {
-      const data = await componentsMarkdownBase(url)
+      const data = await this.$api.COMPONENT_MARKDOWN_GET({ url })
       return this.marked(data)
     },
     marked (data) {

src/plugin/api/index.js

@@ -0,0 +1,7 @@
+import api from '@/api'
+
+export default {
+  install (Vue) {
+    Vue.prototype.$api = api
+  }
+}

src/plugin/d2admin/index.js

@@ -11,6 +11,7 @@ import '@/assets/svg-icons'
 import i18n from '@/i18n.js'
 
 // 功能插件
+import pluginApi from '@/plugin/api'
 import pluginError from '@/plugin/error'
 import pluginLog from '@/plugin/log'
 import pluginOpen from '@/plugin/open'
@@ -33,6 +34,7 @@ export default {
       i18n: (key, value) => i18n.t(key, value)
     })
     // 插件
+    Vue.use(pluginApi)
     Vue.use(pluginError)
     Vue.use(pluginLog)
     Vue.use(pluginOpen)

src/store/modules/d2admin/modules/account.js

@@ -1,7 +1,7 @@
 import { Message, MessageBox } from 'element-ui'
 import util from '@/libs/util.js'
 import router from '@/router'
-import { accountLogin } from '@api/sys.login'
+import api from '@/api'
 
 export default {
   namespaced: true,
@@ -17,7 +17,7 @@ export default {
       username = '',
       password = ''
     } = {}) {
-      const res = await accountLogin({ username, password })
+      const res = await api.SYS_USER_LOGIN({ username, password })
       // 设置 cookie 一定要存 uuid 和 token 两个 cookie
       // 整个系统依赖这两个数据进行校验和存储
       // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复

src/views/demo/business/issues/142/index.vue

@@ -13,11 +13,6 @@
 </template>
 
 <script>
-// API
-import {
-  fetch
-} from '@/api/demo.business.issues.142'
-
 export default {
   data () {
     return {
@@ -55,12 +50,13 @@ export default {
   },
   methods: {
     // 请求表格数据
-    getTableData () {
-      fetch()
-        .then(res => {
-          this.crud.data = res.list
-        })
-        .catch(err => console.log(err))
+    async getTableData () {
+      try {
+        const res = this.$api.DEMO_BUSINESS_ISSUE_142_LIST()
+        this.crud.data = res.list
+      } catch (error) {
+        console.log(error)
+      }
     },
     // 跳转到编辑页面
     goToEditPage (name, id) {

src/views/demo/business/issues/142/mixins/index.js

@@ -1,7 +1,3 @@
-import {
-  detail
-} from '@api/demo.business.issues.142'
-
 export default {
   props: {
     id: {
@@ -31,7 +27,7 @@ export default {
       this.resetFormData()
       // 请求数据
       try {
-        const res = await detail(id)
+        const res = await this.$api.DEMO_BUSINESS_ISSUE_142_DETAIL({ id })
         const { name, address } = res
         this.form = { name, address }
         this.$message.success('getFormData')

src/views/demo/business/table/1/index.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import { businessTable1List } from '@api/demo.business.table.1'
 export default {
   // name 值和本页的 $route.name 一致才可以缓存页面
   name: 'demo-business-table-1',
@@ -57,7 +56,7 @@ export default {
       this.$notify({
         title: '开始请求模拟表格数据'
       })
-      businessTable1List({
+      this.$api.DEMO_BUSINESS_TABLE_1_LIST({
         ...form,
         ...this.page
       })

src/views/demo/d2-crud/demo29/code.js

@@ -10,8 +10,6 @@ export default `<template>
 </template>
 
 <script>
-import { businessTable1List } from '@api/demo.business.table.1'
-
 export default {
   data () {
     return {
@@ -57,7 +55,7 @@ export default {
     },
     fetchData () {
       this.loading = true
-      businessTable1List({
+      this.$api.DEMO_BUSINESS_TABLE_1_LIST({
         ...this.pagination
       }).then(res => {
         this.data = res.list

src/views/demo/d2-crud/demo29/index.vue

@@ -24,7 +24,6 @@
 import '../install'
 import doc from './doc.md'
 import code from './code.js'
-import { businessTable1List } from '@api/demo.business.table.1'
 
 export default {
   data () {
@@ -73,7 +72,7 @@ export default {
     },
     fetchData () {
       this.loading = true
-      businessTable1List({
+      this.$api.DEMO_BUSINESS_TABLE_1_LIST({
         ...this.pagination
       }).then(res => {
         this.data = res.list

src/views/demo/playground/log/ajax/index.vue

@@ -8,11 +8,10 @@
 </template>
 
 <script>
-import { getInvalidUrl } from '@api/demo.playground.log.ajax.js'
 export default {
   methods: {
     handleClick () {
-      getInvalidUrl()
+      this.$api.DEMO_LOG_AJAX()
     }
   }
 }