IDEA spring-boot简单实现国际化

「爱情、让人受尽委屈。」 2023-06-28 15:27 38阅读 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) {
    
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20

**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();
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23

**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”;  
\}  
\}

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30

> ## 四、写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”>&copy; 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>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46
 *  47
 *  48
 *  49
 *  50
 *  51

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

spring.messages.basename=i18n.login
    
     
      
     
      
       1

> ## 六、测试 ##

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

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

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

> ## 七、乱码问题 ##

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

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

</div>
                <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
                                                <div class="more-toolbox">
                <div class="left-toolbox">
                    <ul class="toolbox-list">
                        
                        <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                            <use xlink:href="#csdnc-thumbsup"></use>
                        </svg><span class="name">点赞</span>
                        <span class="count"></span>
                        </a></li>
                        <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-csdnc-Collection-G"></use>
                        </svg><span class="name">收藏</span></a></li>
                        <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-csdnc-fenxiang"></use>
                        </svg>分享</a></li>
                        
                                                
                                                <li class="tool-item tool-more">
                            <a>
                            <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                            </a>
                            <ul class="more-box">
                                <li class="item"><a class="article-report">文章举报</a></li>
                            </ul>
                        </li>
                                            </ul>
                </div>
                            </div>
            <div class="person-messagebox">
                <div class="left-message"><a href="https://blog.csdn.net/hyunbar">
                    <img src="https://profile.csdnimg.cn/D/F/2/3_hyunbar" class="avatar_pic" username="hyunbar">
                                            <img src="https://g.csdnimg.cn/static/user-reg-year/1x/4.png" class="user-years">
                                    </a></div>
                <div class="middle-message">
                                        <div class="title"><span class="tit"><a href="https://blog.csdn.net/hyunbar" data-report-click="{"mod":"popu_379"}" target="_blank">hyunbar</a></span>
                                            </div>
                    <div class="text"><span>发布了181 篇原创文章</span> · <span>获赞 97</span> · <span>访问量 28万+</span></div>
                </div>
                                <div class="right-message">
                                            <a href="https://im.csdn.net/im/main.html?userName=hyunbar" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
                        </a>
                                                            <a class="btn btn-sm  bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a>
                                    </div>
                            </div>
                    </div>

[70]: https://img-blog.csdn.net/20181001152803229?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181001153338843?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20181001153419299?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20181001153546960?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20181001153916282?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20181001154050299?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20181001154327913?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20181001155059347?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: https://img-blog.csdn.net/20181001155432562?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 9]: https://img-blog.csdn.net/20181001161115930?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 10]: https://img-blog.csdn.net/20181001162432681?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 11]: https://img-blog.csdn.net/20181001162641384?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 12]: https://img-blog.csdn.net/20181001163205889?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 13]: https://img-blog.csdn.net/20181001163550315?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 14]: https://img-blog.csdn.net/20181001163805599?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5dW5iYXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70