2025第3周 | json-server的基本使用

server/2025/1/20 4:42:22/

目录

  • 1. json-server是什么?
  • 2. json-server怎么用?
    • 2.1 安装
    • 2.2 创建db.json
    • 2.3 启动服务
    • 2.4 查看效果
  • 3. 前端进行模拟交互
    • 3.1 创建demo.html
    • 3.2 创建demo.js

2025,做想做的事,读想读的书,持续学习,自律生活,修行人生。

2025一个转身就已到来,对于时间太快,总会有种惶恐感。每每回首过去,总会发现想要做的事情没有完成,学习的内容少之又少,读的有用的书籍更是可以忽略不计。对于内在的超越,内在的修行也是没有始终践行,知行合一,实践、认识、再实践、再认识…

2025年第2周:2025.01.13 ~ 2025.01.19 ,16号星期四

目标:了解 json-server基本使用

  • json-server是什么?
  • json-server怎么用?
  • 前端进行模拟交互

jsonserver_15">1. json-server是什么?

Json-server 是一个无需编写任何代码,便可快速搭建本地 RESTful API 的工具。专为需要快速后端进行原型设计和模拟的前端开发人员而创建。这大大方便了前端开发人员,需要做一些与后台的交互。

  • github地址:http://github.com/typicode/json-server

jsonserver_21">2. json-server怎么用?

2.1 安装

执行如下命令安装 json-server

npm install json-server -g

查看是否安装成功:

json-server --version

json_36">2.2 创建db.json

在你项目根目录下创建文件db.json ,内容如下:

json">{"posts": [{ "id": "1", "title": "a title", "views": 100 },{ "id": "2", "title": "another title", "views": 200 }],"comments": [{ "id": "1", "text": "a comment about post 1", "postId": "1" },{ "id": "2", "text": "another comment about post 1", "postId": "1" }],"profile": {"name": "typicode"}
}

2.3 启动服务

执行如下命令,启动服务

# 本地
npx json-server db.json
# 全局
json-server db.json

启动成功,会显示如下信息:

PS D:\MyWork\vscode\axios> npx json-server db.json
JSON Server started on PORT :3000
Press CTRL-C to stop
Watching db.json...(˶ᵔ ᵕ ᵔ˶)Index:
http://localhost:3000/Static files:
Serving ./public directory if it existsEndpoints:
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

2.4 查看效果

打开浏览器输入链接查看效果,比如查看id为1的文章

http://localhost:3000/posts/1

一些简单API

GET    /posts
GET    /posts/:id
POST   /posts			(新增)
PUT    /posts/:id	    (更新)
PATCH  /posts/:id
DELETE /posts/:id

3. 前端进行模拟交互

使用axios模拟get请求,比如我们需要查看id1的内容,代码如下所示:

3.1 创建demo.html


<div class="container"><button class="btn btn-primary">使用axios模拟get请求</button>
</div>
<script src="./js/demo.js"></script>

3.2 创建demo.js

const btns = document.querySelectorAll('button');btns[0].onclick = function() {// 发送ajax请求axios({method: 'get',url: 'http://localhost:3000/posts/1',}).then(res => {// {id: '1', title: 'a title', views: 100}console.log(res.data);  })
}

http://www.ppmy.cn/server/159801.html

相关文章

C#深度神经网络(TensorFlow.NET)

C#深度神经网络 文章目录 C#深度神经网络前言专业术语讲解模型[Model]向量[Vector]矩阵[Matrix]张量[Tensor]批量大小&#xff08;Batch Size&#xff09;迭代次数&#xff08;Epochs&#xff09;交叉熵[Cross Entropy] 训练流程数据预处理数据打标签数据转换标准化/归一化选择…

高效构建与部署Python Web应用:FastAPI的测试与持续集成

高效构建与部署Python Web应用&#xff1a;FastAPI的测试与持续集成 目录 &#x1f9ea; FastAPI的单元测试与集成测试&#x1f6e0;️ 使用pytest和unittest编写高效测试用例&#x1f504; 持续集成与持续部署&#xff08;CI/CD&#xff09;实践 &#x1f680; GitLab CI配置…

第一章 初识知识图谱

目录 一、背景 二、基本概念 三、核心特征 四、生命周期 一、背景 互联网是信息海洋&#xff0c;随着时间的推移而不断增长。这一事实导致数据的复杂性和数量增加。管理、解释数据并从数据中获取意义变得越来越具有挑战性。知识图谱 &#xff08;KG&#xff09; 提供了一种…

案例分析一

张某&#xff08;10多年IT工作经验&#xff09;应聘一家国企单位&#xff0c;面试官&#xff08;技术副主管&#xff09;面试时问了些无关痛痒的问题&#xff0c;谈到薪资时强调我权限范围内的数额就那么多&#xff0c;再多就需要走申请流程进行操作了。 没几天入职后&#xf…

【项目推荐】LeNet-MNIST纯NumPy实现:从零理解神经网络计算过程

项目地址&#xff1a;cakeinfer_fnumpy 项目介绍 这是一个使用纯NumPy实现的LeNet-5卷积神经网络框架&#xff0c;专注于帮助开发者深入理解神经网络的计算过程。项目的特点是&#xff1a; 纯NumPy实现&#xff0c;无深度学习框架依赖&#xff08;并且使用numpy也不会导致过于…

使用Websocket进行前后端实时通信

1、引入jar&#xff0c;spring-websocket-starter <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2、配置websocket config import org.springframe…

模拟器多开窗口单IP与代理IP关系

模拟器多开窗口同IP背后出现的问题 在游戏世界中&#xff0c;模拟器多开窗口是玩家们提升体验的常见做法。通过在同一设备上开启多个模拟器窗口&#xff0c;玩家可以同时运营多个游戏账号&#xff0c;增加游戏的趣味性和效率。 一旦检测到一个IP地址下登录了过多的账号&#x…

SpringBoot项目打war包要点

1. 修改pom文件packaging 2. 不使用内置tomcat 3. 加一个类 4. 修改外部tomcat配置文件 5. 修改nginx配置文件&#xff0c;构建集群 资料来自网络