用JSON-server来做API接口及其示例

通过下面这篇文章我们来了解什么是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