MockJs结合json-server模拟后台数据

MockJs结合json-server模拟后台数据的完整攻略如下：

1. 安装MockJs和json-server

在终端中执行以下命令安装MockJs和json-server：

npm install mockjs json-server --save-dev

2. 编写Mock数据

在项目根目录下创建mock文件夹，然后创建文件db.json和mock.js。在db.json中添加一些默认的数据，例如：

{
  "articles": [
    {
      "id": 1,
      "title": "MockJs结合json-server模拟后台数据",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "createdAt": "2021-01-01T00:00:00.000Z"
    }
  ]
}

在mock.js文件中使用MockJs的语法生成更多的假数据，例如：

const Mock = require('mockjs');

const data = Mock.mock({
  'users|10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'email': /[a-z0-9]+@[a-z0-9]+\.[a-z]+/i,
      'createdAt': '@datetime',
    },
  ],
});

module.exports = function () {
  return data;
};

3. 配置启动脚本

在package.json文件中添加以下脚本：

{
  "scripts": {
    "mock": "json-server --watch mock/db.json --routes mock/routes.json"
  }
}

其中，--watch选项表示json-server会监视db.json文件的变化；--routes选项表示json-server会使用routes.json文件中配置的路由信息。

4. 配置路由信息

在mock文件夹中创建routes.json文件，并添加以下内容：

{
  "/api/*": "/$1",
  "/users": "/users",
}

其中，/api/表示匹配所有api请求；/$1表示重写URL，$1表示匹配的内容；/users表示请求对应的数据源文件。

5. 启动mock服务

在终端中执行以下命令启动mock服务：

npm run mock

示例1：mock.js结合json-server模拟后台数据

在mock.js文件中使用MockJs的语法生成用户数据：

const Mock = require('mockjs');

const data = Mock.mock({
  'users|10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'email': /[a-z0-9]+@[a-z0-9]+\.[a-z]+/i,
      'createdAt': '@datetime',
    },
  ],
});

module.exports = function () {
  return data;
};

在db.json文件中添加默认的文章数据：

{
  "articles": [
    {
      "id": 1,
      "title": "MockJs结合json-server模拟后台数据",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "createdAt": "2021-01-01T00:00:00.000Z"
    }
  ]
}

启动mock服务后，在浏览器中访问http://localhost:3000/users可以看到生成的用户数据。

示例2：使用Mock.js生成随机的新闻数据

在mock.js文件中，使用MockJs的语法生成新闻数据：

const Mock = require('mockjs');

const data = Mock.mock({
  'articles|10': [
    {
      'id|+1': 1,
      'title': '@title',
      'content': '@paragraph',
      'createdAt': '@datetime',
    },
  ],
});

module.exports = function () {
  return data;
};

在db.json文件中添加一个空的articles对象：

{
  "articles": {}
}

启动mock服务后，在浏览器中访问http://localhost:3000/articles可以看到生成的新闻数据。