perf[chore]: add mock.js to instead of easy-mock (#281)

mock/index.js

+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

mock/table.js

+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
+    }
+  }
+}

mock/user.js

+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'
+    }
+  }
+}

mock/utils.js

+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"') +
+      '"}'
+  )
+}

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",

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

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 <keep-alive> (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)
   }