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

]
})

通过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