lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
FairyEver 2020-05-07 23:02:12 +08:00
parent 28acfdbb04
commit ac9b1ea26d
14 changed files with 161 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dependencies-cdn.js
View File

@ -6,6 +6,7 @@ module.exports = [
{ name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js', css: '' },
{ name: 'better-scroll', library: 'BScroll', js: 'https://cdn.jsdelivr.net/npm/better-scroll@1.15.2/dist/bscroll.min.js', css: '' },
{ name: 'element-ui', library: 'ELEMENT', js: 'https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js', css: 'https://cdn.jsdelivr.net/npm/element-ui@2.13.0/lib/theme-chalk/index.css' },
{ name: 'axios-mock-adapter', library: 'AxiosMockAdapter', js: 'https://cdn.jsdelivr.net/npm/axios-mock-adapter@1.18.1/dist/axios-mock-adapter.min.js', css: '' },
{ name: 'lodash', library: '_', js: 'https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js', css: '' },
{ name: 'ua-parser-js', library: 'UAParser', js: 'https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.20/dist/ua-parser.min.js', css: '' },
{ name: 'js-cookie', library: 'Cookies', js: 'https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js', css: '' },

2
package.json
View File

@ -15,6 +15,7 @@
"@d2-projects/vue-table-export": "^1.0.1",
"@d2-projects/vue-table-import": "^1.0.0",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.18.1",
"better-scroll": "^1.15.2",
"clipboard-polyfill": "^2.8.6",
"core-js": "^3.4.3",
@ -22,6 +23,7 @@
"dayjs": "^1.8.17",
"echarts": "^4.5.0",
"element-ui": "^2.13.1",
"faker": "^4.1.0",
"flex.css": "^1.1.7",
"fuse.js": "^3.4.6",
"github-markdown-css": "^3.0.1",

11
src/api/index.js
View File

@ -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
})))

13
src/api/modules/component.markdown.js
View File

@ -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'
})
}
})

49
src/api/modules/demo.js
View File

@ -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'

13
src/api/modules/file.js Normal file
View File

@ -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'
})
}
})

20
src/api/modules/sys.user.js
View File

@ -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',

3
src/api/service.js
View File

@ -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 = {

46
src/api/tools.js Normal file
View File

@ -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)
}

2
src/components/d2-markdown/index.vue
View File

@ -63,7 +63,7 @@ export default {
},
// 从 url 加载原始数据
async getReadme (url) {
const data = await this.$api.COMPONENT_MARKDOWN_GET({ url })
const data = await this.$api.FILE_GET(url)
return this.marked(data)
},
marked (data) {

2
src/views/demo/business/issues/142/index.vue
View File

@ -52,7 +52,7 @@ export default {
// 请求表格数据
async getTableData () {
try {
const res = this.$api.DEMO_BUSINESS_ISSUE_142_LIST()
const res = await this.$api.DEMO_BUSINESS_ISSUE_142_LIST()
this.crud.data = res.list
} catch (error) {
console.log(error)

2
src/views/demo/business/issues/142/mixins/index.js
View File

@ -27,7 +27,7 @@ export default {
this.resetFormData()
// 请求数据
try {
const res = await this.$api.DEMO_BUSINESS_ISSUE_142_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')

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

@ -65,6 +65,7 @@ export default {
this.$notify({
title: '模拟表格数据请求完毕'
})
console.log(res)
this.table = res.list
this.page.pageTotal = res.page.total
})

37
yarn.lock
View File

@ -1992,6 +1992,14 @@ aws4@^1.8.0:
resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
integrity sha1-JDkOatYThrCnRyZXVNKhchnehiw=
axios-mock-adapter@^1.18.1:
version "1.18.1"
resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.18.1.tgz#a2ba2638ef513d954793f96bde3e26bd4a1b7940"
integrity sha512-kFBZsG1Ma5yxjRGHq5KuuL55mPb7WzFULhypquEhzPg8SH5CXICb+qwC2CCA5u+GQVpiqGPwKSRkd3mBCs6gdw==
dependencies:
fast-deep-equal "^3.1.1"
is-buffer "^2.0.3"
axios@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
@ -2948,11 +2956,6 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
dependencies:
delayed-stream "~1.0.0"
commander@*:
version "4.0.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
integrity sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA==
commander@2.17.x, commander@~2.17.1:
version "2.17.1"
resolved "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz?cache=0&sync_timestamp=1573464045808&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@ -4551,11 +4554,21 @@ extsprintf@^1.2.0:
resolved "https://registry.npm.taobao.org/extsprintf/download/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
faker@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
integrity sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=
fast-deep-equal@^2.0.1:
version "2.0.1"
resolved "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-2.0.1.tgz?cache=0&sync_timestamp=1575383774695&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
fast-deep-equal@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
fast-diff@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
@ -5713,7 +5726,7 @@ is-buffer@^1.1.5:
resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
integrity sha1-76ouqdqg16suoTqXsritUf776L4=
is-buffer@^2.0.2, is-buffer@~2.0.3:
is-buffer@^2.0.2, is-buffer@^2.0.3, is-buffer@~2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
@ -7234,13 +7247,6 @@ mkdirp@0.5.1, mkdirp@0.x, mkdirp@^0.5.1, mkdirp@~0.5.1:
dependencies:
minimist "0.0.8"
mockjs@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/mockjs/-/mockjs-1.1.0.tgz#e6a0c378e91906dbaff20911cc0273b3c7d75b06"
integrity sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==
dependencies:
commander "*"
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -8689,11 +8695,6 @@ qs@6.7.0:
resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=
qs@^6.9.1:
version "6.9.1"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.1.tgz#20082c65cb78223635ab1a9eaca8875a29bf8ec9"
integrity sha512-Cxm7/SS/y/Z3MHWSxXb8lIFqgqBowP5JMlTUFyJN88y0SGQhVmZnqFK/PeuMX9LzUyWsqqhNxIyg0jlzq946yA==
qs@~6.5.2:
version "6.5.2"
resolved "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"