日拱一卒-如何mock數據

在項目的開發中，聯調是屢見不鮮，並且也是比較費時間的一個環節。
在先後端分離的項目當中，咱們每每是先約定好接口與數據，再進行開發。
這個時候，若是前端能本身啓動一個服務，按照必定的規則生成假數據，那麼聯調起來將會方便不少。
目前市面上有不少mock數據的工具，而我採用的是mockjs。
首先要明白一點，mockjs並不能啓動一個服務，它只是一個生成數據的工具。咱們須要本身啓動服務，接收請求，再把數據返回給前端。
這裏我採用的是比較容易用的express。
express的安裝就再也不贅述。說一下幾個關鍵的點。
在項目的路由文件中，咱們能夠這樣來mock數據：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
  'list|1-10': [{
    // 屬性 id 是一個自增數，起始值爲 1，每次增 1
    'id|+2': 1
  }]
})

這就生成好了假數據，而後就要經過路由返回出去，寫法是這樣子的：

router.get('/', function (req, res, next) {
  // 如下四行是用來設置返回的響應頭，用來解決跨域問題
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  // 這一行是將構造的假數據進行返回
  res.send(data);
  res.render('index', { title: 'Express' });
});

如此，咱們便成功mock好了數據，接下來就是請求接口了。
在vue-cli3中，vue.config.js文件中對本地服務器進行設置：

module.exports = {
  devServer: {
    proxy: {
      // 這裏的key值我也沒搞懂爲何要這樣子寫，以後再研究一下
      [""]: {
        // 假設咱們的mock服務啓動在3000端口
        target: `http://127.0.0.0:3000`,
        // 這裏是用於設置跨域
        changeOrigin: true,
        // 這裏的路徑重寫實際上我也沒搞懂是什麼意思，以後再研究
        pathRewrite: {
          ['^/']: ''
        }
      }
    },
  }
}

改寫完配置，記得重啓服務，以後就能夠快樂地玩耍了。
mock服務可使用nodemon啓動，這樣子服務只要有了更改就會自動重啓，高效不少。