idea-springBoot+ thymeleaf 登录页面国际化

最新推荐文章于 2022-12-12 11:34:08 发布

已退出

最新推荐文章于 2022-12-12 11:34:08 发布

阅读量826

点赞数 1

文章标签： spring boot 乱码经验分享

本文链接：https://blog.csdn.net/qq_34028292/article/details/105417554

版权

1、根据浏览器语言自动切换中英文

查看并修改idea的files encoding ，修改为UTF-8、勾选自动转为ascii码(防止修改完成后页面出现乱码)
在这里插入图片描述

2、resources下创建一个目录 i18n(国际化)、并且在该目录下创建对应页面的properties文件
，首先创建一个基础名称.properties，同时在i18n文件目录下创建一个基础名称_zh_CN.properties (表示简体中文对应的文件)结果如图
在这里插入图片描述
点击 Resource Bundle 'login’→new→Add property Files To Resource Bundle

输入en_US即可，打开任意一个基础名称_zh_CN.properties 或者基础名称_en_US.properties

在这里插入图片描述
**输入基础名称.xxxxx **

由于SpringBoot自动配置了国际化资源的组件所以我们只需要在配置文件中添加需要国际化的内容即可
填写内容规则为Resources目录下 xxx\xxx

application.yml如下
在这里插入图片描述
application.properties如下

修改2020年5月15日----这里修改为i18n\login否则读取不到打成jar包后运行程序会乱码
在页面上取得值（以 thymeleaf 模板引擎为例）
将需要修改的内容以 th:text="#{login.xxx}"进行覆盖 [[#{login.xxx}]]为行内写法

<!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">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="asserts/css/bootstrap.min.css " th:href="@{/webjars/bootstrap/4.4.1-1/css/bootstrap.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
	</head>
	<body class="text-center">
		<form class="form-signin" action="dashboard.html">
			<img class="mb-4" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
			<label class="sr-only" th:text="#{login.username}" >Username</label>
			<input type="text" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">
			<label class="sr-only" th:text="#{login.pwd}">Password</label>
			<input type="password" class="form-control" placeholder="Password" th:placeholder="#{login.pwd}" 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.submit}">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm">中文</a>
			<a class="btn btn-sm">English</a>
		</form>
	</body>
</html>

可对浏览器语言的设置切换中英文查看效果

2、点击连接修改页面中英文显示

修改需要变换的页面、并且携带参数 th:href="@{/xxxxx(l=‘zh_CN’)}

eg: th:href="@{/index.html(l=‘zh_CN’)}

			<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>

设置一个通过获取参数来修改地区和语言的LocaleResolver

package com.review.rustfulcrud.component;

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.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
//标注为一个配置类
@Configuration
public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        //获取默认的时区和语言
        Locale locale = Locale.getDefault();
        //从页面中获取参数
        String l = httpServletRequest.getParameter("l");
        //如果存在参数就把默认的时区和语言修改了，不存在则使用默认的
        if(!StringUtils.isEmpty(l)){
            //分割字符串 zh_CN
            String[] ls = l.split("_");
            locale = new Locale(ls[0],ls[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
    }
    //将组件加入到容器中
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
}

基础页面无样式代码如下

<!DOCTYPE html>
<html lang="en">
	<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">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="asserts/css/signin.css" rel="stylesheet">
	</head>

	<body class="text-center">
		<form class="form-signin" action="dashboard.html">
			<img class="mb-4" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
			<label class="sr-only">Username</label>
			<input type="text" class="form-control" placeholder="Username" required="" autofocus="">
			<label class="sr-only">Password</label>
			<input type="password" class="form-control" placeholder="Password" required="">
			<div class="checkbox mb-3">
				<label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm">中文</a>
			<a class="btn btn-sm">English</a>
		</form>

	</body>
</html>

详情可观看雷丰阳老师SpringBoot p34

已退出

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
idea-springBoot+ thymeleaf 登录页面国际化

1、根据浏览器语言自动切换中英文查看并修改idea的files encoding ，修改为UTF-8、勾选自动转为ascii码(防止修改完成后页面出现乱码)2、resources下创建一个目录 i18n(国际化)、并且在该目录下创建对应页面的properties文件，首先创建一个基础名称.properties，同时在i18n文件目录下创建一个基础名称_zh_CN.properties (表...
复制链接

扫一扫