前言:前端工程师在配合后端请求数据渲染时,可能会遇到后端时间不同步,无法联调,或者自己不知道是否存在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>