Open sanghb opened 6 years ago
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具。 可以用来模拟服务器响应,优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。
Mock.js的优点: 1、前后端分离 让前端攻城师独立于后端进行开发。 2、增加单元测试的真实性 通过随机数据,模拟各种场景。 3、开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 4、用法简单 符合直觉的接口。 5、数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 6、方便扩展 支持支持扩展更多数据类型,支持自定义函数和正则。
具体使用方法和规范参考官方文档:http://mockjs.com/
以下是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模拟不同的数据结构(数据结构在开发前,由前后端一起商定),并回调
Mock.js简介
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具。 可以用来模拟服务器响应,优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。
Mock.js的优点: 1、前后端分离 让前端攻城师独立于后端进行开发。 2、增加单元测试的真实性 通过随机数据,模拟各种场景。 3、开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 4、用法简单 符合直觉的接口。 5、数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 6、方便扩展 支持支持扩展更多数据类型,支持自定义函数和正则。
具体使用方法和规范参考官方文档:http://mockjs.com/
Mock.js在小程序开发中的应用
以下是Mock.js在小程序开发中的应用,不一定是最优方式,可以参考借鉴:
基本思路: 1、封装一个ajax方法,包含基本的接口地址(url)、接口参数(data)、method,回调(fn)等参数; 2、定义DEBUG,根据DEBUG来判断是直接调用真实接口还是使用mock模拟数据; 3、当DEBUG=true,根据不同接口使用mock模拟不同的数据结构(数据结构在开发前,由前后端一起商定),并回调