注:本文主要学习于vue-cli 本地开发mock数据使用方法,加上我自己的理解和实践。
实习了半年,一直觉得公司前后端的交互方式太麻烦了,很多时候前端都得根据后端的进度开发,不用说也知道,嗯,效率很低嘛。咋解决呢?
我想,前后端在开发之前一定要根据问题讨论需要的接口和数据格式,整理出api文档之后再同时开始各自的开发。我认为这样的开发流程才是正确、高效的。
那么问题来了,如果没有后端接口,前端怎么调试呢?
这就讲到今天的主角啦,mockjs。
mockjs的官网是这样说的:
生成随机数据,拦截 Ajax 请求
mockjs官网
mockjs的作用已经很明显了,就是给前端人员用来拦截ajax,造虚拟数据进行调试的。
mockjs的安装参见官网哦。
基本的用法如官网所示:
// 使用 Mock
var Mock = require('mockjs');
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
});
// 输出结果
console.log(JSON.stringify(data, null, 4))
这样就能得到一些基本的虚假数据。
数据的类型还包括图片、链接、姓名等,可以根据需要查阅mockjs官网。
但是得到假数据还不能满足我们的需求,这样做完的调试最后还是需要重新写请求与后端联调。mockjs拦截ajax的优点就有大显身手的地方啦!
怎么拦截ajax请求呢?具体的思路就是我们建一个服务器,把ajax请求发到这个服务器,服务器再根据请求返回模拟的数据。
我们使用json-server来创建一个完整的假REST API服务器,这样前端要做的仅需写一个json文件即可,完全不必有任何服务器和后端的知识。
json-server安装参考json-server官网。
- 我们首先创建一个vue项目
vue init webpack 项目名
- 然后安装项目
$ npm install
- 安装mockjs
$ npm install mockjs
- 安装json-server
$ npm install -g json-server
- 项目根目录下创建mock文件夹
- mock文件夹下创建db.json文件,写入:
{
"test1": [
{ "id": 1, "name": "test1", "author": "aoyi" }
],
"test2": [
{ "id": 2, "name": "test2", "author": "aoyi" }
]
}
- 我们在package.json的scripts中添加命令:
"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"
这样我们使用npm run mock 就可以跑服务啦,访问 http://localhost:3000/就可以看到我们服务器内容。
test1、test2和db就是我们可以访问的资源,例如在浏览器中访问 http://localhost:3000/db就可以得到相应的数据。
这样我们基本的完成了。但是涉及到数据量很大的情况,让我们手写恐怕是要死的吧。我们可以使用faker.js批量生成数据。
-
$ npm install faker -g
全局安装 faker - mock 目录下创建 faker-data.js,内容如下:
module.exports = function () {
var faker = require("faker");
faker.locale = "zh_CN";
var _ = require("lodash");
return {
book:_.times(14,function (n) {
return {
id:n,
name:faker.random.word(),
src:faker.random.image()
}
})
}
}
- $ json-server mock/faker-data.js
- 在 json server 中使用 faker请求 http://localhost:3000/book 可以获取到随机生成的10组伪数据
网友评论