美文网首页
7、SpringBoot之实现登陆界面的中英切换

7、SpringBoot之实现登陆界面的中英切换

作者: CodeGroup | 来源:发表于2019-06-25 17:47 被阅读0次

    项目地址:https://github.com/Chakid/SpringBoot-example

    1、第一步,创建一个SpringBoot项目

    2、导入资料中的一些写到的代码和静态页面

    1)在config文件中设置路由拦截:
    image

    2)、国际化

    1)、编写国际化配置文件;

    2)、使用ResourceBundleMessageSource管理国际化资源文件

    3)、在页面使用fmt:message取出国际化内容

    步骤:

    1)、编写国际化配置文件,抽取页面需要显示的国际化消息


    image.png

    然后我们将自己新建好的相关语言区域信息配合到页面上:
    如:

    <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" th:placeholder="#{login.username}" placeholder="Username" required="" autofocus="">
                <label class="sr-only" th:text="#{login.password}" >Password</label>
                <input type="password" class="form-control" th:placeholder="#{login.password}"  placeholder="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" th:text="#{login.btn}" type="submit">Sign in</button>
                <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
                <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>
    

    记得在上面加上thymeleaf标签

    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    

    此时,页面的语言配置会根据浏览器的语言自动进行渲染

    3、)下一步我们实现点击按钮实现语言的转换

    image.png

    首先我们新建一个自己的配置类 MyLocalResolver

    image

    此时我们的配置还不能起作用,还有下一步操作:


    image

    然后启动程序,就能进行语言切换了。
    默认打开页面:


    image

    点击中文:


    image

    点击英文:


    image

    相关文章

      网友评论

          本文标题:7、SpringBoot之实现登陆界面的中英切换

          本文链接:https://www.haomeiwen.com/subject/xvpjqctx.html