現在開發的方式基本都採用了前後端分離的技術來實現，初期有頁面原型，後端程式碼沒有開發完成，前端工程師就不能開發前端頁面，這樣前端在初期就不能作業面設計，假資料是寫死的不是很靈活。於是有了mock的概念。

mock介紹《圖片來自mock官網》 http://mockjs.com/

這裡我安利一個國內開源的mock介面定義的官方網站

https://www.easy-mock.com

這是對mock的封裝，不需要單獨搭建mock環境，直接定義介面按照他的返回方式進行資料返回

缺點：資料是標準的JSON key-value方式出現的 只可以對value可以採用function的方式變化 模擬複雜的物件就很困難。

優點：節省成本，快速入手，採用mock資料格式可以支援Swagger

Let's do it

首先開啟 easy-mock的官網輸入使用者名稱密碼登入，沒有使用者名稱密碼的會自動建立一個使用者登入系統

建立一個個人專案

開啟專案建立介面

如下圖

具體規則檢視文件

示例：

{
  data: function({
    _req,
    Mock
  }) {
    let needLoadTpl = {
      type: "danger",
      text: "該操作需要登陸才能完成，請登陸系統",
      code: null,
      errors: []
    }
    let buildStuts = _req.params.buildStuts // 請求引數 《building,builded》其他引數不接受無資料 
    let token = _req.header.token // 請求頭
    let body = _req.body // 請求體
    let page = body.page
    let pageSize = body.pageSize
    let currentPage = body.currentPage
    if (token) {
      let havaData = false
      let data = {
        id: '@increment(100)',
        projectCode: '
 
[email protected]("yyyyMMdd")@string("0123456789",4)', //編碼
        projectName: '公園@cword("一二三四五六七八九十")號@integer(1, 4)# @string("0123456789",3)', //專案名稱
        customerName: '@cname', //客戶姓名
        customerPhone: /^(1[356789][0-9]|14[012356789])[0-9]{8}$/, //手機號
        address: '@county(true)@projectName',
        workStatus: ''
      } //專案地址
      if (buildStuts === 'building' && body.length > 0) {
        data.workStatus = '@integer(0, 3)' // 工程狀態在建工程
        havaData = true
      } else if (buildStuts === 'builded' && body.length > 0) {
        havaData = true
        data.workStatus = '4' //完工工地
      } else {
        havaData = false
        return ' params must in [building,builded] your params ' + JSON.stringify(buildStuts)
      }
      if (havaData) {
        // 設定請求超時
        /*
          Mock.setup({
            timeout: '200-600'
          })
        */
        return Mock.mock({
          'content|1-10': [data],
          page: page ? Number.parseInt(page) : 1,
          pageSize: pageSize ? Number.parseInt(pageSize) : 10,
          totalPage: currentPage ? Number.parseInt(currentPage) : 1,
          totalRows: currentPage ? Number.parseInt(currentPage) * Number.parseInt(pageSize) : 1 * 10,
          currentPage: currentPage ? Number.parseInt(currentPage) : 1,
          body: body
        })
      }
    } else {
      return Mock.mock(needLoadTpl)
    }
  }
}