QTP校验数据库中数据前台项目

首先看一下效果图:

未操作之前页面:

进行操作之后的页面:

前台jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
 request.setCharacterEncoding("UTF-8");
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP ‘index.jsp‘ starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src="<%=path %>/mis2/gezComponents/jquery/jquery.js" type="text/javascript"></script>
	<script src="<%=path %>/mis2/gezComponents/jquery/jqueryui/jqueryuijs/jqueryui.js" type="text/javascript"></script>
	<script src="<%=path %>/mis2/gezComponents/jsUtils/AjaxUtil.js" type="text/javascript"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	 #table th{
   		font-size:1.1em;
    	text-align:left;
    	padding-top:5px;
    	padding-bottom:4px;
    	background-color:#A7C942;
    	color:#ffffff;
  	}	
	</style>
		
	<script>
	/**
	 * 根据用户点击单元格,动态设置字段详细数据文本框的值
	 */	
	function getColumnDetail(columnData){ 
			columnData.style.color = "blue";  //数据被点过之后颜色设置为蓝色
			var columnDetail=document.getElementById("columnDetail");  // 找到字段详细数据对象
			columnDetail.innerHTML=columnData.innerHTML;    // 改变内容
	}
		

	/**
	 * 设置鼠标事件响应效果
	 */
	function setOnMounseOverColor(columnData){
		columnData.style.background = "red";  //鼠标经过时表格背景设置为红色
	}
	function setOnMounseOutColor(columnData){
		columnData.style.background = "";
	}
	
	
	/**
	 * 获取详细数据,即每条数据的完整json字符串,并显示到整行数据一栏
	 */
	function getRowDataDetail(tr){	
        var jsonData = tr.getAttribute("jsonData"); //获取该条数据的json字符串
		var rowDataDetail = document.getElementById("rowDataDetail");  // 找到整行数据对象
		rowDataDetail.innerHTML=jsonData;    // 改变内容	
	}
	
	
	/**
	 * 校验删除操作结果
	 */
	function checkDeleteResult(){
		var sql = document.getElementById("sql").value;
		var ajax = new AjaxUtil();
		var path = "<%=path %>/QTPCommonServlet?action=checkDeleteResult";
		var paramData = "sql=" + sql;
		var settings = {
			"datatype":"text"
		};
		ajax.sendAjax(path,paramData,successBackFunction,errorBackFunction,settings);         
		
		function successBackFunction(result){
			var deleteResult = document.getElementById("deleteResult");
			if(result==‘true‘){
				deleteResult.value = "成功";
			}else{
				deleteResult.value = "失败";
			}
		}
		function errorBackFunction(){
			alert("校验删除操作未执行");
		}	
	}

	
	/**
	 * 获取表数据
	 */
	function getAllDatas(){
		var sql = document.getElementById("sql").value;
		var sqlDateNumber = "0";  //sqlDateNumber为保留变量,如需要对查询数据条数进行限制,可以放开使用(需要后台支持)
		var ajax = new AjaxUtil();
			var path = "<%=path %>/QTPCommonServlet?action=getAllData";
			var paramData = "sql=" + sql +"&sqlDateNumber=" + sqlDateNumber;
			var settings = {
				"datatype":"text"
			};
			ajax.sendAjax(path,paramData,successBackFunction,errorBackFunction,settings);         
		
		function successBackFunction(result){		
		    createTable(result);	 			 	
		}
		function errorBackFunction(){
			alert("获取表数据操作未执行");
		}
	}
	
	/**
	 * 动态生成表格
	 */
	function createTable(result){
		var columnNames;   //表字段名称字符串
		var columnDatas;   //表数据字符串
		var columnNamesDetail = new Array();  //表字段名称数组
		var columnData = new Array();         //表数据数组
		var columnDataDetail = new Array();   //单条表数据信息数组
		var columnJsonData;     //单条数据的json字符串
	
		var _table = document.getElementById("table"); 
		var _row;  
		var _cell;
		var rowNumber = 0;  //记录数据条数,用于下面判断是否出竖向滚动条
		
		if(result.indexOf("||")!=-1) {
			columnNames = result.split("||")[0];
	 		columnNamesDetail = columnNames.split(";");
	 		columnDatas = result.split("||")[1];
	 		columnData = columnDatas.split(";");
	 	}
		 					 	
		/**先判断表格中是否已有内容,如有则执行清空操作*/
		if(0!=_table.childNodes.length){
	 		for(var i = _table.childNodes.length-1;i>=0;i--){
				_table.removeChild(_table.childNodes[i]); //删除掉每个子节点的内容
			}								
			var div = document.getElementById("mydiv");	
	 		div.style.height="0px";		 	//将div高度初始化为最小																				
	 	}
	 	
	 	/**生成数据条数*/
	 	var totalNumber=document.getElementById("totalNumber");  // 找到数据条数统计对象
	 	if(columnData==0){
	 		totalNumber.innerHTML="共"+0+"条";
	 		alert(‘抱歉,没有查询到相关数据!‘);
	 	}else{
			totalNumber.innerHTML="共"+columnData.length+"条";    // 改变内容	
		}	
	 			
	 	/**生成表头部分*/
	 	_row = document.createElement("tr");  
	    document.getElementById("table").appendChild(_row);
	    for(var j = 0; j < columnNamesDetail.length; j++) {  
	        	_cell = document.createElement("th"); 		     
	        	_cell.innerText = columnNamesDetail[j];  		    
	        	_row.appendChild(_cell);  
	 		} 
	 		
	 	/**生成表主体部分*/
	 	for (var i = 0; i < columnData.length; i++) {
	 		columnJsonData = columnData[i].split("@_@")[1];
	 		columnDataDetail = columnData[i].split("@_@")[0].split("#");	
	 		_row = document.createElement("tr");
	 		_row.setAttribute("jsonData", columnJsonData);  //给每个tr对象设置jsonData属性,用于被点击时得到json字符串
	 		rowNumber++;  
	 		_row.onclick= function(){getRowDataDetail(this)};
	    	document.getElementById("table").appendChild(_row);
	    	for(var j = 0; j < columnDataDetail.length; j++) { 
	        	_cell = document.createElement("td"); 
	        	_cell.onclick= function(){getColumnDetail(this)};
	        	_cell.onmouseover = function(){setOnMounseOverColor(this)};
	        	_cell.onmouseout = function(){setOnMounseOutColor(this)};
	        	if(columnDataDetail[j]==‘‘ || columnDataDetail[j]==undefined || columnDataDetail[j]==null){
	        		_cell.innerText = "null";  
	        	}else{		      
	        		_cell.innerText = columnDataDetail[j];  
	        	}
	        	_row.appendChild(_cell);  
	 		}
 
	 	}
	 	/**设置表格滚动条*/
	 	var div = document.getElementById("mydiv");
	 	if(rowNumber>15){  //当数据超过15条时,限制div高度,出滚动条
	 		div.style.height="400px";
	 	}
	 	div.style.width="100%";
	 	div.style.overflow="scroll";			
	}				
	</script>	
  </head>
  
  <body>
    <body>
    	<h1 align="center">QTP数据检查</h1>
    	<p>
    		<label style="font-size:20px;">测试说明:</label><br/><hr align="left">
    		<label style="font-size:17px;">本页面作为QTP测试辅助页面,可以完成数据表增、删、改、查操作后的数据校验</label><br/>
    		<label style="font-size:17px;">增、改、查校验流程:</label><br/>
    		<label style="font-size:15px;">(1)在SQL定义一栏里输入相应SQL语句,如:"select * from t_hyperlink",点击取值,则在数据一栏生成对应查询数据表格</label><br/>
    		<label style="font-size:15px;">(2)点击表格中的任意一个单元格,则在字段详细数据一栏里显示字段信息,同时在详细数据一栏里显示整条数据对应的json字符串</label><br/>
    		<label style="font-size:17px;">删除校验流程:</label><br/>
    		<label style="font-size:15px;">在SQL定义一栏里输入查找被删除数据的SQL,如:"select * from t_hyperlink where short_link=‘/link100‘",点击校验删除操作,</label><br/>
    		<label style="font-size:15px;">根据删除操作结果显示的信息进行判断删除操作是否成功执行。</label><br/><hr align="left">
    	</p>
    
		<p>   
			<form action="http://localhost:8080/QTP/QTPCommonServlet" method="post">
			<table style="width:100%;">
				<tr>
					<td style="width:50%;">
	    				<label style="font-size:20px;width:100%;" >SQL定义:</label>
					</td>
					<td style="width:50%;">
					<!--  
						请选择数据操作数目:
						<select name="sqlDateNumber">				
							<option id="" name="sqlDataNumber" value="">自定义</option>
		  					<option id="" name="sqlDataNumber" value="10">显示前10条</option>
		  					<option id="" name="sqlDataNumber" value="all">显示全部</option>
						</select>
						-->
						<label style="font-size:16px;width:20%;" align="right" >删除操作结果:</label>
						<input type="text"   style="width:25%;" id="deleteResult" />
						<input type="button" style="width:25%;" value="校验删除操作" onclick="checkDeleteResult();"/>
						<input type="button" style="width:25%;" value="取值" style="width: 120px;"  onclick="getAllDatas();" />
					</td>
				</tr>
				<tr>
					<td colspan="2">		
						<textarea id="sql" name="sql" style="width:100%;" rows = "5"></textarea>
					</td>
				</tr>
			</table>
			</form> 	
		</p> 
		<p>  
			<label style="font-size:20px;" >数据:</label>	
			<label style="font-size:20px;width:300px;" id="totalNumber">共0条</label> <br/>
			<div id="mydiv">			
			<table border="1">
				<tbody id="table">
				</tbody>
			</table>
			</div>

		</p> 		
		<p>  
			<label style="font-size:20px;" >查看字段详细数据:</label> <br/>
			<textarea name="sql" rows = "5" style="width:100%;" id="columnDetail"></textarea>
		</p> 
		<p>  
			<label style="font-size:20px;" >查看整行数据:</label> <br/>
			<textarea name="sql" rows = "5" style="width:100%;" id="rowDataDetail"></textarea>
		</p> 
  </body>
</html>


 

 

QTP校验数据库中数据前台项目,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。