最近公司要做网站国际化,花了一个星期做完了,来总结下

js国际化 就用i18n就好了

根据cookie来存储语言

/**
 * cookie操作
 */
var getCookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        var path = options.path ? '; path=' + options.path : '';
        var domain = options.domain ? '; domain=' + options.domain : '';
        var s = [cookie, expires, path, domain, secure].join('');
        var secure = options.secure ? '; secure' : '';
        var c = [name, '=', encodeURIComponent(value)].join('');
        var cookie = [c, expires, path, domain, secure].join('')
        document.cookie = cookie;
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

/**
 * 获取浏览器语言类型
 * @return {string} 浏览器国家语言
 */
var getNavLanguage = function(){
    if(navigator.appName == "Netscape"){
        var navLanguage = navigator.language;
        return navLanguage.substr(0,2);
    }
    return false;
};

/**
 * 设置语言类型: 默认为中文
 */
var i18nLanguage = "zh-CN";

/*
设置一下网站支持的语言种类
 */
var webLanguage = ['zh-CN', 'zh-TW', 'en'];

/**
 * 执行页面i18n方法
 * @return
 */
var execI18n = function(){
    /*
    获取一下资源文件名
     */
    var optionEle = $("#i18n_pagename");
    if (optionEle.length < 1) {
        console.log("未找到页面名称元素,请在页面写入\n <meta id=\"i18n_pagename\" content=\"页面名(对应语言包的语言文件名)\">");
        return false;
    };
    var sourceName = optionEle.attr('content');
    // sourceName = sourceName.split('-');
    /*
    首先获取用户浏览器设备之前选择过的语言类型
     */
    if (getCookie("userLanguage")) {
        i18nLanguage = getCookie("userLanguage");
    } else {
        // 获取浏览器语言
        var navLanguage = getNavLanguage();
        if (navLanguage) {
            // 判断是否在网站支持语言数组里
            var charSize = $.inArray(navLanguage, webLanguage);
            if (charSize > -1) {
                i18nLanguage = navLanguage;
                // 存到缓存中
                getCookie("userLanguage",navLanguage);
            };
        } else{
            console.log("not navigator");
            return false;
        }
    }
    /* 需要引入 i18n 文件*/
    if ($.i18n == undefined) {
        console.log("请引入i18n js 文件")
        return false;
    };

    /*
    这里需要进行i18n的翻译
     */
    jQuery.i18n.properties({
        name : sourceName, //资源文件名称
        path : basePath+'js/i18n/' + i18nLanguage +'/', //资源文件路径
        mode : 'map', //用Map的方式使用资源文件中的值
        language : i18nLanguage,
        callback : function() {//加载成功后设置显示内容
            // var insertEle = $(".i18n");
            // console.log(".i18n 写入中...");
            // insertEle.each(function() {
            //     // 根据i18n元素的 name 获取内容写入
            //     $(this).html($.i18n.prop($(this).attr('name')));
            // });
            // console.log("写入完毕");
            //
            // console.log(".i18n-input 写入中...");
            // var insertInputEle = $(".i18n-input");
            // insertInputEle.each(function() {
            //     var selectAttr = $(this).attr('selectattr');
            //     if (!selectAttr) {
            //         selectAttr = "value";
            //     };
            //     $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
            // });
            // console.log("写入完毕");
        }
    });
}

/*页面执行加载执行*/
$(function(){

    /*执行I18n翻译*/
    execI18n();

    /*将语言选择默认选中缓存中的值*/
    $("#language option[value="+i18nLanguage+"]").attr("selected",true);

    /* 选择语言 */
    $("#language").on('change', function() {
        var language = $(this).children('option:selected').val();
        console.log(language);
        getCookie("userLanguage",language,{
            expires: 30,
            path:'/'
        });
        location.reload();
    });
});

后端和页面的国际化就稍微麻烦点

public class MessageUtil {

    private  static WebApplicationContext applicationContext;

    public static void setApplicationContext(WebApplicationContext context){
        applicationContext=context;
    }

    public static String getMessage(String code, HttpServletRequest request){
        Locale locale=null;
        Object obj=request.getSession().getAttribute(SessionLocaleResolver.LOCALE_SESSION_ATTRIBUTE_NAME);
        Cookie[] cookies = request.getCookies();
        String language = "";
        for (Cookie cookie : cookies) {
            switch(cookie.getName()){
                case "userLanguage":
                    language = cookie.getValue();
                    break;
                default:
                    break;
            }
        }
        if(language!=null) {
            String [] lan=language.split("-");
            locale=new Locale(lan[0],lan[1]);
        }else {
            if (obj != null) {
                locale = (Locale) obj;
            } else {
                locale = request.getLocale();
                request.getSession().setAttribute(SessionLocaleResolver.LOCALE_SESSION_ATTRIBUTE_NAME, locale);
            }
        }
        return applicationContext.getMessage(code,null,locale);
    }
}

配置监听

配置过滤器

 <filter>
  <filter-name>SessionFilter</filter-name>
  <filter-class>com.mika.credit.web.rating.common.filter.I18NFilter</filter-class>
</filter>
public class I18NFilter implements Filter {
    private static final String COOKIE_LANGUAGE = "userLanguage";
    private static final String SYSTEM_LANGUAGE = "system_language";

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        String systemLanguage = getSystemLanguage(httpServletRequest);
        String [] lan=systemLanguage.split("_");
        Locale locale=new Locale(systemLanguage.substring(0,2),systemLanguage.substring(3));
        httpServletRequest.getSession().setAttribute(SessionLocaleResolver.LOCALE_SESSION_ATTRIBUTE_NAME, locale);
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
        System.out.println("init....");
    }

    private String getSystemLanguage(HttpServletRequest request) {
        String systemLanguage = null;
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if (COOKIE_LANGUAGE.equals(cookie.getName())) {
                    systemLanguage = cookie.getValue();
                    break;
                }
            }
        }

        if (systemLanguage == null || "".equals(systemLanguage)) {
            systemLanguage = request.getLocale().toString();
        }
        if (systemLanguage == null || "".equals(systemLanguage)) {
            systemLanguage = Locale.getDefault().toString();
        }
        return systemLanguage;
    }
 string message=MessageUtil.getMessage("login_fail",request)

jsp页面使用

<%@ taglib prefix="spring" uri="/WEB-INF/tld/spring.tld" %>
<spring:message code="Your_3ACredit_Card"/>

 

 

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值