Spring Boot 整合 Thymeleaf 完整 Web 案例

xujin3 2017-10-18

展开全文

用户编号

名称

年龄

出生时间

管理

<> th:each='user : ${userList}'>

<> scope='row' th:text='${user.id}'>

th:href='@{/users/update/{userId}(userId=${user.id})}' th:text='${user.name}'>

<> th:text='${user.age}'>

<> th:text='${user.birthday}'>

class='btn btn-danger' th:href='@{/users/delete/{userId}(userId=${user.id})}'>删除

这里循环了用户列表。

Tymeleaf 的语法糖

我这边也就不详细展开了，大家看看人家写的 http://www.cnblogs.com/nuoyiamy/p/5591559.html 或者看看官方文档 http://www./documentation.html

三、本文小结

该文，利用 Thymeleaf 做了个 Web 的 CRUD 案例。大家多指教~

如以上文章或链接对你有帮助的话，别忘了在文章结尾处评论哈~ 你也可以点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章。

还有，扫扫一起交流学习：

摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载，保留摘要，谢谢！

Thymeleaf 是一种模板语言。那模板语言或模板引擎是什么？常见的模板语言都包含以下几个概念：数据（Data）、模板（Template）、模板引擎（Template Engine）和结果文档（Result Documents）。

数据数据是信息的表现形式和载体，可以是符号、文字、数字、语音、图像、视频等。数据和信息是不可分离的，数据是信息的表达，信息是数据的内涵。数据本身没有意义，数据只有对实体行为产生影响时才成为信息。
模板模板，是一个蓝图，即一个与类型无关的类。编译器在使用模板时，会根据模板实参对模板进行实例化，得到一个与类型相关的类。
模板引擎模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
结果文档一种特定格式的文档，比如用于网站的模板引擎就会生成一个标准的HTML文档。

模板语言用途广泛，常见的用途如下：

页面渲染
文档生成
代码生成
所有 “数据+模板=文本” 的应用场景

这里案例用途自然是页面渲染，下面在 Spring Boot 中整合 Thymeleaf 实现完整 Web 案例。

一、运行 chapter-2-spring-boot-quick-start

chapter-2-spring-boot-quick-start 工程用的是内存式数据库，不需要配置数据源。下载运行即可。

1. 下载工程

git clone 下载工程 springboot-learning-example ，项目地址见 GitHub：https://github.com/JeffLi1993/springboot-learning-example，即：

git clone https://github.com/JeffLi1993/springboot-learning-example.git

2. 工程结构

用 IDEA 打开工程，可以看到子工程 chapter-2-spring-boot-quick-start ，其目录如下：

├── pom.xml
└── src
├── main
│ ├── java
│ │ └── spring
│ │ └── boot
│ │ └── core
│ │ ├── QuickStartApplication.java
│ │ ├── domain
│ │ │ ├── User.java
│ │ │ └── UserRepository.java
│ │ ├── service
│ │ │ ├── UserService.java
│ │ │ └── impl
│ │ │ └── UserServiceImpl.java
│ │ └── web
│ │ └── UserController.java
│ └── resources
│ ├── application.properties
│ ├── static
│ │ ├── css
│ │ │ └── default.css
│ │ └── images
│ │ └── favicon.ico
│ └── templates
│ ├── userForm.html
│ └── userList.html
└── test
└── java
└── spring
└── boot
└── core
├── QuickStartApplicationTests.java
└── domain
└── UserRepositoryTests.java

对应目录：

org.spring.springboot.controller - Controller 层
org.spring.springboot.dao - 数据操作层 DAO
org.spring.springboot.domain - 实体类
org.spring.springboot.service - 业务逻辑层
Application - 应用启动类
application.properties - 应用配置文件

模板是会用到下面两个目录

static 目录是存放 CSS、JS 等资源文件
templates 目录是存放视图

3. 编译运行工程

在该工程根目录，运行 maven 指令进行编译：

cd chapter-2-spring-boot-quick-start
mvn clean install

编译工程成功后，右键运行名为 QuickStartApplication.java 应用启动类的 main 函数，然后浏览器访问 localhost:8080/users 即可：用户列表页面：用户编辑页面：

二、详解 chapter-2-spring-boot-quick-start

工程代码：

1. pom.xml Thymeleaf 依赖

使用模板引擎，就在 pom.xml 加入 Thymeleaf 组件依赖：

org.springframework.boot
spring-boot-starter-thymeleaf

Thymeleaf 是什么？ Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

Thymeleaf 是新一代 Java 模板引擎，在 Spring 4 后推荐使用。

整体个 pom.xml 配置如下：

<>xml version='1.0' encoding='UTF-8'?>
<> xmlns='http://maven./POM/4.0.0' xmlns:xsi='http://www./2001/XMLSchema-instance'
xsi:schemaLocation='http://maven./POM/4.0.0 http://maven./xsd/maven-4.0.0.xsd'>
4.0.0
spring.boot.core
chapter-2-spring-boot-quick-start
0.0.1-SNAPSHOT
jar
chapter-2-spring-boot-quick-start
第二章快速入门案例
org.springframework.boot
spring-boot-starter-parent
1.5.7.RELEASE
UTF-8
UTF-8
1.8
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-starter-data-jpa
com.h2database
h2
runtime
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-maven-plugin

2. Thymeleaf 依赖配置

在 Spring Boot 项目中加入 Thymeleaf 依赖，即可启动其默认配置。如果想要自定义配置，可以在 application.properties 配置如下：

spring.thymeleaf.cache=true # Enable template caching.
spring.thymeleaf.check-template=true # Check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Check that the templates location exists.
spring.thymeleaf.enabled=true # Enable Thymeleaf view resolution for Web frameworks.
spring.thymeleaf.encoding=UTF-8 # Template files encoding.
spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.reactive.max-chunk-size= # Maximum size of data buffers used for writing to the response, in bytes.
spring.thymeleaf.reactive.media-types= # Media types supported by the view technology.
spring.thymeleaf.servlet.content-type=text/html # Content-Type value written to HTTP responses.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.

3. Thymeleaf 使用

Controller 如何将 View 指向 Thymeleaf

用户控制层代码如下：

@Controller
@RequestMapping(value = '/users') // 通过这里配置使下面的映射都在 /users
public class UserController {
@Autowired
UserService userService; // 用户服务层
/**
* 获取用户列表
* 处理 '/users' 的 GET 请求，用来获取用户列表
* 通过 @RequestParam 传递参数，进一步实现条件查询或者分页查询
*/
@RequestMapping(method = RequestMethod.GET)
public String getUserList(ModelMap map) {
map.addAttribute('userList', userService.findAll());
return 'userList';
}
/**
* 显示创建用户表单
*
*/
@RequestMapping(value = '/create', method = RequestMethod.GET)
public String createUserForm(ModelMap map) {
map.addAttribute('user', new User());
map.addAttribute('action', 'create');
return 'userForm';
}
/**
* 创建用户
* 处理 '/users' 的 POST 请求，用来获取用户列表
* 通过 @ModelAttribute 绑定参数，也通过 @RequestParam 从页面中传递参数
*/
@RequestMapping(value = '/create', method = RequestMethod.POST)
public String postUser(@ModelAttribute User user) {
userService.insertByUser(user);
return 'redirect:/users/';
}
/**
* 显示需要更新用户表单
* 处理 '/users/{id}' 的 GET 请求，通过 URL 中的 id 值获取 User 信息
* URL 中的 id ，通过 @PathVariable 绑定参数
*/
@RequestMapping(value = '/update/{id}', method = RequestMethod.GET)
public String getUser(@PathVariable Long id, ModelMap map) {
map.addAttribute('user', userService.findById(id));
map.addAttribute('action', 'update');
return 'userForm';
}
/**
* 处理 '/users/{id}' 的 PUT 请求，用来更新 User 信息
*
*/
@RequestMapping(value = '/update', method = RequestMethod.POST)
public String putUser(@ModelAttribute User user) {
userService.update(user);
return 'redirect:/users/';
}
/**
* 处理 '/users/{id}' 的 GET 请求，用来删除 User 信息
*/
@RequestMapping(value = '/delete/{id}', method = RequestMethod.GET)
public String deleteUser(@PathVariable Long id) {
userService.delete(id);
return 'redirect:/users/';
}
}

ModelMap 对象来进行数据绑定到视图。return 字符串，该字符串对应的目录在 resources/templates 下的模板名字。 @ModelAttribute 注解是用来获取页面 Form 表单提交的数据，并绑定到 User 数据对象。

Form 表单页面

核心代码：

<> th:action='@{/users/{action}(action=${action})}' method='post' class='form-horizontal'>
<> type='hidden' name='id' th:value='${user.id}'/>
<> class='form-group'>
<> for='user_name' class='col-sm-2 control-label'>名称
<> class='col-xs-4'>
<> type='text' class='form-control' id='user_name' name='name' th:value='${user.name}' />