⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 juejin.cn/post/7377326783581323304 「酱菜第一深情」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

引言

什么是restful

「restful」是一种软件架构风格，它基于http协议和rest原则设计，无论是前端、后端还是数据库等各个技术组件，都按照restful的原则进行设计和开发。这包括使用URI来唯一标识和定位资源，通过http方法（如GET、POST、PUT、DELETE等）对资源进行操作，以及使用无状态的方式来处理客户端请求。这些请求方式使得客户端可以与服务器进行交互，实现对资源的创建，下面让我们来探索一下吧!

❝

让我们开始restful全栈开发

❞

在这里，我们创建了一个「全栈」的项目fullstack,分为前端和后端，前端叫做frontend,后端叫做backend。首先，我们我们需要「初始化」后端项目：在backend后端文件夹点击鼠标右键在终端打开：输入指令：npm init -y，

当你看见backend后面多了一个「package.json」文件的时候，说明后端初始化成功，接下来,我们在backend文件夹下面创建一个「db.json」文件

❝

解释一下「db.json」里面装的是json数据，我们可以通过json-server来访问数据

❞

在这里，我们定义了一些数据既然我们要通过json-server来访问数据，首先，我们来安装一个包：在终端输入指令：npm i json-server

当我们在「package.json」文件夹里面看见多了一个依赖部分，说明已经安装成功接下来，我们在scripts里面改成 “dev”: “json-server db.json”，这样，我们就可以访问「db.json」里面的数据了

然后，我们在终端输入指令：npm run dev 将项目运行起来，

项目运行起来之后，我们会得到一个http地址，当我们点击这个地址，我们可以看见自己定义的数据

❝

db.json 就是一个资源文件，这个文件是一个json文件，也可以是一个SQL文件，我们需要一个http服务，通过-json-server让资源进行暴露

❞

接下来，我们来用一下restful，来对数据进行「增，删，改，查」

首先，我们需要下载一个postman

下载之后，输入框内写入地址，用「GET」来访问地址里面的数据，然后点击「send」,我们就可以访问我们自己定义的数据了

1.查

当然，如果我们要访问具体的某一个值：可以在地址后面加上它的具体ID http://localhost:3000/users/1

2.增

在postman里面，我们通过「POST」，来增加数据，在这里，我们选择「body」,「raw」,数据为「JSON」格式，加入模你想要添加的数据

点击send之后，我们会发现在「db.json」文件中，多了一条数据

这正是我们添加的数据，说明添加成功了

3.改

在postman里面，我们通过「PATCH」，来改变数据，假如，我们要把「牛哥」改成「喻大米」，应该怎么操作呢

输入框内，我们通过http://localhost:3000/users/id的形式，来改变数据再返回db.json里面，我们会发现，「牛哥」变成了「喻大米」

这样，我们就对数据进行了改变

4.删

在postman里面，我们通过「DELETE」，来删除数据，假如，我们要把「喻大米」这条数据删掉，我们应该

输入框内，我们通过http://localhost:3000/users/id的形式，来删除数据再返回db.json里面，我们会发现，「喻大米」这条数据没了

总结一下

restful 定义了资源的提供方式名词 + 动词组成资源暴露的方式

资源 名词users
-Method  Get   列表
-url     http://localhost:3000/post

HTTP动作

GET 读 详情     http://localhost:3000/users/ :id  动态数据    动态参数   
POST 写 (增加)  http://localhost:3000/users      
PATCH  修改 一个用户    http://localhost:3000/users/id   
DELETE 删除 一个用户    http://localhost:3000/users/id

接下来，我们来简单聊一聊http协议

简单介绍一下http：

HTTP 由请求（Request）和响应（Response）两个主要部分组成。下面是详细的组成部分：

「请求行」
- 包括请求方法（Method），如 GET、POST、PUT、DELETE 等。
- 请求的资源的统一资源标识符（URI）或统一资源定位符（URL）。
「请求头部（Request Headers）」

请求头 Cookie 用于在客户端和服务器之间存储小型数据片段，以便跟踪用户会话。

请求体：表单数据
「状态行（Status Line）」
- 包括使用的HTTP协议版本。
- 一个状态码，如 200 表示成功，404 表示未找到，500 表示服务器内部错误。
- 状态描述，这是一个可读的状态短语，如 “OK” 或 “Not Found”。

❝

接下来，我们通过前端，来实现一下

❞

再frontend里面，创建一个「index.html」，我们通过前端来向后端发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function getAjaxUserData() {
            return new Promise((resolve, reject) => {
                fetch('http://localhost:3000/users')
                    .then(data => data.json())
                    .then(data => {
                        resolve(data)
                    })
            })
        }
        (async function () {
            const users = await getAjaxUserData();
            console.log(users);

            fetch('http://localhost:3000/users', {
                method: 'post',
                body: JSON.stringify({
                    id: "100",
                    name: "鹏哥",
                    hometown: "赣州"
                })
            })
        })()
    </script>
</body>
</html>

JavaScript函数 `getAjaxUserData()`

function getAjaxUserData() {
    return new Promise((resolve, reject) => {
        fetch('http://localhost:3000/users')
            .then(data => data.json())
            .then(data => {
                resolve(data);
            });
    });
}

getAjaxUserData 函数返回一个Promise，该Promise使用 fetch API 从本地服务器的/users端点获取数据。获取的数据被转换为JSON格式，然后通过 resolve 方法返回。

异步函数调用和数据处理

(async function () {
    const users = await getAjaxUserData();
    console.log(users);

    fetch('http://localhost:3000/users', {
        method: 'post',
        body: JSON.stringify({
            id: "100",
            name: "鹏哥",
            hometown: "赣州"
        })
    });
})();

这里使用了一个立即执行的异步函数。首先，通过 await 关键字调用 getAjaxUserData 函数，并等待其结果。获取到的用户数据被打印到控制台。

接下来，使用 fetch 发送一个POST请求到相同的/users端点，这次是向服务器发送数据。请求体包含了JSON字符串化的对象，包括一个用户的id、name和hometown属性。

❝

返回db.json.我们可以发现，我们添加了一些数据

❞

收获

今天，我们通过restful模拟了一下全栈开发，简单了解了一下http协议。后端通过postman来进行「增，删，改，查」，也通过前端向后端发送请求，来对数据进行改变，这样，我们就自己实现了一个简单的全栈开发。

芋道源码 —— 纯源码解析博客

面试必考 restful 全栈技能

引言

什么是restful

首先，我们需要下载一个postman

1.查

2.增

3.改

4.删

总结一下

接下来，我们来简单聊一聊http协议

JavaScript函数 `getAjaxUserData()`

异步函数调用和数据处理

收获

引言

什么是restful

首先，我们需要下载一个postman

1.查

2.增

3.改

4.删

总结一下

接下来，我们来简单聊一聊http协议

JavaScript函数 getAjaxUserData()

异步函数调用和数据处理

收获

JavaScript函数 `getAjaxUserData()`