mock.js介绍 - Githubissues

Mock.js简介

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具。可以用来模拟服务器响应，优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

Mock.js的优点： 1、前后端分离 让前端攻城师独立于后端进行开发。 2、增加单元测试的真实性 通过随机数据，模拟各种场景。 3、开发无侵入 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 4、用法简单 符合直觉的接口。 5、数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 6、方便扩展 支持支持扩展更多数据类型，支持自定义函数和正则。

具体使用方法和规范参考官方文档：http://mockjs.com/

Mock.js在小程序开发中的应用

以下是Mock.js在小程序开发中的应用，不一定是最优方式，可以参考借鉴：

//app.js
const Mock = require('utils/mock.js')
let API_HOST = 'http://www.xxx.com'
let DEBUG = true
App({
  onLaunch: function () {
    var _this = this
    _this.globalData.userId = wx.getStorageSync('userId')
    _this.globalData.sessionToken = wx.getStorageSync('sessionToken')
    if (_this.isEmpty(_this.globalData.userId) || _this.isEmpty(_this.globalData.sessionToken)) {
      wx.navigateTo({
        url: 'pages/login/login'
      })
    } else {
      _this.getUserInfo();
    }
  },
  isEmpty (value) {
    if (typeof (value) === 'undefined' || value === null || value === '') {
      return true
    } else {
      return false
    }
  },
  getUserInfo: function () {
    const _this = this
    let data = { tempUserId: _this.globalData.userId, sessionToken: _this.globalData.sessionToken }
    _this.ajax(_this.globalData.api.getUserInfo, function (result){
      if (result.status === 'true' || result.status === true) {
        _this.globalData.userInfo = result.data
      } else {
        wx.navigateTo({
          url: 'pages/login/login'
        })
      }
    }, data, 'post')
  },
  globalData: {
    sessionToken: null,
    userId: null,
    userInfo: null,
    userType: 1,
    accessState: null,
    api: {
      login: API_HOST + '/phone/tempLogin/login.json',
      getUserInfo: API_HOST + '/phone/tempUser/getUserInfo.json'
    }
  },
  ajax: function (url, fn, data = {}, method = "get", header = {}) {
    var _this = this
    if (!DEBUG) {
      wx.request({
        url: url,
        method: method ? method : 'get',
        data: data,
        header: header ? header : { "Content-Type": "application/json" },
        success: function (res) {
          fn(res);
        }
      });
    } else {
      let res = ''
      if (url == _this.globalData.api.login) {
        res = Mock.mock({
          "status": true,
          "msg": "获取当前用户信息",
          "data":
          {
            "id|1-100": 1,
            "userName": Mock.Random.cname(),
            "password": "E10ADC3949BA59ABBE56E057F20F883E",
            "headImage": 'http://opponplusgroup.oss-cn-hangzhou.aliyuncs.com/oppotemp/images/defaultHeadImage.jpeg',
            "phone": "15152238958",
            "birthDay": Mock.Random.date(),
            "sex|1-2": 1,
            "age|1-99": 29
          }
        })
      } else if (url == _this.globalData.api.getUserInfo) {
        res = Mock.mock({
          "status": true,
          "msg": "获取当前用户信息",
          "data":
          {
            "id|1-100": 1,
            "userName": Mock.Random.cname(),
            "password": "E10ADC3949BA59ABBE56E057F20F883E",
            "headImage": 'http://opponplusgroup.oss-cn-hangzhou.aliyuncs.com/oppotemp/images/defaultHeadImage.jpeg',
            "phone": "15152238958",
            "birthDay": Mock.Random.date(),
            "sex|1-2": 1,
            "age|1-99": 29
          }
        })
      }
      fn(res)
    }
  }
})

// login.js
const app = getApp()
Page({
  data: {
    identity: null,
    password: null
  },
  onLoad: function () {
    const _this = this
    _this.setData({
      identity: wx.getStorageSync('identity')
    })
  },
  bindPassword: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
  bindIdentity: function (e) {
    this.setData({
      identity: e.detail.value
    })
  },
  login() {
    var _this = this
    if (!app.isEmpty(_this.data.identity) && !app.isEmpty(_this.data.password)) {
      let data = { identity: _this.data.identity, password: _this.data.password }
      app.ajax(app.globalData.api.login, function (result) {
        if (result.status === 'true' || result.status === true) {
          app.globalData.userInfo = result.data
          app.globalData.userId = result.data.id
          app.globalData.sessionToken = result.data.sessionToken
          wx.setStorageSync('userId', result.data.id)
          wx.setStorageSync('identity', _this.data.identity)
          wx.setStorageSync('sessionToken', result.data.token)
          wx.setStorageSync('accessState', result.data.accessState)
          wx.navigateTo({
            url: '../index/index'
          })
        } else {
          wx.navigateTo({
            url: '../login/login'
          })
        }
      }, data, 'post')
    } else {
      wx.showToast({
        title: '账号密码错误',
        icon: 'success',
        image: '../../img/fail.png',
        duration: 3000
      })
    }
  }
})

基本思路： 1、封装一个ajax方法，包含基本的接口地址（url）、接口参数（data）、method，回调（fn）等参数； 2、定义DEBUG，根据DEBUG来判断是直接调用真实接口还是使用mock模拟数据； 3、当DEBUG=true，根据不同接口使用mock模拟不同的数据结构（数据结构在开发前，由前后端一起商定），并回调

NPLUSWEB / nplusweb.github.io

mock.js介绍 #20

Mock.js简介

Mock.js在小程序开发中的应用