面试必考 restful 全栈技能

最新推荐文章于 2024-08-15 21:48:47 发布

犬小哈

最新推荐文章于 2024-08-15 21:48:47 发布

阅读量69

点赞数

文章标签：面试 restful 职场和发展后端

原文链接：https://mp.weixin.qq.com/s?__biz=MzU4MDUyMDQyNQ==&mid=2247539158&idx=2&sn=f64f225871599000dd53a2a846dca9e8&chksm=fc6df6ec6948f891f64f085e74a5508cb3151afdb59fbe5079621154b879245627baad85263a&scene=126&sessionid=0

版权

来源：juejin.cn/post/7377326783581323304

👉 欢迎加入小哈的星球，你将获得: 专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17..., 点击查看项目介绍；
《从零手撸：前后端分离博客项目（全栈开发）》 2期已完结,演示链接：http://116.62.199.48/;

截止目前，累计输出 47w+ 字，讲解图 2090+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，Spring Cloud Alibaba 等等，戳我加入学习，已有1700+小伙伴加入(早鸟价超低)

引言
- 什么是restful
- 首先，我们需要下载一个postman
1.查
2.增
3.改
4.删
总结一下
接下来，我们来简单聊一聊http协议
收获

引言

什么是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来进行「增，删，改，查」 ，也通过前端向后端发送请求，来对数据进行改变，这样，我们就自己实现了一个简单的全栈开发。