springboot2.0+thymeleaf技术-入门

    科技2024-12-18  10

    文章目录

    1.什么thymeleaf?2.thymeleaf的特点3.项目创建thymeleaf手动配置3.1导入相关包3.2 thymeleaf视图层文件存放目录3.3 实现3.3.1 视图层3.3.2 java代码3.3.3 结果 3.4 异常处理3.4.1 出现原因3.4.2 处理异常方式一方式儿 4.thymeleaf常用语法4.1常用语法格式表4.2 thymeleaf内置对象4.2.1 strings对象4.2.1.1 判断字符串是否为空4.2.1.2 判断字符串是否含有指定字串,有返回true反之返回false4.2.1.3 测试此字符串是否以指定的前缀开始4.2.1.4 测试此字符串是否以指定的后缀结尾。4.2.1.5 返回字符串的长度4.2.1.6 返回字符串在当前字符串所在索引值。4.2.1.7 截取字符串4.2.1.8 转换大小写 4.2.2 dates对象 4.3 常用逻辑判断4.4 遍历 list 与 map4.4.1 遍历 list4.4.2 遍历 map 4.5 从request,session,application作用域中传值取值thymeleaf对url的处理基本语法绝对路径相对路径(相对于当前项目)相对路径(相对于服务器根路径)传递参数restful风格传递参数

    1.什么thymeleaf?

    简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。

    2.thymeleaf的特点

    Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

    3.项目创建

    thymeleaf手动配置

    如果不配置,会自动应用默认设置

    #thymelea模板配置 spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.cache=false spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/**

    3.1导入相关包

    thymeleaf 是spring官方推荐的视图层技术,所以spring提供了thymeleaf的启动包

    <!--thymeleaf 是spring官方推荐的视图层技术,所以spring提供了thymeleaf的启动包--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>

    3.2 thymeleaf视图层文件存放目录

    在classpath:templates目录下,对应的maven映射目录:src/resoures/templates

    3.3 实现

    3.3.1 视图层

    下面html文件应该放在templates目录下

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>hello world</h1> <h2 th:text="${msg}"></h2> </body> </html>

    3.3.2 java代码

    App

    package cn.liuhao; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }

    controller

    package cn.liuhao.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("api") public class ApiController { @RequestMapping("index") public String index(Model model) { model.addAttribute("msg", "你好!现在你应该看到了这条信息"); return "index"; } }

    3.3.3 结果

    3.4 异常处理

    3.4.1 出现原因

    在thymeleaf中因为语法比较严谨,所以必须认定所有的html标签都必须有结束标记

    3.4.2 处理异常

    方式一

    在mate标签后加结束标签即可

    方式儿

    更改thymeleaf包的版本,更改到更高版本即可解决这个问题 在pom.xml中加入以下代码

    <properties> <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.0.4.RELEASE</thymeleaf-layout-dialect.version> </properties>

    4.thymeleaf常用语法

    4.1常用语法格式表

    格式作用th:text在页面上输出值th:value可以将一个值放到input标签value属性中th:ifif判断语句th:switchth:switch与th:case配合构成多分支语句th:each遍历集合和键值对

    4.2 thymeleaf内置对象

    thymeleaf内置了一些对象,用来帮助我们做更多更方便的操作thymeleaf中的内置对象,大多都以s结尾,例如:strings,dates,numbers调用内置对象必须要以#开头thymeleaf内置对象的方法名与java里类提供方法名完全一摸一样,例如:java里String判断字符串是否为空的方法叫isEmpty,在thymeleaf内置对象strings里的方法名完全一摸一样

    4.2.1 strings对象

    4.2.1.1 判断字符串是否为空

    如果为空,则返回true,否则返回false

    <h1 th:text="${#strings.isEmpty(msg)}"></h1>

    4.2.1.2 判断字符串是否含有指定字串,有返回true反之返回false

    <!-- 判断字符串是否含有指定字符串 --> <h1 th:text="${#strings.contains(msg,'你好')}"></h1>

    4.2.1.3 测试此字符串是否以指定的前缀开始

    <!-- 测试此字符串是否以指定的前缀开始。 --> <h1 th:text="${#strings.startsWith(msg,'你好')}"></h1>

    4.2.1.4 测试此字符串是否以指定的后缀结尾。

    <!-- 测试此字符串是否以指定的后缀结尾。 --> <h1 th:text="${#strings.endsWith(msg,'你好')}"></h1>

    4.2.1.5 返回字符串的长度

    <!-- 返回字符串的长度。 --> <h1 th:text="${#strings.length(msg)}"></h1>

    4.2.1.6 返回字符串在当前字符串所在索引值。

    <!-- 返回字符串在当前字符串所在索引值。 --> <h1 th:text="${#strings.indexOf(msg,'s')}"></h1>

    4.2.1.7 截取字符串

    <!-- 截取字符串 --> <h1 th:text="${#strings.substring(msg,1,4)}"></h1>

    4.2.1.8 转换大小写

    <!-- 将英文字母转换为小写 --> <h1 th:text="${#strings.toLowerCase(msg)}"></h1> <!-- 将英文字母转换为大写 --> <h1 th:text="${#strings.toUpperCase(msg)}"></h1>

    4.2.2 dates对象

    dates常用方法

    <!-- 不给格式,默认转换为当前时区格式 --> <h2 th:text="${#dates.format(date)}"></h2> <!-- 指定格式 --> <h2 th:text="${#dates.format(date,'yyyy/MM/dd')}"></h2> <!-- 获取年份 --> <h2 th:text="${#dates.year(date)}"></h2> <!-- 获取月份 --> <h2 th:text="${#dates.month(date)}"></h2> <!-- 获取日份 --> <h2 th:text="${#dates.day(date)}"></h2>

    4.3 常用逻辑判断

    <body> <!-- 简单的if判断 --> <span th:if="${sex} == 'boy'">我是个男孩</span> <span th:if="${sex} == 'girl'">我是个女孩</span> <!-- switch分支 --> <div th:switch="${id}"> <span th:case="1">分支1</span> <span th:case="2">分支2</span> <span th:case="3">分支3</span> </div> </body>

    4.4 遍历 list 与 map

    4.4.1 遍历 list

    controller控制器

    @Controller public class UserController { @RequestMapping("showUsers") public String showUsers(Model model) { List<User> users = new ArrayList<User>(); users.add(new User(1, "张三", 99.9)); users.add(new User(2, "李四", 88.9)); users.add(new User(3, "王五", 77.9)); model.addAttribute("list", users); return "showUsers"; } }

    showUsers.html

    <body> <table border="1px"> <thead> <tr> <th>#ID</th> <th>#name</th> <th>#score</th> </tr> </thead> <tbody> <tr th:each="item : ${list}"> <td th:text="${item.id}"></td> <td th:text="${item.name}"></td> <td th:text="${item.score}"></td> </tr> </tbody> </table> <table border="1px"> <thead> <tr> <th>#ID</th> <th>#name</th> <th>#score</th> <th>#当前索引</th> <th>#当前条数</th> <th>#齐数</th> <th>#偶数</th> <th>#集合大小</th> <th>#当前是否为第一条</th> <th>#当前是否为最后一条</th> </tr> </thead> <tbody> <tr th:each="item,var : ${list}"> <td th:text="${item.id}"></td> <td th:text="${item.name}"></td> <td th:text="${item.score}"></td> <td th:text="${var.index}"></td> <td th:text="${var.count}"></td> <td th:text="${var.even}"></td> <td th:text="${var.odd}"></td> <td th:text="${var.size}"></td> <td th:text="${var.first}"></td> <td th:text="${var.last}"></td> </tr> </tbody> </table> </body>

    4.4.2 遍历 map

    controller控制器

    @Controller public class UserController { @RequestMapping("showUsers") public String showUsers(Model model) { Map<String, Object> map = new HashMap<String, Object>(); map.put("use1", new User(1, "张三", 99.9)); map.put("use2", new User(2, "李四", 88.8)); map.put("use3", new User(3, "王五", 77.7)); model.addAttribute("map", map); return "showUsers"; } }

    showUsers.html

    <body> <table border="1px" align="center"> <thead> <tr> <th>key</th> <th>value</th> <th>id</th> <th>name</th> <th>score</th> </tr> </thead> <tbody> <tr th:each="item : ${map}"> <td th:text="${item.key}"></td> <td th:text="${item.value}"></td> <td th:text="${item.value.id}"></td> <td th:text="${item.value.name}"></td> <td th:text="${item.value.score}"></td> </tr> </tbody> </table> </body>

    4.5 从request,session,application作用域中传值取值

    controller内容

    @Controller public class UserController { @RequestMapping("showUsers") public String showUsers(HttpServletRequest request) { // 向request作用域存入数据 request.setAttribute("requestMsg", "this is a msg in request field"); // 向seesion作用域存入数据 request.getSession().setAttribute("sessionMsg", "this is a msg in session field"); // 向application作用域存入数据 request.getSession().getServletContext().setAttribute("applicationMsg", "this is a msg in application field"); return "showUsers"; } }

    showUsers.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!--request作用域取数据 --> <h2 th:text="${#httpServletRequest.getAttribute('requestMsg')}"></h2> <!-- session作用域取数据 --> <h2 th:text="${session.sessionMsg}"></h2> <!-- applcation作用域取数据 --> <h2 th:text="${application.applicationMsg}"></h2> </body> </html>

    thymeleaf对url的处理

    基本语法

    与普通语法不同,url需要用@{}包括起来

    @{}

    绝对路径

    <a th:href="@{http://www.baidu.com}">thymeleaf绝对路径写法</a>

    相对路径(相对于当前项目)

    <a th:href="@{/showUsers}">相对路径(相对当前项目而言)</a>

    相对路径(相对于服务器根路径)

    // projectName 当前项目名 // pageName 页面名 <a th:href="@{~/projectName/pageName}">相对路径(相对服务器根路径)</a>

    传递参数

    <a th:href="@{/showUsers(id=1,name=saddad)}">相对路径,传递参数(相对当前项目而言)</a>

    restful风格传递参数

    <a th:href="@{/showUsers/{pagename}(pagename=weq)}">相对路径,传递参数(相对当前项目而言)</a>
    Processed: 0.018, SQL: 8