![a4ec13537a5b283770c061f4ecb9dd2a.png](https://i-blog.csdnimg.cn/blog_migrate/c5fffa8fff775a6bda7b7357f72a60a1.jpeg)
之前一直在博客园写作,最近几天才开的知乎专栏,才疏学浅, 谬误之处请不吝于评论区指教,谢谢大家。
黄梅时节家家雨,青草池塘处处蛙。
后端不来过夜半,闲敲mock落灯花
赵师秀:南宋时期的一位前端工程师
诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:“写后端的李秀才在几个时辰前就赶往临安度假去了,后端编码的进度又延后...”
此时手头仅有一个简单的http数据接口文档的赵师秀来了一套素质三连后,不由得慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧"
_(:3 」∠)_ 再后来,就有了那句千古名句啦~~
( 为了表示对赵师秀先生的歉意,文末我将附上原文)
如果我说这就是前后端分离思想和mock.js的由来,你会信么?(ฅ´ω`ฅ)
mock的由来【真】
我们在Vue或React的文档里时不时就会看到这个名词,那么mock到底是什么东西呢?
mock有“愚弄、欺骗”之意,在前端领域,mock可以理解为我们前端开发人员制造的假数据。也就是说不是由后台真实制造,而是由我们其他一些方式模拟的数据,例如借助mock.js。
通过这种方式,我们能在一定程度上实现前后端分离的开发流程。因为如果前端开发人员能够自己模拟数据的话,就不必等着拿到后端的接口才能完成剩下的工作,使得前端人员独立开发的能力增强,在此基础上做到前端后台各自独立的开发(当然这个前提是有 “写好的+详细的+不再临时改变的” 公共数据接口的文档)
最后对接的工作是前后端联调数据,因为前端mock的辅助,我们尽可能地减少了前后端对接过程中的效率损耗
mock.js是一个能够提供Mock功能的模块
mock.js初上手——安装和使用
在终端里通过运行npm install mockjs去安装mock.js模块,安装成功后你就可以通过模块化的方式去使用模块化的方式去使用mock了,下面这个是官方文档的小例子:
var
demo:
![bc82ccca3b22870caef3999aa31e7196.png](https://i-blog.csdnimg.cn/blog_migrate/e7cb5e7088fb8733a0156e99800ed278.jpeg)
mock.js抢鲜看——主要的作用和API
![d550ae5d101b4bd809ed7e13d08499e8.png](https://i-blog.csdnimg.cn/blog_migrate/2bc33fd5ad28adcbbe6428dea15e71b5.jpeg)
mock.js的作用
mock.js的作用,从它文档的首页介绍便可以略知一二:
- 它可以生成大量不同类型的模板数据,从最基本的随机数组/数字/对象/字符串,再到一个域名,一个地址(省/市),一个标题,一段文字,甚至给定宽高和颜色的图片,它都能模拟生成! 这就是mock.js的强大之处
- 相比起生成随机的模拟数据,其实我们更关心的是当我们发送Ajax请求的时候,我们能够接收到这些数据,这就是mock.js的第二大作用:拦截Ajax请求,当你对一个mock.js所指定的URL发起Ajax请求的时候,mock.js会将1中的模板数据作为响应数据回传给你,从而让你开发能在相当于已经拿到后端接口的前提下进行前端开发!
【注意】:mock.js只拦截Ajax,而不是fetch,所以,习惯于使用fetch的API的朋友们要注意了
mock的API其实非常简单,主要要用到的API其实就两个(我是说主要哈~~):
1.Mock.Random
这是一个对象,对象里包含许多可供调用的方法,返回相应的模拟数据,例如Mock.Random.domain() 可以返回一个随机的域名,Mock.Random.csentence() 可以返回一个随机的中文句子
2.Mock.mock
([你发起Ajax请求的URL], ["get"或"post"],[根据Mock.Random定制的模板或函数])
调用这个方法后你就可以发起Ajax请求并且接收到你私人定制的随机数据啦!
【注意】前两个参数是字符串,最后一个参数是对象或函数
所以下面我就主要围绕这两点展开
Mock.Random的运用
模拟Web数据:
生成随机域名(每次运行结果不同):
var
生成随机IP(每次运行结果不同)
var
生成随机URL(每次运行结果不同)
Random
模拟地理位置数据:
生成随机省份:
var
生成随机城市:
var
生成在某个省份的某个城市:
var
模拟文本数据:
生成一条随机的中文句子:
var
【注意】
1.默认一条句子里的汉字个数在12和18之间
2. 通过Random.csentence( length )指定句子的汉字个数:
Random
3.通过Random.csentence( min?, max? )指定句子汉字个数的范围:
Random
生成随机的中文段落:
var
【注意】
- cparagraph可以看作是多条csentence以逗号连接后的字符串,默认条数为 3 到 7条csentence
- 通过Random.cparagraph(length )指定句子的个数
Random
4.通过Random.cparagraph(min?, max?)指定句子的个数的范围:
Random
模拟颜色数据:
var
模拟日期/时间数据:
日期:
Random
时间:
Random
模拟图片:
Random
![5ec710ea222cc1125e3a14b7edb35cd7.png](https://i-blog.csdnimg.cn/blog_migrate/2dbca89996401507c1347c8ea0002063.jpeg)
不指定参数则取随机的宽高并显示对应的宽高数据:
![fd9fcdb1bf0e341ea5c093eb5fd18c0e.png](https://i-blog.csdnimg.cn/blog_migrate/53ca1331ceac254ad44dfec1d85afe22.jpeg)
模拟姓名数据:
模拟全名:
Random
模拟姓氏:
Random
模拟名字
Random
Mock.mock()的运用
除了制造模拟数据之外,更关键的是,我们发起Ajax请求的时候要能够接收到这些数据呀。嘿嘿,这就是Mock.mock()的作用啦!
上面我介绍过Mock.mock()的用法,如下:
Mock.mock([你发起Ajax请求的URL], ["get"或"post"],[根据Mock.Random定制的模板或函数])
在文章开头的时候,我们通过使用mock函数的第三个参数生成了对应的模拟数据:
var
但如果我们希望这个数据能够被请求某个URL的ajax接收到,那就要运用到前两个参数了:
用例如下:
[注意] 为了在Vue中使用Ajax,我注册了一个插件:Vue-Resource,关于更多可以参考Vue-Resource的官方文档
import
demo:
![6cad2c907a04b2ac0daf5b64ac322a36.png](https://i-blog.csdnimg.cn/blog_migrate/9082b1c15acb30f63922a5d944615ca1.jpeg)
Mock.js小练兵——用Vue + Vuex + mockjs搭建一个简单的文章Feed
下面,我将用用Vue + Vuex + mockjs搭建一个简单的应用,展示前后端分离的工作流程
先看看我们最终要达到的效果,这是UI的最小单元:
![3902a8b3f6c8b3cb209f78ff08ff44a1.png](https://i-blog.csdnimg.cn/blog_migrate/8b31ea87e8e617091890be60dc7c9e84.png)
我们希望能显示多个文章卡片,并且向其中插入mockjs模拟的内容
我的主要文件有四个:
├── app.vue // 页面UI
├── main.js // 入口文件,初始化vuex和vue-resource,并挂载mockjs
├── mock.js // 生成模拟数据
└── module.js // vuex的module部分
app.vue:
<
入口文件main.js:
import
mock.js:
var
module.js:
import
demo:
![7ef77dde7505ea9a52d4990ed1b29d10.png](https://i-blog.csdnimg.cn/blog_migrate/33e1dc3640c1ca1f6a68d16f93414bf3.jpeg)
再刷新一次看看!!:
![3ab5048ea3144b5ffaaa847b19f06bda.png](https://i-blog.csdnimg.cn/blog_migrate/30bd8b71cb4994aee0d903ac3d695523.jpeg)
【完】
黄梅时节家家雨,青草池塘处处蛙。有约不来过夜半,闲敲棋子落灯花
Mock.js的缺点
这里要说明一下的是:虽然我上述介绍的都是些Mockjs的优点,但我并没有说推荐大家使用,我的目的仅仅是向大家介绍github上有这么一个体验Mock的模块而已。
下面说下个人使用的时候感受到的Mock.js的一些缺点吧
- 不支持当今流行的fetch,而只支持Ajax
- 前后端信息交互的能力略若弱,例如传到后台的request仅能携带3种信息: type,url和body
- mockjs不能满足实际的使用需求: 实际上作为前端小白,我很希望mock.js能给我模拟出这样一种数据:
[
但mockjs却只能给我提供这样一种数据
[
4. 使用起来的时候发现它的最大的优点是"让展示的界面看起来很完整好看??",有点华而不实的感觉
所以,直到今天为止,mockjs在github仍然是5000多star,既不少,也不多
参考资料
- mock.js官方文档
- vue-resource官方文档
- vuex中文文档
![8deb15db57ed17a2849745687e835217.png](https://i-blog.csdnimg.cn/blog_migrate/debfc5d1a275838daf71b97c24c5836b.jpeg)