接口测试页面

测试积点老人 · 发表于 2018-12-14 16:12:00

1：在项目中新建html页面，将代码粘贴到html文档中

页面全部代码如下：

<html>
<head>
<meta charset="utf-8" />
<title>接口测试</title>
<style>
*{padding: 0;margin: 0;}
html{background-color: #f8f8f8;font-family:"微软雅黑";font-size: 16px;color: #333333;}
ul,li{list-style: none;}
.container{position: relative;width: 1200px; margin: 0 auto;}
.title{padding: 50px 0;text-align: center;}
.mr30{margin-right: 30px;}
.test-list{}
.test-list .list-item{border: 1px solid #ccc; padding: 20px;margin: 15px auto; border-radius: 4px;background-color: #fff;cursor:pointer;line-height:40px;}
.test-list .list-item:hover{background-color: #e8e8e8;}
.success,.failed,.error{font-size: 18px;}
.success{color: green;}
.failed{color: #FF8A5B ;}
.error{color: red;}
.info-code{display: inline-block;vertical-align: middle;margin-right: 30px;margin-bottom: 30px;}
.btn{position: fixed;z-index:10;display:block;left:50%;top:130px;margin-left: 448px;padding:20px 40px;font-size:18px;border:none;background-color:#e3393c;border-radius:4px;color:#fff;cursor:pointer;}
</style>
</head>
<body>
<div class="container">
<h1 class="title">接口测试</h1>
<div>
<p class="info-code">成功接口：<span id="success-count" class="success">0</span></p>
<p class="info-code">失败接口：<span id="failed-count" class="failed">0</span></p>
<p class="info-code">错误接口：<span id="error-count" class="error">0</span></p>
</div>
<div>
<ul id="test-list" class="test-list"></ul>
</div>
<button id="btn" class="btn" type="button">开始检测</button>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
// 用户在此处设置测试接口内容
var checks = [
{
title: "敏感词检查",
url: "/lemmas/sensitive",
type: "post",
data:{
k: "义无反顾啊啊啊",
sesitiveWord: []
}
},{
title: "敏感词检查",
url: "/lemmas/sensitive1",
type: "post",
data:{
k: "义无反顾啊啊啊",
sesitiveWord: []
}
},{
title: "敏感词检查",
url: "/lemmas/sensitive2",
type: "post",
data:{
k: "义无反顾啊啊啊",
sesitiveWord: []
}
},{
title: "敏感词检查",
url: "/lemmas/sensitive",
type: "post",
data:{
k: "义无反顾啊啊啊",
sesitiveWord: []
}
},{
title: "敏感词检查",
url: "/lemmas/sensitive",
type: "post",
data:{
k: null,
sesitiveWord: []
}
},
];
//接口根路径
var root = '';
var sCount = 0, //成功数
fCount = 0, //失败数
eCount = 0; //错误数
//方法对象
var util = {
/**
*接口测试方法
* @param title {string} 接口名称（必填）
* @param url {string} 接口url （必填）
* @param data {object} 接口参数（必填）
* @param type {string} 接口类型（必填）
* @param successFun {function} 接口成功后回调（可选）
* @param errorFun {function} 接口失败后回调（可选）
*/
request: function(title, url, type, data, successFun, errorFun){
var $dom = $('#test-list');
//成功
var success = successFun || function(data){
var ItemHtml = '';
if(data.state == "100"){
ItemHtml = '<li class="list-item"><h3 class="success">成功</h3><p>接口名称：'+ title +'</p><p>接口url：'+ url +'</p></li>';
sCount++;
$('#success-count').text(sCount);
}else{
ItemHtml = '<li class="list-item"><h3 class="failed">失败</h3><p>接口名称：'+ title +'</p><p>接口url：'+ url +'</p></li>';
fCount++;
$('#failed-count').text(fCount);
}
$dom.append(ItemHtml);
};
//出错
var error = errorFun || function(data){
var ItemHtml = '';
ItemHtml = '<li class="list-item"><h3 class="error">出错</h3><p>接口名称：'+ title +'</p><p>接口url：'+ url +'</p></li>';
eCount++;
$('#error-count').text(eCount);
$dom.append(ItemHtml);
};
//调取接口
$.ajax({
url: root + url,
data: data,
type: type,
dataType: 'json',
contentType : "application/json;charset=utf-8",
cache : false,
success: success,
error: error
});
},
/**
* post方法
* @param title {string} 接口名称（必填）
* @param url {string} 接口url （必填）
* @param data {object} 接口参数（必填）
* @param successFun {function} 接口成功后回调（可选）
* @param errorFun {function} 接口失败后回调（可选）
*/
post: function(title, url, data, successFun, errorFun){
util.request(title, url, 'post', JSON.stringify(data), successFun, errorFun);
},
/**
* get方法
* @param title {string} 接口名称（必填）
* @param url {string} 接口url （必填）
* @param data {object} 接口参数（必填）
* @param successFun {function} 接口成功后回调（可选）
* @param errorFun {function} 接口失败后回调（可选）
*/
get: function(title, url, data, successFun, errorFun){
util.request(title, url, 'get', JSON.stringify(data), successFun, errorFun);
}
};
/* 接口检测方法 */
var startCheck = function(){
$('#test-list').empty();
$.each(checks, function(index, item){
if(item.type=="post"){
util.post(item.title, item.url, item.data);
}else{
util.get(item.title, item.url, item.data);
}
});
};
//检查按钮绑定点击事件
$('#btn').on('click',function(){
//初始化接口检测结果数值
sCount = 0; //成功数
fCount = 0; //失败数
eCount = 0; //错误数
//执行检查方法
startCheck();
})
</script>
</body>
</html>

复制代码

2：在项目中运行该html页面，（不在项目中运行，会有跨域问题）

3：修改代码中checks变量内容，就可以批量测试接口了

		自动登录	找回密码
密码			(注-册)加入51Testing

接口测试页面

站长推荐 /1