HTML（JS）+SOA+MongoDB简易架构实践经验

最新推荐文章于 2022-11-03 10:22:45 发布

肖永威

最新推荐文章于 2022-11-03 10:22:45 发布

阅读量1.9k

点赞数

分类专栏：云计算文章标签： mongodb soa html javascript paas

本文链接：https://blog.csdn.net/xiaoyw71/article/details/51513082

版权

云计算专栏收录该内容

21 篇文章 1 订阅

订阅专栏

在基于PaaS云架构项目实施过程中，逐步积累了出MongoDB使用场景，以及快速实施简易SOA框架。

1. HTML（JS）+SOA+MongoDB简易架构

HTML（JS）+SOA+MongoDB简易架构由列表页和编辑页构成，技术层次为：

这里写图片描述

在此架构中，对MongoDB的增删改查操作，都已经封装到JavaScript代码中。参考后续JavaScript代码样例。

但是，如有特殊的业务逻辑，需要单独增加或修改对应的代码，不建议修改代码，此架构只适应对MongoDB的增删改查操作。

层次	功能及描述	技术内容
展现层	数据列表页和编辑明细页	HTML+CSS+JS（Bootstrap+JQuery）
业务层	表单业务处理	客户端JavaScript+Webservice
控制层	提供SOA服务	Soap Webservice（Cordys BOP平台提供ESB）
数据接口	后台数据处理	Java程序，并提供Webservice接口服务
数据层	存储表单数据	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
                    });