`
墨香子
  • 浏览: 47018 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js工具页面-测试后端API,支持GET、POST

阅读更多
作为一个前端开发,只要项目实现了前后端分离,就免不了要测试后端提供的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:附上文件。
分享到:
评论

相关推荐

    boat-house 后端库,web api 微服务.zip

    REST(Representational State Transfer)是一种网络应用程序的设计风格和开发方式,强调了资源的概念,通过URI(统一资源标识符)定位资源,通过HTTP方法(GET, POST, PUT, DELETE等)操作资源。 3. **技术栈**:...

    i-invest-server:i-Invest后端api

    综上所述,"i-invest-server:i-Invest后端api" 是一个基于JavaScript的金融投资后端服务,它以RESTful API的形式对外提供多种投资管理功能,结合性能优化和安全措施,为用户提供稳定、安全的投资平台服务。...

    uniapp-music后端完整源码.zip

    3. **RESTful API设计**:为了使uniapp前端能够与后端通信,后端会提供一组RESTful API接口,这些接口遵循HTTP方法(GET、POST、PUT、DELETE等),对应资源的操作。 4. **身份验证与授权**:考虑到音乐应用可能包含...

    Node.js-mocker-api用于为RESTAPI创建模拟服务

    Node.js-mocker-api是专为开发人员设计的一个实用工具,旨在帮助他们在没有实际REST API服务器的情况下,快速构建和测试基于REST API的应用程序。这个库利用了Node.js的强大功能,允许开发者模拟各种HTTP响应,包括...

    -# 后端开发教程.md

    例如,Node.js是一个流行的后端开发环境,它通常会与npm(Node.js的包管理器)搭配使用,而Express是一个轻量级的Node.js Web应用框架。 ### 第一个后端应用 创建一个简单的后端应用通常涉及编写代码来处理HTTP...

    YCool后端api服务器.zip

    《深入解析YCool后端API服务器》 在现代互联网应用中,后端API服务器起着至关重要的作用,它负责处理前端请求,与数据库交互,并提供数据服务。本篇将详细探讨YCool后端API服务器的设计理念、技术选型以及实现细节...

    TeamWork-后端API

    Node.js允许开发者使用JavaScript进行全栈开发,包括后端逻辑处理,这使得TeamWork-后端API可能利用了Node.js的非阻塞I/O和事件驱动的特性,提高了处理大量并发请求的能力。 在开发TeamWork-后端API时,开发人员...

    Node.js-atmo-服务器端API模拟

    标题 "Node.js-atmo-服务器端API模拟" 指的是一个使用Node.js构建的工具,专门用于在服务器端模拟API。这个工具名为"Atmo",可能是开发者Raathigesh创建的一个开源项目,版本号为3236ae7。在开发过程中,模拟API对于...

    hyunjeong:ewha-web-study后端

    3. **API设计**:为了与前端进行数据交换,后端需要提供RESTful API接口,遵循HTTP协议,通过GET、POST、PUT、DELETE等方法进行数据操作。 4. **身份验证与授权**:考虑到学习平台可能需要用户登录,后端需要实现...

    单人博客开发,单用户,支持评论,前后端分离,后端采用flask-resfult进行api开发.zip

    4. **前端开发**:使用HTML、CSS和JavaScript(如React、Vue.js或Angular)构建用户界面,通过Ajax或Fetch API调用后端API。 5. **部署与测试**:完成开发后,将应用部署到服务器,进行测试确保所有功能正常运行。 ...

    todo-backend:Todo-App后端

    精益Todo后端 ... 后端通过HTTP方法(GET,POST,PUT,DELETE)支持简单的API-并不是真正的完整RESTful实现-以及WebSocket-API来显示一些RTC功能。 框架/库: for HTTP API 用于Socket API的 用于数据存储

    backend-jd-list:jd-list后端

    标题“backend-jd-list:jd-list后端”表明这是一个关于京东(JD)列表功能的后端...综上所述,这个“backend-jd-list:jd-list后端”项目可能会涵盖上述多个方面,涉及到JavaScript后端开发的多个核心知识点和技术栈。

    Minha-Carteira后端大师

    3. **RESTful API设计**: Minha-Carteira后端可能设计有REST(Representational State Transfer)风格的API,这是一种常见的Web服务架构,通过HTTP方法(GET、POST、PUT、DELETE等)操作资源,实现前后端分离。...

    毕业设计&课设--基于iris框架+gorm的golang毕业设计后端api.zip

    4. RESTful API设计:在后端API的设计中,通常遵循REST(Representational State Transfer)架构风格,以资源为中心,使用HTTP方法(GET、POST、PUT、DELETE等)来操作这些资源。Iris框架提供了对RESTful API的强大...

    fcc-api:FreeCodeCamp后端API项目

    【标题】"fcc-api:FreeCodeCamp后端API项目"是指FreeCodeCamp(简称FCC)提供的一个关于构建后端API的学习项目。FCC是一个知名的在线学习平台,专注于教授编程技能,尤其是对于初学者,其课程涵盖前端开发、后端开发...

    基于uniapp的CQU课程表设计开发-后端基于python的fastAPI

    2. **创建FastAPI应用**:初始化FastAPI项目,定义路由和API接口,例如GET所有课程、POST添加新课程等。 3. **数据库集成**:配置数据库连接,实现数据的CRUD操作。 4. **uniapp界面设计**:根据课程表需求,设计并...

    koa + mongodb + swagger 实现后端api开发封装.zip

    本项目"koa + mongodb + swagger 实现后端api开发封装"旨在利用Koa.js作为Web服务器框架,MongoDB作为数据库存储,以及Swagger作为API文档管理和测试工具,来高效地构建和管理后端API。 **Koa.js** Koa是Node.js...

    node.js+express+sqlserver 极简后端Api框架

    "node.js+express+sqlserver 极简后端Api框架"就是这样一个解决方案,它结合了Node.js的非阻塞I/O特性,Express的简洁路由处理,以及SQL Server的强大数据库支持,为开发者提供了一个快速开发API的工具。 首先,...

    trackme-backend:trackme-fxos 后端

    - **自动化部署**: 使用工具如Docker和持续集成/持续部署(CI/CD)流程,可以自动化构建、测试和部署"trackme-backend",提高开发效率并保证环境一致性。 综上所述,"trackme-backend:trackme-fxos 后端"项目涵盖了...

Global site tag (gtag.js) - Google Analytics