专栏名称: Java基基
一个苦练基本功的 Java 公众号,所以取名 Java 基基
目录
相关文章推荐
通信头条  ·  李强总理为什么到三家通信央企调研? ·  3 天前  
51好读  ›  专栏  ›  Java基基

面试必考 restful 全栈技能

Java基基  · 公众号  ·  · 2024-06-27 11:55

正文

👉 这是一个或许对你有用 的社群

🐱 一对一交流/面试小册/简历优化/求职解惑,欢迎加入 芋道快速开发平台 知识星球。 下面是星球提供的部分资料:

👉 这是一个或许对你有用的开源项目

国产 Star 破 10w+ 的开源项目,前端包括管理后台 + 微信小程序,后端支持单体和微服务架构。

功能涵盖 RBAC 权限、SaaS 多租户、数据权限、商城、支付、工作流、大屏报表、微信公众号等等功能:

  • Boot 仓库:https://gitee.com/zhijiantianya/ruoyi-vue-pro
  • Cloud 仓库:https://gitee.com/zhijiantianya/yudao-cloud
  • 视频教程:https://doc.iocoder.cn
【国内首批】支持 JDK 21 + SpringBoot 3.2.2、JDK 8 + Spring Boot 2.7.18 双版本

来源:juejin.cn/post/
7377326783581323304


引言

什么是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」 ,我们就可以访问我们自己定义的数据了

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

  • 项目地址:https://github.com/YunaiV/ruoyi-vue-pro
  • 视频教程:https://doc.iocoder.cn/video/

1.查

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

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

  • 项目地址:https://github.com/YunaiV/yudao-cloud
  • 视频教程:https://doc.iocoder.cn/video/

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)两个主要部分组成。下面是详细的组成部分:

  1. 「请求行」
  • 包括请求方法(Method),如 GET、POST、PUT、DELETE 等。
  • 请求的资源的统一资源标识符(URI)或统一资源定位符(URL)。
  1. 「请求头部(Request Headers)」

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

    请求体:表单数据

  2. 「状态行(Status Line)」

  • 包括使用的HTTP协议版本。
  • 一个状态码,如 200 表示成功,404 表示未找到,500 表示服务器内部错误。
  • 状态描述,这是一个可读的状态短语,如 "OK" 或 "Not Found"。

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

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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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






请到「今天看啥」查看全文