使用velocity模板使javaWeb的html+js實現模組化
阿新 • • 發佈：2019-01-29
頁面上一些基礎資料或者其他頁面經常用到部分，可以獨立出來做成小元件，元件預留呼叫入口，需要的頁面直接呼叫即可。
如圖，頁面中的展示分類和搜尋標籤在多個頁面重複使用，可以將這部分內容獨立出來，做成元件，供後續開發呼叫：
classify_search_tag.html檔案如下，其中包含HTML節點和Jquery程式碼；
呼叫頁面的HTML檔案中該模組的位置用velocity引用該元件：<!-- 展示分類與搜尋標籤元件使用說明： 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" onchange="goodsClassifyAndSearchTag.getSecondClassify(this)"> <option value="0">請選擇</option> </select> </div> <div class="col-md-1"> <select class="form-control" id="second_classify" onchange="goodsClassifyAndSearchTag.getThirdClassify(this)"> <option value="0">請選擇</option> </select> </div> <div class="col-md-1"> <select class="form-control" id="third_classify" onchange="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}}' onclick='goodsClassifyAndSearchTag.getChildSelectOption({{: #data.optionId}}, {{: #data.id}}, this)'> {{else}} <input type="checkbox" name='{{: #data.optionId}}' optionid='{{: #data.optionId}}' valueid='{{: #data.id}}' onclick='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}}' onclick='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>
#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