4 1 Spring Boot Spring Boot Spring Boot

  • Slides: 31
Download presentation

✎ 4. 1 Spring Boot 的视图 Spring Boot支持的视图技术 Spring Boot可整合的模板引擎技术 1. Free. Marker 2.

✎ 4. 1 Spring Boot 的视图 Spring Boot支持的视图技术 Spring Boot可整合的模板引擎技术 1. Free. Marker 2. Groory 3. Thymeleaf 4. Mustache …… 网络 程学院

✎ 4. 2 Thymeleaf 基本语法 常用标签 Thymeleaf常用标签(示例代码): <!DOCTYPE html> <html lang="en" xmlns: th="http: //www.

✎ 4. 2 Thymeleaf 基本语法 常用标签 Thymeleaf常用标签(示例代码): <!DOCTYPE html> <html lang="en" xmlns: th="http: //www. thymeleaf. org"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" media="all" href=". . /css/gtvg. css" th: href="@{/css/gtvg. css}" /> <title>Title</title> </head> <body> <p th: text="#{hello}">欢迎进入Thymeleaf的学习</p> </body> </html> 网络 程学院

✎ 4. 2 Thymeleaf 基本语法 标准表达式 Thymeleaf为变量所在域提供了一些内置对象,如下 • #ctx:上下文对象 • #vars:上下文变量 • #locale:上下文区域设置 •

✎ 4. 2 Thymeleaf 基本语法 标准表达式 Thymeleaf为变量所在域提供了一些内置对象,如下 • #ctx:上下文对象 • #vars:上下文变量 • #locale:上下文区域设置 • #request:(仅限Web Context)Http. Servlet. Request对象 • #response:(仅限Web Context)Http. Servlet. Response对象 • #session:(仅限Web Context)Http. Session对象 • #servlet. Context:(仅限Web Context)Servlet. Context对象 网络 程学院

✎ 4. 3 Thymeleaf 基本使用 Thymeleaf 模板基本配置 Thymeleaf 在Spring Boot 中的使用 1、 在Spring Boot项目中使用Thymeleaf模板,必须保证引入Thymeleaf依赖。

✎ 4. 3 Thymeleaf 基本使用 Thymeleaf 模板基本配置 Thymeleaf 在Spring Boot 中的使用 1、 在Spring Boot项目中使用Thymeleaf模板,必须保证引入Thymeleaf依赖。 <dependency> <group. Id>org. springframework. boot</group. Id> <artifact. Id>spring-boot-starter-thymeleaf</artifact. Id> </dependency> 网络 程学院

✎ 4. 3 Thymeleaf 基本使用 Thymeleaf 模板基本配置 Thymeleaf 在Spring Boot 中的使用 2、 其次在全局配置文件中配置Thymeleaf模板的一些参数。如设置模板缓存、模 板编码、模板样式、指定模板页面存放路径、指定模板页面名称的后缀

✎ 4. 3 Thymeleaf 基本使用 Thymeleaf 模板基本配置 Thymeleaf 在Spring Boot 中的使用 2、 其次在全局配置文件中配置Thymeleaf模板的一些参数。如设置模板缓存、模 板编码、模板样式、指定模板页面存放路径、指定模板页面名称的后缀 spring. thymeleaf. cache = true spring. thymeleaf. encoding = UTF-8 spring. thymeleaf. mode = HTML 5 spring. thymeleaf. prefix = classpath: /templates/ spring. thymeleaf. suffix =. html 网络 程学院

✎ 4. 4 数据页面展示 使用 Thymeleaf 完成数据的页面展示 ③ 创建控制类 创建一个用于前端模板页面动态数据替换效果测试的访问实体类Login. Controller @Controller public class

✎ 4. 4 数据页面展示 使用 Thymeleaf 完成数据的页面展示 ③ 创建控制类 创建一个用于前端模板页面动态数据替换效果测试的访问实体类Login. Controller @Controller public class Login. Controller { @Get. Mapping("/to. Login. Page") public String to. Login. Page(Model model){ model. add. Attribute("current. Year", Calendar. get. Instance(). get(Calendar. YEAR)); return "login"; } } 网络 程学院

✎ 4. 4 数据页面展示 使用 Thymeleaf 完成数据的页面展示 ④ 创建模板页面并引入静态资源文件 创建一个用户登录的模板页面login. html, 部分参考代码如下 <html lang="en"

✎ 4. 4 数据页面展示 使用 Thymeleaf 完成数据的页面展示 ④ 创建模板页面并引入静态资源文件 创建一个用户登录的模板页面login. html, 部分参考代码如下 <html lang="en" xmlns: th="http: //www. thymeleaf. org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>用户登录界面</title> <link th: href="@{/login/css/bootstrap. min. css}" rel="stylesheet"> <link th: href="@{/login/css/signin. css}" rel="stylesheet"> </head> 网络 程学院

✎ 4. 4 数据页面展示 使用 Thymeleaf 完成数据的页面展示 ④ 创建模板页面并引入静态资源文件 在body标签中通过th: text引入了后台动态传递过来的当前年份current. Year。 <button class="btn

✎ 4. 4 数据页面展示 使用 Thymeleaf 完成数据的页面展示 ④ 创建模板页面并引入静态资源文件 在body标签中通过th: text引入了后台动态传递过来的当前年份current. Year。 <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> <p class="mt-5 mb-3 text-muted">©<span th: text="${current. Year}">2018</span> -<span th: text="${current. Year}+1">2019</span></p> 网络 程学院

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ① 编写多语言国际化文件及配置文件 国� 化文件login. properties、login_zh_CN. properties、login_en_US. properties login. properties、login_zh_CN.

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ① 编写多语言国际化文件及配置文件 国� 化文件login. properties、login_zh_CN. properties、login_en_US. properties login. properties、login_zh_CN. properties login. tip=请登录 login. username=用户名 login. password=密码 login. rememberme=记住我 login. button=登录 网络 程学院

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ① 编写多语言国际化文件及配置文件 login_en_US. properties login. tip=Please sign in login.

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ① 编写多语言国际化文件及配置文件 login_en_US. properties login. tip=Please sign in login. username=Username login. password=Password login. rememberme=Remember me login. button=Login 网络 程学院

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ④ 页面国际化使用 用� 登�� 面login. html� 合Thymeleaf模板引擎�� 国� 化功能,核心代�

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ④ 页面国际化使用 用� 登�� 面login. html� 合Thymeleaf模板引擎�� 国� 化功能,核心代� 如下 <h 1 class="h 3 mb-3 font-weight-normal" th: text="#{login. tip}">请登录</h 1> <input type="text" class="form-control" th: placeholder="#{login. username}" required="" autofocus=""> <input type="password" class="form-control" th: placeholder="#{login. password}" required=""> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> [[#{login. rememberme}]] </label> </div> 网络 程学院

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ④ 页面国际化使用 <button class="btn btn-lg btn-primary btn-block" type="submit" th:

✎ 4. 5 Thymeleaf国际化页面 使用Thymeleaf配置国际化页面 ④ 页面国际化使用 <button class="btn btn-lg btn-primary btn-block" type="submit" th: text="#{login. button}">登录</button> <p class="mt-5 mb-3 text-muted">© <span th: text="${current. Year}">2018</span> -<span th: text="${current. Year}+1">2019</span></p> <a class="btn btn-sm" th: href="@{/to. Login. Page(l='zh_CN')}">中文</a> <a class="btn btn-sm" th: href="@{/to. Login. Page(l='en_US')}">English</a> 网络 程学院