Spring Boot整合Thymeleaf模板引擎

﹏ヽ暗。殇╰゛Y 2023-06-26 12:10 19阅读 0赞

## Spring Boot Web开发（一） ##

一、静态资源映射  
（1）所有/webjars/\*\*，都去classpath:/META\_INF/resources/webjars/找资源  
webjars：以Jar包的方式引入静态资源[https://www.webjars.org/][https_www.webjars.org]

<dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
                <version>3.1.1</version>
            </dependency>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70]  
启动SpringApplication主程序，访问[localhost:8080/webjars/jquery/3.3.1/jquery.js][localhost_8080_webjars_jquery_3.3.1_jquery.js]就能够访问到刚刚导入的静态资源了！  
（2）/\*\*访问当前项目的任何静态资源，静态资源可以放在以下的目录下：

classpath:/META_INF/resources/
    classpath:/resources/
    classpath:/static/
    classpath:/public/
    /:当前项目的根路径

（3）配置欢迎页面，静态资源文件夹下的所有index.html页面：被/**映射如访问localhost:8080/  
![在这里插入图片描述][20191231211459326.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 1](4)所有的**/favicon.ico都是在静态资源文件夹下找  
二、Thymeleaf的使用  
1.引入thymeleaf：

<properties>
            <java.version>1.8</java.version>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
            <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
            
            <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
        </properties>
        
        <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
                <version>2.1.6.RELEASE</version>
        </dependency>

2.Thymeleaf使用和语法  
（1）与SpringBoot的整合

public class ThymeleafProperties { 
        private static final Charset DEFAULT_ENCODING;
        public static final String DEFAULT_PREFIX = "classpath:/templates/";
        public static final String DEFAULT_SUFFIX = ".html";
        private boolean checkTemplate = true;
        private boolean checkTemplateLocation = true;
        private String prefix = "classpath:/templates/";
        private String suffix = ".html";
        private String mode = "HTML";
    	static { 
            DEFAULT_ENCODING = StandardCharsets.UTF_8;
        }

上述代码告诉我们，只需要将html页面放在类路径下的resources/templates/就可以使用thymeleaf模板引擎了。  
![在这里插入图片描述][20191231233452719.png]现在来编写一下Controller层的代码

package com.Zhonggger.springbootweb01.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class HelloController { 
        @RequestMapping("/success")
        public String success(){ 
            //视图解析器，找寻classpath:/templates/success.html
            return "success";
        }
    }

访问localhost:8080/success  
出现下面的界面，证明Thymeleaf模板引擎整合成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 2]（2）语法  
首先，导入thymeleaf的名称空间

然后，可以使用thymeleaf的语法  
前端：

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>成功页面</title>
    </head>
    <body>
        成功！
        
        <div th:text="${hello}"></div>
    </body>
    </html>

后端：

package com.Zhonggger.springbootweb01.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import java.util.Map;
    
    @Controller
    public class HelloController { 
        @RequestMapping("/success")
        public String success(Map<String,Object> map){ 
            //视图解析器，找寻classpath:/templates/success.html
            map.put("hello","你好");
            return "success";
        }
    }

访问localhost:8080/success  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 3]  
具体的语法就不在这里一一列举了,大家可以查看Thymeleaf的官方文档。

SpringMVC自动配置  
[https://docs.spring.io/spring-boot/docs/2.2.2.RELEASE/reference/htmlsingle/\#boot-features-spring-mvc][https_docs.spring.io_spring-boot_docs_2.2.2.RELEASE_reference_htmlsingle_boot-features-spring-mvc]

Spr
    
    ing MVC Auto-configuration
    
    Spring Boot 自动配置好了Spring MVC
    
    以下是Spring Boot对SpringMVC的自动配置
    
        1.自动配置了视图解析器：ContentNegotiatingViewResolver和BeanNameViewResolver
        	视图解析器：根据方法的返回值得到视图对象（View），视图对象决定如何渲染
        ContentNegotiatingViewResolver：自动组合所有的属兔解析器
        如何定制：可以自己给容器中添加一个视图解析器，自动将其组合起来。
    package com.Zhonggger.springbootweb01;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.context.annotation.Bean;
    import org.springframework.web.servlet.View;
    import org.springframework.web.servlet.ViewResolver;
    
    import java.util.Locale;
    
    @SpringBootApplication
    public class Springbootweb01Application { 
    
        public static void main(String[] args) { 
            SpringApplication.run(Springbootweb01Application.class, args);
        }
    	
    	//往容器中添加一个新的视图解析器MyViewResolver
        @Bean
        public MyViewResolver getMyViewResolver(){ 
            return new MyViewResolver();
        }
        private static class MyViewResolver implements ViewResolver{ 
    
            @Override
            public View resolveViewName(String s, Locale locale) throws Exception { 
                return null;
            }
        }
    }

在DispatcherServlet.java中的doDispatch方法上打断点，用debug模式启动SpringBoot，在浏览器地址栏上输入localhost:8080/  
可以在viewResolvers下找到刚刚加进容器的类：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 4]

2.支持静态资源，包括WebJars
    Support for serving static resources, including support for WebJars (covered later in this document)).
    3.支持静态页面index.html
    Static index.html support.
    4.支持首页图标favicon.ico
    Custom Favicon support (covered later in this document).
    5.自动注册了 Converter、GenericConverter、Formatter
    Automatic registration of Converter, GenericConverter, and Formatter beans.
    Converter：转换器：public String hello(User user) 类型转换时使用
    Formatter：格式化：2020-01-01 格式化为Date
    自己添加的格式化器转换器，只需要放到容器中即可
    6.Support for HttpMessageConverters (covered later in this document).
    HttpMessageConverters：SpringMVC用来转换Http请求和响应的：User-json：
    HttpMessageConverters是从容器中确定的；获取所有的HttpMessageConverter
    自己给容器中添加HttpMessageConverter，就用@Bean注册进容器即可
    7.用于定义错误代码生成规则的
    Automatic registration of MessageCodesResolver (covered later in this document).
    8.可以配置一个 ConfigurableWebBindingInitializer来替换默认的（添加到容器中）
    初始化WebDataBinder：
    	请求数据封装成JavaBean
    Automatic use of a ConfigurableWebBindingInitializer bean (covered later in this document).

拓展Spring MVC配置  
编写一个配置类（@Configuration），是WebMvcConfigurer类型的，不能标注@EnableWebMvc

package com.Zhonggger.springbootweb01.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    //使用WebMvcConfigurer可以扩展Spring MVC的配置
    @Configuration
    public class MyMVCConfig implements WebMvcConfigurer { 
        @Override
        public void addViewControllers(ViewControllerRegistry registry) { 
            //浏览器发送/zhongger请求，请求也可以来到success.html页面
            registry.addViewController("/zhongger").setViewName("success");
        }
    }

全面接管Spring MVC  
在@Configuration上在加@EnableWebMVC注解，所有都是我们自己配置  
启动Spring Boot后，在地址栏输入：localhost:8080/zhongger，出现以下页面，则配置成功：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 5]

总结：如何修改Spring Boot的默认配置  
模式：  
（1）SpringBoot在自动配置很多组件的时候，先看容器中有没有用户自己配置的（@Bean、@Component），如果有就用用户配置的，如果没有，才自动配置；如果有些组件可以有多个（ViewResolver）将用户配置的和自己默认的组合起来；  
（2）Spring Boot中会有很多xxxConfigure帮助我们进行扩展配置。

[https_www.webjars.org]: https://www.webjars.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231205735983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ==,size_16,color_FFFFFF,t_70
[localhost_8080_webjars_jquery_3.3.1_jquery.js]: http://localhost:8080/webjars/jquery/3.1.1/jquery.js
[20191231211459326.png]: https://img-blog.csdnimg.cn/20191231211459326.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191231211517211.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ==,size_16,color_FFFFFF,t_70
[20191231233452719.png]: https://img-blog.csdnimg.cn/20191231233452719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191231233827268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019123123483169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ==,size_16,color_FFFFFF,t_70
[https_docs.spring.io_spring-boot_docs_2.2.2.RELEASE_reference_htmlsingle_boot-features-spring-mvc]: https://docs.spring.io/spring-boot/docs/2.2.2.RELEASE/reference/htmlsingle/#boot-features-spring-mvc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020010118382442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200101232650220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5NTkxMQ==,size_16,color_FFFFFF,t_70