post传字符串后端拿到空值_【mock】后端不来过夜半，闲敲mock落灯花（mockjs+Vuex+Vue实战）...

之前一直在博客园写作，最近几天才开的知乎专栏，才疏学浅， 谬误之处请不吝于评论区指教，谢谢大家。

黄梅时节家家雨，青草池塘处处蛙。
后端不来过夜半，闲敲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:

mock.js抢鲜看——主要的作用和API

mock.js的作用

mock.js的作用，从它文档的首页介绍便可以略知一二：

1. 它可以生成大量不同类型的模板数据，从最基本的随机数组/数字/对象/字符串，再到一个域名，一个地址（省/市），一个标题，一段文字，甚至给定宽高和颜色的图片，它都能模拟生成！ 这就是mock.js的强大之处
2. 相比起生成随机的模拟数据，其实我们更关心的是当我们发送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

不指定参数则取随机的宽高并显示对应的宽高数据：

模拟姓名数据：

模拟全名：

Random

模拟姓氏：

Random

模拟名字

Random

Mock.mock()的运用

除了制造模拟数据之外，更关键的是，我们发起Ajax请求的时候要能够接收到这些数据呀。嘿嘿，这就是Mock.mock()的作用啦！

上面我介绍过Mock.mock()的用法，如下：

Mock.mock([你发起Ajax请求的URL], ["get"或"post"],[根据Mock.Random定制的模板或函数])

在文章开头的时候，我们通过使用mock函数的第三个参数生成了对应的模拟数据：

var 

但如果我们希望这个数据能够被请求某个ＵＲＬ的ａｊａｘ接收到，那就要运用到前两个参数了：

用例如下：

［注意］　为了在Vue中使用Ajax，我注册了一个插件：Vue-Resource，关于更多可以参考Vue-Resource的官方文档

import 

demo:

Mock.js小练兵——用Vue + Vuex + mockjs搭建一个简单的文章Feed

下面，我将用用Vue + Vuex + mockjs搭建一个简单的应用，展示前后端分离的工作流程

先看看我们最终要达到的效果，这是UI的最小单元:

我们希望能显示多个文章卡片，并且向其中插入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:

再刷新一次看看！！：

【完】

黄梅时节家家雨，青草池塘处处蛙。有约不来过夜半，闲敲棋子落灯花

Mock.js的缺点

这里要说明一下的是：虽然我上述介绍的都是些Mockjs的优点，但我并没有说推荐大家使用，我的目的仅仅是向大家介绍github上有这么一个体验Mock的模块而已。

下面说下个人使用的时候感受到的Mock.js的一些缺点吧

1. 不支持当今流行的fetch，而只支持Ajax
2. 前后端信息交互的能力略若弱，例如传到后台的request仅能携带3种信息： type,url和body
3. mockjs不能满足实际的使用需求： 实际上作为前端小白，我很希望mock.js能给我模拟出这样一种数据：

[

但mockjs却只能给我提供这样一种数据

[

4. 使用起来的时候发现它的最大的优点是"让展示的界面看起来很完整好看？？"，有点华而不实的感觉

所以，直到今天为止，mockjs在github仍然是5000多star，既不少，也不多

参考资料

• mock.js官方文档
• vue-resource官方文档
• vuex中文文档