经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
SSM框架——thymeleaf学习总结
来源:cnblogs  作者:往心。  时间:2021/12/31 8:44:16  对本文有异议

本人关于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

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

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

  1. <!DOCTYPE html>
  2. <html lang="ch" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

2、第一个程序

项目结构如图:

 

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

  后台 创建包controller以及类IndexController:

  1. package com.thym.thymdemo.controller;
  2. import com.thym.thymdemo.view.User;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.ui.Model;
  5. import org.springframework.web.bind.annotation.GetMapping;
  6. import java.util.ArrayList;
  7. import java.util.Arrays;
  8. import java.util.Date;
  9. /**
  10. * @author June
  11. * @date 2021/12/25 15:35
  12. */
  13. @Controller
  14. public class IndexController {
  15. @GetMapping("/index")
  16. public String index(Model model){
  17. model.addAttribute("title","传递的title");
  18. model.addAttribute("keywords","传递的keywords");
  19. model.addAttribute("description","传递的description");
  20. return "index";
  21. }
  22. }

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

  1. <!DOCTYPE html>
  2. <html lang="ch" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title th:text="|localhost-${title}|">默认的Title</title>
  6. <meta th:content="${description}" name="description" content="默认的description">
  7. <meta th:content="${keywords}" name="keywords" content="默认的keywords">
  8. </head>
  9. <body>
  10.  
  11. </body>
  12. </html>

  结果实现如下:

 

 

3、常用方法

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

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

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

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

  1. package com.thym.thymdemo.controller;
  2. import com.thym.thymdemo.view.User;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.ui.Model;
  5. import org.springframework.web.bind.annotation.GetMapping;
  6. import java.util.ArrayList;
  7. import java.util.Arrays;
  8. import java.util.Date;
  9. /**
  10. * @author June
  11. * @date 2021/12/25 15:35
  12. */
  13. @Controller
  14. public class IndexController {
  15. @GetMapping("/index")
  16. public String index(Model model){
  17. model.addAttribute("title","传递的title");
  18. model.addAttribute("keywords","传递的keywords");
  19. model.addAttribute("description","传递的description");
  20. return "index";
  21. }
  22. @GetMapping("/basic")
  23. public String basic(Model model){//此处即为javaweb项目中的前后端传值行为
  24. User user = new User();
  25. user.setUsername("lookroot");
  26. user.setAge(32);
  27. user.setSex(1);
  28. user.setIsVip(false);
  29. user.setCreateTime(new Date());
  30. user.setTags(Arrays.asList("PHP","Java"));
  31. model.addAttribute("user",user);
  32. return "basic";
  33. }
  34. }

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

  1. <!DOCTYPE html>
  2. <html lang="ch" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <!--<h2 th:text="${user.username}"></h2>
  9. <h2 th:text="${user.age}"></h2>
  10. <h2 th:text="${user.sex}"></h2>
  11. <h2 th:text="${user.isVip}"></h2>
  12. <h2 th:if="${user.isVip}">会员</h2>
  13. <h2 th:text="${user.createTime}"></h2>
  14. <h2 th:text="${user.tags}"></h2>-->
  15. <div th:object="${user}">
  16. <h2 th:text="*{username}"></h2>
  17. <h2 th:text="*{age}"></h2>
  18. <h2 th:text="*{sex}"></h2>
  19. <h2 th:text="*{isVip}"></h2>
  20. <!--这里运用if标签判断该属性是否为真,如果为真则显示标题内容,如果为否则不显示相关内容-->
  21. <h2 th:if="*{isVip}">会员</h2>
  22. <h2 th:text="*{createTime}"></h2>
  23. <h2 th:text="*{tags}"></h2>
  24. </div>
  25. <!--规范话日期格式-->
  26. <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>
  27. <ul>
  28. <!--以列表形式显示List集合的各项-->
  29. <li th:each="tag:${user.tags}" th:text="${tag}"></li>
  30. </ul>
  31. <!--选择结构实现数据的前端显示-->
  32. <div th:switch="${user.sex}">
  33. <p th:case="1"></p>
  34. <p th:case="2"></p>
  35. <p th:case="*">默认</p>
  36. </div>
  37. <!--replace com1-->
  38. <div th:replace="~{component::com1}"></div>
  39. <!--insert com1-->
  40. <div th:insert="~{component::com1}"></div>
  41. <!--id com2-->
  42. <div th:insert="~{component::#com2}"></div>
  43. <div th:insert="~{component::com3('传递的数据')}"></div>
  44. <div th:insert="~{component::com4(~{::#message})}">
  45. <p id="message">替换的模块</p>
  46. </div>
  47. </body>
  48. </html>

 

  实现结果如下;

 

 

 4、thymeleaf中JavaScript、css的应用

  thymeleaf+css,首先在src\main\resources\static目录下,创建css文件,写入如下代码:

  1. .app{
  2. height: 300px;
  3. width: 300px;
  4. background-color: blue;
  5. }

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

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

  显示效果如下:

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

  前端添加代码如下: 

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

  结果显示如下:

 

 5、thymeleaf中组件的使用

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

  1. <!DOCTYPE html>
  2. <html lang="ch" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <footer th:fragment="com1">
  9. <!--/*@thymesVar id="user" type="com.thym.thymdemo.view.User"*/-->
  10. <h2 th:text="${user.username}"></h2>
  11. com1
  12. </footer>
  13. <div id="com2">
  14. com2
  15. </div>
  16. <div th:fragment="com3(message)">
  17. <p th:text="${message}"></p>
  18. </div>
  19. <div th:fragment="com4(message)">
  20. <p th:replace="${message}"></p>
  21. </div>
  22. </body>
  23. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="ch" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <link rel="stylesheet" th:href="@{app.css}">
  7. <style>
  8. .active{
  9. color: red;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <!--规范话日期格式-->
  15. <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>
  16. <ul>
  17. <!--以列表形式显示List集合的各项-->
  18. <li th:each="tag:${user.tags}" th:text="${tag}"></li>
  19. </ul>
  20. <ul>
  21. <li th:each="tag,stat:${user.tags}" th:text="${tag}"
  22. th:classappend="${stat.last}?active"></li>
  23. </ul>
  24. <!--replace com1-->
  25. <div th:replace="~{component::com1}"></div>
  26. <!--insert com1-->
  27. <div th:insert="~{component::com1}"></div>
  28. <!--id com2-->
  29. <div th:insert="~{component::#com2}"></div>
  30. <div th:insert="~{component::com3('传递的数据')}"></div>
  31. <div th:insert="~{component::com4(~{::#message})}">
  32. <p id="message">替换的模块</p>
  33. </div>
  34. </body>
  35. <script th:inline="javascript">
  36. const user = /*[[${user}]]*/{}
  37. console.log(user)
  38. </script>
  39. </html>

  实现结果如下:

 

 

原文链接:http://www.cnblogs.com/lx06/p/15733271.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号