当前位置:网站首页>让前端攻城师独立于后端进行开发: Mock.js
让前端攻城师独立于后端进行开发: Mock.js
2020-11-06 01:17:00 【:::::::】
一.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()
方法中, 如果userMock
为true
, 将使用的是mock.js
中的模拟数据; 如果useMock
为false
, 使用的是通过Ajax请求的数据. 这么写的好处是, 你只需要在vuex中修改一下, 就可以控制所有请求接口函数中是使用Ajax请求数据, 还是使用模拟数据. 这样在进行和后台联调的时候, 就可以自由的切换数据了!
参考链接
- Mock.js官网: http://mockjs.com/
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1715177
边栏推荐
- Gradient understanding decline
- 01 . Go语言的SSH远程终端及WebSocket
- 使用Asponse.Words處理Word模板
- Clean架构能够解决哪些问题? - jbogard
- 7.3.1 file upload and zero XML registration interceptor
- 分布式ID生成服务,真的有必要搞一个
- 神经网络简史
- UML类图还不懂?来看看这版乡村爱情类图,一把学会!
- JVM内存区域与垃圾回收
- C language 100 question set 004 - statistics of the number of people of all ages
猜你喜欢
Python machine learning algorithm: linear regression
01 . Go语言的SSH远程终端及WebSocket
自然语言处理之分词、命名主体识别、词性、语法分析-stanfordcorenlp-NER(二)
Using tensorflow to forecast the rental price of airbnb in New York City
mac 安装hanlp,以及win下安装与使用
哇,ElasticSearch多字段权重排序居然可以这么玩
链表的常见算法总结
自然语言处理-搜索中常用的bm25
文本去重的技术方案讨论(一)
面经手册 · 第14篇《volatile 怎么实现的内存可见?没有 volatile 一定不可见吗?》
随机推荐
高级 Vue 组件模式 (3)
JVM内存区域与垃圾回收
用Python构建和可视化决策树
自然语言处理之分词、命名主体识别、词性、语法分析-stanfordcorenlp-NER(二)
ThreadLocal原理大解析
写一个通用的幂等组件,我觉得很有必要
DRF JWT authentication module and self customization
Network programming NiO: Bio and NiO
一时技痒,撸了个动态线程池,源码放Github了
基础知识点整理
二叉树的常见算法总结
mac 下常用快捷键,mac启动ftp
从零学习人工智能,开启职业规划之路!
nlp模型-bert从入门到精通(一)
python过滤敏感词记录
Dapr實現分散式有狀態服務的細節
5.4 静态资源映射 -《SSM深入解析与项目实战》
【數量技術宅|金融資料系列分享】套利策略的價差序列計算,恐怕沒有你想的那麼簡單
給萌新HTML5 入門指南(二)
被老程式設計師壓榨怎麼辦?我不想辭職