SpringBoot+Thymeleaf超好用的前后端数据交互模板引擎

心已赠人 2023-10-10 11:55 15阅读 0赞

开发工具选用IDEA，尽量选择高版本的Thymeleaf避免版本不兼容问题，使用它可以完全替代JSP。

### 准备 ###

*  1、pom文件  
    除了普通的SpringBoot项目，版本选择1.5.10，除了引入Web模块的场景启动器，数据库模块等等之外，还需要thymeleaf的场景启动器，为了兼容性，还需要指定thymeleaf较高的版本 ，pom文件主要的依赖如下（**包含但不仅限于**，看需求）：

<parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>1.5.10.RELEASE</version>
            <relativePath/>
        </parent>
        
    	
    	
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
            <java.version>1.8</java.version>
            <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
            <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
        </properties>
    
     	
        <dependencies>
    		 
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
             
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
        </dependencies>

*  2、application.properties文件指定视图解析器  
    当一个请求被SpringMVC的Controller解析了之后，就会根据这样的视图解析器去找寻对应的html文件，比如，controller返回的字符串结果是“hello”,解析之后的响应的html文件会是/templates/hello.html，这是SpringMVC最简单的使用。

#thymeleaf start
    #视图解析器的前缀放在这个文件夹
    spring.thymeleaf.prefix=classpath:/templates/
    #后缀
    spring.thymeleaf.suffix=.html
    #模式
    spring.thymeleaf.mode=LEGACYHTML5
    spring.thymeleaf.servlet.content-type=text/html
    #编码格式
    spring.thymeleaf.encoding=utf-8
    #不用缓存
    spring.thymeleaf.cache=false
    spring.resources.chain.strategy.content.enabled=true
    spring.resources.chain.strategy.content.paths=/**
    #thymeleaf end

*  3、附上项目结构  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9BODI_size_16_color_FFFFFF_t_70]

### 使用 ###

1、所有html页面添加头

2、引入CSS和JS文件  
对比上面给出的目录结构图，不难发现thyleleaf引入资源文件是直接写static目录下的绝对路径即可，语法如下：

3、传值给html页面动态显示  
在Controller里面使用Model:

@Controller
    public class TestController {
        /**
         * 测试视图解析器
         */
        @RequestMapping("/hello")
        public String hello(Model model) {
            String name = "xiaosha";
            model.addAttribute("name", name);
            return "hello";
        }
    }

hello.html页面：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>hello</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
    <p th:text="'Hello, ' + ${name} + '!'">3333</p>
    </body>
    </html>

测试结果：  
![在这里插入图片描述][20190301115507363.png]

### 传递对象 ###

最常用的就是传值到表单，做数据回显，后端Controller在Model存储了一个对象：

@RequestMapping("/getQuestion")
        public String getQuestionToForm(Model model) {
            Question question = new Question();
            question = questionService.getQuestionByWord(word);
            model.addAttribute("que",question);
            return "questionlist";
        }

前端页面这样写：使用$\{que.word\}取出值来

使用thymeleaf将后端的值在html页面上显示就是这么方便， 不管是字符串、数组、对象、集合大致都差不多，可以直接在页面上进行数据校验，逻辑判断等等。快速入门请参照官方文档： [Tutorial: Using Thymeleaf][Tutorial_ Using Thymeleaf]

在JS里面怎么拿取值呢？也是超级简单！

var levle = [[${level}]];   //thymeleaf在Js里面获取SpringMVCModel里面写的值

@RequestMapping(value="/socketQuestion")
    public String socketQuestion( Model model,@RequestParam String level){
            model.addAttribute("level",level);
            return "questionsocket";
     }

通常情况下前端想要获取后端的数据是通过Ajax发送异步请求去获取，然后写JS代码去处理这些数据，最后拼接字符串形成html标签，最后被浏览器解析，实现无刷新而更改页面数据。使用了Thymeleaf之后，在JS里面通过\[\[$\{ \}\]\]获取值也很方便。

### 抽取公共元素 ###

在一个网站中，经常是这样的情况，头部、底部、菜单栏等是每个页面都有的，并且功能大致都一样，所以thymeleaf提供了将这些一样的标签页面元素抽取到一个html文件中，当其它html页面有相同的部分需要用到时，直接使用一对标签引入即可。  
大致实现步骤，使用一对nav标签，使用 th:fragment=" xxx" 对一部分代码块命名，抽取到一个html页面。

<nav  th:fragment="topbar">
        <div class="top">
            <div align="right">
                <button type="button" class="btn-sign"  style="vertical-align:middle"><span>免费注册</span></button>
                <button type="button" class="btn-log" style="vertical-align:middle"><span>马上登录</span></button>
            </div>
        </div>
    </nav>
    
    
    <nav th:fragment="bottombar">
        <div class="foot" style="background-color:#323232 ;margin-top: 20px;">
            <br><br>
            <p style="color: #C7C7C7" align="center"><span style="color: #556666;">destiny@XuRuiBiao.com</span>  xiaosha</p><br>
            <p style="color:#556666" align="center" ;>XXXX公司注册</p><br>
            <p style="color:#C7C7C7;" align="center">客服电话:+86-xxxxxxx</p><br>
        </div>
    </nav>

在其他任何需要这部分页面的地方直接引入即可：

<div th:replace="common::topbar"></div>
    ...
    
    <div th:replace="common::bottombar"></div>

### 附：常用的语法语句 ###

1、获取请求域、Session域里面的数据：

*  $\{param.x\} 返回名为x 的 request参数。（可能有多个值）
 *  $\{session.x\} 返回名为x的Session参数。
 *  $\{application.x\} 返回名为 servlet context 的参数。

2、日期的输出

3、循环

<tr th:each="prod : ${prods}">
         <td th:text="${prod.name}">Onions</td>
         <td th:text="${prod.price}">2.41</td>
         <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>

4、条件判断  
if 和 unless

switch

<div th:switch="${user.role}">
    	<p th:case="'admin'">User is an administrator</p>
    	<p th:case="#{roles.manager}">User is a manager</p>
    	<p th:case="*">User is some other thing</p> 
    </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9BODI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190301114310723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9BODI=,size_16,color_FFFFFF,t_70
[20190301115507363.png]: https://img-blog.csdnimg.cn/20190301115507363.png
[Tutorial_ Using Thymeleaf]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf