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

积水成江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里面封装： 状态码； 提示信息； 返回前端的数据；也有可能会有多层嵌套。

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

相关推荐
^^为欢几何^^4 分钟前
npm、pnpm和yarn有什么区别
前端·npm·node.js
Long_poem15 分钟前
【自学笔记】Spring Boot框架技术基础知识点总览-持续更新
spring boot·笔记·后端
AC-PEACE26 分钟前
Vue 中 MVVM、MVC 和 MVP 模式的区别
前端·vue.js·mvc
播播资源29 分钟前
ChatGPT付费创作系统V3.1.3独立版 WEB端+H5端+小程序端 （DeepSeek高级通道+推理输出格式）安装教程
前端·ai·chatgpt·ai作画·小程序·deepseek·deepseek-v3
楠枬1 小时前
网页五子棋——对战后端
java·开发语言·spring boot·websocket·spring
zhrb1 小时前
打开Firefox自动打开hao360.hjttif.com标签解决方案
前端·firefox
安大桃子1 小时前
Cesium实现深色地图效果
前端·gis·cesium
程楠楠&M1 小时前
uni-app（位置1）
前端·javascript·uni-app·node.js
破z晓1 小时前
uniapp 整合openlayers 编辑图形文件并上传到服务器
前端·javascript·uni-app
热门推荐
01本地部署DeepSeek教程（Mac版本）02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05DeepSeek各版本说明与优缺点分析06DeepSeek r1本地安装全指南07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10Page Assist - 本地Deepseek模型 Web UI 的安装和使用