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 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"
      }
    ]
  }
}

参考文档

基本依赖

三级标题

四级标题

注：