SSM框架——thymeleaf学习总结

  • A+
所属分类:Web前端
摘要

https://www.bilibili.com/video/BV1qy4y117qi  首先创建springboot项目,相关博客有详细的创建教程,下方仅本人推荐示例(视频中也有相关项目创建教程):


本人关于thymeleaf的学习源自:

https://www.bilibili.com/video/BV1qy4y117qi

1、thymeleaf的项目搭建

  首先创建springboot项目,相关博客有详细的创建教程,下方仅本人推荐示例(视频中也有相关项目创建教程):

  IDEA创建项目教程     :https://www.jianshu.com/p/40422d484475

  eclipse创建项目教程     :https://blog.csdn.net/qq_35170365/article/details/80688484

  项目搭建完成后,配置application.properties,配置如下,端口号只要不和本机当前口号冲突即可,本人用的是8001

server.port=8001 spring.thymeleaf.cache=false

    创建thymeleaf网页模板,相关代码如下:

<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head>   <meta charset="UTF-8">   <title>Title</title> </head> <body>  </body> </html>

2、第一个程序

项目结构如图:

SSM框架——thymeleaf学习总结

 

  第一个程序(基本使用),实现前端标题的数据渲染,先上代码:

  后台 创建包controller以及类IndexController:

package com.thym.thymdemo.controller;  import com.thym.thymdemo.view.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping;  import java.util.ArrayList; import java.util.Arrays; import java.util.Date;  /**  * @author June  * @date 2021/12/25 15:35  */ @Controller public class IndexController {     @GetMapping("/index")     public String index(Model model){         model.addAttribute("title","传递的title");         model.addAttribute("keywords","传递的keywords");         model.addAttribute("description","传递的description");         return "index";     } }

  前端创建html网页,index.html,代码如下:

<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head>     <meta charset="UTF-8">     <title th:text="|localhost-${title}|">默认的Title</title>     <meta th:content="${description}" name="description" content="默认的description">     <meta th:content="${keywords}" name="keywords" content="默认的keywords"> </head> <body>  </body> </html>

  结果实现如下:

SSM框架——thymeleaf学习总结

 

 

3、常用方法

  实现后台数据的前端实现,有关对象与类的数据传递:

  后台  创建实体类 User.java,代码如下:

package com.thym.thymdemo.view;  import lombok.Data;  import java.util.Date; import java.util.List;  /**  * @author June  * @date 2021/12/25 15:46  */ @Data public class User {
  //其中lombok插件可实现创建get、set方法,所以此处并未创建get、set方法
private String username; private Integer age; private Integer sex; private Boolean isVip; private Date createTime; private List<String> tags; }

   IndexController.java 有关代码修改如下;

package com.thym.thymdemo.controller;  import com.thym.thymdemo.view.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping;  import java.util.ArrayList; import java.util.Arrays; import java.util.Date;  /**  * @author June  * @date 2021/12/25 15:35  */ @Controller public class IndexController {     @GetMapping("/index")     public String index(Model model){         model.addAttribute("title","传递的title");         model.addAttribute("keywords","传递的keywords");         model.addAttribute("description","传递的description");         return "index";     }     @GetMapping("/basic")     public String basic(Model model){//此处即为javaweb项目中的前后端传值行为         User user = new User();         user.setUsername("lookroot");         user.setAge(32);         user.setSex(1);         user.setIsVip(false);         user.setCreateTime(new Date());         user.setTags(Arrays.asList("PHP","Java"));         model.addAttribute("user",user);         return "basic";     } }

  前端创建html页面,basic.html 代码如下;

<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>     <!--<h2 th:text="${user.username}"></h2>     <h2 th:text="${user.age}"></h2>     <h2 th:text="${user.sex}"></h2>     <h2 th:text="${user.isVip}"></h2>     <h2 th:if="${user.isVip}">会员</h2>     <h2 th:text="${user.createTime}"></h2>     <h2 th:text="${user.tags}"></h2>--> <div th:object="${user}">     <h2 th:text="*{username}"></h2>     <h2 th:text="*{age}"></h2>     <h2 th:text="*{sex}"></h2>     <h2 th:text="*{isVip}"></h2>     <!--这里运用if标签判断该属性是否为真,如果为真则显示标题内容,如果为否则不显示相关内容-->     <h2 th:if="*{isVip}">会员</h2>     <h2 th:text="*{createTime}"></h2>     <h2 th:text="*{tags}"></h2> </div>     <!--规范话日期格式-->     <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p> <ul>     <!--以列表形式显示List集合的各项-->     <li th:each="tag:${user.tags}" th:text="${tag}"></li> </ul>     <!--选择结构实现数据的前端显示--> <div th:switch="${user.sex}">     <p th:case="1"></p>     <p th:case="2"></p>     <p th:case="*">默认</p> </div>     <!--replace com1-->     <div th:replace="~{component::com1}"></div>     <!--insert com1-->     <div th:insert="~{component::com1}"></div>     <!--id com2-->     <div th:insert="~{component::#com2}"></div>     <div th:insert="~{component::com3('传递的数据')}"></div>     <div th:insert="~{component::com4(~{::#message})}">         <p id="message">替换的模块</p>     </div> </body> </html>

 

  实现结果如下;

SSM框架——thymeleaf学习总结

 

 

 4、thymeleaf中JavaScript、css的应用

  thymeleaf+css,首先在srcmainresourcesstatic目录下,创建css文件,写入如下代码:

.app{     height: 300px;     width: 300px;     background-color: blue; }

  前端basic页面中代码添加如下(由于所引用的css文件在根目录下,所以可以直接引用):

<div class="app"></div>

  显示效果如下:

SSM框架——thymeleaf学习总结

   在html页面内部直接写入css有关代码

  前端添加代码如下: 

<ul>     <li th:each="tag,stat:${user.tags}" th:text="${tag}"         th:classappend="${stat.last}?active"></li> </ul>

  结果显示如下:

SSM框架——thymeleaf学习总结

 

 5、thymeleaf中组件的使用

  创建component.html页面,写入如下代码:

<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>     <footer th:fragment="com1">         <!--/*@thymesVar id="user" type="com.thym.thymdemo.view.User"*/-->         <h2 th:text="${user.username}"></h2>         com1     </footer>     <div id="com2">         com2     </div>     <div th:fragment="com3(message)">         <p th:text="${message}"></p>     </div>     <div th:fragment="com4(message)">         <p th:replace="${message}"></p>     </div> </body> </html>

  前端页面basic页面代码修改如下;

<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head>     <meta charset="UTF-8">     <title>Title</title>     <link rel="stylesheet" th:href="@{app.css}">     <style>         .active{             color: red;         }     </style> </head> <body>     <!--规范话日期格式-->     <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p> <ul>     <!--以列表形式显示List集合的各项-->     <li th:each="tag:${user.tags}" th:text="${tag}"></li> </ul> <ul>     <li th:each="tag,stat:${user.tags}" th:text="${tag}"         th:classappend="${stat.last}?active"></li> </ul>     <!--replace com1-->     <div th:replace="~{component::com1}"></div>     <!--insert com1-->     <div th:insert="~{component::com1}"></div>     <!--id com2-->     <div th:insert="~{component::#com2}"></div>     <div th:insert="~{component::com3('传递的数据')}"></div>     <div th:insert="~{component::com4(~{::#message})}">         <p id="message">替换的模块</p>     </div> </body> <script th:inline="javascript">     const user = /*[[${user}]]*/{}     console.log(user) </script> </html>

  实现结果如下:

SSM框架——thymeleaf学习总结