前端数据模拟Mockjs 前端数据模拟工具

Mockjs 可以生成随机数据，拦截 Ajax 请求，模拟服务器响应。

在前端开发时，在后端接口可能尚未完成开发。这就需要模拟后端接口数据来测试前端开发代码。

Mockjs 可以使我们能正常用 Axios 发送网络请求，这个请求会被 Mockjs 拦截下来，并且可以用 Mockjs 模拟数据响应。当后端的接口开发完毕后，只需把 Mockjs 移除即可，其它前端代码不用修改，就可以自动请求后端，这样在前后端分离的开发就非常的方便。

在使用时需要加一个引入，不使用的时候去掉引入就可以了。

Mockjs 只是在前端开发时会用到。

Mockjs 支持随机生成文本、数字、布尔值、日期、邮箱、图片、链接等。

官方网站：http://mockjs.com/

安装：npm install mockjs

下面开始演示：

1.创建项目，名字为 mockjs-demo（安装过程参考笔记（九）），本示例以 Vue2 进行演示。安装完成后将文件拖入 Visual Studio Code 。

2.分别安装axios、mockjs

Visual Studio Code 中点击查看-终端，分别输入如下代码：

axios安装 ：npm install axios

axios安装 ：npm install mockjs

安装完成后参看 package.json 文件，可以看到 vue、axios、mockjs都已经安装成功。

3.在 src 下新建一个 mock 文件夹，并在其中新建一个 index.js 文件，输入如下代码：

//引入 mock.js
import Mock from 'mockjs'
//使用mockjs 模拟数据
Mock.mock('/product/search',{
 "ret":0,
 "data":
 {
 "mtime":"@datetime",//随机生成日期时间
 "score|1-800":1,//随机生成1-800的数字
 "rank|1-100":1,//随机生成1-100的数字
 "stars|1-5":1,//随机生成1-5的数字
 "nickname":"@cname",//随机生成中文名字
 "img":"@image('200x100','#ffcc33','#FFF','png','Fast Mock')"//生成图片
 }
})

说明：在项目中先导入 mockjs 。这里面有一个mock方法，根据导入的 Mock 类调用mock 方法。第一个参数就是要设置拦截的地址 '/product/seach' 。之后前端只要往这个链接发送请求，就会被 mock 拦截，由 mock 来给前端提供模拟数据。

在提供的模拟数据中，这里提供了一个键值对 "ret":0，这个键的名称"ret" 和值（当前设为 0） 根据个人需要设定；

data里面加入了其它的数据，比如："mtime" 对应的是时间 "@datetime" 等；

"score|1-800":1 中后面这个 1 ，主要是要确定数据类型，设为数字几都可以，最终要生成多少是根据前面 1-800 这部分来确定；score 这个名称是自定义的，自己明白模拟的是什么数据就可以。

4.index.js 文件生成后，需要在main.js 中全局引入 mock 方法，这样在整个项目中都可以使用了。后端开发完毕后，不需要 mockjs 模拟数据时，直接去除这个引用就可以了。

import './mock'

（为了代码清晰，先删除 App.vue 中HelloWorld 相关的代码，并删除 components 目录下的 HelloWorld 组件 ）

5.这时在组件中就可以正常发送请求了。下面在根组件 App.vue 中演示：

<script>
import axios from 'axios'
export default {
 name: 'App',

 mounted:function(){
 axios.get('/product/search').then(res =>{
 console.log(res)
 })
 }
}
</script>

引入 axios ，并通过axios 调用 get 方法，以便能发送网络请求。

注意：get 后面发送的地址要和 mock 拦截的地址要一致。

get 成功后会调用 .then 去拿到响应对象 res (就是mock 中随机生成的数据)，这里通过 console.log(res) 演示了将数据打印输出。

运行 npm run serve 启动项目，在浏览器中，右键点检查，在console 中就可看到模拟打印的随机生成的数据。

这个数据当然也可以绑定到上面的<template> 的视图中。以显示图片举例。

用 res.data.data.img 代码调用照片 img

注意：这里有两个 data ，是两层嵌套的（注意看上图），第一个是 res 的data , 第二个才是 mock 的 data 。

添加一个 data 方法，返回 img ,值为空 “”

在<template> 的视图中修改照片的地址为 img

<template>
 <div id="app">
 <img alt="Vue logo" :src="img">
 </div>
</template>

<script>
import axios from 'axios'
export default {
 name: 'App',
 data:function(){
 return{
 img:""
 }
 },
 mounted:function(){
 axios.get('/product/search').then(res =>{
 //console.log(res)
 this.img = res.data.data.img
 })
 }
}
</script>

浏览器就可以显示出模拟的照片了，可以看到，照片尺寸是 200 x 100，底色是黄色（#ffcc33），文字为白色（#FFF），文字内容为：Fast Mock 。这些都是我们前面在mock 中自己定义的。