小程序中使用Mock数据

• 介绍

Mock.js
生成随机数据，拦截 Ajax 请求

前端使用mockjs后，对后端接口进行请求时，mockjs会拦截Ajax请求，并返回随机数据，模拟后端的响应。这样，无需等到后端接口开发完毕，前端就可以对获取数据部分进行开发、测试，做到前后端分离。当后端开发完毕后，只要关闭mock即可，无需修改代码逻辑，提高了开发效率。

• 用法

1. 首先下载mock.js和WxMock.js（后附地址），放到utils目录下

   
   

2. 在utils目录下新建一个js文件，在其中写要mock数据的接口

//utils/top250.js
var Mock = require("./WxMock.js"); 

var top250 = Mock.mock('https://douban.uieee.com/v2/movie/top250',{
  "count": 1,
  "start": 0,
  "total": 250,
  "subjects": [
      ...
  ],
  title: "豆瓣电影Top250"
  })
export default{
    top250
}

3. 在需要获取数据的地方正常调用接口

//board.js
...
onLoad:function(){
    let _this = this; 
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/top250',
      success:function(res){
        console.log('https://douban.uieee.com/v2/movie/top250',res);
        _this.setData({
          top250: res.subjects
        }) 
      }
    })
  },
...

获取到的数据和在mock中定义的一样

4. 利用mockjs可以随机生成数据，方便在没有后台的情况下测试页面

具体见 【Mock官网-示例】

---

总结：

本篇学习记录了小程序中使用Mock模拟数据的方法。

指路：

WxMock.js下载地址：https://github.com/webx32/WxMock
在Vue中使用Mockjs：https://www.jianshu.com/p/1c16627d98a7