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<[e-mail]>
 */
$(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