HTML（JS）+SOA+MongoDB简易架构实践经验
来源：互联网 发布：联胜软件 编辑：程序博客网 时间：2024/05/18 00:25
在基于PaaS云架构项目实施过程中，逐步积累了出MongoDB使用场景，以及快速实施简易SOA框架。
1. HTML（JS）+SOA+MongoDB简易架构
HTML（JS）+SOA+MongoDB简易架构由列表页和编辑页构成，技术层次为：
在此架构中，对MongoDB的增删改查操作，都已经封装到JavaScript代码中。参考后续JavaScript代码样例。
但是，如有特殊的业务逻辑，需要单独增加或修改对应的代码，不建议修改代码，此架构只适应对MongoDB的增删改查操作。
其中：Web服务由Apache HTTP提供，SOA由Cordys平台提供。
2. 使用场景
使用场景主要用于简单的单业务配置，以及单业务表单，操作层次结构如下图所示：
表单（管理），是指业务管理中，业务管理者的操作界面，例如：党风廉政建设责任制民主测评业务，此业务管理员配置评测票、设置评测期等专业管理类界面。
3. 设计及实现
（1）、列表界面：my_biz_info_mongo.html/my_biz_info_mongo.js
（2）、数据保存框架页面：infoframe_mongo.html/infoframe_mongo.js
框架页面（infoframe_mongo.js）“保存”按钮调用子页面JS保存方法，如图中表单内容部分，为子页面。
/** * 保存/更新业务实例 * @param flag save OR update * @param hideAlert true时隐藏保存成功信息 * @returns {*} */function fSaveBizInstance(flag, hideAlert) { var dtd = $.Deferred(); if (fBeforeSaveBizInstance()) { ffIframeSaveMongo(flag).done(function () { alert("保存成功！"); }); } else { dtd.resolve(null); } return dtd; /** * 判断子页面是否验证成功 * @param flag save OR update * @returns {*} */ function ffIframeSaveMongo(flag) { return window.iframeWindow.saveBusiness(flag === 'save' ? '' : window.globalParam.mongoID, window.globalParam.bizRvsnNumber).done(function (res) { if (typeof res === 'number') { bValidateFlag = res === 0; } else { bValidateFlag = true; window.tmpParam.mongoID = $.cordys.utils.formatCordysAjaxNOMEntity(res); } window.tmpParam.bValidateFlag = bValidateFlag; }); }}子页面是通过工具绘制，并自动生成代码，其保存方法相对固定，只有特殊情况需要人工干预处理。以早先开发的10010短信审批流程的为例，保存代码如下：
function saveBusiness(oid, collections) { $("form").submit();//把serialize取不到的下拉列表和表单取出来 var str_dropdown=""; $.each($(".dropdown-toggle"),function(index,value){ if($(this).text().trim()!="请选择") str_dropdown += $(this).attr("name")+"="+$(this).text()+"&"; }); var str_table=""; $.each($(".table input"),function(index,value){ str_table += $(this).parent().parent().parent().parent().attr("name")+"="+$(this).val()+"&"; }); console.log(str_dropdown + str_table+$("form").serialize()); var i = 0; dtd = $.Deferred(); $("small").each(function(index, element) { if($(element).attr("data-fv-result")=="INVALID"||$(element).attr("data-fv-result")=="NOT_VALIDATED"){ i++; } }); if(parent.currentActivityAssignments){ if(parent.currentActivityAssignments.activityName == "业务执行人"){ i=0; } } if(i!=0){ dtd.resolve(i); return dtd; } var parameters = {}; if (oid) { parameters = { oid: oid, json: zss(), collection: collections } } else { parameters = { json: zss(), collection: collections } } return $.cordys.utils.sendCordysAjax({ method: "SaveOrEditMongo", namespace: "http://unicom.com/common/attachment", async: false, parameters: parameters }).done(function (res) { window.oid = $.cordys.utils.formatCordysAjaxNOMEntity(res); var bizId=$.cordys.utils.creatUUID(); });}此代码中，关于获取表单数据内容方法zss()[2]，可以参考早期遍历Document代码。
（3）、以党风廉政民主测评为例，数据存储管理设计如下图所示。
其中：打分表（定义），是独立存在的；打分周期管理表也是独立存在的，相当于登记要使用打分表；投票打分（实例）是与系统业务实例相关联的，表单本身在此简易框架内，存在架构关联。
（4）、构造树及Mongo列表的HTML页面my_biz_info_mongo.html如下，其中列表使用Bootstrap Table[1]，页面中列表表单定义为<table id="tableMongo">，页面主体HTML内容如下所示
：
<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=9,IE=10" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width= device-width,initial-scale=1"/> <title>显示流程信息</title> <link href="../../common/css/bootstrap.css" type="text/css" rel="stylesheet"/> ...</head><body><div class="dy_info1"> <!--主体内容--> <div class="row dy_con1" style="margin-bottom: 0;"> <!--左侧树部分--> <div class="col-md-62 tj_w1" style="padding-bottom: 0;"> <div class="ContentBg"> <!--left--------------------------------------------------------------> <div id="content" class="bg-lt" style="position: relative;background:#fff;min-height:835px;margin-bottom: 0;"> <div class="tree_pid_div"> <div class="li_title" style="position:absolute;top:3px;left:9px;" id="title"><!-- 从数据查处 --> </div> </div> <ul id="expmenu-freebie"> <li> <!-- Start Freebie --> <ul class="expmenu" id="expmenu"> </ul> <!-- End Freebie --> </li> </ul> </div> </div> </div> <!----> <div class="col-md-63 tj_w1"> <div class="bg-color"> <div class="bg"> <!--红条 第一个--> <div class="PicF"></div> <!--表头 输入框 第二个--> <!--业务信息--> <div class="col-md-611 lc_w1"> <!--表格内容--> <div style="width: 98%; margin: 20px auto 50px auto;"> <!--此处为表单宽度--> <div class="col-md-611 lc_w1"> <div class="dy_title1"> <img src="../../home/images/jt_img.png" style="margin-top: -8px;"/> <label class="dy_word">数据配置列表：</label> <span class="more"> <span id="addBtn"><input type="submit" value="新增" class="btn btn-danger IntBt2" id="add"/></span> <input type="submit" value="删除" class="btn btn-danger IntBt2" id="DeleteDraft"/> <span id="buttonCopy"></span> </span> </div> <div style="margin-top:10px"> <table id="tableMongo"> </table> </div> <div class="col-md-12 text-center"> <ul class="pagination" id="myPager"></ul> </div> </div> </div> </div> </div> </div> </div> </div></div></body><!-- 添加页面脚本代码 --><script src="../../common/js/jquery.min.js"></script><script src="../../common/js/rgdb.utils.js"></script><!-- 添加兼容性脚本 --><script src="../../business/process/js/html5shiv.min.js" type="text/javascript"></script><script src="../../business/process/js/respond.min.js" type="text/javascript"></script><!-- 添加自定义页面脚本代码 --><script src="../../common/layer/layer.js"></script><script type="text/javascript" src="js/my_biz_info_mongo.js" charset="UTF-8"></script></html>展现文档列表的表头，通过属性配置（获取配置Webservice方法为GetAttrParentByAttrTypeId），获取展现MongoDB存储的文档列表，截取部分JS代码如下：
$.cordys.utils.sendCordysAjax({ method: "GetAttrParentByAttrTypeId", namespace: "http://com.unicom.bopm/organization", parameters: { pageNumber:1, pageSize:100, attr_type_id:pid } }).done(function (rdate) { var res_value = $.cordys.utils.formatCordysAjaxQueryEntity(rdate); var V_JSON = "["; //全局变量 V_JSON += "{"+ "'field': 'state',"+ "'radio': true,"+ "'align': 'center',"+ "'valign': 'middle'"+ "},"; //循环结果集 var num = res_value.length; $.each(res_value,function(index,ele){ console.log("ele"); console.log(ele); if(index !== num-1){ V_JSON += "{"; V_JSON += "'title':'"+ele.ATTR_VALUE + "',"; V_JSON += "'field':'"+ele.ATTR_CODE+"'"; V_JSON += "},"; }else{ V_JSON += "{"; V_JSON += "'title':'"+ele.ATTR_VALUE + "',"; V_JSON += "'field':'"+ele.ATTR_CODE + "'"; V_JSON += "}"; } }); V_JSON += "]"; console.log(V_JSON); var date = eval('('+V_JSON+')'); console.log(date); $('#tableMongo').bootstrapTable({ columns: date, height: 550, clickToSelect: true, ajax: bizAjax, cache: false, sidePagination: "server", pagination: true, showRefresh: false, showColumns: false, showToggle: false });上述代码中$(‘#tableMongo’).与页面HTML定义对应。
参考：
[1]. bootstrap-table-examples / welcome.html
[2] . 《网页表单文档设计及技术实现》 肖永威 2015.05
[3]. 《可配置多级指标投票打分应用设计（3）》 肖永威 2016.05
0 0
- HTML（JS）+SOA+MongoDB简易架构实践经验
- 机试html+js简易计算器
- html+js简易计算器2
- 简易html+css+js计算器
- mongodb架构mongodb分片集群与简易…
- 架构（SOA）安全标准 过犹不及？
- SOA（面向服务架构）
- 互联网架构 SOA（Dubbo）
- 在线简易计算器源码[html+css+js]
- html+css+js 简易展开收起效果
- mongodb架构mongodb分片集群与简易搭建方案—ttlsa教程系列之mongodb(六)
- mongodb架构mongodb分片集群与简易搭建方案---ttlsa教程系列之mongodb
- SOA架构
- SOA架构
- SOA架构
- SOA架构
- SOA架构
- SOA 架构
- 临时变量调用拷贝构造函数的次数
- jquery获取自定义属性(attr和prop)实例介绍
- Spring内部bean实例
- swift 设置动画结束之后不移除
- LINK1123:failure during conversion to COFF:file invalid or corrupt
- HTML（JS）+SOA+MongoDB简易架构实践经验
- iOS：你真的理解你在用的自定义NSLog吗？
- 电话 短信
- 设计模式笔记-Prototype模式
- 绪论
- java.util.Properties.getProperty()方法实例
- Android Dialog对话框
- ISCC2016Basic Writeup
- springmvc4 相关注解的详细讲解
