mockjs模拟虚拟数据（一）

　不知道大家还记不记得mockjs的特性，现在让我带大家一起回顾一下吧!!!

　　特性

　　前后端分离

　　增加但愿测试的真实性

　　开发无入侵

　　用法简单

　　数据类型丰富

　　方便扩展

　　不知道大家注意到了没，mockjs支持支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。接下来我带大家模拟数据。

　　一、创建项目

　　全局安装 webpack

　　$ npm/cnpm install webpack -g

　　在安装 vue-cli

　　创建一个基于 webpack 模板的新项目

　　$ vue init webpack webpack-simple (一路回车哦)

　　安装依赖

　　npm/cnpm install

　　这时候运行npm run dev 让它跑起来，浏览器界面就会有Vue的logo，以及一些内容

　　二、Json-Server

　　项目搭建好了，需要本地模拟数据来测试接口效果。

　　这里使用Json-Server这个工具来构建本地Server

　　安装 json-server

　　npm/cnpm install -g json-server

　　安装完成后，在项目中创建json文件模拟返回的数据内容，这里我的json文件名为db.json

　　目录结构

　　m.png

　　{user:{name:Rose,age:22,sex:boy

　　}

　　}

　　然后执行 json-server db.json

　　注意：

　　mock.png

　　执行成功后会提示已经启动了一个端口为3000的服务，在浏览器中输入localhost:3000/user 能看到如下的页面：

　　json.png

　　到这里，本地的server已经搭建完毕，但是，本地的server数据是死的，这时候就用到了mock。

　　三、使用Mock.js

　　Mock Server中 db.json 中的数据是是死的，我们可以借助Mock.js生成动态数据，增加测试的真实性。

　　安装mock.js

　　npm install mockjs --save-dev

　　项目中创建db.js 文件，和db.json是同级目录哦，内容如下：

　　a.png

　　执行 json-server db.js 再次查看 localhost:3000/user 已经能看到数据效果了

　　u.png

　　好啦，今天就到这里结束啦，明天各位说一下怎么把数据铺到页面上，大家也可以尝试，小小的透露一下，将数据铺到页面上需要运行两条命令，也就是说，要打开两个命令窗口，是不是觉得很麻烦呢?

　　所以明天我们就想办法将两条命令合并为一条，拭目以待吧!!!

　　如果大家喜欢这篇文章，记得点喜欢哦!!!

　　

​