vue-cli 本地數據模擬

方法一： 使用express搭建靜態服務

mock數據寫在json文件中，proxyTable 裏將接口代理到具體mock數據json文件上。
具體方法：

• 建立 mock 文件夾
• build/dev-server.js 中添加以下代碼

 

npm run dev 啓動後，能夠經過 http://localhost:8080/mock/db.json 訪問數據，proxyTable對應設置代理便可（代理設置方法與解決跨域方法類似）

 

方法二 使用 JSON Server 搭建 Mock 服務器

JSON Server 是一個建立僞RESTful服務器的工具，具體使用方法能夠看官方文檔，這裏直接講在vue-cli 中的用法。

配置流程

• 全局安裝 $ npm install -g json-server
• 項目目錄下建立 mock 文件夾
• mock 文件夾下添加 db.json 文件，內容以下

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

• package.json 添加命令

  "mock": "json-server --watch mock/db.json",
    "mockdev": "npm run mock & npm run dev"

  
  

   

啓動 mock 服務器

$ npm run mock 命令 運行 mock server
訪問 http://localhost:3000/
發現 db.json 下第一級 json 對象被解析成爲可訪問路徑

 

GET請求具體路徑 如：http://localhost:3000/posts 可獲取數據

 

faker.js 批量生成僞數據

若是須要大量的僞數據，手動構造比較費時費力，可使用 faker.js 批量生成。faker.js 的具體使用參見官方文檔，這裏作一個示例。

• $ cnpm install faker -G 全局安裝 faker
• mock 目錄下建立 faker-data.js，內容以下

  module.exports = function () {
   var faker = require("faker");
   faker.locale = "zh_CN";
   var _ = require("lodash");
   return {
       people: _.times(100, function (n) {
           return {
               id: n,
               name: faker.name.findName(),
               avatar: faker.internet.avatar()
           }
       }),
       address: _.times(100, function (n) {
           return {
               id: faker.random.uuid(),
               city: faker.address.city(),
               county: faker.address.county()
           }
       })
   }
  }

• $ json-server mock/faker-data.js 在 json server 中使用 faker
  請求 http://localhost:3000/address 能夠獲取到隨機生成的100組僞數據

 

添加中間件

json server 使用 RESTful 架構，GET請求能夠獲取數據，POST 請求則是添加數據。
在開發過程當中，有時候想直接模擬獲取POST請求返回結果，能夠添加 express 中間件 將POST請求轉爲GET請求。

• mock 目錄下建立 post-to-get.js，內容以下

  module.exports = function (req, res, next) {
  req.method = "GET";
  next();
  }

• 啓動命令添加運行中間件 --m mock/post-to-get.js

  "mock": "json-server --watch mock/db.json --m mock/post-to-get.js",

從新啓動服務，POST請求就被轉換爲GET請求了

 

其餘需求也能夠經過添加不一樣的中間件實現。

代理設置

在 config/index.js 的 proxyTable 將請求映射到 http://localhost:3000

 

代碼中添加請求以測試效果

 

$ npm run mockdev 啓動帶mock 數據的本地服務

結果以下：

做者：蘿蔔粥_Carrot連接：http://www.jianshu.com/p/ccd53488a61b來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。