Spring Boot 整合 Thymeleaf Web工程案例

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

- 数据

数据是信息的表现形式和载体,可以是符号、文字、数字、语音、图像、视频等。数据和信息是不可分离的,数据是信息的表达,信息是数据的内涵。数据本身没有意义,数据只有对实体行为产生影响时才成为信息。

- 模板

模板,是一个蓝图,即一个与类型无关的类。编译器在使用模板时,会根据模板实参对模板进行实例化,得到一个与类型相关的类。

- 模板引擎

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

- 结果文档

一种特定格式的文档,比如用于网站的模板引擎就会生成一个标准的HTML文档。

模板语言用途广泛,常见的用途如下:

- 页面渲染

- 文档生成

- 代码生成

- 所有 “数据+模板=文本” 的应用场景


一、打开工具

1. 工程结构

用 IDEA 打开工程,其目录如下:


对应目录:

- com.example.demo.controller - Controller 层

-  com.example.demo.dao - 数据操作层 DAO

-  com.example.demo.domain - 实体类

-  com.example.demo.service - 业务逻辑层

- Application - 应用启动类

- application.properties - 应用配置文件

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

- static 目录是存放 CSS、JS 等资源文件

- templates 目录是存放视图

2.编译工程

在该工程根目录,运行 maven 指令进行编译:

cd spring-boot-quick-start

mvn cleaninstall

编译工程成功后,右键运行名为 BootTestApplication.java 应用启动类的 main 函数,然后浏览器访问localhost:8080/users即可:

用户列表页面:

用户编辑页面:

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

工程代码:

1.pom.xml Thymeleaf 依赖

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

<!-- 模板引擎 Thymeleaf 依赖 -->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>


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"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>spring.boot.core</groupId>

<artifactId>chapter-2-spring-boot-quick-start</artifactId>

<version>0.0.1-SNAPSHOT</version>

<packaging>jar</packaging>

<name>chapter-2-spring-boot-quick-start</name>

<description>第二章快速入门案例</description>

<parent>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>1.5.7.RELEASE</version>

</parent>

<properties>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

<java.version>1.8</java.version>

</properties>

<dependencies>

<!-- Web 依赖 -->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<!-- 单元测试依赖 -->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

<scope>test</scope>

</dependency>

<!-- Spring Data JPA 依赖 :: 数据持久层框架 -->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<!-- h2 数据源连接驱动 -->

<dependency>

<groupId>com.h2database</groupId>

<artifactId>h2</artifactId>

<scope>runtime</scope>

</dependency>

<!-- 模板引擎 Thymeleaf 依赖 -->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

</dependencies>

<build>

<plugins>

<!-- Spring Boot Maven 插件 -->

<plugin>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>


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

publicclass 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",newUser());

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 表单页面

<form th:action="@{/users/{action}(action=${action})}" method="post" class="form-horizontal">

                <input type="hidden" name="id" th:value="${user.id}"/>

                <div class="form-group">

                    <label for="user_name" class="col-sm-2 control-label">名称</label>

                    <div class="col-xs-4">

                        <input type="text" class="form-control" id="user_name" name="name" th:value="${user.name}" />

                    </div>

                </div>

                <div class="form-group">

                    <label for="user_age" class="col-sm-2 control-label">年龄:</label>

                    <div class="col-xs-4">

                        <input type="text" class="form-control" id="user_age" name="age" th:value="${user.age}"/>

                    </div>

                </div>

                <div class="form-group">

                    <label for="user_birthday" class="col-sm-2 control-label">出生日期:</label>

                    <div class="col-xs-4">

                        <input type="date" class="form-control" id="user_birthday" name="birthday" th:value="${user.birthday}"/>

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <input class="btn btn-primary" type="submit" value="提交"/> 

                        <input class="btn" type="button" value="返回" onclick="history.back()"/>

                    </div>

                </div>

  </form>

这里定义了一个 Form 表单用于新增或者更新用户。

列表页面

代码如下:

<table class="table table-hover table-condensed">

<legend>

<strong>用户列表</strong>

</legend>

<thead>

<tr>

<th>用户编号</th>

<th>名称</th>

<th>年龄</th>

<th>出生时间</th>

<th>管理</th>

</tr>

</thead>

<tbody>

<tr th:each="user : ${userList}">

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

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

<td th:text="${user.age}"></td>

<td th:text="${user.birthday}"></td>

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

</tr>

</tbody>

</table>

这里循环了用户列表。


三、本文小结

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容