Java+web+jmeter接口监控平台开发以及搭建（三）

四.代码思路解析

• 回顾下需要实现的功能
  1.业务线可选择
  2.业务线选择完成后，加载上传文件控件并加载业务线下的所有jmx文件
  3.上传jmx至当前业务线
  4.执行当前业务线下的jmx文件
  5.统计执行结果，发送到相关工作人员邮箱

• 页面展示在之前的文章已经介绍过，这里就不说了，链接如下：https://www.jianshu.com/p/f7071c89690d

• 页面代码：

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <b><a class="navbar-brand">接口监控平台</a></b>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                    <a href="#" class="dropdown-toggle" id="dropDownToggleName"
                        data-toggle="dropdown"> 业务线选择 <b class="caret"></b>
                    </a>
                        <ul class="dropdown-menu">
                            <li onClick='selectBusinessLine("severLine1")'>severLine1</li>
                            <li onClick='selectBusinessLine("severLine2")'>severLine2</li>
                            <li onClick='selectBusinessLine("severLine3")'>severLine3</li>
                            <li onClick='selectBusinessLine("severLine4")'>severLine4</li>
                            <li onClick='selectBusinessLine("severLine5")'>severLine5</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                    <a href="http://localhost:8080/HelloWorldJSP/interface_description.jsp" id="interface_description" target="_blank">接口监控说明</a>
                    </li>
                    
                </ul>
            </div>
        </div>
</nav>
<div class="mainpage"  style="margin:5px;">
        <div id="initnote" class="initnote">请选择业务线</div>
        <div class="row" id="operArea" style="display: none;">
            <div class="col-md-2">
                <button id="startMonitorBtn" type="button" class="btn btn-warning" onClick="startMonitor()">开始监控</button>
            </div>
            <div class="col-md-2">
                <div class="input-group">
                    <span class="input-group-addon">监控频率（秒）</span>
                    <input name="monitorFreq" id="monitorFreq" type="text" class="form-control" placeholder="30">
                </div>
            </div>
              <div class="col-md-3">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input name="smsValue" id="smsValue" type="checkbox" checked="checked">
                    </span>
                    <span class="input-group-addon">是否需要短信提醒</span>
                </div>
            </div>  
        </div>
        <hr class="seperator"/>
        <hr class="seperator1"/>
    </div>

• 功能逻辑
  选择业务线方法selectBusinessLine（）--js

// 选择业务线 
    function selectBusinessLine(lineName) {
        document.getElementById("initnote").style.display = "none"; // 隐藏 配置设置默认占位
        document.getElementById("operArea").style.display = "block";// 显示 配置设置
        document.getElementById("dropDownToggleName").text = lineName;// 将“业务线选择”替换为选择的业务线
        loadDropFileControl(); //调用装载上传控件的方法
    }

装载上传控件的方法loadDropFileControl（）--js

// 装载文件上传控件 
    function loadDropFileControl() {
        //
        removeElementById("dropbox"); //清除之前的dropbox控件
        var fileDropHtml = ""
        fileDropHtml += "<div class='panel panel-warning' id=dropbox style='min-height:150px;display:block;'>"
        fileDropHtml += "<div class=panel-heading><h3 class=panel-title>上传接口监控测试用例</h3></div>"
        fileDropHtml += "<div class=panel-body style='text-align:center;'>拖动要上传的接口监控测试用例文件到这里</div>"
        fileDropHtml += "<div id=uploadcase_loading_layout class=layout style='text-align:center; display:none;'><img src='images/loading.gif'/></div>"
        fileDropHtml += "</div>"
        $(".seperator").after(fileDropHtml);
        loadFileDropFunc(document.getElementById("dropDownToggleName").text) //调用在当前业务线上传文件功能的方法
        loadBusinessLineCase(document.getElementById("dropDownToggleName").text) //调用加载当前业务线拥有的jmx文件方法
    }

清除控件方法removeElementById（） -js

// 删除控件
    function removeElementById(id) {
        if(document.getElementById(id) != undefined) {
            document.getElementById(id).parentNode.removeChild(document.getElementById(id));
        }
    }

上述仅简单介绍了业务线可选择和业务线选择完成后，装载上传控件的实现，其它功能我会在之后的文章进行详细介绍，现已更新完成，链接如下
1.上传文件浅析：https://www.jianshu.com/p/699c1bb974fc
2.加载文件列表浅析：https://www.jianshu.com/p/34b87eddfd19
3.根据配置执行jmx文件浅析（一）--获取配置信息：https://www.jianshu.com/p/0d6d16bf7454
4.根据配置执行jmx文件浅析（二）--执行jmx文件：https://www.jianshu.com/p/d12d25010c4e
5.发送邮件浅析：https://www.jianshu.com/p/0f50a520ff77