Spring Boot与Web开发，thymeleaf模板语言的使用

使用Spring Boot

创建Spring Boot应用，选择我们需要的模块。
Spring Boot已经默认将这些场景给配置好了。只需要在配置文件中指定少量配置就可以运行起来。
自己编写业务代码。

自动配置原理：

这个场景Spring Boot帮我们配置了什么？能不能修改？能修改哪些配置？能不能扩展？……

xxxAutoConfiguration：帮我们给容器中自动配置组件。
xxxxProperties：配置类来封装配置文件中的内容。

Spring Boot对静态资源的映射规则

所有的/webjars/**，都去classpath:/META-INF/resources/webjars/找资源。
webjars：以jar包的反式引入静态资源。webjars官网
例如：jquery的webjars

jquery的webjars.png

访问他的路径为：
localhost:8080/webjars/jquery/3.5.1/jquery.js
"/**"访问当前项目下的任何资源(静态资源的文件夹)

类路径指：main下的java文件夹或resources文件夹
"classpath:/META-INF/resources/"：类路径下的/META-INF/resources/
"classpath:/resources/"：类路径下的/resources/
"classpath:/static/"：类路径下的/static/ 一般放css,js等
"classpath:/public/"：类路径下的/public/
"/"：当前项目的根目录路径

localhost:8080/xxxx ----> 没人处理就会去静态资源中去找对应的资源

欢迎页：静态资源文件夹下的所有index.html页面。被"/**"映射。
所有的**/favicon.ico 都是在静态资源文件下找。命名为：favicon.ico

########自己定义静态资源文件夹
spring.web.resources.static-locations=classpath:/hello/
########spring.web.resources是一个数组，可以写多个文件夹，用逗号分隔开

模板引擎

JSP、Velocity、Freemarker、Thymelef(Spring Boot推荐使用的)、……
Spring Boot推荐的模板引擎：Thymelef
语法更简单、功能更强大。

使用方法

1. 引入Thymelef：

<!--引入spring-boot中的thymeleaf模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2. 使用Thymelef中的&语法

@ConfigurationProperties(prefix = "spring.thymeleaf")
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";
    private Charset encoding;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean renderHiddenMarkersBeforeCheckboxes;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;

只要我们把html放在classpath:/templates/，thymeleaf就能自动渲染。
使用：

导入thymeleaf的命名空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

使用thymeleaf的语法：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成功</title>
</head>
<body>
<h1>成功</h1>
<!--th:text 将div中的文本内容设置为-->
<div th:text="${hello}">这是显示欢迎信息</div>
</body>
</html>

语法规则

th:text 改变当前元素里面的文本内容。
可以使用th:任意html属性。使用th:任意属性来替换原生对应属性。

thymeleaf标签.png
表达式语法？

变量表达式：$ {...}
    1.获取对象的属性、调用方法
    2.使用内置对象
    3.内置的工具对象
选择变量表达式：\* {...}：和${…}在功能上是一样
    补充：配合 th:object=${" "}使用
消息表达式：＃{...}：获取国际化内容
链接网址表达式：@{…}：定义url链接
    @{localhost:8080/order/buy(name=${obj.name,type=true})}
片段表达式：~{…}
    <div th:insert="~{commons :: main}">…</div>

表达式支持：
    1.字面量
    2.文本操作
        字符串连接：+
        文本替换：|The name is ${name}|
    3.数学运算
        二进制运算符：+ 、 - 、 \* 、 / 、 %
    4.负号（一元运算符）：-
    5.布尔运算
        二进制运算符：and、or
        布尔否定(一元运算符)：!、not
    6.比较和相等运算符
        比较运算符：&gt; 、&lt; 、&gt =、&lt =(gt、lt、ge、le)
        相等运算符：==、!=(eq、ne)
    7.条件运算符：(三元运算)
        If-then:(if) ? (then)
        If-then-else:(if) ? (then) :(else)
        Default:(value) ?: (defaultvalue)
    8.特殊符号
        哑操作符：_

测试一：

//控制层
//查出用户数据，在页面展示
    @RequestMapping("/success")
    public String success(Map<String, Object> map) {
        map.put("hello", "<h1>你好</h1>");
        map.put("users", Arrays.asList("zhangsan","lisi","王五",3));
        return "success";
    }

//页面
<!DOCTYPE html>
<!--声明命名空间 xmlns:th="http://www.thymeleaf.org" -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成功</title>
</head>
<body>
<!--对应<h1>你好<h1>-->
<div th:text="${hello}"></div>
<!--用utext会转义特殊字符及html标签中的<h1>你好<h1>-->
<div th:utext="${hello}"></div>
<br>
<!--遍历数组 ["zhangsan","lisi","王五",3]-->
<!--th:each=""每次遍历都会生成一个标签  3个h4-->
<h4 th:each="user:${users}" th:text="${user}"></h4>
<br>
<h4>
    <!--th:each=""每次遍历都会生成一个标签  3个span-->
    <span th:each="user:${users}"> [[${user}]] </span>
</h4>
</body>
</html>

测试二：改变thymeleaf文件的默认位置，外加一些spring Boot中thymeleaf的属性

########设置日志的级别
logging.level.cn.fantuan=trace
########设置控制台打印的日志格式
logging.pattern.console=%d{yyyy-MM-dd HH:mm:ss.SSS} | %highlight(%-5level) | %boldYellow(%thread)  %logger === %highlight(%msg%n)
########设置静态资源的文件路径
spring.web.resources.static-locations=classpath:/webapp/

#########使用了thymeleaf之后mvc的视图解析器就没有好大的作用了
#########设置视图解析器的前缀
#spring.mvc.view.prefix=/pages/
#########设置视图解析器的后缀
#spring.mvc.view.suffix=.html

########设置thymeleaf可以解析的视图名称的逗号分隔列表,指的是html文件名称
#spring.thymeleaf.view-names=success,*
########关闭页面缓存
spring.thymeleaf.cache=false
########构建URL时附加到查看名称的前缀。
spring.thymeleaf.prefix=classpath:/templates/pages/
########构建URL时附加到查看名称的后缀。
spring.thymeleaf.suffix=.html




########启用模板缓存。
#spring.thymeleaf.cache = true
########在呈现模板之前检查模板是否存在。
#spring.thymeleaf.check-template = true
########检查模板位置是否存在。
#spring.thymeleaf.check-template-location = true
########Content-Type值。
#spring.thymeleaf.content-type = text / html
########启用MVC Thymeleaf视图分辨率。
#spring.thymeleaf.enabled = true
########模板编码。
#spring.thymeleaf.encoding = UTF-8
########应该从解决方案中排除的视图名称的逗号分隔列表。
#spring.thymeleaf.excluded-view-names =
########应用于模板的模板模式。另请参见StandardTemplateModeHandlers。
#spring.thymeleaf.mode = HTML5
########在构建URL时预先查看名称的前缀。
#spring.thymeleaf.prefix = classpath：/ templates /
########构建URL时附加到查看名称的后缀。
#spring.thymeleaf.suffix = .html
########链中模板解析器的顺序。
#spring.thymeleaf.template-resolver-order =
########可以解析的视图名称的逗号分隔列表。/ templates / ＃在构建URL时先查看名称的前缀。
#spring.thymeleaf.view-names =
########构建URL时附加到查看名称的后缀。
#spring.thymeleaf.suffix = .html
########链中模板解析器的顺序。
#spring.thymeleaf.template-resolver-order =
########可以解析的视图名称的逗号分隔列表。/ templates / ＃在构建URL时先查看名称的前缀。
#spring.thymeleaf.view-names =
########构建URL时附加到查看名称的后缀。
#spring.thymeleaf.suffix = .html
########链中模板解析器的顺序。
#spring.thymeleaf.template-resolver-order =
########可以解析的视图名称的逗号分隔列表。
#spring.thymeleaf.view-names =



#########控制器
package cn.fantuan.springboot02.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Arrays;
import java.util.Map;

@Controller
public class HelloController {
    //控制层
    //查出用户数据，在页面展示
    @RequestMapping("/suc")
    public String success(Map<String, Object> map) {
        System.out.println("success");
        map.put("hello", "<h1>你好</h1>");
        map.put("users", Arrays.asList("zhangsan","lisi","王五",3));
        return "success";
    }
    @RequestMapping("/vip")
    public String vip(Map<String, Object> map) {
        System.out.println("vip");
        map.put("hello", "<h1>你好</h1>");
        map.put("users", Arrays.asList("zhangsan","lisi","王五",3));
        return "vip/vip";
    }
    @RequestMapping("/user")
    public String user(Map<String, Object> map) {
        System.out.println("user");
        map.put("hello", "<h1>你好</h1>");
        map.put("users", Arrays.asList("zhangsan","lisi","王五",3));
        return "user/user";
    }
}

文件目录层级关系

扩展Spring MVC：

<!--请求处理-->
<mvc:view-controller path="/hello" view-name="success"/>
<!--拦截器-->
<mvc:interceptors>
    <mvc:interceptor>
        <mvc:mapping path="/hello"/>
        <bean></bean>
    </mvc:interceptor>
</mvc:interceptors>

编写一个配置类(@Configuration),是WebMvcConfigurer类型的。不能标准@EnableWebMvc注解。
既保留了所有的自动配置，也能用我们来扩展配置。

package cn.fantuan.springboot03webrestcrud.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//使用WebMvcConfigurer可以用来扩展SpringMvc的功能
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    //视图映射
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //浏览器发送/hellos请求，来到success
        //可以直接用这种方法来处理只是跳转页面的请求
        registry.addViewController("/hellos").setViewName("success");
    }
}

原理：

WebMvcAutoConfiguration是SpringMVC的自动配置类
在做其他自动配置时

    @Configuration(proxyBeanMethods = false)
    public static class EnableWebMvcConfiguration extends DelegatingWebMvcConfiguration implements ResourceLoaderAware {

    //从容器中获取所有的WebMvcConfigurer赋值到configurers里面
    @Autowired(required = false)
    public void setConfigurers(List<WebMvcConfigurer> configurers) {
        if (!CollectionUtils.isEmpty(configurers)) {
            this.configurers.addWebMvcConfigurers(configurers);
            //一个参考实现，将所有的WebMvcConfigurer相关的配置都一起调用
            protected void addViewControllers(ViewControllerRegistry registry) {
                this.configurers.addViewControllers(registry);
            }
        }

    }

容器中所有的WebMvcConfigurer都会一起起作用。
我们自己写的配置类也会被调用。

效果：
SpringMVC的自动配置和扩展配置都会起作用。

全面接管SpringMVC：

Spring Boot对SpringMVC的自动配置不需要了，所有的都是我们自己配。
我们只需要加一个@EnableWebMvc注解在配置类即可。
不推荐使用@EnableWebMvc来全面接管。

package cn.fantuan.springboot03webrestcrud.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//Spring Boot自动配置的SpringMVC就失效了，全部由自己配置
@EnableWebMvc
//使用WebMvcConfigurer可以用来扩展SpringMvc的功能
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    //视图映射
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //浏览器发送/hellos请求，来到success
        //可以直接用这种方法来处理只是跳转页面的请求
        registry.addViewController("/hellos").setViewName("success");
    }
}

国际化

编写国际化配置文件
使用ResourceBundleMessageSource管理国际化资源文件
在页面中使用fmt.message取出国际化资源文件内容

步骤：

编写国际化配置文件，抽取页面需要显示的国际化信息

国际化.png
springBoot自动配置好了国际化资源文件的组件

@Configuration(proxyBeanMethods = false)
@ConditionalOnMissingBean(name = {"messageSource"},search = SearchStrategy.CURRENT)
@AutoConfigureOrder(-2147483648)
@Conditional({MessageSourceAutoConfiguration.ResourceBundleCondition.class})
@EnableConfigurationProperties
public class MessageSourceAutoConfiguration {
    private static final Resource[] NO_RESOURCES = new Resource[0];

    public MessageSourceAutoConfiguration() {}

    @Bean
    @ConfigurationProperties(prefix = "spring.messages")
    public MessageSourceProperties messageSourceProperties() {
        return new MessageSourceProperties();
    }

    @Bean
    public MessageSource messageSource(MessageSourceProperties properties) {
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        if (StringUtils.hasText(properties.getBasename())) {
            messageSource.setBasenames(StringUtils.commaDelimitedListToStringArray(StringUtils.trimAllWhitespace(properties.getBasename())));
        }

        if (properties.getEncoding() != null) {
            messageSource.setDefaultEncoding(properties.getEncoding().name());
        }

        messageSource.setFallbackToSystemLocale(properties.isFallbackToSystemLocale());
        Duration cacheDuration = properties.getCacheDuration();
        if (cacheDuration != null) {
            messageSource.setCacheMillis(cacheDuration.toMillis());
        }

        messageSource.setAlwaysUseMessageFormat(properties.isAlwaysUseMessageFormat());
        messageSource.setUseCodeAsDefaultMessage(properties.isUseCodeAsDefaultMessage());
        return messageSource;
    }

    protected static class ResourceBundleCondition extends SpringBootCondition {
        private static ConcurrentReferenceHashMap<String, ConditionOutcome> cache = new ConcurrentReferenceHashMap();

        protected ResourceBundleCondition() {}

        public ConditionOutcome getMatchOutcome(ConditionContext context, AnnotatedTypeMetadata metadata) {
            String basename = context.getEnvironment().getProperty("spring.messages.basename", "messages");
            ConditionOutcome outcome = (ConditionOutcome)cache.get(basename);
            if (outcome == null) {
                outcome = this.getMatchOutcomeForBasename(context, basename);
                cache.put(basename, outcome);
            }

            return outcome;
        }

        private ConditionOutcome getMatchOutcomeForBasename(ConditionContext context, String basename) {
            Builder message = ConditionMessage.forCondition("ResourceBundle", new Object[0]);
            String[] var4 = StringUtils.commaDelimitedListToStringArray(StringUtils.trimAllWhitespace(basename));
            int var5 = var4.length;

            for(int var6 = 0; var6 < var5; ++var6) {
                String name = var4[var6];
                Resource[] var8 = this.getResources(context.getClassLoader(), name);
                int var9 = var8.length;

                for(int var10 = 0; var10 < var9; ++var10) {
                    Resource resource = var8[var10];
                    if (resource.exists()) {
                        return ConditionOutcome.match(message.found("bundle").items(new Object[]{resource}));
                    }
                }
            }
            //指定自己写的国际化配置文件，去掉语言国家代码的
            return ConditionOutcome.noMatch(message.didNotFind("bundle with basename " + basename).atAll());
        }

        private Resource[] getResources(ClassLoader classLoader, String name) {
            String target = name.replace('.', '/');

            try {
                return (new PathMatchingResourcePatternResolver(classLoader)).getResources("classpath*:" + target + ".properties");
            } catch (Exception var5) {
                return MessageSourceAutoConfiguration.NO_RESOURCES;
            }
        }
    }
}

########配置文件设置国际化配置文件路径
spring.messages.basename=i18n.login

去页面获取国际化的值

########行内写法
[[#{login.username}]]
########普通写法
th:text="#{login.password}"
th:placeholder="#{login.code}"

出现乱码？？

Idea中全局默认设置.png

效果：根据浏览器语言设置的信息切换了国际化
原理：
国际化Locale(区域信息对象)；LocaleResolver（获取区域信息对象）

        @Bean
        @ConditionalOnMissingBean
        public LocaleResolver localeResolver() {
            if (this.webProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.WebProperties.LocaleResolver.FIXED) {
                return new FixedLocaleResolver(this.webProperties.getLocale());
            } else if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) {
                return new FixedLocaleResolver(this.mvcProperties.getLocale());
            } else {
                AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
                Locale locale = this.webProperties.getLocale() != null ? this.webProperties.getLocale() : this.mvcProperties.getLocale();
                localeResolver.setDefaultLocale(locale);
                return localeResolver;
            }
        }
//默认的就是根据请求头带来的区域信息获取Locale进行国际化

点击链接却换国际化

package cn.fantuan.springboot04weblayuimini.component;

import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * 可以在链接上携带区域信息
 */
public class MyLocaleResolver implements LocaleResolver {
    //解析区域信息
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        String l = httpServletRequest.getParameter("l");
        //设置区域信息为系统默认的
        Locale locale=Locale.getDefault();
        //判断链接是否带由区域信息
        if(!StringUtils.isEmpty(l)){
            String[] split = l.split("_");
            //带由区域信息就覆盖系统默认的区域信息
            locale = new Locale(split[0], split[1]);
        }
        return locale;
    }

    //设置区域信息
    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {

    }
}


 //给容器中添加自己的区域信息
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }

页面代码：

<a th:href="@{/login.html(l='en_US')}" th:text="#{login.forgetPassword}" class="forget-password">忘记密码？</a>

最后编辑于：2020.11.28 11:19:09

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,014评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,796评论 3赞 386
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,484评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,830评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,946评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,114评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,182评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,927评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,369评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,678评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,832评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,533评论 4赞 335
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,166评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,885评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,128评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,659评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,738评论 2赞 351