vue+json-server+axios 模拟后台数据请求_通过jsonserver模拟后端,使用axios完成get请求和get传参请求。-CSDN博客

本文链接：https://blog.csdn.net/qq_42334965/article/details/89068999

本文档介绍了如何使用vue结合json-server来模拟后台数据请求，通过创建db.json文件并遵循json格式填充数据，然后使用axios进行AJAX请求。在main.js中配置axios，可以在App.vue组件中实现数据请求，运行项目并在console中查看请求结果。这是一个快速入门指南，更多详情可查阅json-server官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+json-server+axios 模拟后台数据请求

参考资料：https://github.com/typicode/json-server

安装 json-server

npm install -g json-server

在 vue 根目录下创建 db.json 文件

在这里插入图片描述

严格按照 json 格式写入数据（不然会报错！！！），如

{
  "logins": [
    {
      "account": "张三",
      "password": "123"
    },
    {
      "account": "李四",
      "password": "456"
    }
  ]
}

在命令行运行 `json-server --watch db.json`，打开`http://localhost:3000`，便可以看到以下界面

在这里插入图片描述

点击 logins，或者打开`http://localhost:3000/logins`，便可以看到输入的数据。

在这里插入图片描述

接下来便可以开始请求数据啦 ?，这里我使用 axios 发送 AJAX 请求

首先当然还是安装

npm install --save axios

在 main.js 文件中输入

import axios from 'axios'
Vue.prototype.$ajax = axios;

这样就可以在 App.vue 文件中使用 ajax 请求啦，如下

mounted() {
      this.$ajax.get('http://localhost:3000/logins').then((response)=>{
        console.log(response.data);
      })
    }