一、工作存在的痛点
在采用前后端分离的开发方式后，前端可能需要先使用假数据模拟数据交互，然后再把数据格式发给后端。
告诉后端在生产环境时也要按照这种格式来返回数据给前端。
二、解决方案：json-server
json-server 是一个 Node 模块，运行 Express 服务器，在前端本地运行，可以存储 JSON 数据的 server。几行简单的 js 脚本就可以模拟出 RESTful API 的接口。
前端能在本地以操作 json 的方式实现数据增删改查，并在本地生成真实数据（模拟版）。
三、安装
1、安装 Node.js
这里只提供 Node官网 地址，请根据系统自行安装。
2、安装 json-server
json-server GitHub地址
因为经常会用到，所以建议全局安装。
npm install -g json-server
复制代码
四、在 Vue 中使用
本文用 Vue3 + axios 配合使用，Vue2 的用法和配置差不多，请自行转换语法。
1、定义数据
在使用 vue-cli 搭建好项目，并安装了 axios 。
之后需要在 vue 项目根目录下，创建一个文件夹用来存放数据（其实可以直接创建 json文件来存放数据，但使用文件夹的方式会更好的管理项目）。
在 db.json 里定义一组数据（也可以定义多组）
{ "users": [ { "id": 1, "name": "慕容雪瑶", "age": 30 } ]}
复制代码
这里模拟一个用户表，暂时只有 1 条数据。
2、运行
在 package.json 中配置
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "jsonserver": "json-server --watch db/db.json"}
复制代码
上面多配置了一条 jsonserver 命令，使用 json-server 命令启动这个服务，并通过 --watch 监听 db.json 文件文件的变化。
然后运行一下命令，启动 json-server 服务
可以看到成功启动了服务，http://localhost:3000，而 http://localhost:3000/users 就是专门访问刚刚定义的那个 “用户表” 的数据。
比如在浏览器访问（也可以使用 postman 访问）
3、查 get
使用 get 方法进行查询。
以下代码没做数据校验。
<template> <div> <div v-for="user in userList" :key="user.id" > <span>姓名：{{user.name}}</span> | <span>年龄: {{user.age}}</span> </div> </div></template>
<script>import { ref } from 'vue'import axios from 'axios'export default { setup() { const userList = ref([])
axios.get('http://localhost:3000/users') .then(res => { userList.value = res.data }) .catch(err => { console.error(err) })
return { userList } }}</script>
复制代码
4、增 post
使用 post 方法新增数据。
通过 axios 新增数据，新增完再调用获取数据的 api，更新视图。
以下代码没做数据校验。添加成功后也没清空输入框。
<template> <div> <div> <input type="text" placeholder="请输入姓名" v-model="userName"> <input type="text" placeholder="请输入年龄" v-model="userAge"> <button @click="addUser">添加</button> </div> <div v-for="user in userList" :key="user.id" > <span>姓名：{{user.name}}</span> | <span>年龄: {{user.age}}</span> </div> </div></template>
<script>import { ref } from 'vue'import axios from 'axios'export default { setup() { const userList = ref([])
// 获取用户列表 const fetchUserList = function() { axios.get('http://localhost:3000/users') .then(res => { userList.value = res.data }) .catch(err => { console.error(err) }) }
fetchUserList()
const userName = ref('') // 用户名 const userAge = ref('') // 年龄
// 添加用户 function addUser() { axios.post('http://localhost:3000/users', { name: userName.value, age: userAge.value }) .then(res => { console.log(res) fetchUserList() // 添加成功后更新数据 }) .catch(err => { console.error(err) }) }
return { userList, userName, userAge, addUser } }}</script>
复制代码
5、改 put
使用 put 方法修改。
api 为 http://localhost:3000/users/1，最后的 1 代表 id 为 1。
其实学过 vue-router 的开发者，也知道这个原理：http://localhost:3000/users/:id
function edit() { axios.put('http://localhost:3000/users/1', { name: userName.value, age: userAge.value }) .then(res => { console.log(res) fetchUserList() // 添加成功后更新数据 }) .catch(err => { console.error(err) })}
复制代码
6、删 delete
使用 delete 删除。
也是根据 id 进行删除。
function delUser() { axios.delete('http://localhost:3000/users/1') .then(res => { console.log(res) fetchUserList() // 添加成功后更新数据 }) .catch(err => { console.error(err) })}
复制代码
评论