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 的工具。专为需要快速后端进行原型设计和模拟的前端开发人员而创建。这大大方便了前端开发人员，需要做一些与后台的交互。

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

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请求，比如我们需要查看id为1的内容，代码如下所示：

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);  
    })
}