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);  
    })
}
相关推荐
程序员爱钓鱼3 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路24 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴32 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥36 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js