feat: 使用 axios 扩展的方式实现 mock 数据

src/api/index.js

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

src/api/modules/component.markdown.js

@@ -1,13 +0,0 @@
-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

@@ -1,9 +1,23 @@
-export default ({ request }) => ({
+import { find, map, random } from 'lodash'
+
+const businessIssue142Db = [
+  { id: '1', name: '用户 1', address: '上海市普陀区金沙江路 1518 弄' },
+  { id: '2', name: '用户 2', address: '上海市普陀区金沙江路 1517 弄' },
+  { id: '3', name: '用户 3', address: '上海市普陀区金沙江路 1519 弄' },
+  { id: '4', name: '用户 4', address: '上海市普陀区金沙江路 1516 弄' }
+]
+
+export default ({ request, faker, mock, tools }) => ({
   /**
    * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
    * @description 列表
    */
   DEMO_BUSINESS_ISSUE_142_LIST () {
+    // 模拟数据
+    mock
+      .onAny('/demo/business/issues/142/fetch')
+      .reply(...tools.responseSuccess({ list: businessIssue142Db }))
+    // 接口请求
     return request({
       url: '/demo/business/issues/142/fetch',
       method: 'get'
@@ -12,8 +26,14 @@ export default ({ request }) => ({
   /**
    * @description https://d2.pub/d2-admin/preview/#/demo/business/issues/142
    * @description 详情
+   * @param {String} id 项目 ID
    */
-  DEMO_BUSINESS_ISSUE_142_DETAIL ({ id } = {}) {
+  DEMO_BUSINESS_ISSUE_142_DETAIL (id) {
+    // 模拟数据
+    mock
+      .onAny('/demo/business/issues/142/detail')
+      .reply(config => tools.responseSuccess(find(businessIssue142Db, { id: config.params.id })))
+    // 接口请求
     return request({
       url: '/demo/business/issues/142/detail',
       method: 'get',
@@ -26,16 +46,37 @@ export default ({ request }) => ({
    * @description https://d2.pub/d2-admin/preview/#/demo/business/table/1
    * @description 列表
    */
-  DEMO_BUSINESS_TABLE_1_LIST () {
+  DEMO_BUSINESS_TABLE_1_LIST (params = {}) {
+    // 模拟数据
+    mock
+      .onAny('/demo/business/table/1/fetch')
+      .reply(config => tools.responseSuccess({
+        page: {
+          total: 1000
+        },
+        list: map(Array(config.params.pageSize), () => ({
+          key: faker.random.uuid(),
+          value: [10, 100, 200, 500][random(0, 3)],
+          type: faker.random.boolean(),
+          admin: faker.name.firstName() + faker.name.lastName(),
+          adminNote: faker.random.words(),
+          dateTimeCreat: faker.date.past(),
+          used: faker.random.boolean(),
+          dateTimeUse: faker.date.past()
+        }))
+      }))
+    // 接口请求
     return request({
       url: '/demo/business/table/1/fetch',
-      method: 'get'
+      method: 'get',
+      params
     })
   },
   /**
    * @description 错误日志示例 请求一个不存在的地址
    */
   DEMO_LOG_AJAX () {
+    // 接口请求
     return request({
       url: '/invalid-url',
       method: 'get'

src/api/modules/file.js

@@ -0,0 +1,13 @@
+export default ({ request, faker, mock, tools }) => ({
+  /**
+   * @description 请求项目中的文件
+   * @param {String} url 文件地址
+   */
+  FILE_GET (url = '') {
+    return request({
+      baseURL: process.env.BASE_URL,
+      url,
+      method: 'get'
+    })
+  }
+})

src/api/modules/sys.user.js

@@ -1,9 +1,27 @@
-export default ({ request }) => ({
+import { find, assign } from 'lodash'
+
+const users = [
+  { username: 'admin', password: 'admin', uuid: 'admin-uuid', name: 'Admin' },
+  { username: 'editor', password: 'editor', uuid: 'editor-uuid', name: 'Editor' },
+  { username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1' }
+]
+
+export default ({ request, faker, mock, tools }) => ({
   /**
    * @description 登录
    * @param {Object} data 登录携带的信息
    */
   SYS_USER_LOGIN (data = {}) {
+    // 模拟数据
+    mock
+      .onAny('/login')
+      .reply(config => {
+        const user = find(users, tools.parse(config.data))
+        return user
+          ? tools.responseSuccess(assign({}, user, { token: faker.random.uuid() }))
+          : tools.responseError({}, '账号或密码不正确')
+      })
+    // 接口请求
     return request({
       url: '/login',
       method: 'post',

src/api/service.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import Adapter from 'axios-mock-adapter'
 import { Message } from 'element-ui'
 import { get } from 'lodash'
 import util from '@/libs/util'
@@ -97,6 +98,8 @@ service.interceptors.response.use(
   }
 )
 
+export const mock = new Adapter(service)
+
 export function request (config) {
   const token = util.cookies.get('token')
   const configDefault = {

src/api/tools.js

@@ -0,0 +1,46 @@
+/**
+ * @description 安全地解析 json 字符串
+ * @param {String} jsonString 需要解析的 json 字符串
+ * @param {String} defaultValue 默认值
+ */
+export function parse (jsonString = '{}', defaultValue = {}) {
+  let result = defaultValue
+  try {
+    result = JSON.parse(jsonString)
+  } catch (error) {
+    console.log(error)
+  }
+  return result
+}
+
+/**
+ * @description 接口请求返回
+ * @param {Any} data 返回值
+ * @param {String} msg 状态信息
+ * @param {Number} code 状态码
+ */
+export function response (data = {}, msg = '', code = 0) {
+  return [
+    200,
+    { code, msg, data }
+  ]
+}
+
+/**
+ * @description 接口请求返回 正确返回
+ * @param {Any} data 返回值
+ * @param {String} msg 状态信息
+ */
+export function responseSuccess (data = {}, msg = '成功') {
+  return response(data, msg)
+}
+
+/**
+ * @description 接口请求返回 错误返回
+ * @param {Any} data 返回值
+ * @param {String} msg 状态信息
+ * @param {Number} code 状态码
+ */
+export function responseError (data = {}, msg = '请求失败', code = 500) {
+  return response(data, msg, code)
+}