实现Spring Boot与Vue的前后端数据交互接口开发全流程-开发者社区-阿里云

一文读Web开发之接口后端接口、类与前端请求、拦截器编写

2024-06-26 1963

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一文读Web开发之接口后端接口、类与前端请求、拦截器编写

一文读Web开发之接口后端接口、类与前端请求、拦截器编写

写在前面：我们开发Web网页的框架可能不同，但其思想都是一致的，Web要做的事情只有前端处理用户交互去后端拿数据后端保证前端能拿到想要的数据，在此基础上有着很多的问题因此有了redis、MQ等等，使用什么框架来做不重要

本文使用Springboot加Vue带您快速入门前后端的数据获取阅读本文需要有HTTP基础不会也没有关系我会给您做一个简单的介绍

HTTP（超文本传输协议）

HTTP（HyperText Transfer Protocol）是一种用于传输超文本文档（例如 HTML）的应用层协议。它是互联网上最常用的协议之一，用于客户端和服务器之间的通信。

特点和组成部分

无状态协议：HTTP是一种无状态协议，意味着每个请求都是独立的，服务器不会存储关于客户端的状态信息。每个请求都必须包含所有必要的信息，以便服务器能够正确处理请求。
基于请求-响应模型：HTTP基于请求-响应模型，客户端发送请求给服务器，服务器响应请求并返回相应的资源。
支持多种请求方法：HTTP定义了几种不同的请求方法，用于指定对服务器资源的不同操作，其中最常见的包括：

GET：请求指定的资源。
POST：向服务器提交数据。
PUT：将资源放置到指定的 URL 下。
DELETE：请求服务器删除指定的资源。

URL：统一资源定位符（URL）用于标识要请求或操作的资源的位置。它由协议类型、主机名、端口号和路径组成，例如：http://example.com:80/index.html。
状态码：HTTP响应包括一个状态码，用于指示服务器对请求的处理结果，常见的状态码包括：

200 OK：请求成功。
404 Not Found：请求的资源未找到。
500 Internal Server Error：服务器遇到了意外的情况，无法完成请求。

头部信息：HTTP请求和响应中可以包含头部信息，用于传输额外的元数据，例如：

Content-Type：指定实体主体的内容类型。
Content-Length：指定实体主体的长度。
User-Agent：标识发送请求的客户端。

实体主体：某些HTTP请求和响应包含一个实体主体，用于传输数据，例如HTML文档、JSON数据等。
持久连接：HTTP/1.1引入了持久连接，允许客户端和服务器之间的单个TCP连接上进行多个HTTP请求和响应，以减少连接的开销。

如果还不懂请去b站找个视频看看博客看文章也行

后端使用SpringBoot框架

请求参数类型及处理办法

Headers http://localhost/api/setmeal Path： /admin/setmeal

参数名称	参数值	是否必须	示例	备注
Content-Type	application/json	是

三、@RequestBody

从http请求body部分获取参数，通常用于接受json或xml格式

路径参数 http://localhost/api/setmeal/44 Path： /admin/setmeal/{id}

参数名称	示例	备注
status	1	套餐状态，1表示起售，0表示停售

一、@PathVariable：

用于从请求的URL路径中获取路径变量的值。路径变量是URL中的一部分，用于在RESTful风格的API中传递数据。路径变量的值会直接嵌入到URL路径中，并使用占位符 {} 来表示，Spring MVC 会根据占位符中的变量名将值注入到方法参数中。

@GetMapping("/users/{userId}")
public String getUser(@PathVariable("userId") Long userId) {
    // 根据用户ID查询用户信息
}

查询参数 http://localhost/api/setmeal/page?page=1&pageSize=10&status= Path： /admin/setmeal/page

Query:

参数名称	是否必须	示例	备注
categoryId	否		分类id
name	否		套餐名称
page	是		页码
pageSize	是		每页记录数
status	否		套餐起售状态

//以下代码是请求参数对应接收类
@Data
public class SetmealPageQueryDTO implements Serializable {
    private int page;
    private int pageSize;
    private String name;
    //分类id
    private Integer categoryId;
    //状态 0表示禁用 1表示启用
    private Integer status;
}

为什么这里可以不加任何东西就获取到参数呢？
当Spring MVC发现一个方法的参数类型不是基本类型（如int、String等）而是一个POJO（Plain Old Java Object）时，它会尝试从请求中提取参数，并将参数的值赋给该POJO对象对应的属性

二、@RequestParam：

用于从请求的查询参数中获取单个参数值。通常用于GET请求或者POST请求中的查询参数。在GET请求中，查询参数会附加在URL后面，如 ?key1=value1&key2=value2，而在POST请求中，查询参数会放在请求体中，需要使用 @RequestParam 指定参数名来获取值。

@GetMapping("/search")
public String search(@RequestParam("keyword") String keyword) {
    // 处理查询操作
}

还可以使用@ModelAttribute

类开发五步走

一：添加Spring Framework中的类标识注解 @RestController 这个注解后面可以跟上命名，当同一个项目中有两个一样的类名时，就可以使用这个注解来进行区别

二：添加处理路径 @RequestMapping(“/”)

三：添加日志记录器 原生是logging。这里我选择使用@Slf4j 创建日志记录器，并进行管理。使用该注解后，使用 log 对象进行管理

四：生成接口文档 @Api(tags = "标题") 这里使用Swagger生成接口文档，方便测试

五：对象管理 使用 @Autowired 来进行依赖注入

接口开发

接口开发主要有三个地方需要开发，一是controller二是 service 三是mapper

控制器controller开发四步走

@PostMapping("/admin/employee")
@ApiOperation("新增员工")
public Result save(@RequestBody EmployeeDTO employeeDTO){
    //RequestBody 注解的作用是告诉Spring MVC框架，要将HTTP请求的body部分（通常是JSON或XML格式的数据）映射到方法参数 employeeDTO 上。
    
    log.info("新增员工：{}",employeeDTO);
    employeeService.sava(employeeDTO);
}