SpringBoot中Thymeleaf视图技术如何高效应用？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1430个文字，预计阅读时间需要6分钟。
前言：在一个Web应用中，通常会采用MVC设计模式实现应用的模型、视图和控制器的分离。其中，视图是用户看到并与之交互的界面。
对于初级的Web应用来说，视图通常是由HTML元素组成的静态界面；而随着应用的发展，视图可能会变得更加动态，与后端进行数据交互。
前言在一个Web应用中，通常会采用MVC设计模式实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面；而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，提供了一些视图技术支持，并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。
Thymeleaf基本语法Thymeleaf是一种现代的基于服务器端的Java模板引擎技术，也是一个优秀的面向Java的XML、XHTML、HTML5页面模板，它具有丰富的标签语言、函数和表达式，在使用Spring Boot框架进行页面设计时，一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。
Thymeleaf标签
使用标签只需要加上一个命名空间就可以了。<html lang="en" xmlns:th="thymeleaf.org"> 即修改原html的第二行就可以了。
<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta www.thymeleaf.org">
<head>
<meta thymeleaf.org"引入Thymeleaf标签
最后我们通过访问localhost:8080/toLoginPage 可以查看效果
配置国际化页面 编写多语言配置文件在resources目录下创建名为i18n的文件夹，数一数这个单词多少个字母internationalization，就知道为什么叫i18n了。
然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。
目录结构：这个Resource Bundle 'login'时idea自动创建的，我们不需要管，只需要完成我们的就行。
login.properties
login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录
login_zh_CN.properties
login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录
login_en_US.properties
login.tip=Please sign in
login.username=Username
login.password=Password
login.rememberme=Rememberme
login.button=Login
然后我们在配置文件application.properties里面添加代码
- 这个是我们必须要写的，login是我们的语言文件前缀，springboot默认前缀是messages，所以不写识别不了。
spring.messages.basename=i18n.login
我们在config包下面创建一个MyLocalResovel类，自定义国际化功能区域信息解析器。
package com.hjk.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.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">
<style type="text/css">
html,
body {
height: 100%;
}
body {
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: greenyellow;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body class="text-center">
<!-- 用户登录form表单 -->
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1>
<input type="text" th:placeholder="#{login.username}">
<input type="password" th:placeholder="#{login.password}" \>
<div>
<label>
<input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
</label>
</div>
<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="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
<a class="btn btn-sm" th:href="@{/toLoginPage(1='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/toLoginPage(1='en_US')}">English</a>
</form>
</body>
</html>
这里我们基本就完成了，但是在访问中文的时候会出现乱码现象。
我们打开idea的file->settings->file Encodings.
将Default encoding for properties的编码改为utf-8，同时勾选Transparentnative-to-ascii conversion
然后我们重新编写login.properties和其他相关的
login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录
但是这种方法1只对当前项目有效。下次创建还是使用GBK编码
总结本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。
....
本文共计1430个文字，预计阅读时间需要6分钟。
前言：在一个Web应用中，通常会采用MVC设计模式实现应用的模型、视图和控制器的分离。其中，视图是用户看到并与之交互的界面。
对于初级的Web应用来说，视图通常是由HTML元素组成的静态界面；而随着应用的发展，视图可能会变得更加动态，与后端进行数据交互。
前言在一个Web应用中，通常会采用MVC设计模式实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面；而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，提供了一些视图技术支持，并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。
Thymeleaf基本语法Thymeleaf是一种现代的基于服务器端的Java模板引擎技术，也是一个优秀的面向Java的XML、XHTML、HTML5页面模板，它具有丰富的标签语言、函数和表达式，在使用Spring Boot框架进行页面设计时，一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。
Thymeleaf标签
使用标签只需要加上一个命名空间就可以了。<html lang="en" xmlns:th="thymeleaf.org"> 即修改原html的第二行就可以了。
<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta www.thymeleaf.org">
<head>
<meta thymeleaf.org"引入Thymeleaf标签
最后我们通过访问localhost:8080/toLoginPage 可以查看效果
配置国际化页面 编写多语言配置文件在resources目录下创建名为i18n的文件夹，数一数这个单词多少个字母internationalization，就知道为什么叫i18n了。
然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。
目录结构：这个Resource Bundle 'login'时idea自动创建的，我们不需要管，只需要完成我们的就行。
login.properties
login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录
login_zh_CN.properties
login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录
login_en_US.properties
login.tip=Please sign in
login.username=Username
login.password=Password
login.rememberme=Rememberme
login.button=Login
然后我们在配置文件application.properties里面添加代码
- 这个是我们必须要写的，login是我们的语言文件前缀，springboot默认前缀是messages，所以不写识别不了。
spring.messages.basename=i18n.login
我们在config包下面创建一个MyLocalResovel类，自定义国际化功能区域信息解析器。
package com.hjk.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.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">
<style type="text/css">
html,
body {
height: 100%;
}
body {
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: greenyellow;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body class="text-center">
<!-- 用户登录form表单 -->
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1>
<input type="text" th:placeholder="#{login.username}">
<input type="password" th:placeholder="#{login.password}" \>
<div>
<label>
<input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
</label>
</div>
<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="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
<a class="btn btn-sm" th:href="@{/toLoginPage(1='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/toLoginPage(1='en_US')}">English</a>
</form>
</body>
</html>
这里我们基本就完成了，但是在访问中文的时候会出现乱码现象。
我们打开idea的file->settings->file Encodings.
将Default encoding for properties的编码改为utf-8，同时勾选Transparentnative-to-ascii conversion
然后我们重新编写login.properties和其他相关的
login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录
但是这种方法1只对当前项目有效。下次创建还是使用GBK编码
总结本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。
....