经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » C++ » 查看文章
三、SpringBoot整合Thymeleaf视图
来源:cnblogs  作者:码之泪殇  时间:2019/10/9 8:57:05  对本文有异议

3.1 Thymeleaf视图介绍

先看下官网的介绍:
==Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。
Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而可以在开发团队中加强协作。
Thymeleaf拥有适用于Spring Framework的模块,与您喜欢的工具的大量集成以及插入您自己的功能的能力,对于现代HTML5 JVM Web开发而言,Thymeleaf是理想的选择。==
在SpringBoot中,SpringBoot对Thymeleaf提供了良好的支持,同时也提供了自动化配置,因此在SpringBoot中使用Thymeleaf非常快捷方便。

3.2 创建SpringBoot项目

创建方法建议使用IDEA快速创建SpringBoot项目,并选择web、Thymeleaf依赖:
在这里插入图片描述
创建完成后,IDEA自动在pom中加入了web和Thymeleaf依赖管理,pom.xml:

  1. <dependencies>
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. </dependency>
  6. <dependency>
  7. <groupId>org.springframework.boot</groupId>
  8. <artifactId>spring-boot-starter-web</artifactId>
  9. </dependency>
  10. <dependency>
  11. <groupId>org.springframework.boot</groupId>
  12. <artifactId>spring-boot-starter-test</artifactId>
  13. <scope>test</scope>
  14. </dependency>
  15. </dependencies>

项目架构:
在这里插入图片描述

3.2 配置Thymeleaf

SpringBoot为Thymeleaf提供了自动化配置类ThymeleafAutoConfiguration,源码:

  1. @Configuration
  2. @EnableConfigurationProperties({ThymeleafProperties.class})
  3. @ConditionalOnClass({TemplateMode.class, SpringTemplateEngine.class})
  4. @AutoConfigureAfter({WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class})
  5. public class ThymeleafAutoConfiguration {...}

可以看出相关的配置信息是从ThymeleafProperties类中获得的,进一步查看ThymeleafProperties的源码:

  1. @ConfigurationProperties(
  2. prefix = "spring.thymeleaf"
  3. )
  4. public class ThymeleafProperties {
  5. private static final Charset DEFAULT_ENCODING;
  6. public static final String DEFAULT_PREFIX = "classpath:/templates/";
  7. public static final String DEFAULT_SUFFIX = ".html";
  8. private boolean checkTemplate = true;
  9. private boolean checkTemplateLocation = true;
  10. private String prefix = "classpath:/templates/";
  11. private String suffix = ".html";
  12. private String mode = "HTML";
  13. //省略
  14. }

从该配置可以看出默认的Thymeleaf存放位置是classpath:/templates/,即resources/templates/下,刚刚我们使用IDEA创建项目时,已经自动生成了该目录。
我们如果需要对Thymeleaf的配置进行更改,可直接在application.properties中配置:

  1. #是否开启缓存,默认为true
  2. spring.thymeleaf.cache=false
  3. #检查模板文件是否存在
  4. spring.thymeleaf.check-template=true
  5. #检查模本目录是否存在
  6. spring.thymeleaf.check-template-location=true
  7. #模板文件编码
  8. spring.thymeleaf.encoding=UTF-8
  9. #模板位置
  10. spring.thymeleaf.prefix=classpath:/templates/
  11. #模板文件后缀名
  12. spring.thymeleaf.suffix=.html
  13. #Content-type
  14. spring.thymeleaf.servlet.content-type=text/html

3.3 编写Demo

1、新建User和UserController:
User.java:

  1. package com.gongsir.springboot02.pojo;
  2. public class User {
  3. private String name;
  4. private String major;
  5. private String grade;
  6. public String getName() {
  7. return name;
  8. }
  9. public void setName(String name) {
  10. this.name = name;
  11. }
  12. public String getMajor() {
  13. return major;
  14. }
  15. public void setMajor(String major) {
  16. this.major = major;
  17. }
  18. public String getGrade() {
  19. return grade;
  20. }
  21. public void setGrade(String grade) {
  22. this.grade = grade;
  23. }
  24. }

UserController.java:

  1. @Controller
  2. public class UserController {
  3. @GetMapping(path = "/users")
  4. public ModelAndView getUsers(){
  5. List<User> list = new ArrayList<>();
  6. User u1 = new User();
  7. u1.setName("龚涛");
  8. u1.setMajor("计算机");
  9. u1.setGrade("2017");
  10. list.add(u1);
  11. User u2 = new User();
  12. u2.setName("李诗雅");
  13. u2.setMajor("网络工程");
  14. u2.setGrade("2017");
  15. list.add(u2);
  16. //视图模板文件的名字,需在template目录下创建同名模板文件
  17. ModelAndView mv = new ModelAndView("users");
  18. mv.addObject("users",list);
  19. return mv;
  20. }
  21. }

2、在模板目录下新建users.html模板文件,显示数据:

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用户列表</title>
  6. </head>
  7. <body>
  8. <table border="1px sold black">
  9. <tr>
  10. <td>姓名</td>
  11. <td>专业</td>
  12. <td>年级</td>
  13. </tr>
  14. <tr th:each="user:${users}">
  15. <td th:text="${user.name}"></td>
  16. <td th:text="${user.major}"></td>
  17. <td th:text="${user.grade}"></td>
  18. </tr>
  19. </table>
  20. </body>
  21. </html>

3、启动项目,访问http://localhost:8080/users,如图:
在这里插入图片描述

3.4 小结

本文主要介绍SpringBoot整合Thymeleaf视图技术,并给了一个简单demo演示,想学习更多Thymeleaf知识?看官网吧:https://www.thymeleaf.org/.
不过当前流行前后端分离技术,大多数开发不需要在后端整合视图技术,后端只需要提供接口即可,待续.....

原文链接:http://www.cnblogs.com/gongsir/p/11637358.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号