前端如何使用mock數據

首先呢簡單介紹下mock數據，目前在公司開發項目時，都是前，後端同時開發
mock數據：模擬數據（俗稱造假數據）
模擬數據：
前提：
1.前端和後端溝通好數據結構（也稱對接口）
2.接口文檔：通常接口文檔查閱要傳遞的url,傳遞的參數，提交方式，返回數據結構
mockjs

官方文檔：https://github.com/nuysoft/Mock/wiki
官方示例:http://mockjs.com/examples.html

Mock.mock(生成的json數據)
// 屬性名 name
// 生成規則 rule
// 屬性值 value
‘name|rule’: value

常用佔位符：

 . @id:生成隨機id
 . @cname:生成隨機的中文姓名
 . @increment：遞增
 . "屬性|min-max":數值
 .@image('圖片尺寸','圖片顏色','圖片文本')
 .@datetime('yyyy-MM-dd hh:mm:ss')
 .@county(true) 生成省市縣
 .@url 生成網址
 .@email:生成郵箱
 .@cparagraph() 生成中文段落
 ......

例如：

Mock.mock({ "status":0, "err_msg":"ok", "result|10":[

    {id:"@id",
     title:'@ctitle',
     cid:"@increment",
     "price|1000-2000":1,
     "old_price|2000-3000":1,
     "pic":"@image('200x100', '#0000FF', 'image')",
     "s_pic":"@image('150x70','#ff0000','s_pic')",
     "pub_date":"@datetime('yyyy-MM-dd')",
     "address":"@county(true)",
     "url":"@url",
      "email":"@email",
      "desc":"@cparagraph(5)"
    }

]
})

mock.js如何與微信小程序集成

通過wxmock來實現mock.js與小程序的集成

wxmock官方github: https://github.com/webx32/WxMock

步驟：

第一步：複製mock.js和wxmock.js文件到utils目錄下

第二步：在app.js 引入 WxMock 代碼

var Mock = require("./utils/WxMock.js");
第三步：在app.js中書寫需要模擬的接口及返回結構

Mock.mock(‘自定義的接口地址’,模擬的數據)

例如：

  let dataObj = {
      "status": 0,
      "err_msg": "ok",
      "result|10": [

        {
          id: function () {
            return Mock.Random.id();
          },
          title: function () {
            return Mock.Random.ctitle();
          },
          cid: function () {
            return Mock.Random.increment();
          },
          "price|1000-2000": 1,
          "old_price|2000-3000": 1,
          "pic": function () {
            return Mock.Random.image('200x100', '#0000FF', 'image');
          },
          "s_pic": function () {

            return Mock.Random.image('150x70', '#ff0000', 's_pic')
          },
          "pub_date": function () {
            return Mock.Random.datetime('yyyy-MM-dd')
          },
          "address": function () {

            return Mock.Random.county(true)

          },
          "url": function () {

            return Mock.Random.url();
          },
          "email": function () {
            return Mock.Random.email()
          },
          "desc": function () {
            return Mock.Random.cparagraph()
          }
        }

      ]

    }


    let url = 'https://www.1906A.com/api/goodslist'


    /**
    * Mock.mock（）說明
    * url：代表要請求的數據接口
    * dataObj:代表請求的模擬數據
    */
    Mock.mock(url, dataObj)

第四步：在需要請求的頁面中調用 wx.request 中使用url爲 mock對應的地址 就會返回響應mock數據
例如：

//測試mock數據請求

  getMockData() {
    console.log(11111)
    wx.request({
      url: 'https://www.1906A.com/api/goodslist',
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        console.log('mock返回的數據', res);

        this.setData({
          resultArr: res.result
        });
      }
    })

easy-mock:可利用mock.js生成線上的接口

easy-mock官網：https://www.easy-mock.com/login