前端如何使用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