通过下面这篇文章我们来了解什么是JSON-server, 如何利用它来做一些临时JSON数据。
1. 什么是JSON-server
简单来说就是把JSON文件当作一个临时的数据库使用的这样一个工具。你可以对其做get, post请求。比如说你想用本地JSON文件来做个数据源，然后用JSON-server来观察管理这个文件，要给这个JSON文件做API请求接口端口的话，利用JSON-server我们就可以跟这个本地JSON文件做交互。
例如，下面的这个blog.JSON文件结构是这样的：
{
"blogs":[
{id:1, title:"this is blog title 1"},
{id:2, title:"this is blog title 2"},
{id:3, title:"this is blog title 3"},
]
}
如果我们对其加入API请求端口的话：
[http://localhost:3000/blogs](http://localhost:3000/blogs) -->get请求博客列表
[http://localhost:3000/blogs](http://localhost:3000/blogs) --> post请求添加新博客
[http://localhost:3000/blogs](http://localhost:3000/blogs)/id --> 获取单个博文的请求
[http://localhost:3000/blogs](http://localhost:3000/blogs)/id --> 删除单个博文的请求
这样我们就可以做一个本地的API接口来进行测试了。
2. 如何安装JSON-SERVER
你的本地环境需要安装nodejs, 这样我们就可以用NPM来安装这个插件了。
npm install -g json-server
安装以后查看下package.json文件里面是不是有这个依赖了。
3.用JSON-server来观察文件
这个比较简单，我们可以直接运行下面的命令：
json-server --watch blog.json
回车以后我们就会看见两个端口：
http://localhost:3000/blogs
http://localhost:3000
blogs这个URL是根据文件里的"blogs"这个对象数组来生成的，如果加入了另一个数组，如：
"articles":[], 那么我们就会看到多了另外一个端口：
http://localhost:3000/artciles
如果你是在windows系统，在运行的时候可能会遇到这种错误：
0810075948.png
如何解决呢？运行下这个命令：
Set-ExecutionPolicy -ExecutionPolicy Unrestricted
4.post请求示例
我们可以对其进行post请求，在HTML里面做一个提交表，下面是一个用fetch来做POST请求的例子：
const url = "http://localhost:3000/blogs";
const form = document.querySelector("form");
const createPosts = async (e) => {
e.prevenDeault();
const doc = {
title:form.title.value,
content:form.title.value
}
await fetch(url, {
method:"post",
body:JSON.stringify(doc),
headers:{
'content-type':'application/json'
}
})
}
form.addEventListener('submit', createPosts);
一般的数据表里面都有id这个字段，它也会自动进行自增的处理，不用传入。
5. delete请求示例
delte请求跟post请求比较类似，就是把post换成delete便可。
deletebtn = document.addEventListener('.deletebtn');
let id = new URLSearchParams(window.location.search).get('id');
//获取URL 参数
deletebtn.addEventListener('click', async () => {
await fetch(url+id, {
method:"DELETE"
})
})
6.搜索和排序
搜索的时候非常简单，在URL里面加一个搜索参数q就可以了。例如：
http://localhost:3000/blogs?q=searchterm
它会在title和content里面搜索这个关键词
我们可以用某个字段来排序，例如用升序来排博文，也就是ID字段
http://localhost:3000/blogs?_sort=id&_order=desc
网友评论