四.代码思路解析
-
回顾下需要实现的功能
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
网友评论