I18N的前后端实现

所需工具：

1、Vue                https://cn.vuejs.org/

2、Vue-I18N      https://www.npmjs.com/package/vue-i18n

PS:这种方法由于使用到了Vue，所以部分Vue使用教程就不说了，请参考其他文章。

前期设置

 1、构建两个JSON语言字典，如果就中英文切换就分别构建 string_en.json 和string_zh.json，格式如下：

                                      

2、读取前一步骤创建的字典，并构造VueI18n元素

    //获取本地语言包
    //异步获取会没有response，需要暂时关闭异步
    $.ajaxSettings.async = false;
    var dictions = {
        en: $.getJSON('/Scripts/i18n/languages/string_en.json').responseJSON,
        zh: $.getJSON('/Scripts/i18n/languages/string_zh.json').responseJSON
    }
    $.ajaxSettings.async = true;
    //如果当前Cookie中没有语言记录，默认为中文
    if ($.cookie('language') == null) {
        $.cookie('language', 'zh', { expires: 7, path: '/' });
        language = "zh";
    }
    else {
        language = $.cookie('language');
    }
    i18n = new VueI18n({
        locale: language, // 设置语言
        messages: dictions, // 设置字典
    })

可以看到我们会根据名为“language”的cookie来获取、设置当前语言类型。

PS：原理上，javascript是所有IO都是非阻塞式的，所以我这边需要将getJson关闭异步，不知道有没有更优化的，希望指出。

3、将构造号的VueI18n元素绑定到Vue中，构造Vue元素。

    vm = new Vue({
        i18n: i18n,
        data() {
            return {
                ReloadFlag: true
            }
        }
    }).$mount('#app_vue');

 

 PS：2/3步骤中构造的vm和i18n都需要设置为全局变量，这样子后续js文件可以使用到

 

 4、设置语言切换方法

    i18n.locale = (i18n.locale == "en" ? "zh" : "en");
    $.cookie(parameter.language, i18n.locale, { expires: 7, path: '/' });
    location.reload();

 

通过步骤2可以看到，我们语言类型是通过cookie来控制的，那么我们只需要切换cookie并刷新页面即可

 

页面构建

页面构建可以分为以下几类：

1、静态内容

如果是页面静态内容需要做I18N，这只需要将原本内容替换成以下格式即可

原本页面：

<h3>
   条
</h3>

 

修改页面

<h3>
    {{$t("Units.Strip")}}
</h3>

 

其中的Unite.Strip就是我们一开始设置的语言字典中的内容

2、元素属性

如果我们要修改页面中的元素属性，例如placeholder属性，则需要进行以下修改

原本页面

 <input type="text" name="name" placeholder="条" value="" />

 

修改界面

 <input type="text" name="name" :placeholder="$t('Units.Strip')" value="" />

 

3、js中使用

如果需要在json中使用，例如alert输出，则进行以下替换

原本页面

alert("你好")

 

修改页面

alter( i18n.messages[i18n.locale].SweetAlert['Hello'])

 

4、bootstrap-table语言

引用以下语言包即可

/**
 * Bootstrap Table Chinese translation
 * Author: Zhixin Wen<wenzhixin2010@gmail.com>
 */
$(function () {
    $.fn.bootstrapTable.locales[i18n.locale] = {
        formatLoadingMessage: function () {
            if (i18n.locale == "zh")
                return '正在努力地加载数据中，请稍候……';
            else
                return 'Loading, please wait...';
        },
        formatRecordsPerPage: function (pageNumber) {
            if (i18n.locale == "zh")
                return '每页显示 ' + pageNumber + ' 条记录';
            else
                return pageNumber + ' rows per page';
        },
        formatShowingRows: function (pageFrom, pageTo, totalRows) {
            if (i18n.locale == "zh")
                return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
            else
                return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' rows';
        },
        formatSearch: function () {
            if (i18n.locale == "zh")
                return '搜索';
            else
                return 'Search';
        },
        formatNoMatches: function () {
            if (i18n.locale == "zh")
                return '没有找到匹配的记录';
            else
                return 'No matching records found';
        },
        formatPaginationSwitch: function () {
            if (i18n.locale == "zh")
                return '隐藏/显示分页';
            else
                return 'Hide/Show pagination';
        },
        formatRefresh: function () {
            if (i18n.locale == "zh")
                return '刷新';
            else
                return 'Refresh';
        },
        formatToggle: function () {
            if (i18n.locale == "zh")
                return '切换';
            else
                return 'Toggle';
        },
        formatColumns: function () {
            if (i18n.locale == "zh")
                return '列';
            else
                return 'Columns';
        },
        formatExport: function () {
            if (i18n.locale == "zh")
                return '导出数据';
            else
                return 'Export data';

        },
        formatClearFilters: function () {
            if (i18n.locale == "zh")
                return '清空过滤';
            else
                return 'Clear filters';
        }
    };

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales[i18n.locale]);

});

 

使用要点/常见错误

1、Vue挂载节点内部不可以有style和scripts标签

2、Vue构造的js和页面的js引用顺序，确保Vue的构造js优先调用

 

PS：我想写.net core