I18N的先後端實現

時間 2019-11-17

標籤 i18n 後端實現简体版

原文原文鏈接

所需工具：

一、Vue https://cn.vuejs.org/javascript

二、Vue-I18N https://www.npmjs.com/package/vue-i18nvue

PS:這種方法因爲使用到了Vue，因此部分Vue使用教程就不說了，請參考其餘文章。java

前期設置

一、構建兩個JSON語言字典，若是就中英文切換就分別構建 string_en.json 和string_zh.json，格式以下：ajax

二、讀取前一步驟建立的字典，並構造VueI18n元素npm

    //獲取本地語言包
    //異步獲取會沒有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來獲取、設置當前語言類型。json

PS：原理上，javascript是全部IO都是非阻塞式的，因此我這邊須要將getJson關閉異步，不知道有沒有更優化的，但願指出。bootstrap

三、將構造號的VueI18n元素綁定到Vue中，構造Vue元素。cookie

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

PS：2/3步驟中構造的vm和i18n都須要設置爲全局變量，這樣子後續js文件可使用到app

四、設置語言切換方法異步

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

經過步驟2能夠看到，咱們語言類型是經過cookie來控制的，那麼咱們只須要切換cookie並刷新頁面便可

頁面構建

頁面構建能夠分爲如下幾類：

一、靜態內容

若是是頁面靜態內容須要作I18N，這隻須要將本來內容替換成如下格式便可

本來頁面：

<h3>
   條
</h3>

修改頁面

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

其中的Unite.Strip就是咱們一開始設置的語言字典中的內容

二、元素屬性

若是咱們要修改頁面中的元素屬性，例如placeholder屬性，則須要進行如下修改

本來頁面

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

修改界面

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

三、js中使用

若是須要在json中使用，例如alert輸出，則進行如下替換

本來頁面

alert("你好")

修改頁面

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

四、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]);

});