当前位置：首页 > news >正文

Spring Boot实践二

news 2025/9/17 14:42:01

一、模板引擎简介

在之前的示例中，我们通过@RestController来处理请求：

package com.example.demospringboot.web;import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;@RestController
public class HelloController {@RequestMapping("/hello")public String index() {return "Hello World !";}
}

返回的内容为json对象。那么如果需要渲染html页面的时候，要如何实现呢？在动态HTML实现上，Spring Boot提供了多种模板引擎的默认配置支持，所以在推荐的模板引擎下，我们可以很快的上手开发动态网站。

Spring Boot提供了自动化配置模块的模板引擎主要有以下几种：

Thymeleaf
FreeMarker
Groovy

Spring Boot从一开始就建议使用模板引擎，而不是使用JSP。这是因为JSP在处理动态内容时存在一些问题，例如：

JSP需要在服务器端编译，这会增加服务器的负担。
JSP的语法比较复杂，需要学习一些特定的标签和语法规则。
JSP的可重用性比较差，难以将页面模板和业务逻辑分离。

相比之下，模板引擎具有以下优点：

模板引擎可以在客户端渲染，减轻服务器的负担。
模板引擎的语法比较简单，易于学习和使用。
模板引擎可以将页面模板和业务逻辑分离，提高代码的可重用性和可维护性。

因此，Spring Boot建议使用模板引擎，例如Thymeleaf、Freemarker等，来处理动态内容。

二、Thymeleaf 模板示例：

以下是一个简单的Thymeleaf Spring Boot应用示例：

首先，新建一个Spring Boot应用，在pom.xml中加入所需的模板引擎模块，比如使用thymeleaf的话，只需要引入下面依赖：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

注意：在pom中引入相关依赖后，一定要刷新下maven，否则可能导致访问失败的。

在application.properties文件中添加以下配置：

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

创建一个Controller类，用于处理请求并返回视图：

package com.example.demospringboot.web;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.ModelMap;@Controller
public class HelloController {@GetMapping("/hello")public String index(ModelMap map) {// 加入一个属性，用来在模板中读取map.addAttribute("message", "Hello, Thymeleaf!");// return模板文件的名称，对应src/main/resources/templates/index.htmlreturn "index";}
}

创建一个Thymeleaf模板，用于渲染视图，模板路径src/main/resources/templates下新建模板文件index.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Thymeleaf Spring Boot Example</title>
</head>
<body><h1 th:text="${message}"></h1>
</body>
</html>

运行应用程序并访问http://localhost:8080/hello，应该能够看到“Hello, Thymeleaf！”的消息。

三、ECharts 绘制数据图表

ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

index.html示例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" /><title>Spring Boot中使用ECharts1</title><script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body><script type="text/javascript">// 初始化ECharts组件到id为main的元素上let myChart = echarts.init(document.getElementById('main'));// 定义图标的配置项let option = {title: {text: 'Spring Boot中使用ECharts'},tooltip: {},// x轴配置xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴配置yAxis: {},series: [{// 数据集（也可以从后端的Controller中传入）data: [820, 932, 901, 934, 1290, 1330, 1320],// 图表类型，这里使用line，为折线图type: 'line'}]};myChart.setOption(option);
</script>
</html>

四、文件上传

文件上传的功能实现是我们做Web应用时候最为常见的应用场景，比如：实现头像的上传，Excel文件数据的导入等功能，都需要我们先实现文件的上传，然后再做图片的裁剪，excel数据的解析入库等后续操作。

首先，新建一个Spring Boot应用，在pom.xml中加入所需的模板引擎模需要的依赖：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version><scope>provided</scope>
</dependency>

注意：在pom中引入相关依赖后，一定要刷新下maven，否则可能导致访问失败的。

2，在resources/templates目录下再创建一个文件上传的页面upload.html，内容如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" /><title>文件上传页面</title>
</head>
<body>
<h1>文件上传页面</h1>
<form method="post" action="/upload" enctype="multipart/form-data">选择要上传的文件：<input type="file" name="file"><br><hr><input type="submit" value="提交">
</form>
</body>
</html>

3，创建文件上传的处理控制器，命名为UploadController

package com.example.demospringboot.web;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.nio.file.Files;@Controller
@Slf4j
public class UploadController {// 成员变量path，通过@Value注入配置文件中的file.upload.path属性// 这个配置用来定义文件上传后要保存的目录位置@Value("${file.upload.path}")private String path;// GET请求，路径"/"// 用于显示upload.html这个文件上传页面@GetMapping("/")public String uploadPage() {return "upload";}// POST请求。路径"/upload"// 用于处理上传的文件，即保存到file.upload.path配置的路径下面@PostMapping("/upload")@ResponseBodypublic String create(@RequestPart MultipartFile file) throws IOException {String fileName = file.getOriginalFilename();String filePath = path + fileName;File dest = new File(filePath);Files.copy(file.getInputStream(), dest.toPath());return "Upload file success : " + dest.getAbsolutePath();}}

4，编辑application.properties配置文件

spring.servlet.multipart.max-file-size=2MB
spring.servlet.multipart.max-request-size=2MBfile.upload.path=/test/

前两个参数用于限制了上传请求和上传文件的大小，而file.upload.path是上面我们自己定义的用来保存上传文件的路径。

5，启动Spring Boot应用，访问http://localhost:8080，可以看到文件上传页面

问题记录：

springboot能正常启动，且能通过编译，无错误；
然后后台访问静态页面的时候，出现whittelabel error page错误，检查思路如下：

1，判断application是否能检查到controller类，首先application在目录中的范围大于或等于controller的范围；
2，然后检查能否映射静态资源，检查getmapping和访问目录是否一致；
3，如果在 th:text 中引用后台发送过来的变量时，页面就报错，如果取消引用就不报错，这种可能就是你在 th: 属性中进行时，没有正确地做到字符串和变量的拼接；
4，在pom中引入相关依赖后，一定要刷新下maven，没有刷新新加入的依赖会导致访问失败。重新刷新pom依赖后，重启项目，就能正常访问了

参考：
https://blog.didispace.com/spring-boot-learning-21-4-2/

Spring Boot实践二

一、模板引擎简介

二、Thymeleaf 模板示例：

三、ECharts 绘制数据图表

四、文件上传

问题记录：

相关文章：

Spring Boot实践二

python：基于GeoPandas和GeoViews库将GEDI激光高程数据映射到交互式地图

汇编实现strcpy

Appium+python自动化（二十四） - 元素等待（超详解）

NFT市场泡沫破裂了吗？投资NFT是否仍然安全？

k8s使用helm部署Harbor镜像仓库并启用SSL

B/B+树算法

vue3.2 + elementPlus + Windi CSS + ts创建一个好用的可兼容不同宽高的login页面

Integer包装类详解加部分源码

如何给侧边栏添加 Badge 计数标记

插槽slot复习

【C++STL标准库】序列容器之deuqe与、orwa_list与list

RocketMQ教程-(5)-功能特性-消息发送重试和流控机制

OpenCV笔记

Mysql基础(下)之函数，约束，多表查询，事务

Android 屏幕适配各种宽高比的手机

云计算——云计算与虚拟化的关系

手机变局2023：一场瞄准产品和技术的“思维革命”

【Linux】自动化构建工具-make/Makefile详解

1 js嵌入html使用

CTF show Web 红包题第六弹

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

tree 树组件大数据卡顿问题优化

R语言速释制剂QBD解决方案之三

C#中的CLR属性、依赖属性与附加属性

多模态图像修复系统：基于深度学习的图片修复实现

leetcode_69.x的平方根

深入理解 React 样式方案

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法