Vue-cli是如何将json server整合来实现本地模拟请求数据的？

2023-10-10 13:13:18

前言

在开发过程中，前后端经常会出现异步开发的情况，尤其是前后端分离的项目，接口多半是滞后于页面开发的。因此，建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。json server 作为模拟工具，因为设置简单，容易上手，是不少开发者的选择。

json server 简介

JSON Server 是一个用于创建模拟 RESTful API 的简单工具。它允许您快速创建和修改 JSON 数据，并通过 HTTP 请求对其进行访问。JSON Server 非常适合用于开发和测试 Vue.js 应用程序，因为它可以帮助您快速模拟真实的数据。

安装 json server

要安装 json server，可以使用以下命令：

npm install -g json-server

安装完成后，您可以在任何目录中运行以下命令来启动 json server：

json-server --watch db.json

这将启动一个 JSON Server 实例，并监听 3000 端口。您可以在浏览器中访问 http://localhost:3000 来查看 JSON Server 的界面。

创建模拟数据

要创建模拟数据，您需要创建一个 JSON 文件。该文件可以包含任何您想要的数据。例如，您可以创建一个名为 db.json 的文件，其中包含以下数据：

{
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "johndoe@example.com"
    },
    {
      "id": 2,
      "name": "Jane Doe",
      "email": "janedoe@example.com"
    }
  ]
}

使用 Vue-cli 集成 json server

要在 Vue.js 项目中使用 json server，您需要在项目的 package.json 文件中添加以下脚本：

"scripts": {
  "dev": "vue-cli-service serve --port 8080",
  "json-server": "json-server --watch db.json"
}

然后，您可以在命令行中运行以下命令来启动 Vue.js 项目和 json server：

npm run dev & npm run json-server

这将启动一个 Vue.js 项目和一个 json server 实例。您可以通过 http://localhost:8080 来访问 Vue.js 项目，并通过 http://localhost:3000 来访问 json server 的界面。

访问模拟数据

要在 Vue.js 项目中访问模拟数据，您需要在 Vue.js 组件中使用 axios 库来发送 HTTP 请求。例如，您可以使用以下代码来获取 users 数据：

import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    axios.get('http://localhost:3000/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}