一.Mock.js是什么?

目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.

这个时候, Mock.js的作用就体现出来了, 在数据量较大的情况下, 我们不用一个一个的编写数据, 只需要根据接口文档将数据的格式填入, Mock.js就能够自动的按需生成大量的模拟数据. 且Mock.js提供了大量的数据类型, 包括文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 颜色等.

本文就简单的介绍一下Mock.js提供的语法, 并介绍一下我平时在项目中是如何使用Mock.js去更方便的进行开发的.

二. 下载和引入Mock.js

1. 下载Mock.js

Mock.js提供多种下载方式, 本文以目前国内最常用的npm举例, 只需要在命令行输入npm install mockjs
即可完成Mock.js的下载.

2. 引入Mock.js

Mock.js暴露了一个全局的Mock对象, 我们只需要将Mock对象引入到文件中, 调用Mock对象的方法即可

  • CommonJS的引入方式
//CommonJS引入
let Mock = require('mockjs) //调用Mock.mock()方法模拟数据
let data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(data);
  • ES6的引入方式
//ES6的引入方式
import Mock from 'mockjs' let data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(data);

三.Mock.js的简单语法

Mock对象提供了4个方法, 分别是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一个工具库Mock.Random. 其中我们经常使用到的就是Mock.mock()Mock.Random.

1. Mock.js的规范

第二部分引入Mock.js的代码中的以下部分就可以体现Mock.js的语法规范

'list|1-10': [{
'id|+1': 1
}]

上面的代码被称为数据模板, 用于告诉Mock.js生成什么样的数据, 其中数据模板中的每个属性由三部分构成: 属性名, 生成规则, 属性值:

  • list为数据模板中的属性名;
  • 1-10为生成规则(表示生成最少1个, 最多10个重复数据)
  • [{'id|+1': 1}]是属性值, 属性值中可以嵌套使用属性名和生成规则.

具体的生成规则参见: https://github.com/nuysoft/Mo...

2. Mock.mock()

Mock.mock()方法是用来根据数据模板生成模拟数据, 我常用到的是以下两种传参方式:

  • Mock.mock(template): 根据数据模板template生成模拟数据
let data = Mock.mock({
data: {
'products|10-20': [{
name: '手机',
price: 1000
}]
}
})
console.log(data);
  • Mock.mock(url, template): 拦截请求地址为url的ajax请求, 并根据数据模板template生成模拟数据
let data = Mock.mock('api/products' , {
data: {
'products|10-20': [{
name: '手机',
price: 1000
}]
}
}) //使用jquery Ajax发送请求
$.ajax({
url: 'api/products',
type: 'GET',
success: function(res) {
console.log(res);
}
})

3. Mock.Random

Mock.Random是Mock.js提供一个工具类, 用于生成常用的几种数据.

  • 生成布尔值
//使用@占位符的方式
let data = Mock.mock({
data: {
boolean: '@boolean'
}
})
console.log(data); //使用Mock.Random调用函数的方式
let data = Mock.mock({
data: {
boolean: Mock.Random.boolean()
}
})
console.log(data);
  • 生成日期
  let data = Mock.mock({
data: {
date: Mock.Random.date('yyyy-MM-dd')
}
})
console.log(data);

Mock.js支持丰富的日期格式的自定义: https://github.com/nuysoft/Mo...

  • 生成图片
  let data = Mock.mock({
data: {
//用于生成高度自定义的图片地址
imgURL: Mock.Random.image()
}
})
console.log(data);
  • 生成名字
 let data = Mock.mock({
data: {
//生成一个英文名字
name: Mock.Random.name(),
//生成一个中文名字
chineseName: Mock.Random.cname()
}
})
console.log(data);

更多Mock.Random工具库提供的数据: https://github.com/nuysoft/Mo...

四.在Vue项目中使用Mock.js

以模拟一个登陆接口的数据为例:

1. 单独写一个mockData.js文件作为虚拟数据的生成文件.

//mockData.js

import Mock from 'mockjs'

let Random = Mock.Random;

//用户登陆信息
let userInfo = Mock.mock({
data: {
responseCode: 200,
responseMessage: 'success',
userMessage: {
email: Random.email(),
'id|1-10': 1,
realName: Random.cname(),
roleCodes: 'admin',
username: Random.first()
}
}
}) let mockData = {
userInfo: userInfo
} export default mockData;

2. 使用vuex去控制是否使用mock.js的数据

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions' Vue.use(Vuex); const state = {
//使用模拟数据, 只是开发时使用, 如果不是开发时, 请务必设置为false
useMock: true
} export default new Vuex.Store({
state,
mutations,
actions
})

3. 在Login.vue中去实现请求登陆方法

//Login.vue

import mockData from '../utils/mockData.js'

exwport default {
... methods: {
fetchUserInfo() {
//如果vuex中userMock为true
if (this.$store.state.useMock) {
//使用延时器模拟异步
window.setTimeout(() => {
let res = mockData.userInfo;
//业务逻辑
}, 1000);
return;
} //如果vuex中userMock为false
this.$axios.post('api/login', params).then(res => {
//业务逻辑
});
}
}
}

可以看出在Login.vue的fetchUserInfo()方法中, 如果userMocktrue, 将使用的是mock.js中的模拟数据; 如果useMockfalse, 使用的是通过Ajax请求的数据. 这么写的好处是, 你只需要在vuex中修改一下, 就可以控制所有请求接口函数中是使用Ajax请求数据, 还是使用模拟数据. 这样在进行和后台联调的时候, 就可以自由的切换数据了!

参考链接

  1. Mock.js官网: http://mockjs.com/

原文地址:https://segmentfault.com/a/1190000013022560

让前端攻城师独立于后端进行开发: Mock.js的更多相关文章

  1. 如何成为一名优秀的web前端工程师(前端攻城师)?

    程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀. ...

  2. 【转】如何成为一名优秀的web前端工程师(前端攻城师)?

    [转自]http://julying.com/blog/how-to-become-a-good-web-front-end-engineer/ 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · ...

  3. 让前端独立于后端进行开发,模拟数据生成器Mock.js

    让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...

  4. 1年3年5年-我对PHP攻城师有看法

    今天早上公车上看微信拉勾的一些岗位推送,挑了几个PHP攻城师看看 15K-20K的 百万级网站架构经验 3年以上开发,至少1年互联网用户产品开团队开发经验 不低于百度T4水平 数据库规划和优化,熟悉常 ...

  5. 2015Web前端攻城之路

    2015目标成为一名合格的前端攻城狮. 养成计划: 1.html / css 2.js 3.ajax 4.框架 5.项目实战

  6. mock.js-无需等待,让前端独立于后端进行开发

    概述 首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳. 相对于其他同类的框架的实现,mock.js超出了我的意料. 基于 数据模板 生成模拟数据. 基于 HTML模板 ...

  7. web前端攻城狮整理的收藏夹

    作为一名web前端开发工程师你的收藏夹存对了吗?下面是一份互联网上流传甚广的web前端开发收藏夹资源,包含学习网站.JS库.常用工具.常用插件.资讯书籍等资源.速速转存吧~   一.学习网站   W3 ...

  8. 前后端分离(手) -- mock.js

    前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三遍. ...

  9. 【大前端攻城狮之路·二】Javascript&QA⼯程师

    今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...

随机推荐

  1. BZOJ 3110 [ZJOI2013]K大数查询 (整体二分+线段树)

    和dynamic rankings这道题的思想一样 只不过是把树状数组换成线段树区间修改,求第$K$大的而不是第$K$小的 这道题还有负数,需要离散 #include <vector> # ...

  2. react 简单在页面中输出一段文字

    之前用脚手架创建了一个react项目,将react自带的src文件夹删除后创建一个空的src文件夹 在src文件夹中创建一个index.jsx文件作为JS入口文件并创建一个hello组件 现在我们进入 ...

  3. MAVEN项目的搭建

    MAVEN能为我们做什么? 1.Jar的声明式依赖性管理 2.项目的自动构建 搭建流程 环境配置 http://maven.apache.org/download.html 下载最新版本Maven 3 ...

  4. java import跨包引用类理解

    当前类要用其他类时,import具体包路径+.+具体的类 import引入的是被引用类的class文件,所以当我们build path第三方jar包时, 要用他们的类,要把jar包add to bui ...

  5. 用PHP去实现静态化

    我们在PHP站点开发过程中为了站点的推广或者SEO的须要,须要对站点进行一定的静态化,这里设计到什么是静态页面,所谓的静态页面.并非页面中没有动画等元素,而是指网页的代码都在页面中,即不须要再去执行P ...

  6. android Service中多线程交互

    android 的service和activity是执行在UI主线程的. 在android线程中,仅仅有主线程即UI线程有自己的默认的消息队列.子线程须要创建自己的消息队列.并把消息发给队列,并循环起 ...

  7. TeamTalk Android代码分析(业务流程篇)---消息发送和接收的整体逻辑说明

    第一次纪录东西,也没有特别的顺序,想到哪里就随手画了一下,后续会继续整理- 6.2消息页面动作流程 6.2.1 消息页面初始化的总体思路 1.页面数据的填充更新直接由页面主线程从本地数据库请求 2.数 ...

  8. 防火墙设置对外开放port

    今天在部署项目时,遇到项目组其它人重整了server上的iis.结果外部訪问不了所部属的项目,通过一些渠道找到了设置方法 例如以下报错的截图: 原因是"入站ICMP规则"被重整了, ...

  9. 英语发音规则---P字母

    英语发音规则---P字母 一.总结 一句话总结: 1.P发[p]音? paper ['peɪpə] n. 纸 plane [pleɪn] n. 飞机 pig [pɪg] n. 猪 ship [ʃɪp] ...

  10. 【NOI 2015】 程序自动分析

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4195 [算法] 并查集 [代码] #include<bits/stdc++.h ...