第4章-SpringBoot视图技术35课件.ppt

1、第4章 Spring Boot视图技术 支持的视图技术 Thymeleaf基本语法 使用Thymeleaf配置国际化页面 Thymeleaf基本使用 使用Thymeleaf进行数据的页面展示 学习目标熟悉Thymeleaf模板引擎基本语法12熟悉Spring Boot模板配置和静态资源映射规则 掌握Spring Boot整合Thymeleaf模板引擎使用34掌握Spring Boot国际化功能实现熟 悉熟 悉掌 握掌 握 目录Thymaleaf 基本语法4.24.24.14.1Spring Boot 支持的视图技术4.34.3 Thymaleaf 基本使用使用Thymaleaf完成页面的数据展

2、示4.44.4点击查看本案例相关知识点点击查看本案例相关知识点使用Thymaleaf配置国际化页面4.54.5 4.2 Thymeleaf 基本用法基本用法 知识架构12常用标签标准表达式 4.3 Thymeleaf 基本使用基本使用 知识架构12Thymeleaf 模板基本配置静态资源的访问 本章将对Spring Boot支持的视图技术进行介绍，并使用Spring Boot整合其中常用的Thymeleaf模板引擎进行视图页面的实现。章节概要 Spring Boot框架为简化项目的整体开发，对一些常用的视图技术实现了整合支持，并主要推荐整合模板引擎技术来实现前端页面的动态化内容。 4.1 Sp

3、ring Boot 的视图Spring Boot支持的视图技术1. FreeMarker2. Groory3. Thymeleaf4. MustacheSpring Boot可整合的模板引擎技术 4.2 Thymeleaf 基本语法常用标签 Title 欢迎进入欢迎进入Thymeleaf的学习的学习Thymeleaf常用标签（示例代码）： 4.2 Thymeleaf 基本语法常用标签th:标签说明th:insert页面片段包含（类似JSP中的include标签）th:replace页面片段包含（类似JSP中的include标签）th:each元素遍历（类似JSP中的c:forEach标签）th

4、:if条件判断，如果为真th:unless条件判断，如果为假th:switch条件判断，进行选择性匹配th:case条件判断，进行选择性匹配th:object变量声明th:with变量声明Thymeleaf 常用标签 4.2 Thymeleaf 基本语法常用标签th:标签说明th:attr通用属性修改th:attrprepend通用属性修改，将计算结果追加前缀到现有属性值th:attrappend通用属性修改，将计算结果追加后缀到现有属性值th:value属性值修改，指定标签属性值th:href用于设定链接地址th:src用于设定链接地址th:text用于指定标签显示的文本内容th:utext

5、用于指定标签显示的文本内容，对特殊标签不转义th:fragment声明片段th:remove移除片段 4.2 Thymeleaf 基本语法标准表达式说明表达式语法变量表达式$.选择变量表达式*.消息表达式#.链接URL表达式.片段表达式.获取上下文中的变量值用于从被选定对象获取属性值用于Thymeleaf模板页面国际化内容的动态替换和展示用于页面跳转或者资源的引入用来标记一个片段模板，并根据需要移动或传递给其他模板。Thymeleaf 主要语法 4.2 Thymeleaf 基本语法标准表达式#ctx：上下文对象#vars：上下文变量#locale：上下文区域设置#request：（仅限Web

6、Context）HttpServletRequest对象#response：（仅限Web Context）HttpServletResponse对象#session：（仅限Web Context）HttpSession对象#servletContext：（仅限Web Context）ServletContext对象Thymeleaf为变量所在域提供了一些内置对象，如下 4.3 Thymeleaf 基本使用Thymeleaf 模板基本配置1 1、 在在Spring BootSpring Boot项目中使用项目中使用ThymeleafThymeleaf模板，必须保证引入模板，必须保证引入Thyme

7、leafThymeleaf依赖依赖。 org.springframework.boot spring-boot-starter-thymeleafThymeleaf 在Spring Boot 中的使用 4.3 Thymeleaf 基本使用Thymeleaf 模板基本配置spring.thymeleaf.cache = truespring.thymeleaf.encoding = UTF-8 spring.thymeleaf.mode = HTML5 spring.thymeleaf.prefix = classpath:/templates/ spring.thymeleaf.suffix

8、= .html 2 2、 其次其次在全局配置文件中配置在全局配置文件中配置ThymeleafThymeleaf模板的一些参数。模板的一些参数。如设置模板缓存、模如设置模板缓存、模板编码、模板样式、指定模板页面存放路径、指定模板页面名称的后缀板编码、模板样式、指定模板页面存放路径、指定模板页面名称的后缀Thymeleaf 在Spring Boot 中的使用 4.3 Thymeleaf 基本使用静态资源的访问Spring Boot默认将/*所有访问映射到以下目录： classpath：/META-INF/resources/：项目类路径下的META-INF文件夹下 的resources文件夹下的所

9、有文件。 classpath：/resources/：项目类路径下的resources文件夹下的所有文件。 classpath：/static/：项目类路径下的static文件夹下的所有文件 classpath：/public/：项目类路径下的public文件夹下的所有文件。Spring Boot 中静态资源的访问路径 4.4 数据页面展示使用 Thymeleaf 完成数据的页面展示1. 创建Spring Boot项目，引入Thymeleaf依赖2. 编写配置文件，对Thymeleaf模板的页面数据缓存进行设置3. 创建控制类：Controller4. 创建模板页面并引入静态资源文件5. 效果

10、测试搭建步骤： 4.4 数据页面展示使用 Thymeleaf 完成数据的页面展示spring.thymeleaf.cache=false 编写配置文件，设置页面数据缓存 thymeleaf页面缓存设置（默认为true），开发中方便调试应设置为false，上线稳定后应保持默认true 创建Spring Boot项目，引入Thymeleaf依赖 4.4 数据页面展示使用 Thymeleaf 完成数据的页面展示Controllerpublic class LoginController GetMapping(/toLoginPage) public String toLoginPage(Model

11、model) model.addAttribute(currentYear, Calendar.getInstance().get(Calendar.YEAR); return login; 创建控制类创建一个用于前端模板页面动态数据替换效果测试的访问实体类创建一个用于前端模板页面动态数据替换效果测试的访问实体类LoginControllerLoginController 4.4 数据页面展示使用 Thymeleaf 完成数据的页面展示 用户登录界面 创建模板页面并引入静态资源文件创建一个用户登录的模板页面login.html,部分参考代码如下 4.4 数据页面展示使用 Thymeleaf 完

12、成数据的页面展示登录2018-2019在body标签中通过th:text引入了后台动态传递过来的当前年份currentYear。 创建模板页面并引入静态资源文件 4.4 数据页面展示使用 Thymeleaf 完成数据的页面展示 创建模板页面并引入静态资源文件项目结构图项目结构图 启动项目进行测试，在浏览器上访问启动项目进行测试，在浏览器上访问http:/localhost:8080/toLoginPagehttp:/localhost:8080/toLoginPage，在页面在页面底部动态显示了当前日期底部动态显示了当前日期2019-20202019-2020，而不是文件中的静态数字，而不是文

13、件中的静态数字2018-20192018-2019 4.4 数据页面展示使用 Thymeleaf 完成数据的页面展示 整合效果测试 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面1. 编写多语言国际化文件以及配置文件2. 编写配置文件3. 定制区域信息解析器4. 页面国际化使用5. 整合效果测试搭建步骤： 4.5 Thymeleaf国际化页面国际化文件国际化文件login.propertieslogin.properties、login_zh_CN.propertieslogin_zh_CN.properties、login_en_US.propertieslogin

14、_en_US.propertieslogin.tip=请登录请登录login.username=用户名用户名login.password=密码密码login.rememberme=记住我记住我login.button=登录登录使用Thymeleaf配置国际化页面 编写多语言国际化文件及配置文件login.properties、login_zh_CN.properties 4.5 Thymeleaf国际化页面login.tip=Please sign inlogin.username=Usernamelogin.password=Passwordlogin.rememberme=Remember

15、 melogin.button=Login使用Thymeleaf配置国际化页面 编写多语言国际化文件及配置文件login_en_US.properties 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面 编写配置文件打开项目的打开项目的application.propertiesapplication.properties全局配置文件，在该文件中添加国际化文件全局配置文件，在该文件中添加国际化文件基础名设置基础名设置# thymeleaf页面缓存设置（默认为页面缓存设置（默认为true），开发中方便调试应设置为），开发中方便调试应设置为false，上线稳，上线稳定后应

16、保持默认定后应保持默认truespring.thymeleaf.cache=false# 配置国际化文件基础名配置国际化文件基础名spring.messages.basename=i18n.login 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面 定制区域化解析器MyLocalResovel创建一个用于定制国际化功能区域信息解析器的自定义配置类创建一个用于定制国际化功能区域信息解析器的自定义配置类MyLocalResovel，MyLocalResolverMyLocalResolver自定义区域解析器配置类实现了自定义区域解析器配置类实现了LocaleResolve

17、rLocaleResolver接口，并重写了接口，并重写了其中的其中的resolveLocaleresolveLocale()()方法进行自定义语言解析，最后使用方法进行自定义语言解析，最后使用BeanBean注解将当前配置注解将当前配置类注册成类注册成SpringSpring容器中的一个类型为容器中的一个类型为LocaleResolverLocaleResolver的的BeanBean组件，这样就可以覆盖组件，这样就可以覆盖默认的默认的LocaleResolverLocaleResolver组件组件。（具体代码见备注）（具体代码见备注） 4.5 Thymeleaf国际化页面使用Thymele

18、af配置国际化页面用户登录页面用户登录页面login.htmllogin.html结合结合ThymeleafThymeleaf模板引擎实现国际化功能，核心代码如下模板引擎实现国际化功能，核心代码如下请登录请登录 #login.rememberme 页面国际化使用 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面登录登录 2018 -2019中文中文English 页面国际化使用 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面启动项目进行效果测试，在浏览器上访问启动项目进行效果测试，在浏览器上访问http:/localhost:8080/toLo

19、ginPagehttp:/localhost:8080/toLoginPage出现乱码 整合效果测试 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面打开的打开的IDEAIDEA开发工具中，依次选择【开发工具中，依次选择【FileFile】-【SettingsSettings】选项打开项目设置窗口，】选项打开项目设置窗口，在窗口中搜索在窗口中搜索“File EncodingsFile Encodings”关键字关键字，将，将Default encoding for properties Default encoding for properties files files 设置为设置为UTF-8UTF-8 整合效果测试 4.5 Thymeleaf国际化页面使用Thymeleaf配置国际化页面重启项目并访问重启项目并访问http:/localhost:8080/toLoginPagehttp:/localhost:8080/toLoginPage 整合效果测试