SpringBoot的Web开发入门案例2—国际化

阳光穿透心脏的1/2处 2023-05-22 04:35 81阅读 0赞

**SpringBoot的Web开发入门案例2—国际化**

改造logintest项目：[SpringBoot的Web开发入门案例1][SpringBoot_Web_1]  
地址：https://blog.csdn.net/BLU\_111/article/details/105461258

1.  resources目录下新建 **i18n** 文件夹
2.  创建 **login.properties** 默认中文资源文件

login.title=\u7528\u6237\u767B\u5F55
    login.uname=\u7528\u6237\u540D/\u90AE\u7BB1
    login.pwd=\u5BC6\u7801
    login.loginBtn=\u767B\u5F55
    login.registBtn=\u6CE8\u518C

1.  创建 **login\_zh\_CN.properties** 中文资源文件（和**login.properties**文件内容一致）

login.title=\u7528\u6237\u767B\u5F55
    login.uname=\u7528\u6237\u540D/\u90AE\u7BB1
    login.pwd=\u5BC6\u7801
    login.loginBtn=\u767B\u5F55
    login.registBtn=\u6CE8\u518C

1.  创建 **login\_en\_US.properties** 英文资源文件

login.title=Login In
    login.uname=uname/email
    login.pwd=passwd
    login.loginBtn=Login
    login.registBtn=Register

1.  修改 **application.yml** 配置文件，添加资源文件路径配置

server:
      port: 8088
    
    spring:
      thymeleaf:
        cache: false
    
      messages:
        basename: i18n/login

1.  改造 **login.html** ，添加中英文切换超链接，以 **“用户登录”** 为例，通过 **th:text="\#\{login.title\}** 替换成对资源文件值的引用。

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8"></meta>
    <title>Spring Boot Web 开发测试</title>
    <link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}" />
    <script type="text/javascript" th:src="@{webjars/jquery/1.11.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <script type="text/javascript"> $(function() { $("#loginbtn").click(function() { var loginName = $("#loginName"); var password = $("#password"); var msg = ""; if (loginName.val() == "") { msg = "登录名不能为空!"; loginName.focus(); } else if (password.val() == "") { msg = "密码不能为空!"; password.focus(); } 62 if (msg != "") { alert(msg); } else { $("#loginform").submit(); } }) }) </script>
    </head>
    <body>
    	<div class="container">
    		<div class="row">
    			
    			<div class="page-header">
    				<h2 th:text="#{login.title}">用户登录</h2>
    				<form class="form-horizontal" action="login" method="post" id="loginform">
    					<div class="form-group">
    						<div class="input-group col-md-4">
    							<span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i>
    							</span> <input class="form-control" placeholder="用户名/邮箱" type="text" name="loginName" id="loginName" th:placeholder="#{login.uname}" />
    						</div>
    					</div>
    					<div class="form-group">
    						<div class="input-group col-md-4">
    							<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input class="form-control" placeholder="密码" type="password" name="password" id="password" th:placeholder="#{login.pwd}" />
    						</div>
    					</div>
    					<p th:if="${not #strings.isEnpty(errorMsg)}" style="color: red">[[${errorMsg}]]</p>
    					<div class="form-group">
    						<div class="col-md-4">
    							<div class="btn-group btn-group-justified">
    								<div class="btn-group">
    									<button type="button" class="btn btn-success" id="loginbtn">
    										<span class="glyphicon glyphicon-log-in" th:text="#{login.loginBtn}"></span> 
    									</button>
    								</div>
    								<div class="btn-group">
    									<button type="button" class="btn btn-danger" id="registerbtn">
    										<span class="glyphicon glyphicon-edit" th:text="#{login.registBtn}"></span> 
    									</button>
    								</div>
    							</div>
    						</div>
    					</div>
    				</form>
    				<div>
    					<div>
    						<a href="/toLogin?lang=zh_CN">中文</a> <a href="/toLogin?lang=en_US">英文</a>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

1.  创建MyLocaleResolver类，该类继承自LocaleResolver，并 implement 两个方法，具体只需实现**resolveLocale(HttpServletRequest request)** 方法：

package com.blu.util;
    
    import java.util.Locale;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.util.StringUtils;
    import org.springframework.web.servlet.LocaleResolver;
    
    public class MyLocaleResolver implements LocaleResolver { 
    
    	@Override
    	public Locale resolveLocale(HttpServletRequest request) { 
    		String lang = request.getParameter("lang");
    		Locale local = Locale.getDefault();
    		if (!StringUtils.isEmpty(lang)) { 
    			String[] lan = lang.split("_");
    			local = new Locale(lan[0], lan[1]);
    		}
    		return local;
    	}
    
    	@Override
    	public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) { 
    		
    	}
    }

1.  为了使 **MyLocaleResolver** 类生效，需要创建一个配置类 **MyConfig** (注意这里的方法名只能叫 **localeResolver()** )

package com.blu.conf;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.LocaleResolver;
    
    import com.blu.util.MyLocaleResolver;
    
    @Configuration
    public class MyConfig { 
    	
    	/* * ! 注意这里的方法名只能叫localeResolver() */
    	
    	@Bean
    	public LocaleResolver localeResolver() { 
    		return new MyLocaleResolver();
    	}
    }

1.  改造完成，启动项目，访问：http://localhost:8088/toLogin  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70]
2.  点击英文超链接可切换语言为英文  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 1]

[SpringBoot_Web_1]: https://blog.csdn.net/BLU_111/article/details/105461258
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70]: /images/20230521/9b2968c84eaf4da78d976df5e088fbb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70 1]: /images/20230521/5a76a6f7739e41cea3fbfe08a36338fc.png