SSM框架—Thymeleaf模板引擎 Spring5整合Thymeleaf（注解配置）

逃离我推掉我的手 2021-10-01 11:22 442阅读 0赞

# Maven-SSM整合Thymeleaf模板引擎 Spring5整合（注解配置） #

### 1. 依赖 ###

在配置好SSM框架后，在***pom.xml***中添加如下依赖

<dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring5</artifactId>
        <version>3.0.9.RELEASE</version>
    </dependency>

### 2. 配置文件 ###

在***webConfig.java中***中加入如下配置，如果配置了jsp或者freemarker请注释掉jsp的viewResolver或freemarker的配置

@Configuration
    @EnableWebMvc
    @ComponentScan({"com.example.controller", "com.example.api"})
    public class WebConfig implements WebMvcConfigurer {
    
        /**
         * 模板解析器
         *
         * @return
         */
        @Bean
        public SpringResourceTemplateResolver templateResolver() {
            SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
            templateResolver.setPrefix(TEMPLATE_PREFIX);
            templateResolver.setSuffix(TEMPLATE_SUFFIX);
            templateResolver.setCacheable(TEMPLATE_CACHEABLE);
            templateResolver.setCharacterEncoding(CHARACTER_ENCODING);
            templateResolver.setTemplateMode(TEMPLATE_MODE);
            templateResolver.setOrder(TEMPLATE_ORDER);
            return templateResolver;
        }
    
        /**
         * 模板引擎
         *
         * @return
         */
        @Bean
        public SpringTemplateEngine springTemplateEngine(SpringResourceTemplateResolver templateResolver) {
            SpringTemplateEngine templateEngine = new SpringTemplateEngine();
            templateEngine.setTemplateResolver(templateResolver);
            return templateEngine;
        }
    
        /**
         * 视图解析器
         *
         * @return
         */
        @Bean
        public ThymeleafViewResolver viewResolver(SpringTemplateEngine springTemplateEngine) {
            ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
            viewResolver.setTemplateEngine(springTemplateEngine);
            viewResolver.setCharacterEncoding(CHARACTER_ENCODING);
            return viewResolver;
        }
    //.......其他配置请自行配置
    }

由于我使用了CONSTANTS类里面的static变量，所以附上Constants类相关的参数

public final static String CHARACTER_ENCODING = "UTF-8";
    
        /**
         * thymeleaf模板引擎参数
         */
        public final static String TEMPLATE_PREFIX = "/WEB-INF/templates/";
        public final static String TEMPLATE_SUFFIX = ".html";
        public final static Boolean TEMPLATE_CACHEABLE = false;
        public final static String TEMPLATE_MODE = "HTML5";
        public final static Integer TEMPLATE_ORDER = 1;

此配置需要注意以下几点：

*  templateResolver的prefix与suffix对应你的视图层的文件位置
 *  templateResolver的characterEncoding和viewResolver的都要设置成UTF-8中文才不会乱码。
 *  templateResolver的cacheable一定要在开发的时候设置成false不然无法看到实时的页面数据

### 3. 测试 ###

*  controller：
    
    在ModelMap里面随便设置一点值
    
        @RequestMapping("/test")
        public String test(ModelMap map) {
            map.put("thText", "设置文本内容");
            map.put("thUText", "设置文本内容");
            map.put("thValue", "设置当前元素的value值");
            map.put("thEach", Arrays.asList("列表", "遍历列表"));
            map.put("thIf", "msg is not null");
            map.put("thObject", new                           UserEntity("sadfa","asfasfd","asfsaf","asdfasf","saf","asfd","sadf",1));
              
            return "test";
        }
 *  test.html
    
        <!DOCTYPE html>
        <html lang="cn" xmlns:th="http://www.thymeleaf.org">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        <h1>TEST</h1>
        <h2>Thymeleaf</h2>
        
        <p th:text="${thText}" />
        <p th:utext="${thUText}" />
        
        
        <input type="text" th:value="${thValue}" />
        
        
        
        <div th:each="message : ${thEach}"> 
            <p th:text="${message}" />
        </div>
        <div> 
            <p th:text="${message}" th:each="message : ${thEach}" />
        </div>
        
        
        <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
        
        
        <div th:insert="~{grammar/common::thCommon}"></div>
        
        
        <div th:object="${thObject}">
            <p>ID: <span th:text="*{id}" /></p>
            <p>TH: <span th:text="*{username}" /></p>
            <p>DE: <span th:text="*{password}" /></p>
        </div>
        </body>
        </html>

几点注意：

*  在html首标签里面加上xmlns
    
        <html lang="cn" xmlns:th="http://www.thymeleaf.org">
 *  同样把head的meta设置一个charset=“UTF-8”

至此，你就可以去配置tomcat运行项目了。