tweak mock

mock/article.js

@@ -27,48 +27,78 @@ for (let i = 0; i < count; i++) {
   }))
 }
 
-export default {
-  '/article/list': config => {
-    const { importance, type, title, page = 1, limit = 20, sort } = config.query
+export default [
+  {
+    url: '/article/list',
+    type: 'get',
+    response: config => {
+      const { importance, type, title, page = 1, limit = 20, sort } = config.query
 
-    let mockList = List.filter(item => {
-      if (importance && item.importance !== +importance) return false
-      if (type && item.type !== type) return false
-      if (title && item.title.indexOf(title) < 0) return false
-      return true
-    })
+      let mockList = List.filter(item => {
+        if (importance && item.importance !== +importance) return false
+        if (type && item.type !== type) return false
+        if (title && item.title.indexOf(title) < 0) return false
+        return true
+      })
 
-    if (sort === '-id') {
-      mockList = mockList.reverse()
-    }
+      if (sort === '-id') {
+        mockList = mockList.reverse()
+      }
 
-    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
 
-    return {
-      total: mockList.length,
-      items: pageList
-    }
-  },
-  '/article/detail': config => {
-    const { id } = config.query
-    for (const article of List) {
-      if (article.id === +id) {
-        return article
+      return {
+        total: mockList.length,
+        items: pageList
       }
     }
   },
-  '/article/pv': {
-    pvData: [
-      { key: 'PC', pv: 1024 },
-      { key: 'mobile', pv: 1024 },
-      { key: 'ios', pv: 1024 },
-      { key: 'android', pv: 1024 }
-    ]
+
+  {
+    url: '/article/detail',
+    type: 'get',
+    response: config => {
+      const { id } = config.query
+      for (const article of List) {
+        if (article.id === +id) {
+          return article
+        }
+      }
+    }
   },
-  '/article/create': {
-    data: 'success'
+
+  {
+    url: '/article/pv',
+    type: 'get',
+    response: _ => {
+      return { pvData: [
+        { key: 'PC', pv: 1024 },
+        { key: 'mobile', pv: 1024 },
+        { key: 'ios', pv: 1024 },
+        { key: 'android', pv: 1024 }
+      ]
+      }
+    }
   },
-  '/article/update': {
-    data: 'success'
+
+  {
+    url: '/article/create',
+    type: 'post',
+    response: _ => {
+      return {
+        data: 'success'
+      }
+    }
+  },
+
+  {
+    url: '/article/update',
+    type: 'post',
+    response: _ => {
+      return {
+        data: 'success'
+      }
+    }
   }
-}
+]
+

mock/index.js

@@ -33,18 +33,21 @@ export function mockXHR() {
     }
   }
 
-  for (const [route, respond] of Object.entries(mocks)) {
-    Mock.mock(new RegExp(`${route}`), XHR2ExpressReqWrap(respond))
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
   }
 }
 
-const responseFake = (route, respond) => (
-  {
-    route: new RegExp(`${MOCK_API_BASE}${route}`),
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${MOCK_API_BASE}${url}`),
+    type: type || 'get',
     response(req, res) {
       res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
     }
   }
-)
+}
 
-export default Object.keys(mocks).map(route => responseFake(route, mocks[route]))
+export default mocks.map(route => {
+  return responseFake(route.url, route.type, route.response)
+})

mock/login.js

@@ -15,19 +15,34 @@ const userMap = {
   }
 }
 
-export default {
-  '/login/login': config => {
-    const { username } = config.body
-    return userMap[username]
+export default [
+  {
+    url: '/login/login',
+    type: 'post',
+    response: config => {
+      const { username } = config.body
+      return userMap[username]
+    }
   },
-  '/login/logout': 'success',
-  '/user/info': config => {
-    const { token } = config.query
-    if (userMap[token]) {
-      return userMap[token]
-    } else {
-      return false
+  {
+    url: '/login/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        data: 'success'
+      }
+    }
+  },
+  {
+    url: '/user/info\.*',
+    type: 'get',
+    response: config => {
+      const { token } = config.query
+      if (userMap[token]) {
+        return userMap[token]
+      } else {
+        return false
+      }
     }
   }
-}
-
+]

mock/mocks.js

@@ -1,14 +1,12 @@
 import login from './login'
+import role from './role'
 import article from './article'
 import search from './remoteSearch'
-import transaction from './transaction'
-import role from './role'
 
-export default {
+export default [
   ...login,
+  ...role,
   ...article,
-  ...search,
-  ...transaction,
-  ...role
-}
+  ...search
+]
 

mock/remoteSearch.js

@@ -10,13 +10,34 @@ for (let i = 0; i < count; i++) {
 }
 NameList.push({ name: 'mockPan' })
 
-export default {
-  '/search/user': config => {
-    const { name } = config.query
-    const mockNameList = NameList.filter(item => {
-      const lowerCaseName = item.name.toLowerCase()
-      return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
-    })
-    return { items: mockNameList }
+export default [
+  {
+    url: '/search/user',
+    type: 'get',
+    response: config => {
+      const { name } = config.query
+      const mockNameList = NameList.filter(item => {
+        const lowerCaseName = item.name.toLowerCase()
+        return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
+      })
+      return { items: mockNameList }
+    }
+  },
+  {
+    url: '/transaction/list',
+    type: 'get',
+    response: _ => {
+      const count = 20
+      return {
+        total: count,
+        [`items|${count}`]: [{
+          order_no: '@guid()',
+          timestamp: +Mock.Random.date('T'),
+          username: '@name()',
+          price: '@float(1000, 15000, 0, 2)',
+          'status|1': ['success', 'pending']
+        }]
+      }
+    }
   }
-}
+]

mock/role/index.js

@@ -35,26 +35,34 @@ const roles = [
   }
 ]
 
-export default {
-  '/routes': () => {
-    return routes
+export default [
+  {
+    url: '/routes',
+    type: 'get',
+    response: routes
   },
-  '/roles': () => {
-    return roles
+  {
+    url: '/roles',
+    type: 'get',
+    response: roles
   },
-  '/roles/add': () => {
-    return Mock.mock('@integer(300, 5000)')
+  {
+    url: '/roles/add',
+    type: 'post',
+    response: Mock.mock('@integer(300, 5000)')
   },
-  '/roles/update/\/[A-Za-z0-9]': () => {
-    const res = {
+  {
+    url: '/roles/update/\/[A-Za-z0-9]',
+    type: 'put',
+    response: {
       data: 'success'
     }
-    return res
   },
-  '/roles/delete/\/[A-Za-z0-9]'() {
-    const res = {
+  {
+    url: '/roles/delete/\/[A-Za-z0-9]',
+    type: 'delete',
+    response: {
       data: 'success'
     }
-    return res
   }
-}
+]

mock/transaction.js

@@ -1,16 +0,0 @@
-import Mock from 'mockjs'
-
-const count = 20
-
-export default {
-  '/transaction/list': {
-    total: count,
-    [`items|${count}`]: [{
-      order_no: '@guid()',
-      timestamp: +Mock.Random.date('T'),
-      username: '@name()',
-      price: '@float(1000, 15000, 0, 2)',
-      'status|1': ['success', 'pending']
-    }]
-  }
-}

src/api/remoteSearch.js

@@ -7,3 +7,11 @@ export function userSearch(name) {
     params: { name }
   })
 }
+
+export function transactionList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}

src/api/transaction.js

@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function fetchList(query) {
-  return request({
-    url: '/transaction/list',
-    method: 'get',
-    params: query
-  })
-}

src/views/dashboard/admin/components/TransactionTable.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { fetchList } from '@/api/transaction'
+import { transactionList } from '@/api/remoteSearch'
 
 export default {
   filters: {
@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     fetchData() {
-      fetchList().then(response => {
+      transactionList().then(response => {
         this.list = response.data.items.slice(0, 8)
       })
     }

vue.config.js

@@ -51,10 +51,9 @@ module.exports = {
         extended: true
       }))
 
-      // import ES2015 module from common.js module
       const { default: mocks } = require('./mock')
       for (const mock of mocks) {
-        app.all(mock.route, mock.response)
+        app[mock.type](mock.url, mock.response)
       }
     }
   },