1分钟学会使用json-server

嗨咯!这里是小M. (努力学习VUE版)
先来分享一个我的每日表情包(糊了的萨斯给才最可爱 )
在这里插入图片描述

今天分享json-server的简单用法(学不会你来打我)

1.json-server是啥玩意儿

json-server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。
简单的说,它可以模拟小型后台接口,在一个JSON文件中操作数据,是基于的node.js的一个模块

比如我在学习axios,就可以用json-server来模拟接口

2.安装和使用

npm上网址戳 这儿

gitHub网址戳 这儿
在README文件中都有很详细的介绍

$\color{20B2AA} {全局安装(在node环境下)} $

npm install -g json-server

$\color{20B2AA} {创建一个名为db.json文件, 并且存放好以下数据} $

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

文件中的数据是可以修改的,但是对象名最好不要改(posts、comments、profile)

启 动 服 务 \color{20B2AA}{启动服务}

注意:启动服务必须在db.json文件目录下

json-server --watch db.json

这样就是成功了,可以ctrl+链接查看数据
在这里插入图片描述

接下来就可以使用默认的接口了

GET    /posts    得到posts中的数据
GET    /posts/1  得到posts中id为1的数据
POST   /posts    传输数据给posts
PUT    /posts/1  增加资源给posts
PATCH  /posts/1  通过query方式传参
DELETE /posts/1  删除数据

也可以自定义路由器和排序等其他用法,这里不过多介绍,官网里写的很详细。

3.通过axios测试

//测试GET
axios.get("http://localhost:3000/posts").then((result) => {
             console.log(result);
         }).catch((err) => {
             console.warn(err);
         }).then(function () {
             // 总是会执行
         });;

成功发送请求
在这里插入图片描述

//测试POST
axios.post('http://localhost:3000/posts', {
            title: "POST请求",
            author: "小M."
        }).then((result) => {
            console.log(result);
        }).catch((err) => {
            console.log(err);
        });

可以查看db.json文件,小M这条数据已经传输进去l
在这里插入图片描述

其他接口的用法都是大同小异的

无法加载json-server.ps1问题解决

在安装时,我碰到这个问题

无法加载文件xx\npm\json-server.ps1,因为在此系统上禁止运行脚本

(我忘记留图了)

我查了些资料发现是PowerShell执行脚本的安全策略出了问题

  • Restricted: 禁止运行任何脚本和配置文件。(默认)
  • AllSigned :可以运行脚本,但要求所有脚本和配置文件由可信发布者签名,包括在本地计算机上编写的脚本。
  • RemoteSigned :可以运行脚本,但要求从网络上下载的脚本和配置文件由可信发布者签名;不要求对已经运行和已在本地计算机编写的脚本进行数字签名。
  • Unrestricted :可以运行未签名脚本。(危险!)

解决方案:

1. ) \color{20B2AA}{1. )} 1.win+R 打开这个框(忘记叫啥了

2. ) \color{20B2AA}{2. )} 2.如图输入PowerShell(PowerShell就是更强大的cmd)
在这里插入图片描述

3. ) \color{20B2AA}{3. )} 3. 输入

Get-ExecutionPolicy

一般情况会是默认的 Restricted ,接下来把它改成RemoteSigned就可以了

Set-ExecutionPolicy RemoteSigned
输入y确认
在这里插入图片描述
再重新启动

json-server --watch db.json

就可以成功使用了

转载:欢迎转载,但未经作者同意,必须保留此段声明;

有问题可以在评论区踢我