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文件，用于存放我们的模拟数据。以下是一个示例：

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "age": 18
    },
    {
      "id": 2,
      "name": "Bob",
      "age": 20
    }
  ],
  "articles": [
    {
      "id": 1,
      "title": "Article 1",
      "content": "Content of article 1"
    },
    {
      "id": 2,
      "title": "Article 2",
      "content": "Content of article 2"
    }
  ]
}

3. 创建mock接口

在mock文件夹下创建一个routes.json文件，用于定义我们的接口。以下是一个示例：

{
  "/api/users": "/users",
  "/api/articles": "/articles"
}

这里我们定义了两个接口：/api/users和/api/articles，在json-server中对应的路由为/users和/articles。

4. 创建mock服务

在package.json中添加以下scripts：

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

然后在命令行中运行npm run mock，就可以启动mock服务了。

5. 使用mock服务

现在我们已经搭建好了mock服务，接下来我们可以在前端代码中使用mock数据。

例如，在Vue.js中，我们可以使用axios库请求mock接口，然后使用mock数据渲染页面。以下是一个示例：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.age }})</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    axios.get('/api/users').then((response) => {
      this.users = response.data;
    });
  },
};
</script>

在这个例子中，我们使用axios请求/mock/api/users接口，然后将返回的数据赋值给Vue组件的data属性中的users属性。最后，在模板中使用v-for指令将users数组渲染出来。

另外，我们还可以在mock数据中添加更多的字段，例如日期、图片、布尔值等等。具体用法可以参考mockjs的官方文档。