作为一个前端开发，只要项目实现了前后端分离，就免不了要测试后端提供的API是不是正常。但有时候要测试后端API，可能需要先登录，用Fiddler等工具又一堆麻烦的配置，所以写这个简陋的页面。
使用方法：将下面代码保存成一个html页面，然后上传到后端API所在web服务器中，如果需要登录的话先登录，然后访问该页面。
页面中有两个按钮：
Execute：执行请求（快捷操作：按Enter键）
Clear：清空表单（快捷操作：按ESC键）
选择框：
Method：只有GET和POST两种，
GET请求：如果有参数需要拼写在url后面（例如：/api/v1/list?foo=false&bar=1）
POST请求：请求参数是以json格式发送到后端的，请求参数粘贴到Param的输入框中
输入框：
Url：请求地址，只能请求当前域名下的地址
Param：POST请求时的参数，GET请求不需要，向该输入框中输入数据时会自动切换到POST的Method
显示框：
Result：显示请求结果，仅支持返回结果为Json的请求，返回的Json数据会被格式化输出成缩进为4个空格的数据显示，可以供模拟数据拷贝使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>api test</title>
<style type="text/css">
.container {
padding: 50px;
}
.btn-content {
margin-bottom: 20px;
}
h5 {
margin-bottom: 10px;
}
pre {
width: 800px;
min-height: 100px;
padding: 10px;
border: 1px solid #999;
}
</style>
<!--<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#urlTip').html(function(){
var arr = [location.protocol, '//', location.hostname, location.port ? ':':'', location.port];
return arr.join('');
}());
$('#url').val('/api/').focus();
function request(){
var request_method = $('#method').val();
var request_url = $('#url').val();
var request_param = $('#param').val();
request_param = request_param.replace(/[\s\r\n]/g,"");
console.log('method:', request_method, 'url:', request_url, 'param:',request_param);
if (request_method === 'get') {
$.get(request_url, function(data){
if (typeof data === 'object') {
data = JSON.stringify(data, null, 4);
} else {
console.warn('return is not obj');
data = JSON.stringify(JSON.parse(data), null, 4);
}
console.log(data);
$('#result').html(data);
});
} else if (request_method === 'post') {
var param = JSON.stringify(JSON.parse(request_param));
$.ajax({
type:"post",
url: request_url,
data: param,
contentType: "application/json;charset=utf-8",
success: function (data) {
if (typeof data === 'object') {
data = JSON.stringify(data, null, 4);
} else {
console.warn('return is not obj');
data = JSON.stringify(JSON.parse(data), null, 4);
}
console.log(data);
$('#result').html(data);
}
});
}
}
function clear() {
$('#method').val('');
$('#param').val('');
$('#url').val('/api/').focus();
}
$('#execute').click(request);
$('#clear').click(clear);
$(document.body).keydown(function(e) {
if (e.keyCode === 13) {
request();
} else if (e.keyCode === 27) {
clear();
}
});
$('#param').keydown(function(e) {
$('#method').val('post');
});
});
</script>
</head>
<body>
<div class="container">
<div class="btn-content">
<button id="execute">Execute</button>
<button id="clear">Clear</button>
</div>
<select id="method">
<option value="get">Get</option>
<option value="post">Post</option>
</select>
<span id="urlTip">URL:http://web.test2.com</span>
<input id="url" value="" size="80"/>
<h5>Param:</h5>
<div>
<textarea id="param" rows="20" cols="100"></textarea>
</div>
<h5>Result:</h5>
<pre id="result"></pre>
</div>
</body>
</html>
PS:附上文件。
分享到：
相关推荐
精益Todo后端 ... 后端通过HTTP方法（GET，POST，PUT，DELETE）支持简单的API-并不是真正的完整RESTful实现-以及WebSocket-API来显示一些RTC功能。 框架/库： for HTTP API 用于Socket API的 用于数据存储
极客博客帖子用于MEAN Stack Workshop的带有Node.js的示例博客后端API设置： npm安装启动服务器： 节点server.js存取api：-获取所有博客- curl -X GET -通过ID获取博客- curl -X GET -POST博客- curl -X POST -H'...
前端（角度6）项目可以在以下位置找到： 路线： 路线方法/美洲驼/ GET，/ POST / llamas /：id / GET，/ PATCH，/ DELETE / llamas / search /得到/ llamas / me /得到/ llamas / me / token /删除/ llamas /登录/...
这个一个模拟后端api数据交互的模块。 ##安装 npm install back-mock ##使用 新建一个文件(假如命名为mock.js)。在里面写入如下代码。 var mockServer = require("back-mock"); var path = require("path"); mock...
#猩红色公寓创始人马南巴维什 - 首席执行官Mushaheed Kapadia - 首席技术官后端 API 后端 API 是一个 RESTful API。 只需向某些 URL 发出GET 、 POST 、 PUT和DELETE请求，它就会返回一个 JSON 对象，让您知道是否...
api端点该应用程序是一个使用Node和Express构建后端API的项目。 该应用程序使用http协议与后端进行交易。 它使用带有HTML地址的一系列调用（如Get，Post，Put和Delete）与后端和mongodb数据库进行交易。 当前端需要...
Employee_Crud：简单的后端后端api，具有所有http路由（get，post，delete，patch）
团队激烈的邮件API 为Team Fierce创建邮件微服务的后端任务API的端点POST-/ v1 / sendmail POST-/ v1 / sendmailwithtemplate POST-/ v1 / configure POST-/ v1 / register GET-/ GET-/ v1 / documentation安装克隆...
后端API工作坊-变革中的障碍 ICS学生会x提交更改 讲习班的先决条件 不需要注册 MongoDB指南针（〜140 MB） 目标 概念 蜜蜂 GET / POST / DELETE HTTP请求 HTTP代码 JSON格式 基于文档的NoSQL 环境变量 科技类 节点...
GET /用户/我-返回有关用户的信息PATCH /用户/我-更新有关用户GET /电影的信息-返回已保存的电影POST /电影-创建带有在正文中传递的字段的电影DELETE /电影/ movieId-删除_id保存的电影 POST /登录-检查在正文中...
我建议使用邮差工具检查API如何处理JWT。 地址可用： GET （查询=令牌） POST （正文=电子邮件，密码，令牌） npm命令： 命令 真实命令 功能 npm运行开始 webpack &&节点server.bundle.js 与捆绑后端服务器一起...
后端API 请使用POSTMAN进行测试！ 首先验证客户端 用户名：divyanshu 密码：xyz 将生成一个JWT并将其用于客户端到服务器的后续请求！ 您也可以注册，无需依赖用户名：divyanshu！ 描述 此Api比较“ Haversine...
测试/夹具/db.js -> setupDatabase：创建价格集合 routers/stock.js -> 添加获取/stocks 的时间限制（如果是银行假期或非工作时间，请不要更新价格信息） 检查多线程更新价格信息 日志记录 更新价格更新功能（目前...
间隔重复API 链接 实时部署： ： 服务器存储库： : 客户端存储库： : 概括 这是使用间隔重复学习技术的语言学习应用程序！ 终点 / api /用户 / api / auth POST请求授权 用于登录和注册 / api /语言 GET请求 该...
OpenPix开发人员基本OpenPix后端集成示例这是一个如何在您的后端中集成OpenPix Api的示例POST /捐赠-创建新捐赠GET / donation / id-获取捐赠信息POST / webhook-将由OpenPix API安装程序调用的Webhook在您的OpenPix...
Spring-React-API-example Spring boot 2.x（后端）React（前端）连接示例 ...一个玩具项目，它连接Spring Boot和React，并使用React的axios模块开发get和post API。 为什么？ 学习集成Spring boot和React的过程
Une todo piezas buenas，表示对服务器的支持，对文件进行重整，对creacion del rest，和mongoose como interfaz de mongo。 #Rescato notas del proyecto a modo de chuleta peticiones可能： GET ...
POST-> / api / blog / posts（创建新的博客文章） PUT-> / api / blog / posts /：id（编辑博客文章） 网页React -app -nav 指数 降落 关于 项目-项目列表-项目列表卡-项目卡 博客 博客文章 博客文章列表
这是一个模拟的News Api，它是作为Northcoders Bootcamp的一部分进行的一个后端项目。 可以在找到。 在这个项目中，我学习了如何使用Express，Postgres和Knex创建具有下面列出的多个端点的功能性API： GET /api ...