Vue项目 五、表现->5.2数据模拟

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 middlewareconst 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});//创建一个routerconst 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"      }    ]  }}

参考文档

基本依赖

三级标题

四级标题

注：