详解vue-cli项目中用json-sever搭建mock服务器

下面是详解“详解vue-cli项目中用json-sever搭建mock服务器”的完整攻略：

一、什么是json-server

JSON Server是一个基于Node.js的RESTful API服务器，可以通过在本地运行json文件中的数据创建完整的RESTful API，这在前端开发中用于测试和模拟数据非常有帮助。

二、在Vue-cli项目中安装json-server

1. 安装json-server

npm install -g json-server

1. 在项目根目录下创建一个db.json文件

{
  "users": [
    { "id": 1, "name": "John", "age": 26 },
    { "id": 2, "name": "Bob", "age": 25 },
    { "id": 3, "name": "Alice", "age": 27 }
  ]
}

1. 在package.json的scripts中添加启动json-server的命令

"scripts": {
  "dev": "npm run serve",
  "serve": "vue-cli-service serve",
  "mock": "json-server --watch db.json"
}

1. 运行命令启动json-server

npm run mock

三、在Vue-cli项目中使用json-server

1. 使用axios请求mock数据

import axios from 'axios';

const API_URL = 'http://localhost:3000'; // 修改为json-server的监听地址

export function getUsers() {
  return axios.get(`${API_URL}/users`).then(response => response.data);
}

1. 在组件中使用mock数据

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

<script>
import { getUsers } from '@/api/user';

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    getUsers().then(users => {
      this.users = users;
    });
  },
};
</script>

以上就是在Vue-cli项目中使用json-server的操作过程，可以在组件开发中使用mock数据。