J2EE 关于Web前端与服务端实现开发分离的实践 .

框架后台已经实现了基本的增删改查公共操作类,Action调用Service,再由Service调用公共数据库操作类。正在琢磨如何把数据传输到前台并以何种方式进行展示,而且目标是能很好的实现前端开发人员与后端开发人员工作的分离,实现通过既定好的接口进行交互。先做了一个小小的实践,是这样的。。。
大致思路是前后台传输使用具有固定结构的JSON字符串,JSON字符串中可以存在多个数据集,每个数据集有一个名字。前端与后端开发人员通过这个名字进行衔接。
并且前台使用JQuery封装了一个common.js文件用来初始化以及处理服务端传来的JSON字符串。

服务端:
通过查询返回 List list = (·····数据库中查询到的数据·····);
服务端 将list 放如Map中,键值为前端开发人员进行读取的名称。
然后将Map通过fastJson等类似工具库序列化为JSON字符串,存入request.setAttribute(······)

前端:
通过JSP中使用request.getAttribute(······)读取JSON,其实这里可以考虑固定这个getAttribute的参数值,作为框架的既定协议,然后将它放到类似COMMON.JSP中或者写入自定义标签。每个前端开发人员创建JSP的时候都要包含这个JSP或添加写好的自定义标签,由COMMON.JSP或者自定义标签将取得的JSON字符串格式化输出为一个JS对象,一个全局的JS对象。
我们取得的JSON中是一个由map("list",list)序列化成的固定结构的字符串。
这样我们可以在前端封装一些列固定的JS方法来将JSON中的数据渲染到我们想要的DOM元素中,以下JS代码将渲染数据到标签
<div id="list" spname="list" datalist="resultList" column="listTitleDic" loadingImg="true" ></div>     中。
以上标签中,spname:标签类型 datalist:对应map中的list的键值 :column:为读取数据字段键值对应的表头名称字典 loadingImg为是否显示滚动条图标选项。
使用这样的标签,前端开发人员就不需要写任何代码,连渲染数据的工作都是由框架集成的(下边代码)来完成的。

前端代码片段:
[javascript] view plaincopyprint?

  • $(document).ready(function(){  
  •     // 加载页面列表内容,因为我们标签的spname是list,之后我们可能还有select标签,checkbox标签等等,   
  •     loadList();  
  •     // loadSelect();   
  • });  
  •   
  • function loadList()  
  • {  
  •     if($('div[spname]="list"').length !== 0 ) // 判断如果存在属性名spname值为list的div元素则显示加载图标并查找全局的JSON数据集Map或进行异步读取   
  •     {    // 遍历spname为list的Div标签   
  •         $('div[spname]="list"').each(function(i){  
  •             var dsName = $.trim($(this).attr("ds"));  
  •             var currentDs = eval("dataJson.map." + dsName);// dataJson假定为我们的全局JSON数据变量   
  •             var jTemplateId = $.trim($(this).attr("jtemplate")); //我使用了JTemplate来渲染数据,模板文件通过这个属性值来进行设置,但是上边的标签没有包含jtemplate属性,在这里不包含jtemplate属性的标签默认是按照list的结构自动生成对应模板,免去前端人员操作模板的工作。   
  •             var ifShowLoadingImg = $.trim($(this).attr("loadingImg"));// 是否显示loading滚动条图片   
  •             if(currentDs == undefined)  
  •                 return true; // 如果JSON数据集中不存在当前dalist值则跳出此次循环继续判断下一个   
  •             if(ifShowLoadingImg == "true")  
  •           {  
  •                showLoadingImg(this); // 显示loading图片   
  •             }     
  •           if(jTemplateId == "")  
  •           {  
  •                jTemplateId = "defaultListTemplate";  
  •                $(this).attr("jtemplate",jTemplateId);  
  •           }  
  •               
  •           processJTemplate(this,currentDs); //通过jTemplate模板渲染数据   
  •         });  
  •     }  
  • }  
  •   
  •   
  • /**
  • *通过jTemplate模板渲染数据,参数:输入元素,datalist
  • **/  
  • function processJTemplate(elementToBeRender, datalistData)  
  • {  
  •     var jDefaultListTemplate;  
  •     elementToBeRender = $(elementToBeRender);  
  •     var columnDic = $.trim($(elementToBeRender).attr("column"));  
  •     // 若jtemplate值为defaultListTemplate则自动生成默认列表模板   
  •     if($.trim(elementToBeRender.attr("jtemplate")) == "defaultListTemplate")   
  •     {  
  •         var ifShowLoadingImg = $.trim($(elementToBeRender).attr("loadingImg"));  
  •         jDefaultListTemplate = generateDefaultListTemplate(columnDic, datalistData);  
  •         elementToBeRender.setTemplate(jDefaultListTemplate);  
  •         if(ifShowLoadingImg == "true")  
  •             setTimeout(function(){elementToBeRender.processTemplate(datalistData)},500);  
  •         else  
  •             elementToBeRender.processTemplate(datalistData);  
  •     }  
  •     else  
  •     {  
  •        // jDefaultListTemplate   
  •     }  
  • }  
  •   
  • /**
  • * 在传入的Dom元素中添加显示加载中GIF图片
  • **/  
  • function showLoadingImg(element)  
  • {  
  •     if(element == undefined)  
  •         return false;  
  •     var loadingImgUrl = basePath + "/apps/common/image/loading.gif"; // loading图片路径   
  •     var loadingImg = $("<img>"); // 加载滚动条图片   
  •     loadingImg.hide(); // 隐藏loading图片   
  •     loadingImg.attr('src',loadingImgUrl);  
  •     $(element).addClass("loadingImgAlignCenter"); // 设置容器为剧中显示   
  •     $(element).append(loadingImg);  
  •     loadingImg.show(); // 显示图片   
  •     return loadingImg;  
  • }  
  •   
  • /**
  • * 隐藏并删除loading图片
  • **/  
  • function hideLoadingImg(imgElement)  
  • {  
  •     $(imgElement).parent().removeClass("loadingImgAlignCenter");  
  •     $(imgElement).remove();  
  • }  
  •   
  • /**
  • * 根据传入datalistData生成默认的列表Template
  • **/  
  • function generateDefaultListTemplate(columnDic, datalistData)  
  • {  
  •     if(datalistData== undefined)  
  •         return false; // datalistData为空不做任何操作返回false   
  •     var templateString = new Array(); // 用于模板字符串拼接,头部   
  •     var templateTdsString = new Array(); // 用于模板字符串拼接,内容部分   
  •     templateString.push('<table class="gridTable" align="center" width="90%">');  
  •     templateString.push('<thead><tr>');  
  •     templateTdsString.push('<tbody>{#foreach $T.dataRows as record}<tr>');  
  •       
  •     $.each(datalistData[0], function(i,n){ // 取得数据集中第一行数据   
  •         if(columnDic != undefined)  
  •         {  
  •             var columnName = $.trim(eval(columnDic+"."+i));  
  •             if(columnName != "")  
  •             {  
  •                 templateString.push('<th>');  
  •                 templateString.push(columnName);  
  •                 templateString.push('</th>');  
  •             }         
  •             else  
  •             {  
  •                 templateString.push('<th>');  
  •                 templateString.push(i);  
  •                 templateString.push('</th>');  
  •             }  
  •             templateTdsString.push('<td>');  
  •             templateTdsString.push('{$T.record.');  
  •             templateTdsString.push(i);  
  •             templateTdsString.push('}');  
  •             templateTdsString.push('</td>');  
  •         }         
  •     });  
  •     templateString.push('</tr></thead>');  
  •     templateTdsString.push('</tr>{#/for}</tbody>')  
  •     return templateString.join('')+templateTdsString.join('') + '</table>';  
  • }//这里之所以只用字符串数组进行拼接是因为这样性能比较好,参考<a href="http://www.quirksmode.org/dom/innerhtml.html">http://www.quirksmode.org/dom/innerhtml.html</a>  


$(document).ready(function(){    // 加载页面列表内容,因为我们标签的spname是list,之后我们可能还有select标签,checkbox标签等等,    loadList();    // loadSelect();});function loadList(){    if($('div[spname]="list"').length !== 0 ) // 判断如果存在属性名spname值为list的div元素则显示加载图标并查找全局的JSON数据集Map或进行异步读取    {    // 遍历spname为list的Div标签        $('div[spname]="list"').each(function(i){            var dsName = $.trim($(this).attr("ds"));            var currentDs = eval("dataJson.map." + dsName);// dataJson假定为我们的全局JSON数据变量            var jTemplateId = $.trim($(this).attr("jtemplate")); //我使用了JTemplate来渲染数据,模板文件通过这个属性值来进行设置,但是上边的标签没有包含jtemplate属性,在这里不包含jtemplate属性的标签默认是按照list的结构自动生成对应模板,免去前端人员操作模板的工作。            var ifShowLoadingImg = $.trim($(this).attr("loadingImg"));// 是否显示loading滚动条图片            if(currentDs == undefined)                return true; // 如果JSON数据集中不存在当前dalist值则跳出此次循环继续判断下一个            if(ifShowLoadingImg == "true")          {               showLoadingImg(this); // 显示loading图片            }             if(jTemplateId == "")          {               jTemplateId = "defaultListTemplate";               $(this).attr("jtemplate",jTemplateId);          }                      processJTemplate(this,currentDs); //通过jTemplate模板渲染数据        });    }}/***通过jTemplate模板渲染数据,参数:输入元素,datalist**/function processJTemplate(elementToBeRender, datalistData){    var jDefaultListTemplate;    elementToBeRender = $(elementToBeRender);    var columnDic = $.trim($(elementToBeRender).attr("column"));    // 若jtemplate值为defaultListTemplate则自动生成默认列表模板    if($.trim(elementToBeRender.attr("jtemplate")) == "defaultListTemplate")      {        var ifShowLoadingImg = $.trim($(elementToBeRender).attr("loadingImg"));        jDefaultListTemplate = generateDefaultListTemplate(columnDic, datalistData);        elementToBeRender.setTemplate(jDefaultListTemplate);        if(ifShowLoadingImg == "true")            setTimeout(function(){elementToBeRender.processTemplate(datalistData)},500);        else            elementToBeRender.processTemplate(datalistData);    }    else    {       // jDefaultListTemplate    }}/*** 在传入的Dom元素中添加显示加载中GIF图片**/function showLoadingImg(element){    if(element == undefined)        return false;    var loadingImgUrl = basePath + "/apps/common/image/loading.gif"; // loading图片路径    var loadingImg = $("<img>"); // 加载滚动条图片    loadingImg.hide(); // 隐藏loading图片    loadingImg.attr('src',loadingImgUrl);    $(element).addClass("loadingImgAlignCenter"); // 设置容器为剧中显示    $(element).append(loadingImg);    loadingImg.show(); // 显示图片    return loadingImg;}/*** 隐藏并删除loading图片**/function hideLoadingImg(imgElement){    $(imgElement).parent().removeClass("loadingImgAlignCenter");    $(imgElement).remove();}/*** 根据传入datalistData生成默认的列表Template**/function generateDefaultListTemplate(columnDic, datalistData){    if(datalistData== undefined)        return false; // datalistData为空不做任何操作返回false    var templateString = new Array(); // 用于模板字符串拼接,头部    var templateTdsString = new Array(); // 用于模板字符串拼接,内容部分    templateString.push('<table class="gridTable" align="center" width="90%">');    templateString.push('<thead><tr>');    templateTdsString.push('<tbody>{#foreach $T.dataRows as record}<tr>');        $.each(datalistData[0], function(i,n){ // 取得数据集中第一行数据        if(columnDic != undefined)        {            var columnName = $.trim(eval(columnDic+"."+i));            if(columnName != "")            {                templateString.push('<th>');                templateString.push(columnName);                templateString.push('</th>');            }                   else            {                templateString.push('<th>');                templateString.push(i);                templateString.push('</th>');            }            templateTdsString.push('<td>');            templateTdsString.push('{$T.record.');            templateTdsString.push(i);            templateTdsString.push('}');            templateTdsString.push('</td>');        }           });    templateString.push('</tr></thead>');    templateTdsString.push('</tr>{#/for}</tbody>')    return templateString.join('')+templateTdsString.join('') + '</table>';}//这里之所以只用字符串数组进行拼接是因为这样性能比较好,参考<a href="http://www.quirksmode.org/dom/innerhtml.html">http://www.quirksmode.org/dom/innerhtml.html</a>
这样前端开发人员只要知道服务端传来的dataList名称即可使用一行标签显示一个列表了。只是刚刚开始尝试,也许想法不够成熟,希望多提意见:)

posted @ 2012-11-08 20:58  attitudedecidesall  Views(418)  Comments(0Edit  收藏  举报