1、json-server
安装
全局安装json-server
npm install -g json-server
配置
1、package.json设置
为package.json
添加一些设置:
在scripts中加入代码:
"scripts": {
"mock": "json-server --watch mock/data.json --port 9090",
"mockdev": "npm run mock & npm run dev"
}
这两句代码的作用都是在webpack中加入这两个指令,mock
和mockdev
。使用这两条指令的时候只需要在终端中加上npm run
。
npm run mock
, 单纯启动数据模拟。npm run mockdev
, 启动数据模拟并编译
--watch mock/data.json --port 9090
表示的是观察项目根目录下的mock
文件下的data.json
,端口号为9090。数据文件目录可以自己配置,当启动服务式找不到这个路径就会报错,可以没有数据文件,当文件缺失时会自动生成一个。如:
2、proxy设置
通常在本地调试的时候我们已经启动了一个静态服务,因此需要用代理服务进行跨域(两个服务分别在两个端口上)。对于使用Webpack打包的项目,已经使用了它自带的webpack-dev-server服务,它很贴心的提供了proxy参数来解决这个问题。
打开config/index.js
文件
在dev
下的proxyTable添加如下代码:
'/gm/api/*': {
target: 'http://localhost:9090',
secure: false
}
添加完这两个我们就可以成功mock数据了。
3、运行
npm run mockdev
成功编译后,8080的端口和9090的端口便可以同时访问了。
在地址栏输入localhost:9090
查看数据
上图中红色部分便是data.json
文件里的数据。最后一个/db
应该是database的缩写,这里它的数据是整个json文件的完成结构。
4、分类数据
我们在项目中常常会遇到很多不同的接口,非常繁杂的数据,如果将这些数据全部都写在一个data.json
文件中是非常复杂的,而且不利于维护。因此我们希望将这些接口能够分类存放,但是json-server下只能观察一个json,为了能够实现多个,我们还需要做一些配置。
首先我们在项目中安装json-server,因为之后的操作需要在代码中加载这个模块。
npm install json-server --save-dev
在mock
文件夹下新建一个server.js
文件,增加如下代码:
//加载json-server模块
const jsonServer = require('json-server');
//创建服务
const server = jsonServer.create();
// Support middleware
const middleware = jsonServer.defaults();
server.use(middleware);
/**
* 加载多个文件
*/
const _ = require('underscore');
const path = require('path'); //path是node.js内置的package,用来处理路径的。
const fs = require('fs'); //node.js的fs模块
const mockDir = path.join(__dirname, 'data');//拼接路径
const base = {}; //新建一个空对象,
const files = fs.readdirSync(mockDir); //读取文件
files.forEach(function (file) {
_.extend(base, require(path.resolve(mockDir, file)))//解析一个新路径,然后从路径加载文件,然后合并到base
});
//创建一个router
const router = jsonServer.router(base);
/**
* 自定义路由规则
* 要在server.use(router)前添加
*/
// server.use(jsonServer.rewriter({
// // '/api/*': '/$1',
// // '/blog/:resource/:id/show': '/:resource/:id'
// //add your rules
// }));
server.use(router);
// 返回自定义格式数据
router.render = (req, res) => {
console.log(res.locals.data);
res.jsonp({
data: res.locals.data,
status: 0,
msg: ''
});
};
/**
* 用户权限验证
*/
server.use((req, res, next) => {
if (isAuthorized(req)) {
// add your authorization logic here
next();
// continue to JSON Server router
} else {
res.sendStatus(401);
}
});
//监听9090端口
server.listen(9090, () => {
console.log('JSON Server is running');
});
注:读取文件的时候要排除掉不是.json
的文件,因为在MACOS中系统会为文件夹添加一个.DS_Store
的文件。这样做的还有好处就是可以将mock
数据的.js
文件放在同一个目录,并以同名方式存储,以便维护。
然后修改package.json
的配置,修改scripts中的mock为
"mock": "node mock/server.js"
/**用node运行这个文件*/
2、mock.js
在mock大量数据时手动添加这些数据太费时费力,这时候我们想要有个工具能随机生成这样的数据,这时候就可以用到Mock.js了
1、安装
npm install mockjs --save-dev
2、创建数据模板
在mock/data.json
的同级目录创一个js文件data.js
,这里名字不一定要相同。这个js的作用是用来生成模板数据。
例如:
var Mock = require('mockjs');
module.exports = function () {
return {
notes: Mock.mock({
'note|20': [{
'id': '@id()',
'topic': '@ctitle()',
'content': '@cparagraph()',
'create': '@date("yyyy-MM-dd")',
'modification': '@date("yyyy-MM-dd")',
'img': '@image(200*200,@hex())',
'time': '@time()',
'ulr': '@url("http","nuysoft.com")'
}]
})
}
};
3、生成数据
在终端中运行
json-server mock/data.js
如果端口冲突,修改端口,默认为3000
json-server mock/data.jsn --port 9000
运行成功的终端信息:
上图的信息中我们可以看到使用生成数据的方式。并且我们可以使用S键+Enter键的方式保存这个数据在本目录下。
生成的数据结构如下:
{
"notes": {
"note": [
{
"id": "620000197508020078",
"topic": "照各子积林",
"content": "条再把解连部们选矿走学响划百。般国少达及中习手但造风体。毛族高段带天两其家行队拉。",
"create": "1989-10-08",
"modification": "1975-08-19",
"img": "http://dummyimage.com/200*200/7984f2)",
"time": "11:47:06",
"ulr": "http://localhost:8080/xzsm"
},
{
"id": "62000020170228915X",
"topic": "件三委新",
"content": "向派离老根林京队根至指热习。元只取利水质心布斯平形系素阶正条。组事结多强关角论该选队常太反。往容离高作省十气很速知业调。群空平并率市路起发加社真济保总。从一研安事结基往入制由十民。",
"create": "1986-02-18",
"modification": "1970-08-01",
"img": "http://dummyimage.com/200*200/a7f279)",
"time": "16:55:18",
"ulr": "http://localhost:8080/yigsyvn"
}
]
}
}
参考文档
基本依赖
三级标题
四级标题
注: