Spring boot 集成Thymeleaf

前言

上一篇介绍了Spring Boot中整合Jsp，尽管Spring boot官方并不推荐使用Jsp~

这篇文章将介绍如何整合官方所推荐的Thymeleaf模板引擎

简单了解

首先新建项目，选择模板引擎时，会有四个可以选择

至于JSP技术Spring Boot官方为什么不推荐的，因为：

我们学习的是 Spring Boot ，如果老是问JSP的问题，其实并不是特别合适，假如出了问题，Spring Boot 团队开发都搞不定，更何况我们作为框架的使用方~

当我们使用上述模板引擎中的任何一个，它们默认的模板配置路径为：src/main/resources/templates。当然也可以修改这个路径，具体如何修改，文章后面会提及

模板引擎依赖

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

项目结构

简单来说

domain用于存放实体
app.rest用于存放控制器
server用于处理逻辑
repository用于操作数据库

修改配置文件

一般来说，只要导入了依赖，不需要配置，就能使用thymeleaf，但是会存在些问题

缓存打开还是关闭：缓存的意思是加载一次模板之后便不会在加载了，对于生产环境应该加上缓存，但是在开发过程中如果打开缓存
是否需要HTML5强校验：如果你使用别人的HTML模板，并且模板中很多语法都不严格，这个时候项目就会报错，因此有时候需要关闭强校验

导入依赖

	<!--解析html，关闭强校验-->
    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
    </dependency>

application.yml

server:
  port: 8080

spring:
  thymeleaf:
    cache: false
    mode: LEGACYHTML5
    #在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
    prefix: classpath:/templates/

编写相关代码

1、编写controller

import me.zhengjie.domain.User;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("user")
public class UserController {

    @GetMapping
    public ModelAndView index(Model model){

        List<User> users = new ArrayList<>();

        users.add(new User("小王",12,"男"));
        users.add(new User("小李",13,"女"));
        users.add(new User("小张",14,"男"));

        model.addAttribute("users",users);

        return new ModelAndView("/index");
    }
}

2、编写html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div style="text-align: center;margin:0 auto;width: 1000px; ">
    <h1>用户列表</h1>
    <table width="100%" border="1" cellspacing="1" cellpadding="0">
        <tr>
            <td>用户名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr th:each="user: ${users}">
            <td th:text="${user.username}">用户名</td>
            <td th:text="${user.age}">年龄</td>
            <td th:text="${user.sex}">性别</td>
        </tr>
    </table>
</div>
</body>
</html>

**注：**通过xmlns:th=”http://www.thymeleaf.org“ 命令空间，将静态页面转换为动态的视图，需要进行动态处理的元素将使用“th:”前缀。

启动项目

Thymeleaf一些小知识

变量表达式

<span th:text="${user.username}">  
#遍历
<li th:each="user : ${users}">

URL表达式

URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。

@{/user/index}

URL还可以设置参数：

@{/user/delete(id=${id})}

相对路径：

@{../user/index}

让我们看这些表达式：

    <form th:action="@{/createOrder}">  
    <a href="main.html" th:href="@{/main}">

th如何遍历下拉框

<select name="user">
<option value="0">无</option>
<option th:each="u:${users}" th:value="${u.username}">[[${u.username}]]</option>
</select>

更多的Thymeleaf教程，可自行百度学习，下篇文章将讲解如何使用Jpa对数据库的增删改查

项目源码

github：https://github.com/dqjdda/SpringBoot_All

码云：https://gitee.com/hgpt/SpringBoot_All

开源后台管理系统：

欢迎体验Aurora

github: https://github.com/dqjdda/Aurora

码云： https://gitee.com/hgpt/Aurora