一文教你不会后端也能自己写接口的数据库插件 -- json-server

我们在写前端向后端发送请求的进行测试时，因为不会用后端写接口，所以会导致我们要去网上很麻烦的去找借口，那么今天就教给大家一个能够自己写接口的一个插件，非常好用，方面俱到，最重要的是简单易学，对于我们测试和对后端的交互理解都会有很好的帮助，学到就是赚到！

1. 首先，我们随便创建一个文件夹，名字就叫 json-serve

2. 打开此文件的终端，安装json服务器，指令为：npm install -g json-server

3. 文件下创建db.json文件, 里面添加以下如下属性

 {
        "posts": [{ // 帖子
            "id": 1, 
            "title": "json-server",
            "author": "typicode"
        }],
        "comments": [{ // 评论
            "id": 1, 
            "body": "some comment", 
            "postId": 1 
        }],
        "profile": { "name": "typicode" } // 用户信息
    }

这里面的属性都是阔以自己直接修改并去使用的（相当于自己需要的后端数据自己写），在访问时就能够直接访问到其中的数据。

4. 启动 json-server --watch db.json

注意，此时可能会报错 --- 无法加载文件 xxxxx，因为在此系统上禁止运行脚本解决

解决：

get-ExecutionPolicy

Set-ExecutionPolicy -Scope CurrentUser

RemoteSigned

以上三条命令连续执行后，再重新启动就行了。

5. 以上四步执行完后，终端运行结果会返回

\{^_^}/ hi!

http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

此时，项目就成功跑起来啦，不用跨域就能直接使用以上访问接口了

访问也很简单

比如访问posts中id为1的数据

let result = await axios({ // 发送AJAX请求
    // 请求类型
    method: "GET",
    // URL
    url: "http://localhost:3000/posts/1" // 指向ID为2的文章
})
console.log(result);

返回结果如下

使用post提交数据

let result = await axios({ // 发送AJAX请求
        // 请求类型
        method: "POST",
        // URL
        url: "http://localhost:3000/posts",
        // 设置发送的数据体 什么都不写是只新增一个ID
        data: {
        // 内容
        title: "已经步入深秋了，树叶渐渐的开始下落了！",
        // 作者
        author: "不读诗意"
    }
})
console.log(result);

结果如下

阔以看到，数据已经添加上去了。

补充：

阔以在启动时在后面加入指令 json-server --watch db.json -d 2000(延迟时间为2秒)

可以让返回数据延时两秒后返回。

上述只是json-serve的冰山一角：

具体可以访问文档查阅学习：https://github.com/typicode/json-server/

这样，我们即使不会写后端接口也能够自己去创建一个简易的数据库去使用了，对于我们后面与后端的交互了解也会是一个很不错的帮助。

希望能够有所帮助！

一文教你不会后端也能自己写接口的数据库插件 -- json-server

猜你喜欢