Spring中Thymeleaf模板的使用

Thymeleaf的mvc框架

Thymeleaf可以用作springmvc中的一种mvc框架，使用如下：

首先要导入Thymeleaf的外部资源jar包的支持

其次需要在spring-mvc.xml文件中加入Thymeleaf 支持

<!-- Thymeleaf 支持 -->
    <bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
        <property name="order" value="1"/>
        <property name="characterEncoding" value="UTF-8"/>
        <property name="templateEngine" ref="templateEngine"/>
    </bean>
    
    <bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver"/>
    </bean>
    
    <!--prefix路径可以自己改，cacheable正式运行是改为true-->
    <bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
        <property name="prefix" value="/template/"/>
        <property name="suffix" value=".html"/>
        <property name="templateMode" value="HTML5"/>
        <property name="cacheable" value="false"/>
        <property name="characterEncoding" value="UTF-8" />
    </bean>

在html中的几种简单用法

<div>
    学号：<span th:text="${stu.id}"> 20190001 </span>
</div>

<div>
    姓名：[[${stu.name}]]
</div>

<div th:text=" '性别：' + ${stu.sex} ">
</div>

<div th:text="| 手机号：${ stu.cellphone} |">
</div>

<!--运算-->
<div>
    <label>生日</label>
    <span th:text="${#calendars.format(birthday, 'yyyy-MM-dd') }">2001-01-01</span>
</div>

<div>
    <label> 性别 : </label>
    <span th:text="${sex ? '男' : '女'}">N2</span>
</div>

<div>
    <label> 身高 : </label>
    <span th:text="${#numbers.formatDecimal( height * 100, 0, 0) }"> 000 </span> cm
</div>

<!--判断-->
<div>
    <div th:if = " ${user !=null} ">
        你好，[[${user}]]
        <a href='logut'>退出登录</a>
    </div>
    
    <div th:if=" ${user==null} ">
        你好，<a href='logut'>请登录</a>
    </div>
</div>

<!--循环-->
<table>
    <tr>
        <th style='width:100px'> 学号 </th>
        <th style='width:120px'> 姓名 </th>
        <th style='width:50px'> 性别 </th>
        <th style='width:140px'> 手机 </th>
    </tr>
    <tr th:each=" row : ${studentList} ">
        <td th:text="${row.id}"> 000 </th>
        <td th:text="${row.name}"> 00 </th>
        <td th:text="${row.sex ? '男' : '女'}"> N2 </th>
        <td th:text="${row.cellphone}"> 1322546 </th>
    </tr>
</table>

<!--路径的调用，绝对路径-->
    <img src="../image/123.jpg" th:src=" @{/image/123.jpg}" />
    <script type="text/javascript" src="../js/jquery.min.js" th:src=" @{/js/jquery.min.js}" ></script>
    <link rel="stylesheet" href="../css/common.css" th:href=" @{/css/common.css}" />

<!--引入外部body-->
    <div th:insert=" ~{common::footer2}"></div>
    <div th:include=" ~{common::footer2}"></div>
	<div th:update=" ~{common::footer}"></div>
    <div th:update=" ~{html文件名::set_text_dialog}"></div>

引入外部body，其中的div也要有相应的写法

---

<!--更改其他信息对话框-->
<div th:fragment='set_text_dialog' >
    <div class="set_text_dialog_define" style="display: none;" >
        <div class="pane2" style="padding:16px">
            <div style="padding: 6px;">
                <label class="label" style="width: 30%;">原文:</label>
                <input class="input value" type="text"  style="width: 60%;" />
            </div>
        </div>
    </div>
</div>

spring中使用

使用很简单，只需返回一个Strng类型就可以了，输入类型参数有个为mMdel就行了。

@GetMapping("/hello")
	public String test(Model model)
	{
		Student stu = new Student(100, "张三", true, "12365478925");
		
		model.addAttribute("stu", stu);
				
		return "hello"; // 最终合成路径  /template/hello.html
	}