• Thymeleaf使用环境搭建和简单使用


    Thymeleaf与JSP比较

    与JSP相比,Thymeleaf模板是原生的,不依赖标签库,可以在接收原始的HTML的地方进行编辑和渲染。不与servlet规范耦合。JSP在内嵌的servlet容器上运行有一些问题(内嵌Tomcat,Jetty不支持jar形式运行JSP,Undertow不支持JSP),也就是说,springboot项目如果想使用JSP的话,必须放弃其内嵌的Tomcat。Spring Boot 提供大量的模板引擎(FreeMarker,Groovy,Thymeleaf,Velocity和Mustache),Spring Boot推荐使用Thymeleaf,Thymeleaf提供完美的Spring MVC支持。

    非Spring Boot项目使用Thymeleaf环境

    需要配置三个启用Thymeleaf与Spring集成的Bean

    • ThymeleafViewResolver: 将逻辑视图名称解析为Thymeleaf模板视图
    • SpringTemplateEngine: 处理模板并渲染结果
    • TemplateResolver:加载Thymeleaf模板

    使用java配置:

        @Bean
        public ViewResolver viewResolver(SpringTemplateEngine templateEngine){
            ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
            viewResolver.setTemplateEngine(templateEngine);
            return viewResolver;
        }
        
        @Bean
        public TemplateEngine templateEngine(TemplateResolver templateResolver){
            SpringTemplateEngine templateEngine = new SpringTemplateEngine();
            templateEngine.setTemplateResolver(templateResolver);
            return templateEngine;
        }
        
        @Bean
        public TemplateResolver templateResolver(){
            TemplateResolver templateResolver = new ServletContextTemplateResolver();
            templateResolver.setPrefix("/WEB-INF/templates/");
            templateResolver.setSuffix(".html");
            templateResolver.setTemplateMode("HTML5");
            return templateResolver;
        }
    

    使用xml配置:

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
           xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
    
        
        <bean id="viewResolver" 
              class="org.thymeleaf.spring4.view.ThymeleafViewResolver"
              p:templateEngine-ref="templateEngine"/>
        
        <bean id="templateEngine"
              class="org.thymeleaf.spring4.SpringTemplateEngine"
              p:templateResolver-ref="templateResolver"/>
        
        
        <bean id="templateResolver"
              class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"
              p:prefix="/WEB-INF/templates/"
              p:suffix=".html"
              p:templateMode="HTML5"/>
    </beans>
    

    Spring Boot使用Thymeleaf

    • 新建Spring Boot项目
    • 在创建时添加thymeleaf依赖,或者是创建完毕在pom.xml文件中添加thymeleaf依赖

    pom.xml

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

    在application.properties中配置

    //关闭缓存
    spring.thymeleaf.cache=false
    
    

    Thymeleaf的简单使用

    新建html页面

    传统项目放在配置的位置

    springboot项目一般放在static/templates下

    首先添加thymeleaf的命名空间

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

    测试

    在static里面创建css/style.css,用来测试读取静态资源

    .title{
        color: red;
        font-size: larger;
    }
    

    创建javaBean

    public class Student {
    
        private String name;
    
        private Double score;
    
        public Student(String name, Double score) {
            this.name = name;
            this.score = score;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Double getScore() {
            return score;
        }
    
        public void setScore(Double score) {
            this.score = score;
        }
    }
    

    准备测试数据

    @Controller
    @SpringBootApplication
    public class ThymeleafdemoApplication {
    
        @RequestMapping("/")
        public String index(Model model){
    
            Student stu = new Student("stu_1", 34.5d);
    
            List<Student> studentList1 = new ArrayList<>();
            Student s1 = new Student("list-1", 23.5d);
            Student s2 = new Student("list-2", 22.5d);
            Student s3 = new Student("list-3", 21.5d);
            studentList1.add(s1);
            studentList1.add(s2);
            studentList1.add(s3);
    
            //空的list
            List<Student> studentList2 = new ArrayList<>();
    
            model.addAttribute("stu", stu);
            model.addAttribute("studentList1", studentList1);
            model.addAttribute("studentList2", studentList2);
    
    
            return "index";
        }
    
    
        public static void main(String[] args) {
            SpringApplication.run(ThymeleafdemoApplication.class, args);
        }
    
    }
    

    在templates下创建index.html

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>index</title>
    
        <!--添加css-->
        <link rel="stylesheet" type="text/css" th:href="@{css/style.css}"/>
    </head>
    <body>
    
    <!--测试css资源引用 red:成功找到css资源-->
    <div class="title">测试1</div>
    <br/>
    
    <h3>下面是获取stu对象的值:</h3>
    <div>
        stu姓名:
        <span th:text="${stu.name}">获取不到</span>
        stu成绩:
        <span th:text="${stu.score}">获取不到</span>
    </div>
    
    <br/>
    
    <div>
        <h3>下面是获取list的值</h3>
        <div th:if="${ #lists.isEmpty(studentList2)}">
            这是空列表
        </div>
    
        <div th:if="${ not #lists.isEmpty(studentList1)}">
            <h4>列表内容如下:</h4>
            <div th:each="stu:${studentList1}">
                学生姓名:
                <span th:text="${stu.name}">没有数据</span>
                成绩:
                <span th:text="${stu.score}">没有数据</span>
            </div>
        </div>
    </div>
    
    </body>
    </html>
    

    测试结果:
    1.png

    thymeleaf模板编写时需要严格的按照html规范!!!
    

    补充

    避免thymeleaf的html代码检查过严

    在pom.xml文件添加依赖:

    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.21</version>
    </dependency>
    

    在application.properties配置thymeleaf的mode

    spring.thymeleaf.mode=LEGACYHTML5
    

    内容参考《Spring实战》、《Java EE开发颠覆者 Spring Boot实战》

  • 相关阅读:
    了解大数据的特点、来源与数据呈现方式
    作业五 | 结对项目-四则运算 “软件”之升级版
    作业四 | 个人项目-小学四则运算 “软件”之初版
    作业三 | 阅读《构建之法》1-5章
    作业二 | Git的安装与使用
    随笔 | 对计算机专业的自我思考
    【大数据作业二】字符串操作,英文词频统计预处理
    【大数据作业一】了解大数据的特点、来源与数据呈现方式
    结对项目——四则运算 “软件”之升级版
    作业四 个人项目-小学四则运算 “软件”
  • 原文地址:https://www.cnblogs.com/erkye/p/12337725.html
Copyright © 2020-2023  润新知