json-server Node.js 服务,前端模拟后端提供json接口服务

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

json-server Node.js 服务,前端模拟后端提供json接口服务

背景:

   前后端分离的项目,如果前端写页面的话,必须的后端提供接口文件,作为前端等待时间太久,不便于开发进行,如果前端写的过程中自己搭建一个简要的后端的json服务接口,就是可以快速进行开发事项的进行,什么内容比较好呢,那就是json-server服务可以满足上述的要求,启动服务加载个“*.json”文件就是可以提供接口了

 还可以作为不同程序的一个简单的提供json服务接口事项

1, 安装前准备
1.1 下载安装 Node.js

在官方网站下载msi安装包 https://nodejs.org/zh-cn/download/ ,下载软件包,下一步,下一步安装即可

可以借鉴,这个简要设置步骤

nodejs安装后的配置:_node 查看 配置仓库_雨师@的博客-CSDN博客

https://ht666666.blog.csdn.net/article/details/128131999

1.2 node -v

验证node的版本号码

json-server Node.js 服务,前端模拟后端提供json接口服务,vue3.x,WEB前端,json,node.js,前端

 1.2.1检查一下Node配置 

npm config ls -l

1.3安装 json-server 

npm install -g json-server 

json-server Node.js 服务,前端模拟后端提供json接口服务,vue3.x,WEB前端,json,node.js,前端

 json-server Node.js 服务,前端模拟后端提供json接口服务,vue3.x,WEB前端,json,node.js,前端

安装完毕

1.4启动服务

 json-server --watch lab.json 

1.5数据lab.json文件

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

1.6启动服务

json-server Node.js 服务,前端模拟后端提供json接口服务,vue3.x,WEB前端,json,node.js,前端

 json-server Node.js 服务,前端模拟后端提供json接口服务,vue3.x,WEB前端,json,node.js,前端

 http://localhost:3000/posts

http://localhost:3000/comments

http://localhost:3000/profile

本地启动服务:
http://localhost:3000

在浏览器输入上述 url,即可访问响应的数据



 2.restful接口

支持的方法

可以使用任何 HTTP方法

查询

GET /list 获取列表
GET /list/1 获取id=1的数据

新增

POST /list 创建一个项目

修改

PUT /list/1 更新一个id为1的数据
PATCH /list/1 部分更新id为1的数据

删除

DELETE /list/1 删除id为1的数据

注意:

当你发送POST,PUT,PATCH 或者 DELETE请求时,变化会自动安全的保存到你的db.json文件中。

你的请求体body应该是封闭对象。比如{"name": "Foobar"}

id不是必须的,在PUT或者PATCH方法中,任何的id值将会被忽略。

在POST请求中,id是可以被添加的,如果该值没有没占用,会使用该值,否则自动生成。

POST,PUT或者PATCH请求应该包含一个Content-Type:application/json的header,来确保在请求body中使用json。

 3.验证数据的可行性



4. CRUD-Demo

以下的dmeo,我们都使用postman工具来完成
执行之前,先使用 json-server db.json运行服务器

4.1 查询

GET请求:http://localhost:3000/comments

4.2 新增

POST请求:http://localhost:3000/comments
参数:{"body":"hello restapi","postId":1}

4.3 修改

PUT请求:http://localhost:3000/comments/1
参数:{"body":"hello world","postId":888}

4.4 删除

DELETE请求:http://localhost:3000/comments/2

4.5 使用ajax发送增删改查请求

我们还可以通过jQuery的ajax来发送操作数据的请求

//新增
$.ajax({
type: 'POST',
url: 'http://localhost:3000/comments',
data:{
body:'hello world',
postId:888
},
success: function (data) {
console.log(data)
}
})

//查询
$.ajax({
type: 'GET',
url: 'http://localhost:3000/comments',
success: function (data) {
console.log(data)
}
})

//修改
$.ajax({
type: 'PUT',
url: 'http://localhost:3000/comments/1',
data:{
body:'hello world',
postId:888
},
success: function (data) {
console.log(data)
}
})

//删除
$.ajax({
type: 'DELETE',
url: 'http://localhost:3000/comments/1',
success: function (data) {
console.log(data)
}
})

过滤

我们可以通过在URL后面加上参数,来达到过滤数据的目的

例如:

http://localhost:3000/comments/1:查询id为1的数据,返回一个对象
http://localhost:3000/comments?name=zhangsan:返回一个数组,name值都为zhangsan

5. 注意

如果需要使用 json-server 模拟多层路由嵌套,无法通过 lab.json中数据的多层嵌套,达到模拟多层路由嵌套的目的。
也就是说,路由只能匹配到 db.json这个json最外层的key值。而里层的key值,都不会被路由匹配

其它,json-server启动服务的时候,常见的问题就是提示不是可运行的程序,主要问题就是路径的问题,这里就是不展开说明了。文章来源地址https://www.toymoban.com/news/detail-604374.html

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

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

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

相关文章

  • 【json-server】json-server安装与使用:

    一、下载安装: 【json-server网址】https://www.npmjs.com/package/json-server 二、启动db.json数据及相关参数: 参数 简写 默认值 说明 –config -c 指定配置文件 [默认值: “json-server.json”] –port -p 设置端口 [默认值: 3000] –host -H 设置域 [默认值: “0.0.0.0”] –watch -w Watch file(s) 是否监听 –

    2024年02月13日
    浏览(29)
  • 前端Vue Node.js + Express + MongoDB 构建的后端服务API接口

    构建一个使用 Vue.js 作为前端, Node.js + Express + MongoDB 作为后端服务的全栈应用涉及到多个步骤。这里简要概述整个过程,并提供一些基本的代码示例来帮助你开始。 安装 MongoDB: 根据你的操作系统从 MongoDB 官网 下载并安装 MongoDB。 启动 MongoDB 服务: 安装完成后,根据 MongoDB 的

    2024年04月14日
    浏览(33)
  • json-server 详解

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

    2024年02月08日
    浏览(31)
  • 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日
    浏览(21)
  • json-server搭建使用

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

    2024年02月06日
    浏览(23)
  • 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日
    浏览(24)
  • 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日
    浏览(32)
  • 【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日
    浏览(26)
  • 用前端的语言写后端——Node.js之Express

    Express 是一种流行的模型视图控制器(MVC)Node.js框架,具有快速、极简和灵活的优点,为Web和移动应用程序开发提供了强大的功能集合。 最受欢迎的Node.js框架! 安装Node.js(你肯定已经安装好了Node.js,这点我们无需多言) 为你的应用创建一个目录,进入此目录并以此目录为你

    2024年03月21日
    浏览(38)
  • 使用Mock.js和json server快速生成前端测试数据

    下面演示的是我总结的一个使用示例,帮助大家参考学习,看完后,如果大家有其他需求,可以参考Mock.js 的官方文档,需要生成哪些格式的数据,复制样例代码即可,本案例重在演示如何使用Mock.js和json server自动生成前端开发测试用的接口数据。 先创建一个项目文件夹,取

    2023年04月08日
    浏览(23)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包