作为一个前端开发,只要项目实现了前后端分离,就免不了要测试后端提供的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:附上文件。
分享到:
相关推荐
REST(Representational State Transfer)是一种网络应用程序的设计风格和开发方式,强调了资源的概念,通过URI(统一资源标识符)定位资源,通过HTTP方法(GET, POST, PUT, DELETE等)操作资源。 3. **技术栈**:...
综上所述,"i-invest-server:i-Invest后端api" 是一个基于JavaScript的金融投资后端服务,它以RESTful API的形式对外提供多种投资管理功能,结合性能优化和安全措施,为用户提供稳定、安全的投资平台服务。...
3. **RESTful API设计**:为了使uniapp前端能够与后端通信,后端会提供一组RESTful API接口,这些接口遵循HTTP方法(GET、POST、PUT、DELETE等),对应资源的操作。 4. **身份验证与授权**:考虑到音乐应用可能包含...
Node.js-mocker-api是专为开发人员设计的一个实用工具,旨在帮助他们在没有实际REST API服务器的情况下,快速构建和测试基于REST API的应用程序。这个库利用了Node.js的强大功能,允许开发者模拟各种HTTP响应,包括...
例如,Node.js是一个流行的后端开发环境,它通常会与npm(Node.js的包管理器)搭配使用,而Express是一个轻量级的Node.js Web应用框架。 ### 第一个后端应用 创建一个简单的后端应用通常涉及编写代码来处理HTTP...
《深入解析YCool后端API服务器》 在现代互联网应用中,后端API服务器起着至关重要的作用,它负责处理前端请求,与数据库交互,并提供数据服务。本篇将详细探讨YCool后端API服务器的设计理念、技术选型以及实现细节...
Node.js允许开发者使用JavaScript进行全栈开发,包括后端逻辑处理,这使得TeamWork-后端API可能利用了Node.js的非阻塞I/O和事件驱动的特性,提高了处理大量并发请求的能力。 在开发TeamWork-后端API时,开发人员...
标题 "Node.js-atmo-服务器端API模拟" 指的是一个使用Node.js构建的工具,专门用于在服务器端模拟API。这个工具名为"Atmo",可能是开发者Raathigesh创建的一个开源项目,版本号为3236ae7。在开发过程中,模拟API对于...
3. **API设计**:为了与前端进行数据交换,后端需要提供RESTful API接口,遵循HTTP协议,通过GET、POST、PUT、DELETE等方法进行数据操作。 4. **身份验证与授权**:考虑到学习平台可能需要用户登录,后端需要实现...
4. **前端开发**:使用HTML、CSS和JavaScript(如React、Vue.js或Angular)构建用户界面,通过Ajax或Fetch API调用后端API。 5. **部署与测试**:完成开发后,将应用部署到服务器,进行测试确保所有功能正常运行。 ...
精益Todo后端 ... 后端通过HTTP方法(GET,POST,PUT,DELETE)支持简单的API-并不是真正的完整RESTful实现-以及WebSocket-API来显示一些RTC功能。 框架/库: for HTTP API 用于Socket API的 用于数据存储
标题“backend-jd-list:jd-list后端”表明这是一个关于京东(JD)列表功能的后端...综上所述,这个“backend-jd-list:jd-list后端”项目可能会涵盖上述多个方面,涉及到JavaScript后端开发的多个核心知识点和技术栈。
3. **RESTful API设计**: Minha-Carteira后端可能设计有REST(Representational State Transfer)风格的API,这是一种常见的Web服务架构,通过HTTP方法(GET、POST、PUT、DELETE等)操作资源,实现前后端分离。...
4. RESTful API设计:在后端API的设计中,通常遵循REST(Representational State Transfer)架构风格,以资源为中心,使用HTTP方法(GET、POST、PUT、DELETE等)来操作这些资源。Iris框架提供了对RESTful API的强大...
【标题】"fcc-api:FreeCodeCamp后端API项目"是指FreeCodeCamp(简称FCC)提供的一个关于构建后端API的学习项目。FCC是一个知名的在线学习平台,专注于教授编程技能,尤其是对于初学者,其课程涵盖前端开发、后端开发...
2. **创建FastAPI应用**:初始化FastAPI项目,定义路由和API接口,例如GET所有课程、POST添加新课程等。 3. **数据库集成**:配置数据库连接,实现数据的CRUD操作。 4. **uniapp界面设计**:根据课程表需求,设计并...
本项目"koa + mongodb + swagger 实现后端api开发封装"旨在利用Koa.js作为Web服务器框架,MongoDB作为数据库存储,以及Swagger作为API文档管理和测试工具,来高效地构建和管理后端API。 **Koa.js** Koa是Node.js...
"node.js+express+sqlserver 极简后端Api框架"就是这样一个解决方案,它结合了Node.js的非阻塞I/O特性,Express的简洁路由处理,以及SQL Server的强大数据库支持,为开发者提供了一个快速开发API的工具。 首先,...
- **自动化部署**: 使用工具如Docker和持续集成/持续部署(CI/CD)流程,可以自动化构建、测试和部署"trackme-backend",提高开发效率并保证环境一致性。 综上所述,"trackme-backend:trackme-fxos 后端"项目涵盖了...