教程 json-server搭建及使用案例（如果后端接口来不及写，可以使用json-server来代替）

一、环境搭建

1. Node环境搭建（略）

2. 安装json-server模块

执行npm install json-server –save安装json-server模块。–save就是将模块存储到package.json文件中

 npm install -g json-server

安装成功后，package.json中出现如下模块：

二、 创建数据库

在本机创建一个文件夹，然后新建一个 json 文件，再填入数据即可。

注意：建议文件名不要出现中文。

案例：

创建 json-server-demo 文件夹，在 json-server-demo 里创建 db.json 文件（这些文件夹和文件名都可以自由命名）。

1. db.json 文件录入以下数据（数据可以使用自己的数据）

{
    "students": [
      {
        "id": "1",
        "no": "21010001",
        "name": "小明",
        "gender": "男",
        "mobile": "15533334444"
      },
      {
        "id": "2",
        "no": "21010002",
        "name": "小丽",
        "gender": "女",
        "mobile": "15533334422"
      },
      {
        "id": "3",
        "no": "21010003",
        "name": "小红",
        "gender": "女",
        "mobile": "18833334433"
      }
    ],
    "clazz": [
      {
        "name": "计科21-1班",
        "desc": "计科21级1班",
        "major": "计算机科学与技术",
        "admission_year": 2021
      },
      {
        "name": "计科21-2班",
        "desc": "计科21级2班",
        "major": "计算机科学与技术",
        "admission_year": 2021
      },
      {
        "name": "计科21-3班",
        "desc": "计科21级3班",
        "major": "计算机科学与技术",
        "admission_year": 2021
      }
    ],
    "major": [
      {
        "name": "计算机科学与技术",
        "desc": "成立于2005年",
        "department": "信息工程学院"
      },
      {
        "name": "数字媒体技术",
        "desc": "成立于2008年",
        "department": "信息工程学院"
      }
    ]
  }

2. 启动服务

进入 json-server-demo 目录，打开终端输入以下命令即可

json-server --watch db.json

三、测试本地接口

首页和三个接口都可以直接在浏览器访问，自己打开试试吧。
首页：http://localhost:3000
学生接口：http://localhost:3000/students
班级接口：http://localhost:3000/clazz
专业接口：http://localhost:3000/major

1. students接测试

（1）查（get）http://localhost:3000/students/

（2）增（post）http://localhost:3000/students/

  {
    "id": "4",
    "no": "21010004",
    "name": "Julia",
    "gender": "女",
    "mobile": "18833334488"
  }

（3）删（delete）http://localhost:3000/students/3

http://localhost:3000/{接口名}/{id}

比如要删除id为3的数据

再查一下数据，发现id为3的数据已被删除。

（4）改（put 和 patch）http://localhost:3000/students/1

http://localhost:3000/接口名/{id}

比如，修改id为1的数据

  {    
    "id": "1",
    "no": "21010001",
    "name": "张明明",
    "gender": "女",
    "mobile": "18888888888"
  }

2. clazz接口（略，请参考students接口的访问方式）

3. major接口（略，请参考major接口的访问方式）

四、使用接口

1. 修改配置文件vite.config.ts，设置服务器地址

  server: {
    port: 88,
    host: "0.0.0.0",
    // 反向代理
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000/", // 本地json server服务器
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

2. 在my-web\src\utils\api.ts中增加如下函数

// 获得所有Json Server数据库中的学生students数据
export function getAllJsonStudentsUrl() {
    return request({
        url: 'api/students/' ,
        method: 'get',
    })
}

3. 编写my-web\src\views\TestJsonServer.vue

<template>
    <h1>json server——学生管理</h1>
    <el-table ref="tableStudentsRef" :data="tableDataStudents" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" v-if="true" />
      <el-table-column prop="no" label="学号" width="380">
        <template #default="scope" width="300">
          <span>{{ scope.row.no }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100">
        <template #default="scope" width="180">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="280">
        <template #default="scope" width="180">
          <span>{{ scope.row.gender }}</span>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import { getAllJsonStudentsUrl } from "../utils/api";
  // 声明一个公告类型的接口
  interface Student {
    id: number; 
    no: string; 
    name: string; 
    gender: string; 
    mobile: number; 
  }
  // 公告数据
  var tableDataStudents = ref<Student[]>([]);
  // 查询所有的公告并绑定到表格中
  const getAllJsonStudentsData = () => {
    getAllJsonStudentsUrl().then((res: any) => {
      console.log(res);
      tableDataStudents.value = res;     
    });
  };
  // 页面加载后查询所有公告数据
  onMounted(() => {
    getAllJsonStudentsData();
  });
  </script>
  

4. 添加页面路由（略）

5. 查看页面效果

（1）后端运行：

json-server --watch db.json

（2）前端运行（新建另一个终端窗口)

npm run dev

（3）页面运行效果

（4）数据也可以使用其他组件显示，比如el-descriptions

<template>
  <h1>json server——学生管理</h1>
  <!-- 使用el-table显示数据 -->
  <el-table ref="tableStudentsRef" :data="tableDataStudents" style="width: 60%" border>
    <el-table-column prop="id" label="编号" width="180" v-if="true" />
    <el-table-column prop="no" label="学号" width="380">
      <template #default="scope" width="300">
        <span>{{ scope.row.no }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="100">
      <template #default="scope" width="180">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="gender" label="性别" width="280">
      <template #default="scope" width="180">
        <span>{{ scope.row.gender }}</span>
      </template>
    </el-table-column>
  </el-table>
  <!-- 使用el-descriptions显示数据 -->
  <el-descriptions
    v-for="item in tableDataStudents"
    title="学生信息管理"
    direction="horizontal"
    :column="2"
    border
    style="width: 500px; margin-top: 50px"
  >
    <el-descriptions-item label="编号">{{ item.id }}</el-descriptions-item>
    <el-descriptions-item label="学号">{{ item.no }}</el-descriptions-item>
    <el-descriptions-item
      label="姓名"
      label-class-name="my-label"
      >{{ item.name }}</el-descriptions-item
    >
    <el-descriptions-item label="性别">{{ item.gender }}</el-descriptions-item>
    <el-descriptions-item label="手机" span="2">{{ item.mobile }}</el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getAllJsonStudentsUrl } from "../utils/api";
// 声明一个公告类型的接口
interface Student {
  id: number;
  no: string;
  name: string;
  gender: string;
  mobile: number;
}
// 公告数据
var tableDataStudents = ref<Student[]>([]);
// 查询所有的公告并绑定到表格中
const getAllJsonStudentsData = () => {
  getAllJsonStudentsUrl().then((res: any) => {
    console.log(res);
    tableDataStudents.value = res;
  });
};
// 页面加载后查询所有公告数据
onMounted(() => {
  getAllJsonStudentsData();
});
</script>

<style>
.my-label {
  background: #e1f3d8 !important;
}
</style>

（5）运行效果