json-server急速入门详解

最新推荐文章于 2024-07-09 00:03:10 发布

梦想猜是敲代码

最新推荐文章于 2024-07-09 00:03:10 发布

阅读量2.3k

点赞数 4

文章标签：服务器 json 前端 javascript

本文链接：https://blog.csdn.net/zyl19950717/article/details/131601950

版权

文章介绍了前端工程师在后端数据不同步时，如何使用json-server作为本地服务器来模拟数据，包括json-server的安装、启动、配置db.json文件以及使用它进行数据的增删改查操作，帮助开发者进行前端开发和调试。

摘要由CSDN通过智能技术生成

前言：前端工程师在配合后端请求数据渲染时，可能会遇到后端时间不同步，无法联调，或者自己不知道是否存在BUG，无法验证。那么属于前端的服务器json-server就可以完美解决这些问题。

1.node环境安装

安装json-server以前必须需要node环境，建议直接去官网下载即可（尽量下载最新版本）。

（话说需要用到json-server，那么大多都有node环境）

利用终端中node-v来检测是否安装上，及安装版本

2.json-server的安装

有了node环境，我们就可以使用npm来安装json-server。

首先，我们win+R，输入cmd，打开全局终端

输入

npm install -g json-server

安装全局json-server，安装后输入json-server -v来检测版本号，验证是否安装成功

json-server -v

3.json-server的启动

安装完json-server，我们需要配置及启动

1.创建一个db.json文件

目的是为了有一个文件能够保存数据，一定是要json格式。然后去到任意一个文件夹下面创建此文件（注：文件夹不要出现中文）

2.直接在此文件夹下打开终端cmd

3.在此终端下输入以下内容

其中--watch是表示监听，db.json表示监听某个文件，-p 3002表示端口号是3002（默认端口号是3000，一般情况可以不用设置，在此示例主要是表示如何应用）

以下表格是具体的启动配置项的各个参数，常用的在上文已经表述过，有其他扩展需要的可以参考下表。

4.回车启动后，如下表示成功开始监听

5.简单配置db.json

直接把db.json放置到vs-code（其他工具都可以）,简单编辑一个json对象，例如（一定要严格执行json格式，注意逗号和双引号不要轻易遗漏）

ctrl+s保存后，终端对应响应如下

那么我们就多了一个Resources的资源点，便是我们刚才配置的list

到这里，整个json-server的配置就全部结束，下面直接进入到具体使用步骤

4.json-server的增删改查功能

注：实现前后端交互功能前，需要先安装axios并导入

~~~完整版代码见最后~~~

1.请求所有数据之‘get’

我们直接利用axios发送请求，注意method这里使用get方法，url便是我们搭建json-server时的地址（只做全局查询的话，其他不用做过多配置），直接在挂载期执行

请求成功！为了方便观察，直接在页面渲染

2.按需查询之‘get’

get不仅能够直接获取整个目录列表下的数据，同样也可以获取到我们具体想搜索到的某一条数据

与上述不同的是，这次我们需要传递一个参数，一般情况下是个id，主要因为id具有唯一性，当然别的参数也可以（新增后的数据我们一般不需要写id，因为json-server会自动向下延伸）

点击后就只剩下id为1的数据了

3.新增数据之‘post’

post方法可以实现在原本的数据后面追加数据，且会自动根据前面数据的id值，自动顺延id

这里需要在data中添加数据，如上所述，我们不需要添加id

并且在db.json中也是实时添加

4.删除对应项之‘delete’

delete方法可以帮我们实现删除对应项，使用时直接在函数中传入参数，直接拼接在url地址后面

这里传入的3，表示要删掉id为3的这部分数据（实际使用时根据勾选框或者输入input绑定事件灵活删除）

点击完以后，也就只剩下id为1和2的数据了，同理db.json中也是会同步删除

附：想实现批量全部删除，可以通过循环遍历的方式，获取所有的id，多次执行delete方法即可

5.修改对应项之‘put’

put方法可以实现对原有的数据进行更新，需要注意的是：假如我们只修改了id为1的数据中的name属性，但是未修改age，那么后续我们的id为1的数据中将不会有age

我们同样在函数中传入一个参数拼接在url地址后，表示我们要修改的是id为1下面的数据，如果data中只有name，那么结果会变成如下，所以我们需要在写清楚所有的字段，保障属性不丢失

另：其实patch方法已经对put方法中的这个缺陷进行了修改，故只需要写入需要修改的属性，未修改的属性不需要再重复编写，也不会丢失

5.总结

此文章针对的是基础json-server需求者，但同样也能满足市场上绝大多数的使用需求，此外还涉及到部分区域查询、分页、排序等暂不做分享，毕竟我们只是模拟数据，真正的需求还是需要后端同事提供

另：文章有误有疑问，欢迎各位评论私信~

完整版代码如下，需要自取~

<template>
	<div class="hello">
		<h1>
			{{form}}
		</h1>
		<div class="btn">
			<button @click="srcData()">点击查询</button>
			<button @click="pushData()">点击新增</button>
			<button @click="delData(3)">点击删除</button>
			<button @click="putData(1)">点击修改</button>
		</div>
	</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		props: {
			msg: String
		},
		data() {
			return {
				form: [

				]
			}
		},
		//挂载期
		mounted() {
			this.getData()
		},
		methods: {
			//get方法：请求list中的所有数据
			getData() {
				axios({
					method: 'get',
					url: 'http://localhost:3002/list',
				}).then((res) => {
					this.form = res.data
				})
			},
			//post方法：在list数据中继续添加新数据
			pushData() {
				axios({
					method: 'post',
					url: 'http://localhost:3002/list',
					data: {
						name: '华强',
						age: 45
					},
				}).then((res) => {
					// this.form = res.data
					this.form.push(res.data)
				})
			},
			//get方法：携带params参数可以做到查询某一项的功能
			srcData() {
				axios({
					method: 'get',
					url: 'http://localhost:3002/list',
					params: {
						id:1
					},
				}).then((res) => {
					this.form = res.data
				})
			},
			//delete方法：删除对应项
			delData(id) {
				axios({
					method: 'delete',
					url: 'http://localhost:3002/list/' + id,
				}).then((res) => {
					this.getData()
				})
			},
			//put方法：修改原有內容
			putData(id){
				axios({
					method:'put',
					url:'http://localhost:3002/list/' + id,
					data:{
						name:'小王'
					}
				}).then((res)=>{
					this.getData()
				})
			}
		}
	}
</script>

<style scoped>
	.btn button {
		margin: 10px;
		background-color: blue;
		color: white;
		border-radius: 10px;
		border: 1px solid white;
		padding: 20px;
		font-size: 18px;
		cursor: pointer;
	}
</style>