XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-04-24 08:41:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

update web interface

Browse Source
This commit is contained in:
加里 2014-10-11 16:03:43 +08:00
parent 5b3687e587
commit 025a6803ea
6 changed files with 170 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "anyproxy", "name": "anyproxy",
"version": "2.4.6", "version": "2.4.7",
"description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.", "description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.",
"main": "proxy.js", "main": "proxy.js",
"bin": { "bin": {

14
web/css/page.css
View File

@ -77,7 +77,7 @@
} }
.mainTableWrapper .col_time{ .mainTableWrapper .col_time{
width: 160px; width: 140px;
} }
.mainTableWrapper tr.row_odd{ .mainTableWrapper tr.row_odd{
@ -93,13 +93,11 @@
background: #CCC; background: #CCC;
} }
.resHeader{ .resBody .resBodyContent{
width: 400px; min-width: 200px;
} padding: 10px;
border: 1px solid #99baca;
.resBody textarea{ background: #f5fbfe;
width: 400px;
height: 280px;
} }
.subTitle{ .subTitle{

62
web/detail.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>Anyproxy</title>
<link rel="stylesheet" href="/css/uikit.gradient.min.css" />
<link rel="stylesheet" href="/css/page.css" />
<link rel="icon" type="image/png" href="/favico.png" />
<script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.0/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
</head>
<body>
<div id="J_detailPanel" class="detailPanel"></div>
<script type="text/javascript">
seajs.config({
base: 'http://static.alipayobjects.com/',
alias: {
'$' : 'jquery/jquery/1.7.2/jquery',
'Backbone' : 'gallery/backbone/1.1.2/backbone.js',
'Underscore': 'gallery/underscore/1.6.0/underscore.js'
}
});
seajs.use(['$', 'Underscore', 'Backbone',"./detail"], function($, _, Backbone,Detail) {
window.render = function(data){
Detail.render(data,function(tpl){
$("#J_detailPanel").html(tpl);
});
}
//init render
if(window.renderData){
window.render(window.renderData);
}
});
</script>
<style type="text/css">
body{
word-wrap: break-word;
}
.detailPanel{
padding: 40px 20px;
font-size: 22px;
line-height: 30px;
}
.subTitle{
border-left: 6px solid #1FA2D6;
font-size: 24px;
line-height: 36px;
font-weight: bold;
}
</style>
</body>
</html>

67
web/detail.js Normal file
View File

@ -0,0 +1,67 @@
define("./detail",['$', 'gallery/underscore/1.6.0/underscore.js'],function(require,exports,module){
var _ = require("gallery/underscore/1.6.0/underscore.js"),
$ = require("$");
var tpl = ""+
' <section class="req">'+
' <h4 class="subTitle">request</h4>'+
' <div class="detail">'+
' <ul class="uk-list">'+
' <li><%= method %> <%= host %></li>'+
' <li><span title="<%= path %>"><%= path %></span></li>'+
' <% _.each(reqHeader, function(v,k) { %> <li><strong><%= k %></strong> : <%= v %></li><% }); %>'+
' </ul>'+
' </div>'+
' </section>'+
''+
' <section class="reqBody">'+
' <h4 class="subTitle">request body</h4>'+
' <div class="detail">'+
' <p><%= reqBody %></p>'+
' </div>'+
' </section>'+
''+
' <% if(statusCode) { %>'+
' <section class="resHeader">'+
' <h4 class="subTitle">response header</h4>'+
' <div class="detail">'+
' <ul class="uk-list">'+
' <li>HTTP/1.1 <span class="http_status http_status_<%= statusCode %>"><%= statusCode %></span></li>'+
' <% _.each(resHeader, function(v,k) { %> <li><strong><%= k %></strong> : <%= v %></li><% }); %>'+
' </ul>'+
' </div>'+
' </section>'+
''+
' <section class="resBody">'+
' <h4 class="subTitle">response body</h4>'+
' <div class="detail">'+
' <div class="J_responseBody resBodyContent"></div>'+
// ' <form class="uk-form">'+
// ' <textarea class="J_responseBody">loading...</textarea>'+
// ' </form>'+
' </div>'+
' </section>'+
' <% } %>';
function render(data,cb){
var $baseTpl = $(_.template(tpl, data));
if(data.statusCode){ //if finished
$.ajax({
url : "/body?id=" + data._id,
headers : {
anyproxy_web_req : true
},
type : "GET",
success : function(data){
$(".J_responseBody", $baseTpl).html(data);
cb($baseTpl);
}
});
}else{
cb($baseTpl);
}
}
exports.render = render;
});

47
web/index.html
View File

@ -9,6 +9,7 @@
</head> </head>
<body> <body>
<div class="topHead"> <div class="topHead">
<h1>Anyproxy</h1> <h1>Anyproxy</h1>
<a href="#" class="J_clearBtn"><span class="topBtn">Clear Logs(Ctrl+X)</span></a> <a href="#" class="J_clearBtn"><span class="topBtn">Clear Logs(Ctrl+X)</span></a>
@ -36,6 +37,7 @@
</table> </table>
</div> </div>
<div class="recordDetailOverlay J_recordDetailOverlay" style="display:none"> <div class="recordDetailOverlay J_recordDetailOverlay" style="display:none">
<div id="dragbar"></div> <div id="dragbar"></div>
<span class="escBtn J_escBtn">Close (ESC)</span> <span class="escBtn J_escBtn">Close (ESC)</span>
@ -44,9 +46,11 @@
</div> </div>
</div> </div>
<input type="hidden" id="socketPort" value="{{webSocketPort}}" /> <input type="hidden" id="socketPort" value="{{webSocketPort}}" />
<input type="hidden" id="baseUrl" value="{{ipAddress}}" /> <input type="hidden" id="baseUrl" value="{{ipAddress}}" />
<script type="text/template" id="main_table_row"> <script type="text/template" id="main_table_row">
<td class="data_id"><%= _id %></td> <td class="data_id"><%= _id %></td>
<td><%= method %></td> <td><%= method %></td>
@ -57,48 +61,7 @@
<td><%= startTimeStr %></td> <td><%= startTimeStr %></td>
</script> </script>
<script type="text/template" id="detail_tpl">
<section class="req">
<h4 class="subTitle">request</h4>
<div class="detail">
<ul class="uk-list">
<li><%= method %> <%= host %></li>
<li><span title="<%= path %>"><%= path %></span></li>
<% _.each(reqHeader, function(v,k) { %> <li><strong><%= k %></strong> : <%= v %></li><% }); %>
</ul>
</div>
</section>
<section class="reqBody">
<h4 class="subTitle">request body</h4>
<div class="detail">
<p><%= reqBody %></p>
</div>
</section>
<% if(statusCode) { %>
<section class="resHeader">
<h4 class="subTitle">response header</h4>
<div class="detail">
<ul class="uk-list">
<li>HTTP/1.1 <span class="http_status http_status_<%= statusCode %>"><%= statusCode %></span></li>
<% _.each(resHeader, function(v,k) { %> <li><strong><%= k %></strong> : <%= v %></li><% }); %>
</ul>
</div>
</section>
<section class="resBody">
<h4 class="subTitle">response body</h4>
<div class="detail">
<form class="uk-form">
<textarea class="J_responseBody">loading...</textarea>
</form>
</div>
</section>
<% } %>
</script>
<script src="/page.js"></script>
<script src="/list.js"></script>
</body> </body>
</html> </html>

45
web/page.js → web/list.js
View File

@ -7,9 +7,11 @@ seajs.config({
} }
}); });
seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) { seajs.use(['$', 'Underscore', 'Backbone',"./detail"], function($, _, Backbone,Detail) {
Backbone.$ = $; Backbone.$ = $;
var isInApp = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.list;
$(function(){ $(function(){
//record detail //record detail
@ -37,30 +39,12 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
self.hideDetail(); self.hideDetail();
}); });
self.addMask = function(){
}
self.showDetail = function(data){ self.showDetail = function(data){
var tpl = _.template($("#detail_tpl").html() , data); Detail.render(data,function(tpl){
$(".J_recordDetailOverlayContent",$detailEl).html(tpl); $(".J_recordDetailOverlayContent",$detailEl).html(tpl);
$detailEl.show(); $detailEl.show();
$mask.show(); $mask.show();
if(data.statusCode){ //if finished
$.ajax({
url:"/body?id=" + data._id,
headers:{
anyproxy_web_req : true
},
type : "GET",
success:function(data){
$(".J_responseBody", $detailEl).html(data);
}
}); });
}
}; };
self.hideDetail = function(){ self.hideDetail = function(){
@ -106,7 +90,11 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
e.stopPropagation(); e.stopPropagation();
var self = this; var self = this;
var detailData = self.model.toJSON(); var detailData = self.model.toJSON();
if(!isInApp){
self.detailPanel.showDetail(detailData); self.detailPanel.showDetail(detailData);
}else{
window.webkit.messageHandlers.list.postMessage(JSON.stringify(detailData))
}
} }
}, },
render: function(){ render: function(){
@ -186,7 +174,7 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);
var reqDate = new Date(data.startTime); var reqDate = new Date(data.startTime);
data.startTimeStr = reqDate.toLocaleDateString()+ " " + reqDate.toLocaleTimeString(); data.startTimeStr = reqDate.toLocaleTimeString() + "";
var previous; var previous;
if(previous = recList.get(data.id)){ if(previous = recList.get(data.id)){
@ -250,4 +238,19 @@ seajs.use(['$','Underscore' ,'Backbone'], function($, _, Backbone) {
})(); })();
// Date.prototype.Format = function (fmt) {
// var o = {
// "M+": this.getMonth() + 1, //月份
// "d+": this.getDate(), //日
// "h+": this.getHours(), //小时
// "m+": this.getMinutes(), //分
// "s+": this.getSeconds(), //秒
// "q+": Math.floor((this.getMonth() + 3) / 3), //季度
// "S": this.getMilliseconds() //毫秒
// };
// if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
// for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
// return fmt;
// }
}); });