使用velocity模板使javaWeb的html+js实现模块化
来源：互联网 发布：张国荣同款衣服淘宝 编辑：程序博客网 时间：2024/06/07 10:00
页面上一些基础数据或者其他页面经常用到部分，可以独立出来做成小组件，组件预留调用入口，需要的页面直接调用即可。
如图，页面中的展示分类和搜索标签在多个页面重复使用，可以将这部分内容独立出来，做成组件，供后续开发调用：
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" 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>调用页面的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
2 0
- 使用velocity模板使javaWeb的html+js实现模块化
- velocity模板的使用
- Velocity.js的使用
- Velocity.js的使用
- Velocity.js的使用
- HTML模块化：使用HTML5 Boilerplate模板
- js模块化的使用
- VELOCITY HTML 模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 使用 Velocity 实现客户端和服务器端模板
- 模块化js编写模板
- velocity模板的使用简单的语法
- linux下的文件的管道的最基本使用（代码）
- javascript元素相关属性和方法
- 关于android的那些事儿@@
- mysqlDDL操作
- VS2015 “GenerateResource”任务意外失败 解决方法
- 使用velocity模板使javaWeb的html+js实现模块化
- elasticsearch 集群配置
- Java设计模式之访问者模式
- Linux 守护进程的启动方法
- joda-time时间框架的使用
- x的平方根
- mybtais中的模糊查询
- 优先级队列与堆的关系
- 深度学习技术的应用和思考
