Mock Data · vue-element-admin

# Mock Data Mock 數據是前端開發過程中必不可少的一環，是分離前后端開發的關鍵鏈路。通過預先跟服務器端約定好的接口，模擬請求數據甚至邏輯，能夠讓前端開發更加獨立自主，不會被服務端的開發所阻塞。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#swagger)Swagger 在公司的項目中通常使用[swagger](https://swagger.io/)，由后端來模擬業務數據。**swagger**是一個 REST APIs 文檔生成工具，它從代碼注釋中自動生成文檔，可以跨平臺，開源，支持大部分語言，社區好，總之非常不錯，強烈推薦。[線上 demo](http://petstore.swagger.io/?_ga=2.222649619.983598878.1509960455-2044209180.1509960455#/pet/addPet) ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#easy-mock)Easy-Mock [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)之前使用的是[easy-mock](https://easy-mock.com/login)來模擬數據。它是一個純前端可視化，并且能快速生成模擬數據的持久化服務。非常的簡單易用還能結合`swagger`，天然支持跨域，不管團隊還是個人項目都值得一試。 WARNING 現在線上版本的`vue-admin-template`已經不使用`easy-mock`。因為`easy-mock`提供的線上免費服務很不穩定，時不時的就會掛掉，如果有需要的可以自己按照它的教程，搭建自己的服務。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#mockjs)Mockjs 由于[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)是一個純前端個人項目，所有的數據都是用[mockjs](https://github.com/nuysoft/Mock)模擬生成。它的原理是: 攔截了所有的請求并代理到本地，然后進行數據模擬，所以你會發現`network`中沒有發出任何的請求。但它的最大的問題是就是它的實現機制。它會重寫瀏覽器的`XMLHttpRequest`對象，從而才能攔截所有請求，代理到本地。大部分情況下用起來還是蠻方便的，但就因為它重寫了`XMLHttpRequest`對象，所以比如`progress`方法，或者一些底層依賴`XMLHttpRequest`的庫都會和它發生不兼容，可以看一下我項目的[issues](https://github.com/PanJiaChen/vue-element-admin/issues?utf8=%E2%9C%93&q=mock)，就知道多少人被坑了。它還有一個問題是，因為是它本地模擬的數據，實際上不會走任何網絡請求。所以本地調試起來很蛋疼，只能通過`console.log`來調試。就拿`vue-element-admin`來說，想搞清楚`getInfo()`接口返回了什么數據，只能通過看源碼或者手動`Debug`才能知道。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E6%96%B0%E6%96%B9%E6%A1%88)新方案v4.0.0+ 在`v4.0`版本之后，在本地會啟動一個`mock-server`來模擬數據，線上環境還是繼續使用`mockjs`來進行模擬(因為本項目是一個純前端項目，你也可以自己搭建一個線上 server 來提供數據)。不管是本地還是線上所以的數據模擬都是基于`mockjs`生成的，所以只要寫一套 mock 數據，就可以在多環境中使用。該方案的好處是，在保留`mockjs`的優勢的同時，解決之前的痛點。由于我們的 mock 是完全基于`webpack-dev-serve`來實現的，所以在你啟動前端服務的同時，`mock-server`就會自動啟動，而且這里還通過[chokidar](https://github.com/paulmillr/chokidar)來觀察`mock`文件夾內容的變化。在發生變化時會清除之前注冊的`mock-api`接口，重新動態掛載新的接口，從而支持熱更新。有興趣的可以自己看一下代碼[mock-server.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/mock-server.js)。由于是一個真正的`server`，所以你可以通過控制臺中的`network`，清楚的知道接口返回的數據結構。并且同時解決了之前`mockjs`會重寫`XMLHttpRequest`對象，導致很多第三方庫失效的問題。本項目的所有請求都是通過封裝的[request.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js)進行發送的，通過閱讀源碼可以發現所有的請求都設置了一個`baseURL`，而這個`baseURL`又是通過讀取`process.env.VUE_APP_BASE_API`這個環境變量來動態設置的，這樣方便我們做到不同環境使用不同的`api`地址。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E7%A7%BB%E9%99%A4)移除如果你不想使用`mock-server`的話只要在[vue.config.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/vue.config.js)中移除`webpack-dev-server`中`proxy`和`after`這個`Middleware`就可以了。現在默認情況下本地的請求會代理到`http://localhost:${port}/mock`下，如果你想調整為自己的 mock 地址可以修改`proxy` ~~~ proxy: { // change xxx-api/login => mock/login // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://localhost:${port}/mock`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }, after: require('./mock/mock-server.js') ~~~ > ## TIP > > **請注意：該操作需要重啟服務** > > `mock-server`只會在開發環境中使用，線上生產環境目前使用`MockJs`進行模擬。如果不需要請移除。具體代碼：[main.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/main.js) ~~~ import { mockXHR } from '../mock' if (process.env.NODE_ENV === 'production') { mockXHR() } ~~~ ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E6%96%B0%E5%A2%9E)新增如果你想添加 mock 數據，只要在根本錄下找到`mock`文件，添加對應的路由，對其進行攔截和模擬數據即可。比如我現在在[src/api/article](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/api/article.js)中需要添加一個查詢某篇文章下面評論數的接口`fetchComments`，首先新建接口： ~~~ export function fetchComments(id) { return request({ url: `/article/${id}/comments`, method: 'get' }) } ~~~ 聲明完接口之后，我們需要找到對應的 mock 文件夾[mock/article.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/article.js)，在下面創建一個能攔截路由的 mock 接口 **請注意，mock 攔截是基于路由來做的，請確 mock 數據一定能匹配你的 api 保路由，支持正則** ~~~ // fetchComments 的 mock { // url 必須能匹配你的接口路由 // 比如 fetchComments 對應的路由可能是 /article/1/comments 或者 /article/2/comments // 所以你需要通過正則來進行匹配 url: '/article/[A-Za-z0-9]/comments', type: 'get', // 必須和你接口定義的類型一樣 response: (req, res) => { // 返回的結果 // req and res detail see // https://expressjs.com/zh-cn/api.html#req return { code: 20000, data: { status: 'success' } } } } ~~~ ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E4%BF%AE%E6%94%B9)修改最常見的操作就是：你本地模擬了了一些數據，待后端完成接口后，逐步替換掉原先 mock 的接口。我們以[src/api/role.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/api/role.js)中的`getRoles`接口為例。它原本是在[mock/role/index.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/role/index.js)中 mock 的數據。現在我們需要將它切換為真實后端數據，只要在[mock/role/index.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/role/index.js)找到對應的路由，之后將它刪除即可。這時候你可以在`network`中，查看到真實的數據。 ~~~ // api 中聲明的路由 export function getRoles() { return request({ url: '/roles', method: 'get' }) } //找到對應的路由，并刪除 { url: '/roles', type: 'get', response: _ => { return { code: 20000, data: roles } } }, ~~~ ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E5%A4%9A%E4%B8%AA-server)多個 server 目前項目只啟動了一個`mock-server`，當然你也可以有自己其它的`mock-server`或者代理接口。可以一部分接口走這個服務，另一些接口走另一個服務。只需要將它們分別設置不同的的`baseURL`即可。[@/utils/request.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js) 之后根據設置的 url 規則在[vue.config.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/vue.config.js)中配置多個`proxy`。 [相關文檔](https://webpack.docschina.org/configuration/dev-server/#devserver-proxy) ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E5%90%AF%E7%94%A8%E7%BA%AF%E5%89%8D%E7%AB%AF-mock)啟用純前端 Mock 現在在[mock/index.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/index.js#L19)也封裝了一個純前端 mock 的方法，你只需要在[src/main.js](https://github.com/PanJiaChen/vue-element-admin/tree/master/src)中： ~~~ import { mockXHR } from '../mock' mockXHR() ~~~ 這樣就會變成純前端 mock 數據了和`v4.0`版本之前的 mock 方案是一樣的，原理見上文。目前你看到的線上[demo](https://panjiachen.github.io/vue-element-admin)就是采用該種方式。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E6%9C%AC%E5%9C%B0-mock-%E6%95%B0%E6%8D%AE%E4%B8%8E%E7%BA%BF%E4%B8%8A%E6%95%B0%E6%8D%AE%E5%88%87%E6%8D%A2)本地 Mock 數據與線上數據切換有很多時候我們會遇到本地使用 mock 數據，線上環境使用真實數據，或者說不同環境使用不同的數據。 * **Easy-Mock 的形式** 你需要保證你本地模擬 api 除了根路徑其它的地址是一致的。比如： ~~~ https://api-dev/login // 本地請求 https://api-prod/login // 線上請求 ~~~ 我們可以通過之后會介紹的[環境變量](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)來做到不同環境下，請求不同的 api 地址。 ~~~ # .env.development VUE_APP_BASE_API = '/dev-api' #注入本地 api 的根路徑 ~~~ ~~~ # .env.production VUE_APP_BASE_API = '/prod-api' #注入線上 api 的根路徑 ~~~ 之后根據環境變量創建`axios`實例，讓它具有不同的`baseURL`。[@/utils/request.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js) ~~~ // create an axios instance const service = axios.create({ baseURL: process.env.BASE_API, // api 的 base_url timeout: 5000 // request timeout }) ~~~ 這樣我們就做到了自動根據環境變量切換本地和線上 api。 * **Mock.js 的切換** 當我們本地使用`Mock.js`模擬本地數據，線上使用真實環境 api 方法。這與上面的 easy-mock 的方法是差不多的。我們主要是判斷：是線上環境的時候，不引入 mock 數據就可以了，只有在本地引入`Mock.js`。 ~~~ // main.js // 通過環境變量來判斷是否需要加載啟用 if (process.env.NODE_ENV === 'development') { require('./mock') // simulation data } ~~~ 只有在本地環境之中才會引入 mock 數據。