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

Spring Boot实践二

news 2025/7/13 13:37:35

一、模板引擎简介

在之前的示例中，我们通过@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在处理动态内容时存在一些问题，例如：

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

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

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

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

二、Thymeleaf 模板示例：

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

  1. 首先，新建一个Spring Boot应用，在pom.xml中加入所需的模板引擎模块，比如使用thymeleaf的话，只需要引入下面依赖：
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

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

  1. 在application.properties文件中添加以下配置：
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
  1. 创建一个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";}
}
  1. 创建一个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>
  1. 运行应用程序并访问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数据的解析入库等后续操作。

  1. 首先，新建一个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实践二

一、模板引擎简介 在之前的示例中&#xff0c;我们通过RestController来处理请求&#xff1a; package com.example.demospringboot.web;import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.RequestMapping;Re…...

编程日记 2023/7/26 17:36:35

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

作者：CSDN @ _养乐多_ 本文将介绍 GEDI（Global Ecosystem Dynamics Investigation）激光雷达数据某数据点波形数据提取，并绘制图表，添加其他图表元素并使图表具有交互性。 在本文中，我们将探索如何打开、读取和处理GEDI数据，并利用地理信息处理库GeoPandas和地理空间数…...

编程日记 2023/7/26 17:35:34

汇编实现strcpy

需要有两点注意&#xff1a; .type在windows的mingw上无法识别。windows下编译会找不到my_strcpy的定义&#xff08;undefined reference&#xff09;&#xff0c;通过看mingw的代码发现&#xff0c;它会在汇编函数前加一个下划线&#xff0c;所以在我们的汇编代码中加上下划线…...

编程日记 2023/7/26 17:34:33

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

思考 在自动化过程中&#xff0c;元素出现受网络环境&#xff0c;设备性能等多种因素影响。因此元素加载的时间可能不一致&#xff0c;从而会导致元素无法定位超时报错&#xff0c;但是实际上元素是正常加载了的&#xff0c;只是出现时间晚一点而已。那么如何解决这个问题呢&am…...

编程日记 2023/7/26 17:33:32

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

近期&#xff0c;NFT市场的价格出现了明显的下跌趋势&#xff0c;许多人开始担心NFT市场是否已经进入了泡沫破裂的阶段。但是&#xff0c;我们需要认真分析这个问题&#xff0c;并且探讨投资NFT是否仍然安全。 NFT&#xff08;Non-Fungible Token&#xff09;是一种非同质化代币…...

编程日记 2023/7/26 17:32:30

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

1、部署nfs存储工具 参照&#xff1a;https://zhaoll.blog.csdn.net/article/details/128155767 2、部署helm 有多种安装方式&#xff0c;根据自己的k8s版本选择合适的helm版本 参考&#xff1a;https://blog.csdn.net/qq_30614345/article/details/131669319 3、部署Harbo…...

编程日记 2023/7/26 17:31:30

B/B+树算法

B树 基本概述 B树又称多路平衡搜索树。一棵m阶B树&#xff0c;要么是空树&#xff0c;要么满足以下特性&#xff1a; 每个节点最多有m棵子树根节点至少有两棵子树内部节点&#xff08;除根和叶子节点以外的节点&#xff09;至少有⌈m/2⌉棵子树关键字个数比子树个数少1终端节…...

编程日记 2023/7/26 17:29:27

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

1.效果预览 2. 代码准备 导入windiCSS&#xff1a; npm i -D vite-plugin-windicss windicss windiCSS官网&#xff1a; https://cn.windicss.org/integrations/vite.html 使用vite创建好你的vue工程 sass版本为&#xff1a; 1.49.9 3.Windi CSS在页面中使用 apply 二次定义类名…...

编程日记 2023/7/26 17:28:26

Integer包装类详解加部分源码

【1】Java.lang直接使用&#xff0c;无需导包&#xff1a; 【2】类的继承关系&#xff1a; 【3】实现接口&#xff1a; Serializable&#xff0c;Comparable<Integer> 【4】这个类被final修饰&#xff0c;那么这个类不能有子类&#xff0c;不能被继承&#xff1a; 【5】…...

编程日记 2023/7/26 17:27:25

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

一、需求功能 给侧边菜单栏或及子菜单栏添加计数标记 el-badge 效果如下&#xff1a; 二、实现思路 结合 icon 图标渲染的思路&#xff0c;通过在layout 的 item.vue 中使用 vnodes.push 方法实现对 <el-badge /> 的渲染。在通过 Vuex 的状态管理将菜单栏需要的数据转…...

编程日记 2023/7/26 17:26:24

插槽slot复习

1.认识插槽 ◼ 在开发中&#xff0c;我们会经常封装一个个可复用的组件&#xff1a;  前面我们会通过props传递给组件一些数据&#xff0c;让组件来进行展示&#xff1b;  但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等…...

编程日记 2023/7/26 17:25:23

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

基本概念这里就不再浪费时间去解释&#xff0c;这里给出deuqe与、orwa_list、list的基本使用方法&#xff1a; deque队列&#xff1a; #include <iostream> #include <deque>template <typename T> void print(T Begin, T End);int main() {std::deque<…...

编程日记 2023/7/26 17:24:21

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

本文为您介绍 Apache RocketMQ 的消息发送重试机制和消息流控机制。 背景信息​ 消息发送重试 Apache RocketM Q的消息发送重试机制主要为您解答如下问题&#xff1a; 部分节点异常是否影响消息发送&#xff1f; 请求重试是否会阻塞业务调用&#xff1f; 请求重试会带来什…...

编程日记 2023/7/26 17:23:20

OpenCV笔记

opencv读取视频操作 import cv2video cv2.VideoCapture("./1.mp4")if video.isOpened():# video.read() 一帧一帧地读取# open 得到的是一个布尔值&#xff0c;就是 True 或者 False# frame 得到当前这一帧的图像open, frame video.read() else:open Falsewhile …...

编程日记 2023/7/26 17:22:19

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

&#x1f442; 回到夏天&#xff08;我多想回到那个夏天&#xff09; - 傲七爷/小田音乐社 - 单曲 - 网易云音乐 截图自 劈里啪啦 -- 黑马Mysql&#xff0c;仅学习使用 &#x1f447;原地址 47. 基础-多表查询-表子查询_哔哩哔哩_bilibili 目录 &#x1f982;函数 &#x1f3…...

编程日记 2023/7/26 17:21:18

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

由于android 手机的屏幕宽高比样式太多了&#xff0c;在设计UI时&#xff0c;很多时候&#xff0c;会因为宽高比&#xff0c;分辨率不同会有展示上的差异。 我是这样解决的 在activity的onCreate方法前&#xff0c;调用&#xff1a; fun screenFit(context: Context) {val me…...

编程日记 2023/7/26 17:20:17

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

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 前言 一.虚拟化 1.什么是虚拟化 2.虚拟化技术作用 二.云计算与虚拟化的关系 三.虚…...

编程日记 2023/7/26 17:19:16

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

以折叠屏冲高端&#xff0c;已成为中国手机厂商们的共识。 在这个苹果未涉足的领域&#xff0c;国产手机厂商们加快脚步迭代推新&#xff0c;积极抢占机遇。但平心而论&#xff0c;虽然国产折叠屏机型众多&#xff0c;但市场上始终缺乏一款突破性的产品作为标杆&#xff0c;为…...

编程日记 2023/7/26 17:18:13

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

前言 大家好吖&#xff0c;欢迎来到 YY 滴 Linux系列 &#xff0c;热烈欢迎&#xff01;本章主要内容面向接触过Linux的老铁&#xff0c;主要内容含 欢迎订阅 YY 滴Linux专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 订阅专栏阅读&#xff1a;YY的《…...

编程日记 2023/7/26 17:17:12

1 js嵌入html使用

1.1 直接在html内部使用js代码 使用script标签&#xff0c;在前后标签内部写的代码即为js代码。 <body><p id"p1">初始段落</p> <!--id是为了定位需要更改内容的标签--><button type"button" onclick"showNum()">…...

编程日记 2023/7/26 17:16:11

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/7/13 9:04:22

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/6/21 16:43:12

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/7/8 20:58:51

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/6/17 10:46:36

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/7/11 8:40:45

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/6/27 14:22:50

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/7/13 3:47:50

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/7/6 20:57:18