From 5d82985a767b64f07df48b5d576502009af90078 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Wed, 20 Feb 2019 13:16:24 +0800 Subject: [PATCH] perf[chore]: add mock.js to instead of easy-mock (#281) --- mock/index.js | 26 ++++++++++++++++++ mock/table.js | 20 ++++++++++++++ mock/user.js | 64 +++++++++++++++++++++++++++++++++++++++++++++ mock/utils.js | 14 ++++++++++ package.json | 1 + src/main.js | 10 +++++++ src/router/index.js | 2 +- 7 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 mock/index.js create mode 100644 mock/table.js create mode 100644 mock/user.js create mode 100644 mock/utils.js diff --git a/mock/index.js b/mock/index.js new file mode 100644 index 0000000..9eb5a47 --- /dev/null +++ b/mock/index.js @@ -0,0 +1,26 @@ +import Mock from 'mockjs' +import userAPI from './user' +import tableAPI from './table' + +// Fix an issue with setting withCredentials = true, cross-domain request lost cookies +// https://github.com/nuysoft/Mock/issues/300 +Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send +Mock.XHR.prototype.send = function() { + if (this.custom.xhr) { + this.custom.xhr.withCredentials = this.withCredentials || false + } + this.proxy_send(...arguments) +} +// Mock.setup({ +// timeout: '350-600' +// }) + +// User +Mock.mock(/\/user\/login/, 'post', userAPI.login) +Mock.mock(/\/user\/info/, 'get', userAPI.getInfo) +Mock.mock(/\/user\/logout/, 'post', userAPI.logout) + +// Table +Mock.mock(/\/table\/list/, 'get', tableAPI.list) + +export default Mock diff --git a/mock/table.js b/mock/table.js new file mode 100644 index 0000000..810b3c1 --- /dev/null +++ b/mock/table.js @@ -0,0 +1,20 @@ +import Mock from 'mockjs' + +export default { + list: () => { + const items = Mock.mock({ + 'items|30': [{ + id: '@id', + title: '@sentence(10, 20)', + 'status|1': ['published', 'draft', 'deleted'], + author: 'name', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + }] + }) + return { + code: 20000, + data: items + } + } +} diff --git a/mock/user.js b/mock/user.js new file mode 100644 index 0000000..81e82e0 --- /dev/null +++ b/mock/user.js @@ -0,0 +1,64 @@ +import { param2Obj } from './utils' + +const tokens = { + admin: { + token: 'admin-token' + }, + editor: { + token: 'editor-token' + } +} + +const users = { + 'admin-token': { + roles: ['admin'], + introduction: 'I am a super administrator', + avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', + name: 'Super Admin' + }, + 'editor-token': { + roles: ['editor'], + introduction: 'I am an editor', + avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', + name: 'Normal Editor' + } +} + +export default { + login: res => { + const { username } = JSON.parse(res.body) + const data = tokens[username] + + if (data) { + return { + code: 20000, + data + } + } + return { + code: 60204, + message: 'Account and password are incorrect.' + } + }, + getInfo: res => { + const { token } = param2Obj(res.url) + const info = users[token] + + if (info) { + return { + code: 20000, + data: info + } + } + return { + code: 50008, + message: 'Login failed, unable to get user details.' + } + }, + logout: () => { + return { + code: 20000, + data: 'success' + } + } +} diff --git a/mock/utils.js b/mock/utils.js new file mode 100644 index 0000000..7d5f7cb --- /dev/null +++ b/mock/utils.js @@ -0,0 +1,14 @@ +export function param2Obj(url) { + const search = url.split('?')[1] + if (!search) { + return {} + } + return JSON.parse( + '{"' + + decodeURIComponent(search) + .replace(/"/g, '\\"') + .replace(/&/g, '","') + .replace(/=/g, '":"') + + '"}' + ) +} diff --git a/package.json b/package.json index c72e11e..85d89e8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "axios": "0.18.0", "element-ui": "2.4.6", "js-cookie": "2.2.0", + "mockjs": "1.0.1-beta3", "normalize.css": "7.0.0", "nprogress": "0.2.0", "vue": "2.5.17", diff --git a/src/main.js b/src/main.js index 1432883..ed4e355 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,16 @@ import router from './router' import '@/icons' // icon import '@/permission' // permission control +/** + * This project originally used easy-mock to simulate data, + * but its official service is very unstable, + * and you can build your own service if you need it. + * So here I use Mock.js for local emulation, + * it will intercept your request, so you won't see the request in the network. + * If you remove `../mock` it will automatically request easy-mock data. + */ +import '../mock' // simulation data + Vue.use(ElementUI, { locale }) Vue.config.productionTip = false diff --git a/src/router/index.js b/src/router/index.js index 4ec88ae..3e74077 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -17,7 +17,7 @@ import Layout from '../views/layout/Layout' * redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb * name:'router-name' the name is used by (must set!!!) * meta : { - title: 'title' the name show in submenu and breadcrumb (recommend set) + title: 'title' the name show in subMenu and breadcrumb (recommend set) icon: 'svg-name' the icon show in the sidebar breadcrumb: false if false, the item will hidden in breadcrumb(default is true) }