IDEA spring-boot简单实现国际化

水深无声 2022-05-09 05:08 248阅读 0赞

> ## 一、创建springboot项目 ##

![在这里插入图片描述][70]

![在这里插入图片描述][70 1]

选择web模块

![在这里插入图片描述][70 2]

模板引擎选择 Thymeleaf，也可以自己在pom文件中自己引用

![在这里插入图片描述][70 3]

> ## 二、添加Jquery,和Bootstrap ##

百度搜索webjar，进入官网  
![在这里插入图片描述][70 4]

把依赖拷贝下来放在pom文件中，当然可以选择自己要的版本

![在这里插入图片描述][70 5]  
可以设置thymeleaf的版本  
thymeleaf-layout是布局的功能

`thymeleaf-layout只有2.0以上的版本才支持thymeleaf 3.0`  
![在这里插入图片描述][70 6]

> ## 三、Java类，及修改默认配置，注册组件 ##

新建三个包

![在这里插入图片描述][70 7]

**1. component包新建MyLocaleResolver类**  
**用来重写默认国际化设置，可以通过点击中文，Englist来转换，而且不会受浏览器语言的限制**

![在这里插入图片描述][70 8]

public class MyLocaleResolver implements LocaleResolver {
    
        @Override
        public Locale resolveLocale(HttpServletRequest httpServletRequest) {
    	   //获取我们自己传入的参数
            String parameter = httpServletRequest.getParameter("l");
            //如果没有传入，就返回默认的
            Locale locale  = Locale.getDefault();
            if(!StringUtils.isEmpty(parameter)){
                 String[] split = parameter.split("_");
                 locale= new Locale(split[0],split[1]);
            }
            return locale;
        }
    
        @Override
        public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
    
        }
    }

**2. config包新建MyMVCConfig**  
**来修改一下mvc的一些基本配置，修改登录页的位置**

@Configuration
    public class MyMVCConfig extends WebMvcConfigurerAdapter {
        @Bean//将组件注册到容器中
        public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
          WebMvcConfigurerAdapter adapter = new  WebMvcConfigurerAdapter(){
    
              @Override
              public void addViewControllers(ViewControllerRegistry registry){
    
                  //浏览器发送 /，/index.html最后都会到login
                  registry.addViewController( "/").setViewName("login");
                  registry.addViewController( "/index.html").setViewName("login");
              }
          };
          return  adapter;
        }
        //注册我们自己写的国际化设置
        @Bean//必须的
        public LocaleResolver localeResolver(){
            return  new MyLocaleResolver();
        }
    }

**3. 在controller包中新建HelloController  
写我们自己的控制器代码**  
注释的方法 可以忽略

//此处一定是Controller,如果是RestController，或者加上@ResponseBody，只能返回文本
    @Controller
    public class HelloController {
    //也可以在这里写一个方法配置login页，不用写2中的webMvcConfigurerAdapter
    //    @RequestMapping({"/","login.html"})
    //    public String login(){
    //        return "Login";
    //    }
    
    
        @ResponseBody
        @RequestMapping("/hello")
        public String hello(){
            return "Hello World";
        }
    
    //    @RequestMapping("/success")
    //    public String success(Model model){
    //        //classpath:/templates/success.html
    //        //map.put("hello","快出来");
    //        model.addAttribute("hello","粗来");
    //        return "success";
    //    }
        @RequestMapping("/success")
        public String success(Map<String,Object> map){
            map.put("hello","原来是@RestController的问题");
            return "success";
        }
    }

> ## 四、写resources ##

![在这里插入图片描述][70 9]

1.  在static中新建asserts文件夹，把bootstrap的js和css放在里面
2.  在i18n中新建->Resource Bundle->叫做login

新建三个properties文件,第一个就是默认的  
![在这里插入图片描述][70 10]

随便选一个进去，选择Resource Bundle，然后新建一个自己需要的，后面就会有默认，中文，英文的，自己添加OK

![在这里插入图片描述][70 11]  
4. bootstrap中登陆页面考进来

全部代码如下：  
里面该有的解释都有  
thymeleaf都是th：+ 属性来设置

<!doctype html>
    //引入命名空间 可以 对thymeleaf 提示
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
      <head>
        <meta 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="">
        //这个我没有弄
        <link rel="icon" href="../../../../favicon.ico">
    
        <title>Signin Template for Bootstrap</title>
    
        
        //这个在我们 引用的bootstrap外部库里面，从webjar开始
        <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.css}" rel="stylesheet">
    
        
        //我们自己的登陆css
        <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
      </head>
    
      <body class="text-center">
        <form class="form-signin">
          <img class="mb-4" src="https://getbootstrap.com/assets/brand/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 for="inputEmail" class="sr-only" th:text="#{login.username}">Email address</label>
            //国际化设置
          <input type="email" id="inputEmail" class="form-control" placeholder="Email address" th:placeholder="#{login.username}" required autofocus>
           //国际化设置
          <label for="inputPassword" class="sr-only" th:text="#{login.password}">Password</label>
            //国际化设置
          <input type="password" id="inputPassword" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required>
          <div class="checkbox mb-3">
            <label>
              //国际化设置
              <input type="checkbox" value="remember-me" />[[#{login.remember}]]
            </label>
          </div>
            //国际化设置
          <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
          <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
          //当点击中文或者Englist的时，会在index.html中加上L的参数，前面在config中我们已经设置了/和/index.html都会到登陆页面去就是login
          <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>
        </form>
      </body>
    </html>

> ## 五、在application.properties文件中加入我们写的i18n ##

spring.messages.basename=i18n.login

> ## 六、测试 ##

默认是中文的，即使把浏览器设置为英文，还是显示中文，  
**如果要跟随浏览器语言，就把自己写的MyLocaleResolver去掉，就可以根据浏览器语言来切换国际化**  
![在这里插入图片描述][70 12]

点击英文  
**注意我们浏览器地址的变化，还有那是个L**

![在这里插入图片描述][70 13]

> ## 七、乱码问题 ##

单个项目设置，setting->后面都一样  
全局设置，other setting-> File Encodings -> Properties Files ->选择UTF-8把后面转换的那个也勾上

![在这里插入图片描述][70 14]

[70]: /images/20220509/38d1924ff93840598f671bad2f352ff3.png
[70 1]: /images/20220509/fdbe8a9bb6a14725970e45c59895ae0c.png
[70 2]: /images/20220509/4bf10bdc50ec49c1a25f43a0b3123124.png
[70 3]: /images/20220509/7456052a29c846709d62589473d95b0c.png
[70 4]: /images/20220509/c7bf96be0c7c41928feed40ceaa1b836.png
[70 5]: /images/20220509/fb93c08218504f49bb1469f7523ca753.png
[70 6]: /images/20220509/a760bc73af0a4e678865d2dd390d03ec.png
[70 7]: /images/20220509/4620a17526184b308d68e69efb645c0b.png
[70 8]: /images/20220509/7cdf23d236f148dd80b980bb26394dfe.png
[70 9]: /images/20220509/c4dee6477d084465a6729417b40fb057.png
[70 10]: /images/20220509/b66350f5090b4ff2af6f26885ed7ba50.png
[70 11]: /images/20220509/e5054d07035c457c99caebe65ee8373e.png
[70 12]: /images/20220509/69b4e741e5414313a9c8e507542d6f24.png
[70 13]: /images/20220509/56c08d8135a54fcca5064b20e7419ef3.png
[70 14]: /images/20220509/ec086bf64bd54a85b03c7cc05265f1f3.png