前端vue json-server 配置（mock接口数据）

xian

一、json-server配置

先创建以下几个文件

// db.json

{
  "users": [
    {
      "id": 1,
      "username": "admin",
      "password": "admin",
      "avatar": "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      "roles": ["admin"]
    }
  ]
}

npm install json-server --save-dev

// server.js
// const jsonServer = require("json-server");  // nodejs独有
import jsonServer from "json-server"; // es6语法
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use("/api", router);
server.listen(3000, () => {
  console.log("JSON Server is running on port 3000");
});

在package.json的scripts部分配置添加启动json-server的脚本：

"mock": "json-server --watch mock/db.json"

在终端输入启动命令： npm run mock

现在，你可以通过访问http://localhost:3000来访问json-server提供的db.json中的数据

二、使用axios或者其他HTTP客户端库来访问json-server提供的API

在Vue项目中，使用axios或者其他HTTP客户端库来访问json-server提供的API。例如，使用axios访问json-server：

// 安装axios

npm install axios

<script setup lang="ts">
import axios from "axios";
function fetchData() {
  axios
    .get("http://localhost:3000/users")
    .then((response) => {
      console.log("response.data:", response.data);
    })
    .catch((error) => {
      console.error("There was an error!", error);
    });
}
fetchData();
</script>