写点什么

光知道 SpringBoot,不用 thymeleaf 就太不对了

用户头像
小Q
关注
发布于: 2020 年 12 月 19 日

之前的时候,我为了演示Linux配置提交项目执行环境,简单的整理了一下springboot得相关内容,但是在实际的开发过程中,SpringBoot得使用可不仅仅就是这一点点遍历而已,在SpringBoot中推荐使用thymeleaf模板引擎,简单点评价这个模板就是语法简单,功能更强大



所以今天我们来看一下这个强大得模板引擎到底有多强大



文章首发公众号:Java架构师联盟,每日更新技术好文



添加thymeleaf模板



这里有两种创建方式



1.新建springBoot项目



只需要在创建springboot项目的时候,添加thymeleaf即可





2.已经创建得项目中加入thymeleaf模板引擎要想引入thymeleaf,只需要在pom.xml文件中加入如下依赖就可以了,但是有一个注意点,我在代码注释中解释了





    <!-- 提交到tomcat执行,需要添加下方依赖-->



    <!--如果你要用springboot本身的tomcat得话,一定要注意记得注释掉,不然无法启动-->



      <dependency>



          <groupId>org.springframework.boot</groupId>



          <artifactId>spring-boot-starter-tomcat</artifactId>



          <scope>provided</scope>



      </dependency>





<!-- 添加Thymeleaf模板,只需要添加这个依赖即可-->



      <dependency>



          <groupId>org.springframework.boot</groupId>



          <artifactId>spring-boot-starter-thymeleaf</artifactId>



      </dependency>



 

项目编写



在controller中定义跳转的页面



代码架构:



之前的时候我说过,入口类会自动寻找子包或者平行类,所以初学者要注意以下这个点哦



我这是沿用之前的时候写的代码,直接创建了一个thymeleaf展示今天的内容





package com.example.demo.thymeleaf;





import org.springframework.stereotype.Controller;



import org.springframework.web.bind.annotation.RequestMapping;



import org.springframework.web.bind.annotation.ResponseBody;



import org.springframework.web.bind.annotation.RestController;





import java.util.Map;





/**



* @author :biws



* @date :Created in 2020/12/18 19:43



* @description:在controller中定义跳转页面



*/





@Controller



public class HelloController {





  @RequestMapping("hello")



  @ResponseBody



  public String hello() {



      return "这是第二种搭建springboot方式";



  }





  @RequestMapping("testThymeleaf")



  public String testThymeleaf(Map map) {





      map.put("info", "这是从controller传到前端界面得数据");



      return "index";



  }





}

这是第一个优点:会自动去templates文件夹下去找index.html





4.运行,然后访问项目



输入http://localhost:8080/testThymeleaf即可访问index.html





奥对,忘记把index得代码添加上来了



<!DOCTYPE html>



<html lang="en" xmlns:th="http://www.thymeleaf.org">



<head>



  <meta charset="UTF-8">



  <title>测试thymeleaf模板</title>



</head>



<body>



<p>欢迎来到测试thymeleaf界面</p>





<!--/*@thymesVar id="info" type=""*/-->



<p th:text="${info}"></p>



</body>



</html>

大家可能已经发现了



我在这个代码中模拟前端返回数据,直接存储到map中,因为在写一个界面有点费劲,毕竟像我这种懒癌患者,哈哈哈哈





而在index中,获取数据之后,通过info这个id进行获取





最后展示的结果就是这样





而区别于传统得数据获取方式,thymeleaf有其自己得标签语法,那我们来看一下都有哪些标签语法呢?



thymeleaf标签语法



常用标签介绍









下面我整理几种常用得知识点



几种常用的使用方法



1、赋值、字符串拼接



<p th:text="${collect.description}">description</p>



<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

字符串拼接还有另外一种简洁的写法



<span th:text="|Welcome to our application, ${user.name}!|">

2、条件判断 If/Unless



Thymeleaf中使用th:if和th:unless属性进行条件判断,下面的例子中,<a>标签只有在th:if中条件成立时才显示:



<a th:if="${myself=='yes'}" > </i> </a>



<a th:unless=${session.user != null} th:href="@{/login}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Login</a>

th:unless与th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。



也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容



3、for 循环



<tr th:each="collect,iterStat : ${collects}">



<th scope="row" th:text="${collect.id}">1</th>



<td >



  <img th:src="${collect.webLogo}"/>



</td>



<td th:text="${collect.url}">Mark</td>



<td th:text="${collect.title}">Otto</td>



<td th:text="${collect.description}">@mdo</td>



<td th:text="${terStat.index}">index</td>



</tr>

iterStat称作状态变量,属性有:



index:当前迭代对象的index(从0开始计算)

count: 当前迭代对象的index(从1开始计算)

size:被迭代对象的大小

current:当前迭代变量

even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)

first:布尔值,当前循环是否是第一个

last:布尔值,当前循环是否是最后一个



4、URL



URL在Web应用模板中占据着十分重要的地位,需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。如果需要Thymeleaf对URL进行渲染,那么务必使用th:href,th:src等属性,下面是一个例子



<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->



<a th:href="@{/standard/{type}(type=${type})}" rel="external nofollow" >view</a>





<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->



<a href="details.html" rel="external nofollow" th:href="@{/order/{orderId}/details(orderId=${o.id})}" rel="external nofollow" >view</a>

5、使用thymeleaf布局



使用thymeleaf布局非常的方便



<!--定义代码片段-->



<footer th:fragment="copy">



© 2016



</footer>



<!--在页面任何地方引入



<!--th:include 和 th:replace区别,include只是加载,replace是替换-->



<body>



<div th:include="footer :: copy"></div>



<div th:replace="footer :: copy"></div>



</body>



<!--返回的HTML如下-->



<body>



<div> © 2016 </div>



<footer>© 2016 </footer>



</body>

下面是一个常用的后台页面布局,将整个页面分为头部,尾部、菜单栏、隐藏栏,点击菜单只改变content区域的页面



<body class="layout-fixed">



<div th:fragment="navbar" class="wrapper" role="navigation">



<div th:replace="fragments/header :: header">Header</div>



<div th:replace="fragments/left :: left">left</div>



<div th:replace="fragments/sidebar :: sidebar">sidebar</div>



<div layout:fragment="content" id="content" ></div>



<div th:replace="fragments/footer :: footer">footer</div>



</div>



</body>

任何页面想使用这样的布局值只需要替换中间的 content模块即可



<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">



<body>



<section layout:fragment="content">



...

也可以在引用模版的时候传参



<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>



<!--layout 是文件地址,如果有文件夹可以这样写 fileName/layout:htmlhead



<!--htmlhead 是指定义的代码片段 -->



th:fragment="copy"]

好啦,一些基础得应用这里基本全涵盖了,一定要去好好练习一下啊



发布于: 2020 年 12 月 19 日阅读数: 18
用户头像

小Q

关注

还未添加个人签名 2020.06.30 加入

小Q 公众号:Java架构师联盟 作者多年从事一线互联网Java开发的学习历程技术汇总,旨在为大家提供一个清晰详细的学习教程,侧重点更倾向编写Java核心内容。如果能为您提供帮助,请给予支持(关注、点赞、分享)!

评论

发布
暂无评论
光知道SpringBoot,不用thymeleaf就太不对了