Spring Boot学习笔记：（三）Web开发（Thymeleaf）

最新推荐文章于 2022-10-19 10:54:48 发布

是Guava不是瓜娃

最新推荐文章于 2022-10-19 10:54:48 发布

阅读量1k

点赞数 3

分类专栏： SpringBoot Spring Boot学习笔记文章标签： springboot thymeleaf

本文链接：https://blog.csdn.net/noaman_wgs/article/details/78916438

版权

本文详细介绍了Spring Boot结合Thymeleaf进行Web开发的过程，包括Thymeleaf模板引擎的基本概念、Spring Boot集成Thymeleaf的步骤以及如何在页面中展示数据。Thymeleaf作为Spring Boot推荐的模板引擎，提供了与Spring MVC的完美融合，支持动态视图和数据绑定。文章还展示了如何在JavaScript中访问Model数据以及如何利用BootStrap美化页面。

摘要由CSDN通过智能技术生成

Web开发是项目开发中至关重要的一部分，Web开发的核心内容主要包括内嵌Servlet容器和Spring MVC。

一、 Spring Boot的Web开发支持

在上节中提到的Starter Poms中提到了spring-boot-starter-web，对于Web开发，这个starter pom提供了嵌入的Tomcat以及SpringMVC依赖。关于Web相关的自动配置存储在spring-boot-autoconfigure.jar 和 org.springframework.boot.autoconfigure.web下，如图所示：

从这些文件中可知：

ServerPropertiesAutoConfiguration 和 ServerProperties自动配置内嵌Servlet容器；
WebMvcAutoConfiguration 和 WebMvcProperties配置Spring MVC。

二、 Spring Boot Web开发常用项目结构

这里写图片描述

root package ：com.wgs； Spring Boot的启动类Application.java 需要置于root
package下，这样Application.java启动的时候，就会默认扫描root package 下的类；
实体：置于com.wgs.model下；
逻辑层：置于com.wgs.service下；
控制层：置于com.wgs.controller下；
static：主要存放一些静态资源，如一些js文件，图片资源等；
templates：用来存放默认的模板配置路径；

三、Thymeleaf模板引擎

1 什么是模板引擎

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

举个简单的例子，在应用Spring MVC框架做开发时，Controller可以将数据保存到Model中然后返回，而模板引擎就可以对Model中数据进行渲染再进行显示，可以做到前后端分离。

以前的后端开发中，使用JSP技术比较多。而Spring Boot不建议使用JSP，原因在于JSP在内嵌的Servlet容器上运行有问题：

Tomcat只支持war打包的方式，不支持可执行的jar；
内嵌的Jetty不支持JSP；
Undertow不支持JSP；

Spring Boot提供了大量的模板引擎：

FreeMarker
Groovy
Thymeleaf（推荐）
Velocity
Mustache

Spring Boot 推荐使用Thymeleaf 作为模板引擎，因为Thymeleaf 提供了完美的Spring MVC支持。

2 Thymeleaf 基础知识

Thymeleaf是一个Java类库，是一个XML/XHTML/HTML5的模板引擎，可以作为MVC的Web应用的View层。
Thymeleaf能够与SpringMVC集成，可代替JSP。

下面看看Thymeleaf 的基础语法：
（1）引入Thymeleaf
首先需要通过http://www.thymeleaf.org命名空间，将静态页面转为动态的视图；动态视图中处理元素时都需要加上th:前缀：

<html xmlns:th="http://www.thymeleaf.org">

如果想引入静态资源，需要通过@{}来引用Web静态资源。
如想引入项目中src/main/resources/static/bootstrap资源：

<link rel="stylesheet" th:src="@{bootstrap/css/bootstrap.min.css}" />

（2）访问model中数据
同JSP，通过${}访问model中数据。

 姓名：<span  th:text="${singleP.name}"></span>

singleP来自后端Model中数据：

model.addAttribute("singleP", singleP);

（3）for循环：迭代访问model中数据
Thymeleaf 使用th:each="p:${list}"来迭代访问数据：

<li class="list-group-item" th:each="person:${personList}">
     姓名：<span th:text="${person.name}"></span>
     年龄：<span th:text="${person.age}"></span><br/>
</li>

personList来自后端Model中数据：

model.addAttribute("personList", personList)

最低0.47元/天解锁文章