小小白学Springboot(七)——Thymeleaf国际化页面

avatar
avatar
云惠网小编
2845
文章
1
评论
2021年4月6日05:17:55 评论 9 次浏览 6247字阅读20分49秒
摘要

ThymeleafThymeleaf常用标签语法实例测试国际化Thymeleaf常用标签有点像小程序和vue.js语法https://blog.csdn.net/weixin_45636641/article/details/108249715${…}来获取model中的变量#{…}来获取内置对象的值,配置文件中的值可通过这个获取@{…} 链接*{…}在循环中可使用该表达式表示当前循环的对象实例测试目录结构依赖引入<dependency> &

获得请求头自动传递的参数

目录结构
在这里插入图片描述

实例测试

总感觉这篇写的有点乱,是因为写到一半我出去玩的原因吗?????

有点像小程序和vue.js
在这里插入图片描述在这里插入图片描述

获取到传递的参数值

注意代码中 $、# 、@ 的使用区别

login.tip = 请登录
login.username = 请输入用户名
login.password = 请输入密码
login.button = 登录

默认的语言配置文件是 XXX.properties,因此,XXX.properties文件是必须要有的,后续再根据需要添加国家化文件。
eg.
拥有中英文两种语言的页面需有三个配置文件:
xxx.properties 、xxx_en_US.properties、xxx_zh_CN.properties

login_en_US.properties:

全局配置文件

package com.zknu.inter.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
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;
@Configuration
public class MyLocalResovel implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
String lang = httpServletRequest.getParameter("lang");
// 获取地址栏中传的参数
String header = httpServletRequest.getHeader("Accept-Language");
Locale locale = null;
if(!StringUtils.isEmpty(lang)){
String[] split = lang.split("_");
locale = new Locale(split[0],split[1]);
}
else {
String[] splits = header.split(",");
String[] split = splits[0].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 MyLocalResovel();
}
}
login.tip = Please sign in
login.username = username
login.password = password
login.button = Sign in
String header = httpServletRequest.getHeader("Accept-Language");
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

国际化后的前端
注意 @、$、# 的使用

依赖引入

建完之后长这样:
小小白学Springboot(七)——Thymeleaf国际化页面
遗留问题:
在建 zh_CN文件时,不管用哪种方法建都不会被组管理,其他的语言都可以被统一管理,中文繁体也可以被管理,只有 中文简体不可以,不知道是为什么,有没有人可以解答一下下。
在这里插入图片描述
国家化文件内容

Thymeleaf

  • Thymeleaf常用标签
  • 语法
  • 实例测试
    • 引入动态数据
    • 国际化
// header = zh-CN,zh;q=0.9
else {
String[] splits = header.split(",");
// splits = {zh-CN,zh} 
String[] split = splits[0].split("-");
//  split = {zh,CN}
locale = new Locale(split[0],split[1]);
}

定制解析器
用解析器完成国际化语言的展示。
在config包中建自定义配置类 MyLocalResovel,重写 LocaleResolver 接口中的 resolveLocale 方法

Thymeleaf常用标签

国际化


.img{
width: 140px;
height: 140px;
}
.sign{
margin: 60px auto;
/*background: #2b542c;*/
width: 800px;
height: 835px;
text-align: center;
}
.user{
width: 35%;
display: inline;
font-size: 18px;
height: 40px;
}
.year{
margin-top: 30px;
}
.lang{
margin-top: 30px;
margin-left: 20px;
font-size: 15px;
}

前端的 html 建于 templates 文件(模板文件夹)下,其余的css、js、images等文件建与static(静态资源文件夹)文件下

国家化文件是会被Spring用组的形式自动管理的

login.properties、login_zh.properties:

eg. lang = en_US
在这里插入图片描述

逐句分析下重写的 resolveLocale 方法
Locale 表示一个地区,每一个Locale都代表这一个特定的地区

注意!
控制类中的返回值其实是一个路径,要与 全局配置文件中的 prefix 相接,如果 prefix 写的是 /templates 那返回值就要写 /login

在resources下创建 i18n文件夹 ,用于存放多语言国家化文件。
国际化文件名命必须按照“ 文件前缀_语言代码_国家代码.properties”

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- href 中的路径都是默认从 static 开始的 -->
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/login.css}" rel="stylesheet">
</head>
<body>
<form  class="sign">
<img class="img-circle img" th:src="@{/login/images/hr.jpg}">
<h2>请登录</h2>
<div class="form-group">
<input type="text" class="form-control user" placeholder="请输入用户名">
</div>
<div class="form-group">
<input type="password" class="form-control user" placeholder="请输入密码">
</div>
<button class="btn btn-primary btn-block user" type="submit">登录</button>
<p class="text-center year">
@
<span th:text="${currentYear}">2018</span>
-
<span th:text="${currentYear}+1">2019</span>
</p>
<a class="lang"> 中文 </a>
<a class="lang"> English </a>
</form>
</body>
</html>

控制类
编写一个控制类用于访问页面和编写页面动态数据

https://blog.csdn.net/weixin_45636641/article/details/108249715
在这里插入图片描述
${…}来获取model中的变量,访问上下文中所有变量
#{…}来获取内置对象的值,配置文件中的值可通过这个获取
@{…} 链接
*{…}在循环中可使用该表达式表示当前循环的对象

启动项目(运行启动类),访问 localhost:8080/login
在这里插入图片描述
发现静态页面中的2018-2019已被 控制类中的year代替,实现了动态数据的显示

eg. header = zh-CN,zh;q=0.9
在这里插入图片描述

语法

在这里插入图片描述
在这里插入图片描述

前端页面效果
在这里插入图片描述

package com.zknu.inter.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Calendar;
@Controller
public class LoginController {
@GetMapping("/login")   // 访问路径
public String  getYear(Model model){
model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));   // 获取当前年份
return "login";   // 将值返回到login.html的路径
// 与配置文件中的 prefix 相接   /templates/login
}
}

login.css
(我已经很久没有敲前端了,敲的时候太费劲了,所以css都用的是比较简单的东西)

lang字符串为空 ,即没有进行手动传参,则根据浏览器的设置选择默认语言。
返回一个 语言为 zh 国家为 CN 的对象。

StringUtils 是String 类型操作方法的补充,比原生String操作字符串更安全。
如果 lang 不为空,用 _ 截取字符串
new Locale(split[0],split[1]) 创建了一个语言为 en 国家是 US 的对象

String lang = httpServletRequest.getParameter("lang");

引入动态数据


spring.thymeleaf.cache=false   		# 是否启用缓存
spring.thymeleaf.encoding=UTF-8		# 模板编码
spring.thymeleaf.mode=HTML			# 模板模式
spring.thymeleaf.prefix=classpath:/templates/	# 模板路径,路径默认从resources开始
spring.thymeleaf.suffix=.html    	# 模板后缀

属性与前端页面相对应

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/login.css}" rel="stylesheet">
</head>
<body>
<form  class="sign">
<img class="img-circle img" th:src="@{/login/images/hr.jpg}">
<h2 th:text="#{login.tip}">请登录</h2>
<div class="form-group">
<input type="text" class="form-control user" th:placeholder="#{login.username}">
</div>
<div class="form-group">
<input type="password" class="form-control user" th:placeholder="#{login.password}">
</div>
<button class="btn btn-primary btn-block user" type="submit" th:text="#{login.button}">登录</button>
<p class="text-center year">
@
<span th:text="${currentYear}">2018</span>
-
<span th:text="${currentYear}+1">2019</span>
</p>
<a class="lang" th:href="@{/login(lang='zh_CN')}"> 中文 </a>
<a class="lang" th:href="@{/login(lang='en_US')}"> English </a>
<!--  href 中的 (lang=XXX) 是thymeleaf的传参方式,如同 PHP 用 ? 传参一样-->
</form>
</body>
</html>

实现页面中英文的切换
在这里插入图片描述


前端代码
html
用了 Bootstrap框架,比较简单就不多写了,可以去菜鸟教程学下,很简单的
https://www.runoob.com/bootstrap/bootstrap-tutorial.html

语言代码 和 国家代码:
https://blog.csdn.net/asty9000/article/details/81294846?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

// lang = en_US
if(!StringUtils.isEmpty(lang)){
String[] split = lang.split("_");
//  split= {en,US}
locale = new Locale(split[0],split[1]);
}

本文转自 https://blog.csdn.net/weixin_44162239/article/details/115414902

腾讯云618
avatar
2w 字长文爆肝 JVM 经典面试题!太顶了! java

2w 字长文爆肝 JVM 经典面试题!太顶了!

如果你是中高级程序员,那我相信你一定被面试官问过JVM。下次再被问到JVM,你直接把老周的这篇文章丢给他吧!话不多说,让我们直接进入主题吧。JVM内存结构,常见异常,调优参数,调优...
JAVA初窥-DAY08 java

JAVA初窥-DAY08

JAVA初窥-DAY08面向过程与面向对象实例化及调用方法和成员变量面向过程与面向对象面向过程:注重的是某件事情过程中的每一个步骤的实现。面向对象:把面向过程中的每一个步骤交给一个...
腾讯云618
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: