网站的后台管理网络营销品牌
目录
- 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怎么用？
- 前端进行模拟交互
1. json-server是什么？
Json-server 是一个无需编写任何代码，便可快速搭建本地 RESTful API 的工具。专为需要快速后端进行原型设计和模拟的前端开发人员而创建。这大大方便了前端开发人员，需要做一些与后台的交互。
- github地址：http://github.com/typicode/json-server
2. json-server怎么用？
2.1 安装
执行如下命令安装 json-server
npm install json-server -g
查看是否安装成功:
json-server --version
2.2 创建db.json
在你项目根目录下创建文件db.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请求，比如我们需要查看id为1的内容，代码如下所示：
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); })
}