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

目录

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

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

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

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

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

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

1. json-server是什么?

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

2. json-server怎么用?

2.1 安装

执行如下命令安装 json-server

shell 复制代码
npm install json-server -g

查看是否安装成功:

shell 复制代码
json-server --version

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 启动服务

执行如下命令,启动服务

shell 复制代码
# 本地
npx json-server db.json
# 全局
json-server db.json

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

javascript 复制代码
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 exists

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

2.4 查看效果

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

javascript 复制代码
http://localhost:3000/posts/1

一些简单API

javascript 复制代码
GET    /posts
GET    /posts/:id
POST   /posts			(新增)
PUT    /posts/:id	    (更新)
PATCH  /posts/:id
DELETE /posts/:id

3. 前端进行模拟交互

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

3.1 创建demo.html

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

3.2 创建demo.js

javascript 复制代码
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);  
    })
}
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript