JAVA SSM实现国际化 中英双语网站

一、思路

前段时间做了一个双语网站,记录一下自己实现国际化的方式。

实现国际化有两种方法。

1、第一种调用必应、百度、微软等翻译接口实时翻译。

  • 优点:对于开发者来说非常省时省力,在前端直接调用接口翻译,使用js保存cookie进行语言切换,翻译效果也还可以。
  • 缺点:每次切换页面最先显示的是中文,然后在翻译成其他语言,而且翻译插件都会自带一些弹出层,不好看,用户体验不好。

2、第二种是使用i18n配置结合英文数据库。静态内容走配置,动态内容存放在数据库中。

  • 优点:能够根据需求写入翻译过的内容,比第一种实时翻译更准确。
  • 缺点:每种语言都要写一个配置文件,后期维护麻烦,工作量巨大。

二、举例

1、谷歌翻译

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TranslateTool</title>
</head>
<body>
    <div>Just do it.</div>
    <!--谷歌翻译-->
    <div id="google_translate_element"></div>
    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
            }, 'google_translate_element');
        }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

效果:

2、必应翻译

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>Just do it.</div>
    <div>Just do it.</div>
    <div>Just do it.</div>
    <div>Just do it.</div>
    <div>Just do it.</div>
    <!--必应翻译-->
    <div id='MicrosoftTranslatorWidget' class='Dark' style='color:white;background-color:#555555'></div>
    <script type='text/javascript'>setTimeout(function () { { var s = document.createElement('script'); s.type = 'text/javascript'; s.charset = 'UTF-8'; s.src = ((location && location.href && location.href.indexOf('https') == 0) ? 'https://ssl.microsofttranslator.com' : 'http://www.microsofttranslator.com') + '/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from='; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); } }, 0);</script>
</body>
</html>

效果:

3、微软翻译

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>Just do it.</div>
    <!--微软翻译-->
    <div id="MicrosoftTranslatorWidget" style="width: 100%; min-height: 57px; border-color: #170D07;
        background-color: #362F2A;">
        <noscript>
            <a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2flocalhost%2f">
                Translate
                this page
            </a>
            <br />
            Powered by <a href="http://www.microsofttranslator.com">Microsoft® Translator</a>
        </noscript>
    </div>
    <script type="text/javascript">
        /* <![CDATA[ */setTimeout(function () {
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.charset = "UTF-8";
            s.src = "http://www.microsofttranslator.com/Ajax/V2/Widget.aspx"
                + "?mode=auto"
                + "&from=en"
                + "&layout=ts"
                + "&appId=<%= InteractiveSDK.Properties.Settings.Default.WidgetAppId %>";
            var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild);
        }, 0);
        /* ]]> */
    </script>
</body>
</html>

效果:

微软翻译我觉得太笨重,选择了比较轻量的必应翻译。使用了必应进行翻译觉得鼠标悬停在文字上背景图会变成淡黄色,这个弹出层也不好看

就把引用的js保存到本地,修改混淆后的css样式。折腾了大半天,终于去掉了难看的样式,本以为这样就完事了。回家打开网站一看翻译失效了,刚开始以为是下午调试太多,把免费翻译的量用完的原因,换了一个appid改上去就能用了。第二天到公司一看翻译又失效了,查了很多资料保存到本地后那个appid是会过期的。于是我就去官网尝试申请个appid,但是现在必应官网改了以后申请appid非常麻烦,还必须要外国的银行卡。。这我哪会有,太麻烦了果断放弃。

4、i18n配置+英文数据库

首先在src目录下新建两个名为xx_en_US.properties和xx_zh_CN.properties的配置文件。注意:两个文件的第一个下划线前的名字必须相同,后面的也不能出错,不然会导致找不到资源无法翻译。

 

我就拿注册页面来举例吧。

英文页面配置信息:

中文页面配置信息:

 

然后在jsp页面导入fmt标签

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
        String code=request.getParameter("code");
        if(code!=null){
            if("en".equals(code)){
                session.setAttribute("locale", Locale.US);
                session.setAttribute("code", "en");
            }
            else if("zh".equals(code)){
                session.setAttribute("locale", Locale.CHINA);
                session.setAttribute("code", "zh");
            }
        }
        
%>
    <c:if test="${sessionScope.locale!=null }">
        <fmt:setLocale value="${sessionScope.locale }"/>
    </c:if>
    <fmt:setBundle basename="register"/>
    <title><fmt:message key="title"/></title>

 上面代码就把标题title变成了双语。

 

 

注册页面的国际化就实现了。 

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值