探索Thymeleaf:用动态Web模板引擎打造吸引人的用户界面(SpringBoot的html详解)

什么是Thymeleaf?

Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎,用于处理XML/XHTML/HTML5内容。它特别适合基于Spring框架的Web应用程序,因为它提供了与Spring MVC的出色集成。Thymeleaf以其自然的模板语法和强大的数据绑定能力而闻名,使得开发者能够轻松地创建动态Web页面。

Thymeleaf的特点

  • 自然模板技术:Thymeleaf的模板语法尽可能接近HTML,使得模板易于阅读和编写。
  • 强大的数据绑定:支持多种数据绑定方式,包括标准表达式和选择表达式,使得数据展示更加灵活。
  • 安全性:自动处理HTML转义,防止XSS攻击。
  • 与Spring的集成:无缝集成Spring MVC,支持Spring的表达式语言(SpEL)。
  • 高性能:通过缓存和优化的模板处理机制,提供快速的页面渲染速度。

Thymeleaf示例

以下是一个简单的Thymeleaf模板示例,展示了如何使用Thymeleaf来动态生成Web页面内容。

html 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html lang="en" xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>Thymeleaf示例</title>  
    <!-- 样式省略 -->  
</head>  
<body>  
    <!-- 使用th:utext和th:id进行文本替换和ID设置 -->  
    <div th:utext="${hello}" th:id="${hello.toUpperCase()}">xxxx</div>  
  
    <!-- 直接从模型属性中获取值并填充到输入框 -->  
    <input th:value="${user.getUsername()}">  
  
    <!-- 使用th:object和*{}语法访问对象属性 -->  
    <div th:object="${user}">  
        <span th:text="*{username}"></span>  
    </div>  
  
    <!-- 条件渲染 -->  
    <a th:href="www.csdn.net" th:if="${user.getAge() == 2}">年龄</a>  
  
    <!-- 根据条件设置类名(注释掉的代码) -->  
    <!-- <a th:class="${user.getAge() > 2}?'class1':'class2'">年龄</a> -->  
  
    <!-- 成绩等级判断 -->  
    <p th:if="${user.score >= 60 and user.score < 85}">B</p>  
    <p th:if="${user.score < 60}">C</p>  
    <p th:if="${user.score > 85}">优秀</p>  
  
    <!-- 性别判断 -->  
    <span th:switch="${user.gender}">  
        <p th:case="1">男</p>  
        <p th:case="2">女</p>  
    </span>  
  
    <!-- 表格数据展示 -->  
    <table>  
        <tr>  
            <td>姓名</td>  
            <td>密码</td>  
            <td>序号</td>  
        </tr>  
        <tr th:each="a,aState:${uList}">  
            <td th:text="${a.username}"></td>  
            <td th:text="${a.password}"></td>  
            <td th:text="${aState.index}"></td>  
        </tr>  
    </table>  
</body>  
</html>

Controller部分

java 复制代码
package com.qcby.demo.controller;

import com.qcby.demo.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/user")
public class UserController {
    @RequestMapping("/hello")
    public String hello(HttpServletRequest req, HttpSession httpSession, Model model){
        model.addAttribute("hello","<h1>renliang</h1>");
        User user = new User();
        user.setPassword("111");
        user.setUsername("renliang");
        user.setAge(2);
        user.setScore(78);
        user.setGender(2);
        List<User> uList = new ArrayList<>();
        for (int i = 0; i < 10; i++){
            User u = new User();
            u.setUsername("renliang"+i);
            u.setPassword("111"+i);

            uList.add(u);
        }

        // httpSession.setAttribute("user", user);
        model.addAttribute("user", user);
        model.addAttribute("uList", uList);
        return "user";
    }
}
相关推荐
qmx_0714 分钟前
HTB-Jerry(tomcat war文件、msfvenom)
java·web安全·网络安全·tomcat
为风而战22 分钟前
IIS+Ngnix+Tomcat 部署网站 用IIS实现反向代理
java·tomcat
编程零零七1 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
技术无疆2 小时前
快速开发与维护:探索 AndroidAnnotations
android·java·android studio·android-studio·androidx·代码注入
(⊙o⊙)~哦3 小时前
JavaScript substring() 方法
前端
无心使然云中漫步4 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者4 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_4 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
麒麟而非淇淋5 小时前
AJAX 入门 day1
前端·javascript·ajax
架构文摘JGWZ5 小时前
Java 23 的12 个新特性!!
java·开发语言·学习