页面国际化使用

39次阅读

共计 1716 个字符,预计需要花费 5 分钟才能阅读完成。

4. 页面国际化使用

​ 打开项目 templates 模板文件夹中的用户登录页面 login.html,结合 Thymeleaf 模板引擎实现国际化功能

html

<!DOCTYPE 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>

<body class=”text-center”>

<!– 用户登录 form 表单 –>

<form class=”form-signin”>

<img class=”mb-4″ th:src=”@{/login/img/login.jpg}” width=”72″ height=”72″>

<h1 class=”h3 mb-3 font-weight-normal” th:text=”#{login.tip}”> 请登录 </h1>

<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>

<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>

中文

English

</form>

</body>

</html>

“`

​ 使用 Thymeleaf 模板的 #{}消息表达式设置了国际化展示的部分信息。在对记住我 rememberme 国际化设置时,需要国际化设置的 rememberme 在 <input> 标签外部,所以这里使用了行内表达式 [[#{login.rememberme}]] 动态获取国际化文件中的 login.rememberme 信息。另外,在 <form> 表单尾部还提供了中文、English 手动切换语言的功能链接,在单击链接时会分别携带国家语言参数向“/”路径请求跳转,通过后台定制的区域解析器进行手动语言切换

  1. 整合效果测试

[image-20200103113754723](./images/image-20200103113754723.png)

​[image-20200103113810691](./images/image-20200103113810691.png)

​ 单击“English”链接进行语言国际化切换时携带了指定的“l=zh_CN”参数,后台定制的区域解析器配置类 MyLocalResovel 中的解析方法会根据定制规则进行语言切换,从而达到了手动切换国际化语言的效果

刚学了拉勾教育的《Java 工程师高薪训练营》,看到刚学到的点就回答了。希望拉勾能给我推到想去的公司,目标:字节!!

正文完
 0