使用json-server 模拟后端数据

这篇具有很好参考价值的文章主要介绍了使用json-server 模拟后端数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. json-server是什么

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

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

2.安装和使用

全局安装(在node环境下)

npm install -g json-server

创建一个名为db.json文件,并且存放好以下数据

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

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

启动服务

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

json-server --watch db.json

这样就是成功了,可以ctrl+链接查看数据
json模拟数据,json接下来就可以使用默认的接口了。

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 () {
             // 总是会执行
         });;

成功发送请求

json模拟数据,json

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

json模拟数据,json其他接口的用法都是大同小异的。

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

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

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

  • Restricted: 禁止运行任何脚本和配置文件。(默认)
  • 如图输入PowerShell(PowerShell就是更强大的cmd)。
  • RemoteSigned :可以运行脚本,但要求从网络上下载的脚本和配置文件由可信发布者签名;不要求对已经运行和已在本地计算机编写的脚本进行数字签名。
  • Unrestricted :可以运行未签名脚本。(危险!)

解决方案:

  1. win+R打开这个框。
  2. 如图输入PowerShell(PowerShell就是更强大的cmd)。

json模拟数据,json
3. 输入

Get-ExecutionPolicy

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

Set-ExecutionPolicy RemoteSigned 输入y确认

json模拟数据,json
再重新启动

json-server --watch db.json

链接:https://juejin.cn/post/7088666061339361293
来源:稀土掘金文章来源地址https://www.toymoban.com/news/detail-557434.html

到了这里,关于使用json-server 模拟后端数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • json-server搭建使用

    在开发过程中,接口多半是滞后于页面开发的。利用JSON Server快速搭建模拟返回REST风格的后台数据,保证前后端开发的分离。前后端开发只要设定好接口以及数据的定义,剩下的就可以各自开发,最后集成测试。 JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个

    2024年02月06日
    浏览(30)
  • Json-server的使用步骤

    1、在线文档 : https://github.com/typicode/json-server 2、下载: npm install -g json-server 3、目标根目录下创建数据库json文件:db.json 4、启动服务:json-server --watch db.json

    2024年02月16日
    浏览(30)
  • 『前端必备』本地数据接口—json-server 详细介绍(入门篇)

    目录 前言  一、Node环境搭建 1-1 简介 1-2 Node.js环境搭建 1-2-1 下载 1-2-2 安装 1-2-3 验证 1-3 npm简介 二、json-server环境搭建 2-1 简介 2-2 安装 2-3 创建数据库 2-4 启动 ​编辑 2-5 查看 三、操作数据 3-1 查(get) 3-2 增(post) 3-3 删(delete) 3-4 改(put 和 patch) Ajax 是前端必学的一个知

    2024年02月05日
    浏览(43)
  • json-server详解

    1、简介 Json-server 是一个 零代码快速搭建本地 RESTful API 的工具 。它使用 JSON 文件作为数据源 ,并提供了一组简单的路由和端点,可以模拟后端服务器的行为。 github地址:https://github.com/typicode/json-server npm地址:https://www.npmjs.com/package/json-server 2、安装 json-server是基于npm安装的

    2024年02月15日
    浏览(29)
  • json-server 详解

    这几天在写react的前端项目,想着后端接口没有,在网上也找不到比较合适的接口,所以在github和npm上翻了许久关于前端简单生成后端接口的工具,终于被找到了这个神仙工具 json-server json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、

    2024年02月08日
    浏览(36)
  • json-server操作restful

    1.安装Node.js 默认已经内置npm,下载对应软件包直接安装即可。nodejs的官网 命令 描述 指令 解释 npm -v 查看版本 npm install 模块名 安装模块 npm list 查看所有全局安装的模块 npm list -g 查看某个模块的版本号 npm install --save 模块名 在package.json文件中写入依赖(npm5版本之前需要指定

    2024年02月09日
    浏览(41)
  • 【json-server】centos线上环境搭建全攻略

    描述 开发中经常需要搭建服务器做交互,其中 RESTfull 风格的接口尤为受人青睐,今天我们就要使用 json-server 来搭建一个服务,满足日常工作需要。 环境 版本号 描述 文章日期 2023-06-25 腾讯云 CentOS 7.5 64位 nvm 0.39.3 node -v v16.16.0 npm -v (8.11.0) json-server 0.17.3 安装json-server有很多

    2024年02月11日
    浏览(44)
  • Postman报错 status: 500,error: Internal Server Error,数据无法通过json传入后端。

    原因:没有加@RequestBody注解 错误如下: {     \\\"timestamp\\\": \\\"2022-10-08T12:28:11.503+00:00\\\",     \\\"status\\\": 500,     \\\"error\\\": \\\"Internal Server Error\\\",     \\\"path\\\": \\\"/books\\\" } 测试数据: 控制台:   解决方法: 把要传入的book前面加入@RequestBody 而@RequestBody主要用来接收前端传递给后端的json字符

    2024年02月11日
    浏览(54)
  • postman-使用Postman的模拟服务来模拟(mock)后端数据,完成前端模拟API调用

    最近项目上比较忙,任务多时间紧,导致后端开发任务繁多,无法及时开发完毕,但是前端同学已经把对应功能开发完成,需要进行前后端联调来验证API及一些交互问题;这不能因为后端的进度来影响前端的工作完成情况,因此,Postman的mock数据功能就用了,确实好用。 Set

    2024年02月11日
    浏览(45)
  • Java后端使用POST请求向mysql中插入Json数据的问题

    Cause: java.lang.IllegalStateException: Type handler was null on parameter mapping for property ‘urlParams’. It was either not specified and/or could not be found for the javaType (com.alibaba.fastjson.JSONObject) : jdbcType (null) combination.

    2024年02月07日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包