amWiki.testing.js
19.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
/**
* amWiki Web端 - 简单 ajax 测试模块
* @author Tevin
*
* @notice 仅当页面存在“请求地址”、“请求类型”、“请求参数”三个h3标题时触发，且参数列表表格顺序不能打乱
*/
(function (win, $) {
'use strict';
/**
* 建接口测试
* @constructor
*/
var Testing = function () {
//缓存元素
this.$e = {
win: $(win),
//测试面板
testingBox: $('#testingBox'),
//md文档渲染处
view: $('#view'),
//上一篇下一篇切换
sibling: $('#mainSibling'),
//面板显示隐藏按钮
testingShow: null,
//参数列表的容器
testingParam: $('#testingParam')
};
//缓存数据
this._data = {
//全局参数列队
globalParams: [],
//全局参数是否生效
globalParamWorking: true,
//单条参数模板
paramTemplate: $('#template\\:formList').text()
};
//请求数据
this._request = {
//请求地址
url: '',
//请求类型
method: '',
//请求参数
params: [],
//全局参数
paramGlobal: []
};
this._useGlobalParam();
this._bindPanelCtrl();
this._bindAjaxSend();
};
/**
* 抓取请求内容，抓取成功才显示按钮
* @public
*/
Testing.prototype.crawlContent = function () {
var that = this;
var testingReqState = [false, false, false];
this.$e.testingShow.removeClass('show');
this.$e.view.find('h3').each(function () {
var $this = $(this);
var name = $.trim($this.text());
//抓取请求地址
if (name == '请求地址' && !testingReqState[0]) {
that._request.url = $.trim($this.next().text());
if (that._request.url.indexOf('http') < 0) {
if (that._request.url.indexOf('/') == 0) {
that._request.url = 'http://' + location.host + that._request.url;
} else {
that._request.url = 'http://' + location.host + '/' + that._request.url;
}
}
testingReqState[0] = true;
}
//抓取请求类型
else if (name == '请求类型' && !testingReqState[1]) {
that._request.method = $.trim($this.next().text()).toUpperCase();
var methodState = false;
['GET', 'POST', 'PUT', 'DELETE'].forEach(function (value, index) {
if (that._request.method == value) {
methodState = true;
}
});
if (!methodState) {
that._request.method = 'POST';
}
testingReqState[1] = true;
}
//抓取请求参数
else if (name == '请求参数' && !testingReqState[2]) {
//清空参数列表
that._request.params.length = 0;
//不存在table直接无参数，存在table时开始解析
if ($this.next('table').length > 0) {
$this.next('table').find('tbody').find('tr').each(function () {
var $tds = $(this).find('td');
//抓取内容
var param = {
keyName: $tds.eq(0).text().replace(/^\s+|\s+$/g, ''),
valueType: $tds.eq(1).text().replace(/^\s+|\s+$/g, ''),
required: $tds.eq(2).text().replace(/^\s+|\s+$/g, ''),
describe: $tds.eq(3).text().replace(/^\s+|\s+$/g, ''),
default: $tds.eq(4).text().replace(/^\s+|\s+$/g, ''),
reference: $tds.eq(5).text().replace(/^\s+|\s+$/g, '')
};
//修正请求参数，正确键名才添加参数
if (param.keyName != '无' && param.keyName != '-' && param.keyName != '') {
//“必填”转换
if (param.required == '是' || param.required == '必填' || param.required == 'yes' || param.required == 'true') {
param.required = 'required';
} else {
param.required = '';
}
//“默认值”转换
if (param.default == '-' || param.default == '无' || param.default == 'Null' || param.default == 'null') {
if (param.reference && param.reference != '-' && param.reference != '无' && param.reference != 'Null' && param.reference != 'null') {
param.default = param.reference;
} else {
param.default = '';
}
}
that._request.params.push(param);
}
});
}
testingReqState[2] = true;
}
});
if (testingReqState[0] && testingReqState[1] && testingReqState[2]) {
this._initPanel();
} else {
this._offPanel();
}
testingReqState = [false, false, false];
};
/**
* 关闭测试面板
* @private
*/
Testing.prototype._offPanel = function () {
this.$e.testingShow.removeClass('show');
if (this.$e.testingShow.hasClass('on')) {
this.displayBox('off');
}
//清除抓取参数
this._request.url = '';
this._request.method = '';
this._request.params = [];
//清空请求地址
$('#testingSendUrl').val('');
//还原请求类型
$('#testingSendType').find('option[value="POST"]').prop('selected', true);
//清空参数列表
this.$e.testingParam.html('');
//重置iframe
$('#testingResponse')[0].contentWindow.location.reload();
};
/**
* 测试面板填充数据
* @private
*/
Testing.prototype._initPanel = function () {
this.$e.testingShow.addClass('show');
//填充请求地址
$('#testingSendUrl').val(this._request.url);
//填充请求类型
$('#testingSendType').find('option[value="' + this._request.method + '"]').prop('selected', true);
//清空现有参数列表
this.$e.testingParam.html('');
//填充参数列表
if (this._request.params.length > 0) {
var paramsHTML = '';
for (var i = 0; i < this._request.params.length; i++) {
paramsHTML += this._data.paramTemplate
.replace('{{describe}}', this._request.params[i].describe)
.replace('{{keyName}}', this._request.params[i].keyName)
.replace('{{default}}', this._request.params[i].default)
.replace('{{valueType}}', this._request.params[i].valueType)
.replace('{{required}}', this._request.params[i].required);
}
this.$e.testingParam.append(paramsHTML);
} else {
this.$e.testingParam.append('<li>无</li>');
}
};
/**
* 切换测试面板显示隐藏状态
* @param {String} type - on / off
* @public
*/
Testing.prototype.displayBox = function (type) {
var that = this;
if (type == 'off') {
this.$e.testingShow.removeClass('on').find('span').text('测试接口');
this.$e.testingBox.css({
'position': 'absolute'
});
this.$e.view.show().addClass('scroller-content');
this.$e.sibling.addClass('scroller-content').addClass('on');
this.$e.testingBox.removeClass('scroller-content').stop().animate({
'width': '30%',
'opacity': 0
}, 200, 'swing', function () {
that.$e.testingBox.removeAttr('style');
});
} else if (type == 'on') {
this.$e.testingShow.addClass('on').find('span').text('关闭测试');
this.$e.testingBox
.css({
'display': 'block',
'width': '0',
'opacity': 0
})
.stop()
.animate({
'width': '100%',
'opacity': 1
}, 300, 'swing', function () {
that.$e.view.hide().removeClass('scroller-content');
that.$e.sibling.removeClass('scroller-content').removeClass('on');
that.$e.testingBox.addClass('scroller-content').css({
'position': 'relative'
});
});
}
};
/**
* 测试面板普通操作
* @private
*/
Testing.prototype._bindPanelCtrl = function () {
var that = this;
//显示隐藏控制按钮
this.$e.testingShow = $('<div class="testing-show">[<span>测试接口</span>]</div>');
if (location.protocol == 'file:') {
this.$e.testingShow
.attr('disabled', 'disabled')
.append('<i>您当前为本地模式打开，file:// 协议下不开放接口测试模块，请使用 http(s):// 网址打开</i>');
}
$('#main').append(this.$e.testingShow);
//显示隐藏测试面板
this.$e.testingShow.on('click', function () {
var $this = that.$e.testingShow;
if ($this.attr('disabled') == 'disabled') {
$this.toggleClass('on');
} else {
if (that.$e.testingShow.hasClass('on')) {
that.displayBox('off');
} else {
that.displayBox('on');
}
}
});
//填充请求地址
$('#testingSendUrl').on('change', function () {
that._request.url = $(this).val();
});
//填充请求类型
$('#testingSendType').on('change', function () {
that._request.method = $(this).find("option:selected").val();
});
//清空所有普通参数的值
$('#testingBtnReset').on('click', function () {
that.$e.testingParam.find('.testing-param-val').val('');
});
//新增一个参数
$('#testingBtnAdd').on('click', function () {
var pHTML = that._data.paramTemplate
.replace('{{describe}}', '新增参数')
.replace('{{keyName}}', '')
.replace('{{default}}', '')
.replace('({{valueType}})', '')
.replace('{{required}}', '');
that.$e.testingParam.append(pHTML);
});
};
/**
* 全局参数模块
* @private
*/
Testing.prototype._useGlobalParam = function () {
var that = this;
this._data.globalParams = JSON.parse(localStorage['amWikiGlobalParam'] || '[]'); //全局参数
var gParamTmpl = $('#template\\:globalParam').text(); //全局参数模板
var $testingGlobalParam = $('#testingGlobalParam'); //全局参数显示容器
var $testingGlobal = $('#testingGlobal'); //全局参数弹窗
this._data.globalParamWorking = (localStorage['amWikiGParamWorking'] || 'on') == 'on'; //全局参数是否工作
//显示弹窗
$('#testingBtnGParam').on('click', function () {
$testingGlobalParam.html('');
that._data.globalParams = JSON.parse(localStorage['amWikiGlobalParam'] || '[]');
if (that._data.globalParams.length == 0) {
$testingGlobalParam.append('<li data-type="empty">无</li>');
} else {
for (var p = 0; p < that._data.globalParams.length; p++) {
$testingGlobalParam.append(gParamTmpl.replace('{{describe}}', that._data.globalParams[p].describe)
.replace('{{keyName}}', that._data.globalParams[p].keyName)
.replace('{{value}}', that._data.globalParams[p].value));
}
}
$testingGlobal.show();
});
//基本操作
$testingGlobal.on('click', function (e) {
var $elm = $(e.target);
//关闭
if ($elm.hasClass('close') || $elm.hasClass('testing-global')) {
$testingGlobal.hide();
}
//新增
else if ($elm.hasClass('add')) {
$testingGlobalParam.find('[data-type="empty"]').remove();
$testingGlobalParam.append(gParamTmpl.replace('{{describe}}', '')
.replace('{{keyName}}', '')
.replace('{{value}}', ''));
}
//保存
else if ($elm.hasClass('save')) {
that._data.globalParams.length = 0;
$testingGlobalParam.find('li').each(function (i, elment) {
var $inputs = $(this).find('input');
if ($inputs.eq(1).val()) {
that._data.globalParams.push({
describe: $inputs.eq(0).val(),
keyName: $inputs.eq(1).val(),
value: $inputs.eq(2).val()
});
}
});
localStorage['amWikiGlobalParam'] = JSON.stringify(that._data.globalParams);
$testingGlobal.hide();
}
});
//删除参数
$testingGlobalParam.on('click', 'i', function () {
$(this).parent().remove();
if ($testingGlobalParam.find('li').length == 0) {
$testingGlobalParam.append('<li data-type="empty">无</li>');
}
});
$('#testingGlobalWorking').on('click', function () {
if (that._data.globalParamWorking) {
that._data.globalParamWorking = false;
localStorage['amWikiGParamWorking'] = 'off';
$(this).addClass('off');
} else {
that._data.globalParamWorking = true;
localStorage['amWikiGParamWorking'] = 'on';
$(this).removeClass('off');
}
}).addClass(this._data.globalParamWorking ? '' : 'off');
};
/**
* 发送请求操作
* @private
*/
Testing.prototype._bindAjaxSend = function () {
var that = this;
var frame = $('#testingResponse')[0];
var $duration = $('#testingDuration'); //耗时输出
var $loading = $('#testingLoading');
var $testingParam = $('#testingParam'); //参数列表
$('#testingBtnSend').on('click', function () {
$duration.text('');
var realParam = {}; //合并参数列表
//从面板获取最新(可能已修改)接口参数
if ($testingParam.find('input').length > 0) {
$testingParam.find('li').each(function () {
var $this = $(this);
realParam[$this.find('.testing-param-key').val()] = $this.find('.testing-param-val').val();
});
}
//全局参数
if (that._data.globalParams.length > 0 && that._data.globalParamWorking) {
for (var i = 0; i < that._data.globalParams.length; i++) {
realParam[that._data.globalParams[i].keyName] = that._data.globalParams[i].value;
}
}
frame.contentWindow.location.reload(); //刷新iframe以便重新输出内容
$loading.show();
var startTime = Date.now();
$.ajax({
type: that._request.method,
url: that._request.url,
data: realParam,
dataType: 'text',
success: function (data) {
$loading.hide();
$duration.text('耗时：' + parseFloat(Date.now() - startTime).toLocaleString() + ' ms');
var $frameBody = $(frame.contentWindow.document).find('body');
$frameBody.css('wordBreak', 'break-all');
if (/^\s*\{[\s\S]*\}\s*$/.test(data)) {
$frameBody[0].innerHTML = '<pre style="white-space:pre-wrap;word-break:break-all;"><pre>';
//json格式化输出
$frameBody.find('pre').text(win.tools.formatJson(data));
} else {
$frameBody[0].innerHTML = data.replace(/<!(doctype|DOCTYPE)\s+(html|HTML)>/, '');
}
setTimeout(function () {
$(frame).height($frameBody.height());
}, 100);
},
error: function (xhr, textStatus) {
$loading.hide();
$duration.text('耗时：' + parseFloat(Date.now() - startTime).toLocaleString() + ' ms');
var $frameBody = $(frame.contentWindow.document).find('body');
$frameBody.css('wordBreak', 'break-all');
var html = '<div style="margin-bottom:20px;padding:10px;background:#ffebe5;">HTTP Status: <b>' +
xhr.status + '</b> ' + xhr.statusText + '</div>';
//根据readyState简单判断跨域
if (xhr.readyState == 0) {
html += '<div style="font-size:14px;">请求未发送！可能是因为：' +
'<ul style="line-height:22px;">' +
'<li>请求了<b style="color:#FF201E;margin-right:1px;">跨域</b>地址</li>' +
'<li>接口被302重定向到跨域地址</li>' +
'<li>其他原因</li>' +
'</ul></div>';
$frameBody[0].innerHTML = html;
}
//不跨域且为json
else if (/^\s*\{[\s\S]*\}\s*$/.test(xhr.responseText)) {
html += '<pre style="white-space:pre-wrap;word-break:break-all;"><pre>';
$frameBody[0].innerHTML = html;
//json格式化输出
$frameBody.find('pre').text(win.tools.formatJson(xhr.responseText));
}
//其他不跨域
else {
html += xhr.responseText.replace(/<!(doctype|DOCTYPE)\s+(html|HTML)>/, '');
$frameBody[0].innerHTML = html;
}
setTimeout(function () {
$(frame).height($frameBody.height());
}, 100);
}
});
});
};
/**
* 判断测试面板是否处于打开状态
* @returns {Boolean}
* @public
*/
Testing.prototype.isOpen = function () {
return this.$e.testingShow.hasClass('on');
};
return win.AWTesting = Testing;
})(window, jQuery);