增加mock支持

Author: hooray

.env.development

@@ -1,7 +1,7 @@
 # 页面标题
 VUE_APP_TITLE = 测试环境
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VUE_APP_API_ROOT = http://yigou.ketao.com/api/
+VUE_APP_API_ROOT = /
 # 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF
 # 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn
 VUE_APP_CDN = OFF

.env.production

@@ -1,7 +1,7 @@
 # 页面标题
 VUE_APP_TITLE = 网站标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VUE_APP_API_ROOT = http://yigou.ketao.com/api/
+VUE_APP_API_ROOT = /
 # 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF
 # 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn
 VUE_APP_CDN = OFF

package.json

@@ -16,8 +16,10 @@
         "core-js": "^3.6.4",
         "dayjs": "^1.9.4",
         "js-cookie": "^2.2.1",
+        "mockjs": "^1.1.0",
         "nprogress": "^0.2.0",
         "vue": "^2.6.12",
+        "vue-cli-plugin-mock": "^1.0.2",
         "vue-meta": "^2.4.0",
         "vue-router": "^3.4.8",
         "vuex": "^3.5.1"

src/api/index.js

@@ -13,7 +13,7 @@ const toLogin = () => {
 }
 
 const api = axios.create({
-    baseURL: process.env.NODE_ENV !== 'development' && process.env.VUE_APP_API_ROOT,
+    baseURL: process.env.VUE_APP_API_ROOT,
     timeout: 10000,
     responseType: 'json'
 })

src/main.js

@@ -26,6 +26,8 @@ const req = require.context('./assets/icons', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 requireAll(req)
 
+import './mock'
+
 Vue.config.productionTip = false
 
 new Vue({

src/mock/index.js

@@ -0,0 +1,49 @@
+const Mock = require('mockjs')
+
+export function param2Obj(url) {
+    const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+    if (!search) {
+        return {}
+    }
+    const obj = {}
+    const searchArr = search.split('&')
+    searchArr.forEach(v => {
+        const index = v.indexOf('=')
+        if (index !== -1) {
+            const name = v.substring(0, index)
+            const val = v.substring(index + 1, v.length)
+            obj[name] = val
+        }
+    })
+    return obj
+}
+
+function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+        let result = null
+        if (respond instanceof Function) {
+            const { body, type, url } = options
+            // https://expressjs.com/en/4x/api.html#req
+            result = respond({
+                method: type,
+                body: JSON.parse(body),
+                query: param2Obj(url)
+            })
+        } else {
+            result = respond
+        }
+        return Mock.mock(result)
+    }
+}
+const mocksContext = require.context('./modules/', true, /.js$/)
+mocksContext.keys().forEach(file_name => {
+    // 获取文件中的 default 模块
+    const mocks = mocksContext(file_name)
+    for (const mock of mocks) {
+        Mock.mock(
+            new RegExp(`${process.env.VUE_APP_API_ROOT}mock/${mock.url}`),
+            mock.type || 'get',
+            XHR2ExpressReqWrap(mock.result)
+        )
+    }
+})

src/mock/modules/news.js

@@ -0,0 +1,19 @@
+module.exports = [
+    {
+        url: 'news/list',
+        type: 'get',
+        result: () => {
+            return {
+                error: '',
+                status: 1,
+                data: {
+                    'list|5-10': [
+                        {
+                            'title': '@ctitle'
+                        }
+                    ]
+                }
+            }
+        }
+    }
+]

src/mock/server-modules/news.js

@@ -0,0 +1,17 @@
+const Mock = require('mockjs')
+
+export default {
+    'GET /mock/news/list': (req, res) => {
+        return res.json({
+            error: '',
+            status: 1,
+            data: Mock.mock({
+                'list|5-10': [
+                    {
+                        'title': '@ctitle'
+                    }
+                ]
+            })
+        })
+    }
+}

src/mock/server.js

@@ -0,0 +1,8 @@
+let mockMap = {}
+
+const mocksContext = require.context('./server-modules/', false, /.js$/)
+mocksContext.keys().forEach(file_name => {
+    mockMap = Object.assign(mockMap, mocksContext(file_name).default)
+})
+
+export default mockMap

src/views/example/axios.vue

@@ -1,33 +1,27 @@
 <template>
     <div>
-        <button type="button" @click="getInfo">获取数据</button>
-        <img v-for="(item, index) in banner" :key="index" :src="item.image">
+        <button type="button" @click="getInfo">获取 mock 数据</button>
+        <div>
+            <p v-for="(item, index) in news" :key="index">{{ item.title }}</p>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     data() {
         return {
-            banner: []
+            news: []
         }
     },
     methods: {
         getInfo() {
             Promise.all([
-                this.$api.get('banner/list', {
-                    params: {
-                        categoryid: 1
-                    }
-                }),
-                this.$api.get('banner/list', {
-                    params: {
-                        categoryid: 2
-                    }
-                })
+                this.$api.get('mock/news/list'),
+                this.$api.get('mock/news/list')
             ]).then(res => {
-                this.banner = res[0].data.banner.concat(
-                    res[1].data.banner
+                this.news = res[0].data.list.concat(
+                    res[1].data.list
                 )
             })
         }

vue.config.js

@@ -57,13 +57,23 @@ module.exports = {
     productionSourceMap: false,
     devServer: {
         open: true,
-        // 开发环境默认开启反向代理，如果不需要请自行注释
-        proxy: {
-            '/': {
-                target: process.env.VUE_APP_API_ROOT,
-                changeOrigin: true
-            }
-        }
+        // proxy: {
+        //     '/': {
+        //         target: process.env.VUE_APP_API_ROOT,
+        //         changeOrigin: true
+        //     }
+        // },
+        // 用于 mock-server
+        // proxy: {
+        //     '/mock': {
+        //         target: '/',
+        //         changeOrigin: true
+        //     },
+        //     '/': {
+        //         target: process.env.VUE_APP_API_ROOT,
+        //         changeOrigin: true
+        //     }
+        // },
     },
     configureWebpack: config => {
         config.resolve.modules = ['node_modules', 'assets/sprites']
@@ -103,6 +113,11 @@ module.exports = {
         lintStyleOnBuild: true,
         stylelint: {
             fix: true
+        },
+        mock: {
+            entry: './src/mock/server.js',
+            debug: true,
+            disable: true
         }
     },
     chainWebpack: config => {

yarn.lock

@@ -2131,7 +2131,7 @@ bn.js@^5.0.0, bn.js@^5.1.1:
   resolved "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
   integrity sha1-vsoAVAj2Quvr6oCwQrTRjSrA7ms=
 
-[email protected]:
+[email protected], body-parser@^1.18.3:
   version "1.19.0"
   resolved "https://registry.npm.taobao.org/body-parser/download/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
   integrity sha1-lrJwnlfJxOCab9Zqj9l5hE9p8Io=
@@ -2838,6 +2838,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@*, commander@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npm.taobao.org/commander/download/commander-6.2.0.tgz?cache=0&sync_timestamp=1605992729751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75"
+  integrity sha1-uZC/uKwDCu3G0RvATRSI/+9W23U=
+
 [email protected]:
   version "2.17.1"
   resolved "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz?cache=0&sync_timestamp=1605992729751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -2853,11 +2858,6 @@ commander@^4.1.1:
   resolved "https://registry.npm.taobao.org/commander/download/commander-4.1.1.tgz?cache=0&sync_timestamp=1605992729751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha1-n9YCvZNilOnp70aj9NaWQESxgGg=
 
-commander@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.npm.taobao.org/commander/download/commander-6.2.0.tgz?cache=0&sync_timestamp=1605992729751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75"
-  integrity sha1-uZC/uKwDCu3G0RvATRSI/+9W23U=
-
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.npm.taobao.org/commander/download/commander-2.19.0.tgz?cache=0&sync_timestamp=1605992729751&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -3359,7 +3359,7 @@ [email protected], debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.1, debug@^3.2.5:
+debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.7"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.7.tgz?cache=0&sync_timestamp=1606566568533&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha1-clgLfpFF+zm2Z2+cXl+xALk0F5o=
@@ -4141,6 +4141,16 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+express-mock-restful@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npm.taobao.org/express-mock-restful/download/express-mock-restful-1.1.2.tgz#7c78bd61811ec00d20c6a36d4058044c79d4a839"
+  integrity sha1-fHi9YYEewA0gxqNtQFgETHnUqDk=
+  dependencies:
+    body-parser "^1.18.3"
+    chalk "^2.4.1"
+    debug "^3.1.0"
+    path-to-regexp "^2.2.1"
+
 express@^4.16.3, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.npm.taobao.org/express/download/express-4.17.1.tgz?cache=0&sync_timestamp=1592843208199&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fexpress%2Fdownload%2Fexpress-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -6713,6 +6723,13 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
 
+mockjs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/mockjs/download/mockjs-1.1.0.tgz#e6a0c378e91906dbaff20911cc0273b3c7d75b06"
+  integrity sha1-5qDDeOkZBtuv8gkRzAJzs8fXWwY=
+  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"
@@ -7505,6 +7522,11 @@ [email protected]:
   resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz?cache=0&sync_timestamp=1601400328354&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^2.2.1:
+  version "2.4.0"
+  resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-2.4.0.tgz?cache=0&sync_timestamp=1601400328354&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-2.4.0.tgz#35ce7f333d5616f1c1e1bfe266c3aba2e5b2e704"
+  integrity sha1-Nc5/Mz1WFvHB4b/iZsOrouWy5wQ=
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/path-type/download/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -10377,6 +10399,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-cli-plugin-mock@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/vue-cli-plugin-mock/download/vue-cli-plugin-mock-1.0.2.tgz#67520e43313baae9195c3399ba669232583621f8"
+  integrity sha1-Z1IOQzE7qukZXDOZumaSMlg2Ifg=
+  dependencies:
+    express-mock-restful "^1.1.2"
+    memory-fs "^0.4.1"
+
 vue-eslint-parser@^7.1.1:
   version "7.1.1"
   resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602499032728&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz#c43c1c715ff50778b9a7e9a4e16921185f3425d3"