使用velocity模板使javaWeb的html+js實現模塊化

頁面上一些基礎數據或者其他頁面經常用到部分，可以獨立出來做成小組件，組件預留調用入口，需要的頁面直接調用即可。

如圖，頁面中的展示分類和搜索標籤在多個頁面重複使用，可以將這部分內容獨立出來，做成組件，供後續開發調用：

classify_search_tag.html文件如下，其中包含HTML節點和Jquery代碼；

<!--
展示分類與搜索標籤組件使用說明：
    1.新增時父頁面調用方法：頁面加載時調用 goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一級展示分類 **/
    2.編輯時父頁面調用方法：頁面加載時調用 goodsClassifyAndSearchTag.getClassifyAndSearchTag(String classifys);
        ShowClassifyList類型json串，可參考 \js\standard_v2\group\group_edit.js  該方法 groupGoodsObj.getEditClassify();
    3.返回頁面選中的展示分類和搜索標籤，調用 goodsClassifyAndSearchTag.returnSelectedClassifyAndTag();
    注意事項：可能會出現js衝突問題，父頁面的js最好在文件頂部加載
-->
<!--展示分類-->
<div class="row form-horizontal">
    <div class="col-md-12">
        <div class="form-group">
            <label class="col-md-1 control-label pr0">展示分類</label>
            <div class="col-md-1">
                <select class="form-control" id="first_classify" οnchange="goodsClassifyAndSearchTag.getSecondClassify(this)">
                    <option value="0">請選擇</option>
                </select>
            </div>
            <div class="col-md-1">
                <select class="form-control" id="second_classify" οnchange="goodsClassifyAndSearchTag.getThirdClassify(this)">
                    <option value="0">請選擇</option>
                </select>
            </div>
            <div class="col-md-1">
                <select class="form-control" id="third_classify" οnchange="goodsClassifyAndSearchTag.getSearchTag(this)">
                    <option value="0">請選擇</option>
                </select>
            </div>
        </div>
    </div>
</div>
<!--搜索標籤-->
<div class="row mb15">
    <div class="col-md-12">
        <h2><small>搜索標籤：</small></h2>
    </div>
</div>
<div class="row form-horizontal" id="classify_template">
    <div class="col-md-12" name="tag_original">
        <div name="selectTagDom" id="selectTagDom"></div>
        <div name="commonTagDom" id="commonTagDom"></div>
    </div>
</div>
<!-- 展示分類模板 -->
<script id="classifyTemplate" type="text/x-jsrender">
    <option value="{{:id}}">{{:classilyName}}</option>
</script>
<!-- 普通標籤模板 -->
<script id="commonTagTemplate" type="text/x-jsrender">
    <div class="form-group">
        <label class="col-md-1 control-label pr0">{{:optionName}}</label>
        <div class="col-md-9">
            {{for optionValues}}
                <label class="checkbox-inline">
                    {{if checked==true}}
                        <input type="checkbox" checked name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}'>
                    {{else}}
                        <input type="checkbox" name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}'/>
                    {{/if}}
                    <span>{{: #data.value}}</span>
                </label>
            {{/for}}
        </div>
    </div>
</script>
<!-- 級聯標籤模板 -->
<script id="selectTagTemplate" type="text/x-jsrender">
    <div class="form-group" id='label_{{:optionId}}' valueid='{{:valueId}}'>
        <label class="col-md-1 control-label pr0">{{:optionName}}</label>
        <div class="col-md-9">
            {{for optionValues}}
                <label class="checkbox-inline">
                    {{if checked==true}}
                        <input type="checkbox" checked name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' οnclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'>
                    {{else}}
                        <input type="checkbox" name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' οnclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'/>
                    {{/if}}
                    <span>{{: #data.value}}</span>
                </label>
            {{/for}}
        </div>
    </div>
</script>
<!-- 級聯子標籤模板 -->
<script id="childOptionTemplate" type="text/x-jsrender">
    <div class="form-group" name='label_{{:optionId}}' valueId='{{:valueId}}'>
        <lable class="col-md-1 control-label pr0">{{:optionName}}</lable>
        <div class="col-md-9">
            {{for optionValues}}
                <label class="checkbox-inline">
                    <input type="checkbox" name='{{:#parent.parent.data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' οnclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'/>
                    <span>{{: #data.value}}</span>
                </label>
            {{/for}}
        </div>
    </div>
</script>
<!--展示分類和搜索標籤相關處理js代碼開始-->
<script>

    /**
     * 展示分類和搜索標籤對象
     * @type {{index: {index: number}, getEditClassify: goodsClassifyAndSearchTag."getEditClassify"}}
     */
    var goodsClassifyAndSearchTag = {
        "index": 1,
        "getFirstLevelClassify": function () { /** 獲取一級展示類目,新增時父頁面調用入口 **/
        var url = '/showClassify/getClassifyByPid?pid=' + 0;
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {
                $("#first_classify").append($("#classifyTemplate").render(value));
            });
            commonJS.loading("close");
        },
        "getSecondClassify": function (e) { /** 獲取二級展示類型 **/
        $("#second_classify").html("<option value='0'>請選擇</option>");
            $("#third_classify").html("<option value='0'>請選擇</option>");
            $("#commonTagDom").html("");
            $("#selectTagDom").html("");
            if($(e).val() == 0){
                return;
            }
            var url = '/showClassify/getClassifyByPid?pid=' + $(e).val();
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {
                $("#second_classify").append($("#classifyTemplate").render(value));
            });
            commonJS.loading("close");
            goodsClassifyAndSearchTag.getSearchTag(e);
        },
        "getThirdClassify": function (e) {
            $("#third_classify").html("<option value='0'>請選擇</option>");
            $("#commonTagDom").html("");
            $("#selectTagDom").html("");
            if($(e).val() == 0){
                return;
            }
            var url = '/showClassify/getClassifyByPid?pid=' + $(e).val();
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {
                $("#third_classify").append($("#classifyTemplate").render(value));
            });
            commonJS.loading("close");
            goodsClassifyAndSearchTag.getSearchTag(e);
        },
        "getSearchTag": function (e) {
            $("#commonTagDom").html("");
            $("#selectTagDom").html("");
            var classifyId = $(e).val();
            if(0 == classifyId){
                return;
            }
            goodsClassifyAndSearchTag.getClassifyCommonSearchOption(e);
            goodsClassifyAndSearchTag.getClassifySelectedSearchOption(e);
        },
        "getClassifyCommonSearchOption": function (e) { /** 查詢當前分類的所有普通標籤 **/
        var classifyId = $(e).val();
            var url = '/searchTag/getCommonOptionByClassifyId?classifyId=' + classifyId;
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {

                $("div[name='commonTagDom']").html($("#commonTagTemplate").render(value));
                var commonRadios = $("div[name='commonTagDom']").find("input[type='checkbox']");
                $.each(commonRadios, function (n, commonRadio) {
                    var newName = goodsClassifyAndSearchTag.index + "_" + $(commonRadio).attr("name");
                    $(commonRadio).attr("name", newName);
                });
            });
            commonJS.loading("close");
        },
        "getClassifySelectedSearchOption": function (e) { /** 查詢當前分類的所有一級級聯搜索標籤 **/
        var classifyId = $(e).val();
            var url = '/searchTag/getSelectedOptionByClassifyId?classifyId=' + classifyId + "&pid=0";
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {
                $("div[name='selectTagDom']").html($("#childOptionTemplate").render(value));
                var selectRadios = $("div[name='selectTagDom']").find("input[type='checkbox']");
                $.each(selectRadios, function (n, selectRadio) {
                    var newName = goodsClassifyAndSearchTag.index + "_" + $(selectRadio).attr("name");
                    $(selectRadio).attr("name", newName);
                });

            });
            commonJS.loading("close");
        },
        "getChildSelectOption": function (parentOptionId, valueId, e) { /** 根據標籤值id獲取下級標籤 **/
        var url = '/searchTag/getChildSelectedOptionByValueId?valueId=' + valueId;
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, method: "GET"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {
                if(value==null||value.length==0){
                    return;
                }
                var parent = $($(e).parents().parents()[1]);
                if(e.checked){
                    value[0]['valueId']=valueId;
                    var childHtml = $("#childOptionTemplate").render(value);
                    parent.after(childHtml);
                }else{
                    // 先刪除所有後面的兄弟節點
                    var divs=parent.nextAll('div');
                    goodsClassifyAndSearchTag.deleteOptionDiv(divs,valueId);
                }
            });
            commonJS.loading("close");
        },
        "deleteOptionDiv":function(divs,valueId){
            $.each(divs,function(key,obj){
                if($(obj).attr("valueid")==valueId){
                    var inputs=$(obj).find('input');
                    $.each(inputs,function(key1,obj1){
                        if(obj1.checked){
                            goodsClassifyAndSearchTag.deleteOptionDiv(divs,$(obj1).attr('valueid'));
                        }
                    });
                    $(obj).remove();
                }
            });
        },
        "getClassifyAndSearchTag": function (showClassifys) {//編輯時回寫搜索標籤，父頁面調用入口
            var url = "/standardGroupV2/getClassifyAndSearchTag";
            var param = {};
            param["showClassifyList"] = showClassifys.showClassifyList;
            var ajaxObj = {url: configJS.hostUrl() + url, async: true, param: {"showClassifys": JSON.stringify(param)}, method: "POST"};
            commonJS.loading("open");
            commonJS.sendAjaxRequest(ajaxObj, function (value) {
                $.each(value, function (n, obj) {
                    var html = $($("#classify_template").html());

                    var firstLevelHtml = '';
                    var secondLevelHtml = '';
                    var thirdLevelHtml = '';

                    $.each(obj.showClassifyJsons, function (n, val) {
                        if(val.level == 1){
                            if(val.checked == true){
                                firstLevelHtml += "<option selected value='"+val.id+"'>"+val.classilyName+"</option>";
                            }else{
                                firstLevelHtml += "<option value='"+val.id+"'>"+val.classilyName+"</option>";
                            }

                        }else if(val.level == 2){
                            if(val.checked == true){
                                secondLevelHtml += "<option selected value='"+val.id+"'>"+val.classilyName+"</option>";
                            }else{
                                secondLevelHtml += "<option value='"+val.id+"'>"+val.classilyName+"</option>";
                            }
                        }else if(val.level == 3){
                            if(val.checked == true){
                                thirdLevelHtml += "<option selected value='"+val.id+"'>"+val.classilyName+"</option>";
                            }else{
                                thirdLevelHtml += "<option value='"+val.id+"'>"+val.classilyName+"</option>";
                            }
                        }
                    });
                    $("#first_classify").append(firstLevelHtml);
                    $("#second_classify").append(secondLevelHtml);
                    $("#third_classify").append(thirdLevelHtml);

                    // 加載普通標籤
                    $("div[name='commonTagDom']").html($("#commonTagTemplate").render(obj.commonTagOptionJsons));
                    // 加載級聯標籤
                    $("div[name='selectTagDom']").html($("#selectTagTemplate").render(obj.selectTagOptionJsons));
                });
            });
            commonJS.loading("close");
        },
        "returnSelectedClassifyAndTag":function () {
            // 獲取展示分類ID和搜索標籤
            var classifyName = '';
            var classifyId = $("#third_classify").val();
            $.each($("#third_classify").find("option"), function (n, val) {
                if (val.selected) {
                    classifyName = $(val).html();
                }
            });
            if (0 == classifyId) {
                classifyId = $("#second_classify").val();
                $.each($("#second_classify").find("option"), function (n, val) {
                    if (val.selected) {
                        classifyName = $(val).html();
                    }
                });
            }
            if (0 == classifyId) {
                classifyId = $("#first_classify").val();
                $.each($("#first_classify").find("option"), function (n, val) {
                    if (val.selected) {
                        classifyName = $(val).html();
                    }
                });
            }

            if (0 != classifyId) {
                var classify = {
                    "classifyId": 0,
                    'classifyName': '',
                    "searchTags": []
                }
                classify.classifyId = classifyId;
                classify.classifyName = classifyName;
                var selectTagDom = $("#selectTagDom");
                var commonTagDom = $("#commonTagDom");
                var selectTagsEle = selectTagDom.find("input[type='checkbox']");
                var commonTagsEle = commonTagDom.find("input[type='checkbox']");
                for (var i = 0; i < selectTagsEle.length; i++) {
                    if (selectTagsEle[i].checked) {
                        var searchTag = {};
                        var optionId = $(selectTagsEle[i]).attr("optionid");
                        var optionValueId = $(selectTagsEle[i]).attr("valueid");
                        searchTag.optionId = optionId;
                        searchTag.optionValueId = optionValueId;
                        classify.searchTags.push(searchTag);
                    }
                }
                for (var i = 0; i < commonTagsEle.length; i++) {
                    if (commonTagsEle[i].checked) {
                        var searchTag = {};
                        var optionId = $(commonTagsEle[i]).attr("optionid");
                        var optionValueId = $(commonTagsEle[i]).attr("valueid");
                        searchTag.optionId = optionId;
                        searchTag.optionValueId = optionValueId;
                        classify.searchTags.push(searchTag);
                    }
                }
                return classify;
            }
        }
    }
</script>

調用頁面的HTML文件中該模塊的位置用velocity引用該組件：

#parse("/classify_search_tag.html")

調用頁面的js文件中，調用入口方法即可：

新增調用

$(function () {
   goodsClassifyAndSearchTag.getFirstLevelClassify();/** 初始化一級展示分類 **/
});

編輯調用：

$(function () {
    goodsClassifyAndSearchTag.getClassifyAndSearchTag("需要的參數");/** 回顯展示類目以及搜索標籤 **/
});

獲取選中的返回值：

goodsClassifyAndSearchTag.returnSelectedClassifyAndTag()

常見問題：#parse（）方式引用模板文件，項目在本地可以正常運行，部署到Linux服務器後有時會出現資源找不到的問題，異常如下：

Request processing failed; nested exception is org.apache.velocity.exception.ResourceNotFoundException: Unable to find resource '/classify_search_tag.html'

可以用宏解決一下問題：

#macro指令用於定義一個VTL模板的重複代碼塊——宏

模板頁面：

#macro(classify_search_tag,參數1,參數2.。。。)//名稱必須，參數非必須
//頁面代碼塊
#end

調用：

#classify_search_tag()

yml配置文件需要制定模板文件的位置

spring:
velocity:
properties:
velocimacro:
permissions.allow.inline.to.replace.global: true
library: /templates/common/classify_search_tag.html

使用velocity模板使javaWeb的html+js實現模塊化

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

jersey_No WebApplication provider is present

使用velocity模板使javaWeb的html+js實現模塊化

Spring事件--Application Event

js和Java分別正則匹配小數點後多餘的0

mybatis插件分頁PageHelper

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結