前后端请求、返回数据的多种方式

积水成江2024-10-24 17:36

Springboot项目的业务逻辑

🌙项目基本结构 ：

通常情况下，我们在搭建后端项目的时候，处理业务逻辑我们需要用到Controller,Service,Mapper(mybatis,mybatis-plus)，Entry各层之间的相互调用来完成，还有就是我们还可以去封装一些工具类和配置类来用到我们的开发中提供开发效率。

🚀作用 ：

🌴 Controller（表现层） : 负责接收前端请求，将请求转发给服务层（Service）处理，并返回视图或数据给前端。

🌴 Service（业务逻辑层）: 负责处理具体的业务逻辑。在需要操作数据库的情况下，Service通过调用Mapper层进行数据交互。

另外，当你使用了Mybatis-plus的时候：我们可以直接在service调用对应的方法直接操作数据库。

🌴 Mapper（数据传输层）： 负责数据交互，执行增删改查等操作。

这里仅限于我的想法，当你使用了mybatis的时候 ：

那么mapper是用来定义你的接口方法，方法名它会去映射xml文件里面每个操作对应的id名，然后在通过xml文件里面的动态SQL来对数据进行增删改查等操作；

在mapper里面，我们也可以直接在Mapper使用@标签的方式（例如：@Select("SQL语句") ）来写对应的SQL，那么我们就不需要用到xml文件，但是这种方式不是很提倡，当我们需要写大量的SQL的时候会导致我们不断的写重复的代码。

🌻Entry（实体类层）： 主要存放实体类，用来映射数据库中的表结构，它的使用范围很广，那里需要它就在那里定义它。

🌿Utils(工具类) ： 存放一些常用的工具类或帮助类，例如字符串处理、日期处理、文件处理等。

Config 层（配置层）：主要管理一些配置类，专门负责集中配置和初始化 Bean，处理全局性的设置。

🍉调用顺序 ：

前端发送过来的请求先到Controller层，Controller接收到你的请求，然后调用Service层进行业务逻辑处理，Service层又去调用Mapper层，Mapper层进行和数据库关系映射，查询出来的数据原路返回到前端，如果不操作数据库就不需要Mapper映射。

前端请求数据到后端的方法

1️⃣ 浏览器通过URL把数据传递到后端Controller层的接口上；

例： http://localhost:8080/hello?name=hfc\&password=123456

8080：后端端口号；hello需要请求的后端接口，name和password都是传递的参数

前端传递过来的参数名字，一定和后端接受的参数名字要对应；

2️⃣ 使用form 表单来进行数据的提交传递到后端

例：

我们用html写一个普通的form表单:

我们需要把表单里面的数据提交到后端的接口，通过来请求数据到后端接口，在后端接口我们也一样要把参数一一对应：

java 复制代码 
@RequestMapping("/stuService01")
public void stuService03(String user,String password,String address,String age,String sex){
   System.out.println(user+"\t"+password+"\t"+age+"\t"+address+"\t"+sex);
   System.out.println("你的请求已经到了后端-----");
}

默认情况下，前端传递数据到后端的请求方式是get；

GET请求是一种HTTP方法，用于从服务器检索数据。它将请求的数据附加在URL后面，以查询字符串的形式出现。

POST请求也是一种HTTP方法，用于向服务器发送数据。它将数据存储在请求体中，不会出现在URL中。

相同点：GET请求和POST请求底层都是基于TCP/IP协议实现的，使用二者中的任意一个，都可以实现客户端和服务器端的双向交互。

不同点：

1.定义：GET请求一般是获取数据，POST请求一般是提交数据。

2.安全性：GET请求，请求数据暴露在URL中；POST请求，数据存储在请求体中；相比之下POST请求更安全。（但从传输角度来讲，它们都不安全，HTTP是明文传输，如果在网络节点上抓包，就能完整地获取数据报文，安全传输可用HTTPS）

通过method我们就可以指定请求的方式。

3️⃣ 通过原生Ajax --- 通过异步请求使用JS来获取相关的数据。

下面是两种请求的方式：

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="but01">点击我提交数据</button>
</body>

<script>
	document.getElementById("but01").onclick=function (){
	  // 原生js来实现你的ajahttp://localhost:8080/stuServicex的方法；
		var xhr = new XMLHttpRequest();  //1.创建一个xmlhttprequest对象；他能够发送数据到你的后端
		// 2.打开你的链接要给那个地方传数据  以什么样的方式传
		xhr.open("GET","http://localhost:8080/stuService02?user=xiaoming&password=888888&")
		xhr.send()  //3. 发送你的请求
		// 4. 你的请求一旦到后端 就胡返回数据
		xhr.onload=function(){
			if(xhr.readyState==4) return
			console.log(xhr.responseText)  //5.后端返回的数据
		}
		}
</script>

</html>

Post方式进行数据传输：

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="but01">点击我提交数据</button>
</body>

<script>
	document.getElementById("but01").onclick=function (){
	  // 原生js来实现你的ajahttp://localhost:8080/stuServicex的方法；
		var xhr = new XMLHttpRequest();  //1.创建一个xmlhttprequest对象；他能够发送数据到你的后端
		// 2.打开你的链接要给那个地方传数据  以什么样的方式传
		xhr.open("POST","http://localhost:8080/stuService03")
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send('user=xiaogou&password=88888')  //3. 发送你的请求A
		// 4. 你的请求一旦到后端 就胡返回数据
		xhr.onload=function(){
			if(xhr.readyState==4) return
			console.log(xhr.responseText)  //5.后端返回的数据
		}
		}
</script>


</html>

后端返回数据到前端的方式

当我们接收到前端的请求处理之后，我们可以通过不同的返回值类型返回结果给前端。

1️⃣使用@Controller 直接返回数据：返回的是字符串。

java 复制代码 
@RequestMapping("/index02")
public String  index02(){
   System.out.println("这个接口不需要返回任何的数据---只在你的控制台打印数据！！！");

   if (5+6>10){
       return "error.html";
   }else {
       return "success.html";
   }

2️⃣ 使用 @RestController注解 ： 它结合了 @Controller 和 @ResponseBody，意味着它的返回值会直接作为 HTTP 响应体返回，而不是指向一个视图。

java 复制代码 
@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/user")
    public User getUser() {
        return new User("Alice", 30);
    }

    @GetMapping("/status")
    public ResponseEntity<String> getStatus() {
        return ResponseEntity.ok("OK");
    }
}

3️⃣返回ModelAndView ：ModelAndView 是用于控制器方法返回的一个对象，它结合了模型数据和视图信息。这通常用于需要渲染视图（如 JSP、Thymeleaf 等模板引擎）并同时传递模型数据的情况。

它是SpringMVC的核心内容，主要用于把数据封装到model然后带着数据到view。

java 复制代码 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class MyController {

    @GetMapping("/welcome")
    public ModelAndView welcome() {
        ModelAndView modelAndView = new ModelAndView("welcome"); // 视图名称
        modelAndView.addObject("message", "欢迎使用 Spring Boot!"); // 添加模型数据
        return modelAndView;
    }
}

4️⃣ Model来进行数据返回：Model 是一个接口，用于在控制器方法中传递数据到视图。它的主要作用是封装要展示的数据，使得这些数据可以在视图中访问和使用。Model 主要用于不需要单独返回视图的场景，特别是在处理表单提交或渲染动态内容时。比如说：表单提交后重定向：通常是重定向到另一个请求，而不是一个视图；AJAX 请求处理：通常只需返回数据而不是视图；处理错误：可能希望返回一个状态码而不是视图。

java 复制代码 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {

    @GetMapping("/welcome")
    public String welcome(Model model) {
        model.addAttribute("message", "欢迎使用 Spring MVC!");
        return "welcome"; // 返回视图名称
    }
}

5️⃣ 返回的是model map： ModelMap 是 Spring 提供的一个类，继承自 LinkedHashMap，用于存储模型数据并将其传递到视图。它的用法与 Map 类似。

java 复制代码 
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {

    @GetMapping("/modelMapExample")
    public String modelMapExample(ModelMap modelMap) {
        modelMap.addAttribute("message", "使用 ModelMap 传递数据!");
        modelMap.addAttribute("items", List.of("Item1", "Item2", "Item3"));
        return "exampleView"; // 返回视图名称
    }
}

modelMap.addAttribute("message", "使用 ModelMap 传递数据!")：用于添加单个数据项。
modelMap.addAttribute("items", List.of("Item1", "Item2", "Item3"))： 用于添加一个列表。

6️⃣ 返回的是一个对象：通常情况，我们会封装好一个实体类，在返回的时候直接返回这个对象，springboot中的@ResponseBody注解可以将对象自动转换为 JSON 格式。

java 复制代码 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {

    @GetMapping("/user")
    public User getUser() {
        // 创建一个 User 对象并返回
        return new User("Alice", 25);
    }
}
java 复制代码 
public class User {
    private String name;
    private int age;

    // 构造函数
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // Getter 和 Setter 方法
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

7️⃣ 返回的是一个被封装好的result 结果集 ：这个方法是我们项目开发的过程中最常见的方法，返回值得类型由我们来同统一封装，返回的时候我们直接把返回的结果放在我们封装好的返回结果集里面，大部分情况我们会在result里面封装： 状态码； 提示信息； 返回前端的数据；也有可能会有多层嵌套。

今天的分享就到这里啦，感谢大家的阅览,小江会一直与大家一起努力，文章中如有不足之处，你的支持是我前进的最大动力，请多多指教，感谢支持，持续更新中 ......

相关推荐
xjt_090114 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
rannn_11116 分钟前
【苍穹外卖|Day4】套餐页面开发（新增套餐、分页查询、删除套餐、修改套餐、起售停售）
java·spring boot·后端·学习
qq_124987075320 分钟前
基于JavaWeb的大学生房屋租赁系统（源码+论文+部署+安装）
java·数据库·人工智能·spring boot·计算机视觉·毕业设计·计算机毕业设计
我是伪码农25 分钟前
Vue 2.3
前端·javascript·vue.js
短剑重铸之日26 分钟前
《设计模式》第十一篇：总结
java·后端·设计模式·总结
夜郎king1 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
倒流时光三十年1 小时前
SpringBoot 数据库同步 Elasticsearch 性能优化
数据库·spring boot·elasticsearch
码农小卡拉1 小时前
深入解析Spring Boot文件加载顺序与加载方式
java·数据库·spring boot
Dragon Wu1 小时前
Spring Security Oauth2.1 授权码模式实现前后端分离的方案
java·spring boot·后端·spring cloud·springboot·springcloud
一个有梦有戏的人2 小时前
Python3基础：进阶基础，筑牢编程底层能力
后端·python
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04Vue-skills的中文文档05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示