- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

Spring Boot 与前端技术：如何让后端与前端无缝对接？

bug菌发表于 2025/07/16 12:04:03 2025/07/16

【摘要】 🏆本文收录于「滚雪球学SpringBoot」专栏(全网一个名)，手把手带你零基础入门Spring Boot，从入门到就业，助你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8 引言：前后端分离，让开发更加高效！ 💡随着前端技术的不断发展，前后端...

🏆本文收录于「滚雪球学SpringBoot」专栏(全网一个名)，手把手带你零基础入门Spring Boot，从入门到就业，助你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8

引言：前后端分离，让开发更加高效！ 💡

随着前端技术的不断发展，前后端分离已经成为主流的开发模式。在这种模式下，前端和后端分别由不同的团队开发，利用 API 进行数据交换，使得开发效率大幅提升。作为后端开发的主力之一，Spring Boot 以其简洁、高效的特点成为了开发者的首选框架。而前端技术如 Vue.js、React 和 Angular，则使得页面渲染变得更加灵活和强大。

本文将深入探讨 Spring Boot 如何与前端技术如 Vue.js 和 Thymeleaf 相结合，解决开发过程中常见的跨域问题，并通过详细的代码解析帮助你更好地理解前后端的协作流程。

1️⃣ Spring Boot 与 Vue.js 前端框架集成 🔗

Vue.js 是一个轻量且灵活的前端框架，特别适合用来构建动态交互性强的单页面应用。将 Spring Boot 与 Vue.js 相结合，我们可以通过 RESTful API 或 GraphQL 实现前后端的数据交互。

1.1 Spring Boot 后端设置

在 Spring Boot 中，我们通常会通过 @RestController 注解来暴露 API 接口，供前端进行数据请求。后端接收到请求后，通过 JSON 格式的数据进行响应。

代码解析：

@RestController：用于标记该类是一个控制器类，且返回的数据会直接以 JSON 格式返回，而不是视图。
@GetMapping：用于映射 HTTP GET 请求，返回一个用户列表。
ResponseEntity：封装 HTTP 响应信息，包括响应体、状态码等。

@RestController
@RequestMapping("/api")
public class UserController {

    @GetMapping("/users")
    public ResponseEntity<List<User>> getAllUsers() {
        List<User> users = userService.findAll();
        return ResponseEntity.ok(users);
    }
}

代码解析：

@GetMapping("/users"): 这个方法会处理所有到 /api/users 路径的 GET 请求。它通过调用服务层方法 userService.findAll() 获取所有用户数据。
ResponseEntity.ok(users): 将获取到的用户列表作为响应体返回，并设置 HTTP 状态码为 200（表示成功）。

1.2 Vue.js 前端设置

在前端，Vue.js 可以使用 Axios 来向 Spring Boot 后端发送请求，并处理返回的数据。我们通过 Vue 组件的 mounted 生命周期钩子来发送请求，确保页面加载完成后开始获取数据。

代码解析：

mounted：Vue 的生命周期钩子之一，组件实例被创建并挂载后调用，适合在这里发送 API 请求。
Axios：一个基于 Promise 的 HTTP 客户端，用来与后端 API 进行通信。

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    axios.get('http://localhost:8080/api/users')
      .then(response => {
        this.users = response.data; // 将响应数据存入 Vue 的 data 中
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
  }
}
</script>

代码解析：

axios.get('http://localhost:8080/api/users'): 向后端接口发送 GET 请求，获取用户数据。
this.users = response.data: 请求成功后，将返回的数据存储到 Vue 组件的 data 中，使得页面能够实时渲染用户列表。

1.3 运行结果：前后端协作的效果

当你启动 Spring Boot 应用并访问 Vue.js 前端时，页面将展示从后端获取的用户数据。这样，我们通过 RESTful API 实现了前后端的分离，同时保持了数据交互的高效性。

2️⃣ Spring Boot 与 Thymeleaf 模板引擎的结合 🖋️

在一些应用场景中，我们可能不需要前后端完全分离，而是希望在后端直接渲染视图。这时，Thymeleaf 模板引擎便显得尤为重要。Thymeleaf 可以让你在后端渲染 HTML 页面，并在页面中注入动态数据。它是 Spring Boot 默认支持的模板引擎之一。

2.1 Spring Boot 后端设置

在 Spring Boot 中，我们通过 @Controller 注解来定义处理前端请求的控制器，并返回视图名称。视图会交给 Thymeleaf 引擎进行渲染。

代码解析：

@Controller：用来处理前端请求，返回 Thymeleaf 模板视图。
Model：用来传递数据到视图层，类似于模型-视图-控制器（MVC）模式中的 Model。
return “home”：返回的视图名称，Spring Boot 会自动查找 home.html 文件并进行渲染。

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "欢迎来到Spring Boot与Thymeleaf的世界！");
        return "home"; // 返回的是 home.html 模板视图
    }
}

2.2 Thymeleaf 页面设置

Thymeleaf 页面类似于普通的 HTML 页面，但它支持模板语法来渲染动态数据。通过 ${message} 占位符，后端传递的数据将被渲染到页面中。

代码解析：

th:text="${message}"：Thymeleaf 的模板语法，用来替换 ${message} 为后端传递的动态数据。
页面结构与普通 HTML 页面相同，区别在于 Thymeleaf 会解析模板并动态注入数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot与Thymeleaf</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>

代码解析：

th:text="${message}"：表示将从后端传递过来的 message 变量替换到该元素中，显示内容为 “欢迎来到Spring Boot与Thymeleaf的世界！”。

2.3 运行结果：后端渲染的动态页面

当你启动应用并访问 http://localhost:8080/，页面将通过 Thymeleaf 引擎渲染，显示从控制器传递过来的动态内容。

3️⃣ Spring Boot 中的跨域问题与 CORS 配置 🌐

前后端分离时，最常遇到的问题之一就是跨域问题。由于浏览器的同源策略，前端在请求后端接口时，如果两者不在同一个域下，就会受到跨域限制。为了解决这个问题，我们可以在 Spring Boot 中配置 CORS（跨源资源共享）策略，允许不同源的前端进行访问。

3.1 全局 CORS 配置

在 Spring Boot 中，我们可以通过实现 WebMvcConfigurer 接口来全局配置 CORS 策略。这将允许所有的 API 接口都支持跨域请求。

代码解析：

addCorsMappings：添加跨域映射规则，允许指定路径的 API 接受跨域请求。
allowedOrigins：指定哪些域名允许访问当前资源。* 表示所有域名都可以访问。
allowedMethods：指定哪些 HTTP 方法（如 GET、POST、PUT、DELETE）可以进行跨域请求。
allowCredentials：是否允许发送包含身份凭证的请求（如 Cookies）。

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 配置 /api/** 路径的跨域
                .allowedOrigins("http://localhost:8081") // 允许的跨域地址
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true); // 允许发送凭证
    }
}

3.2 局部 CORS 配置

除了全局配置，我们还可以在单独的控制器方法上使用 @CrossOrigin 注解来配置跨域。

代码解析：

@CrossOrigin：允许该方法或类支持跨域请求。可以指定允许跨域的域名、请求方法等。

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8081") // 允许该地址的请求跨域访问
public class UserController {

    @GetMapping("/users")
    public List<User> getUsers() {
        return userService.getAllUsers();
    }
}

结语：前后端的完美协作，给开发带来无限可能 🚀

通过 Spring Boot 和 Vue.js 或 Thymeleaf 的结合，我们可以实现灵活的前后端协作，解决跨域问题，使得开发过程更加高效。无论是通过 RESTful API 还是直接在后端渲染页面，前后端的协作都为现代 Web 开发带来了更多的可能性。

希望这篇文章能够帮助你更好地理解 Spring Boot 与前端技术的结合，提升你在全栈开发中的能力！💪

🧧福利赠与你🧧

无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏「滚雪球学SpringBoot」专栏(全网一个名)，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门SpringBoot，就像滚雪球一样，越滚越大，无边无际，指数级提升。

最后，如果这篇文章对你有所帮助，帮忙给作者来个一键三连，关注、点赞、收藏，您的支持就是我坚持写作最大的动力。

同时欢迎大家关注公众号:「猿圈奇妙屋」，以便学习更多同类型的技术文章，免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板、技术文章Markdown文档等海量资料。

✨️ Who am I?

我是bug菌(全网一个名)，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云等社区博客专家，C站博客之星Top30，华为云多年度十佳博主/价值贡献奖，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击这里；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

-End-

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

Spring Boot 与前端技术：如何让后端与前端无缝对接？

引言：前后端分离，让开发更加高效！ 💡

1️⃣ Spring Boot 与 Vue.js 前端框架集成 🔗

1.1 Spring Boot 后端设置

代码解析：

1.2 Vue.js 前端设置

代码解析：

1.3 运行结果：前后端协作的效果

2️⃣ Spring Boot 与 Thymeleaf 模板引擎的结合 🖋️

2.1 Spring Boot 后端设置

代码解析：

2.2 Thymeleaf 页面设置

代码解析：

2.3 运行结果：后端渲染的动态页面

3️⃣ Spring Boot 中的跨域问题与 CORS 配置 🌐

3.1 全局 CORS 配置

代码解析：

3.2 局部 CORS 配置

代码解析：

结语：前后端的完美协作，给开发带来无限可能 🚀

🧧福利赠与你🧧

✨️ Who am I?

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

Spring Boot 与前端技术：如何让后端与前端无缝对接？

引言：前后端分离，让开发更加高效！ 💡

1️⃣ Spring Boot 与 Vue.js 前端框架集成 🔗

1.1 Spring Boot 后端设置

代码解析：

1.2 Vue.js 前端设置

代码解析：

1.3 运行结果：前后端协作的效果

2️⃣ Spring Boot 与 Thymeleaf 模板引擎的结合 🖋️

2.1 Spring Boot 后端设置

代码解析：

2.2 Thymeleaf 页面设置

代码解析：

2.3 运行结果：后端渲染的动态页面

3️⃣ Spring Boot 中的跨域问题与 CORS 配置 🌐

3.1 全局 CORS 配置

代码解析：

3.2 局部 CORS 配置

代码解析：

结语：前后端的完美协作，给开发带来无限可能 🚀

🧧福利赠与你🧧

✨️ Who am I?

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品