api client body 처리 수정
This commit is contained in:
현성필
@@ -5,7 +5,8 @@
|
||||
|
||||
<section layout:fragment="contentFragment">
|
||||
<div id="loading-overlay" style="display: none;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
|
||||
<div class="d-flex justify-content-center align-items-center"
|
||||
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
|
||||
<div class="text-center">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<br/>
|
||||
@@ -15,135 +16,138 @@
|
||||
</div>
|
||||
<div class="container">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="form-floating col-md-2 me-1">
|
||||
<select name="method" class="form-select" id="method">
|
||||
<option value="POST">POST</option>
|
||||
<option value="GET">GET</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
<option value="CONNECT">CONNECT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
<option value="OPTIONS">OPTIONS</option>
|
||||
<option value="TRACE">TRACE</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
<label for="method" class="form-label must">Method</label>
|
||||
</div>
|
||||
<div class="form-floating col-md-3 me-1">
|
||||
<select name="server" class="form-select" id="server">
|
||||
<option th:each="server : ${servers}" th:value="${server.id}"
|
||||
th:text="${server.name}"></option>
|
||||
</select>
|
||||
<label for="method" class="form-label must">Server</label>
|
||||
</div>
|
||||
<div class="input-group col-md">
|
||||
<div class="form-floating col-md">
|
||||
<input type="text" name="path" class="form-control" id="path" placeholder="호출할 경로 (/부터 입력)" required>
|
||||
<label for="path" class="must">Path</label>
|
||||
<div class="api_request">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="form-floating col-md-2 me-1">
|
||||
<select name="method" class="form-select method">
|
||||
<option value="POST">POST</option>
|
||||
<option value="GET">GET</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
<option value="CONNECT">CONNECT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
<option value="OPTIONS">OPTIONS</option>
|
||||
<option value="TRACE">TRACE</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
<label for="method" class="form-label must">Method</label>
|
||||
</div>
|
||||
<div class="form-floating col-md-3 me-1">
|
||||
<select name="server" class="form-select server">
|
||||
<option th:each="server : ${servers}" th:value="${server.id}"
|
||||
th:text="${server.name}"></option>
|
||||
</select>
|
||||
<label for="method" class="form-label must">Server</label>
|
||||
</div>
|
||||
<div class="input-group col-md">
|
||||
<div class="form-floating col-md">
|
||||
<input type="text" name="path" class="form-control path" placeholder="호출할 경로 (/부터 입력)"
|
||||
required>
|
||||
<label for="path" class="must">Path</label>
|
||||
</div>
|
||||
<button class="btn btn-primary send">Send</button>
|
||||
</div>
|
||||
<button class="btn btn-primary" id="send">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" data-bs-toggle="tab"
|
||||
data-bs-target="#requestParamTab" type="button" role="tab" aria-controls="paramTab"
|
||||
aria-selected="true">Param
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#requestHeaderTab" type="button" role="tab"
|
||||
aria-controls="requestHeader"
|
||||
aria-selected="false">Header
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#requestBodyTab" type="button" role="tab" aria-controls="requestBody"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 300px;">
|
||||
<div class="tab-pane fade show active" id="requestParamTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<table class="table" id="requestMatcherParamTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th>값</th>
|
||||
<th>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_add_query">추가
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="queryParams">
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" data-bs-toggle="tab"
|
||||
data-bs-target="#requestParamTab" type="button" role="tab" aria-controls="paramTab"
|
||||
aria-selected="true">Param
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#requestHeaderTab" type="button" role="tab"
|
||||
aria-controls="requestHeader"
|
||||
aria-selected="false">Header
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#requestBodyTab" type="button" role="tab" aria-controls="requestBody"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 300px;">
|
||||
<div class="tab-pane fade show active" id="requestParamTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<table class="table" id="requestMatcherParamTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th>값</th>
|
||||
<th>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_add_query">추가
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="query_params">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="requestHeaderTab" role="tabpanel"
|
||||
aria-labelledby="requestHeader-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">값</th>
|
||||
<th>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_add_header">추가
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="request_headers">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="requestBodyTab" role="tabpanel"
|
||||
aria-labelledby="requestBody-tab">
|
||||
<textarea class="form-control request_body" style="height: 200px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="requestHeaderTab" role="tabpanel"
|
||||
aria-labelledby="requestHeader-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">값</th>
|
||||
<th>
|
||||
<button type="button" class="btn btn-secondary btn-sm btn_add_header">추가
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="headers">
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="mt-1">
|
||||
<span>Response</span>
|
||||
<span class="response_status"></span>
|
||||
<span class="response_time"></span>
|
||||
<span class="response_size"></span>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="requestBodyTab" role="tabpanel"
|
||||
aria-labelledby="requestBody-tab">
|
||||
<textarea class="form-control" style="height: 200px;" id="requestBody"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span>Response</span>
|
||||
<span class="response_status"></span>
|
||||
<span class="response_time"></span>
|
||||
<span class="response_size"></span>
|
||||
</div>
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" data-bs-toggle="tab"
|
||||
data-bs-target="#responseBodyTab" type="button" role="tab" aria-controls="responseBody"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#responseHeaderTab" type="button" role="tab"
|
||||
aria-controls="responseHeader"
|
||||
aria-selected="false">Header
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<textarea style="height: 200px;" id="responseBody"></textarea>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="responseHeaderTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">값</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="responseHeaders">
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="nav nav-tabs mt-1" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" data-bs-toggle="tab"
|
||||
data-bs-target="#responseBodyTab" type="button" role="tab" aria-controls="responseBody"
|
||||
aria-selected="false">Body
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab"
|
||||
data-bs-target="#responseHeaderTab" type="button" role="tab"
|
||||
aria-controls="responseHeader"
|
||||
aria-selected="false">Header
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border-bottom" style="min-height: 250px;">
|
||||
<div class="tab-pane fade show active" id="responseBodyTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<textarea style="height: 200px;" id="responseBody"></textarea>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="responseHeaderTab" role="tabpanel"
|
||||
aria-labelledby="requestParams-tab">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">값</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="response_headers">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -218,22 +222,19 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#requestBody').on('input', function () {
|
||||
model.requestBody = $(this).val();
|
||||
})
|
||||
model.server = $('#server').val();
|
||||
model.method = $('#method').val();
|
||||
model.server = $('.api_request').find('.server').val();
|
||||
model.method = $('.api_request').find('.method').val();
|
||||
|
||||
$('#server').on('change', function () {
|
||||
$('.api_request').find('.server').on('change', function () {
|
||||
model.server = $(this).val();
|
||||
});
|
||||
|
||||
|
||||
$('#method').on('change', function () {
|
||||
$('.api_request').find('.method').on('change', function () {
|
||||
model.method = $(this).val();
|
||||
});
|
||||
|
||||
$('#path').on('input', function () {
|
||||
$('.api_request').find('.path').on('input', function () {
|
||||
model.path = $(this).val();
|
||||
model.queryParams = [];
|
||||
let queryString = model.path.split('?')[1];
|
||||
@@ -246,23 +247,23 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#headers').on('click', 'button', function () {
|
||||
$('.api_request').find('.request_headers').on('click', 'button', function () {
|
||||
if ($(this).hasClass('btn_remove')) {
|
||||
controller.removeHeader($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
$('#queryParams').on('click', 'button', function () {
|
||||
$('.api_request').find('.query_params').on('click', 'button', function () {
|
||||
if ($(this).hasClass('btn_remove')) {
|
||||
controller.removeQueryParam($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
$('#send').click(function () {
|
||||
$('.api_request').find('.send').click(function () {
|
||||
controller.send();
|
||||
});
|
||||
|
||||
this.requestBody = CodeMirror.fromTextArea(document.getElementById('requestBody'), {
|
||||
this.requestBody = CodeMirror.fromTextArea($('.api_request').find(".request_body")[0], {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
extraKeys: {
|
||||
@@ -275,6 +276,10 @@
|
||||
}
|
||||
});
|
||||
|
||||
this.requestBody.on('change', function(cm, change) {
|
||||
model.requestBody = cm.getValue();
|
||||
})
|
||||
|
||||
this.responseBody = CodeMirror.fromTextArea(document.getElementById('responseBody'), {
|
||||
lineNumbers: true,
|
||||
mode: "application/json",
|
||||
@@ -293,10 +298,10 @@
|
||||
this.render();
|
||||
},
|
||||
render: function () {
|
||||
$('#headers').empty();
|
||||
$('#queryParams').empty();
|
||||
$('.api_request').find('.request_headers').empty();
|
||||
$('.api_request').find('.query_params').empty();
|
||||
|
||||
$('#path').val(model.path);
|
||||
$('.api_request').find('.path').val(model.path);
|
||||
|
||||
for (let i = 0; i < model.headers.length; i++) {
|
||||
let template = $('#inputTemplate').children().find('tr').clone();
|
||||
@@ -311,7 +316,7 @@
|
||||
model.headers[i].value = $(this).val();
|
||||
});
|
||||
|
||||
$('#headers').append(template);
|
||||
$('.api_request').find('.request_headers').append(template);
|
||||
}
|
||||
|
||||
for (let i = 0; i < model.queryParams.length; i++) {
|
||||
@@ -329,13 +334,13 @@
|
||||
controller.buildPath();
|
||||
});
|
||||
|
||||
$('#queryParams').append(template);
|
||||
$('.api_request').find('.query_params').append(template);
|
||||
}
|
||||
|
||||
},
|
||||
renderResponse: function(){
|
||||
$('#responseHeaders').empty();
|
||||
$(".response_status").empty();
|
||||
renderResponse: function () {
|
||||
$('.api_request').find('.response_headers').empty();
|
||||
$('.api_request').find(".response_status").empty();
|
||||
|
||||
view.responseBody.setValue(responseModel.body);
|
||||
|
||||
@@ -343,13 +348,13 @@
|
||||
let template = $('#responseHeaderTemplate').children().find('tr').clone();
|
||||
template.find('input[name="key"]').val(responseModel.headers[i].key);
|
||||
template.find('input[name="value"]').val(responseModel.headers[i].value);
|
||||
$('#responseHeaders').append(template);
|
||||
$('.api_request').find('.response_headers').append(template);
|
||||
}
|
||||
|
||||
//show response status
|
||||
$(".response_status").text("status: " + responseModel.status);
|
||||
$(".response_time").text("time: " + responseModel.time + "ms");
|
||||
$(".response_size").text("size: " + responseModel.size + "bytes");
|
||||
$('.api_request').find(".response_status").text("status: " + responseModel.status);
|
||||
$('.api_request').find(".response_time").text("time: " + responseModel.time + "ms");
|
||||
$('.api_request').find(".response_size").text("size: " + responseModel.size + "bytes");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -395,14 +400,15 @@
|
||||
this.buildPath();
|
||||
view.render();
|
||||
},
|
||||
showLoadingOverlay: function() {
|
||||
showLoadingOverlay: function () {
|
||||
$("#loading-overlay").show();
|
||||
},
|
||||
hideLoadingOverlay: function(){
|
||||
hideLoadingOverlay: function () {
|
||||
$("#loading-overlay").hide();
|
||||
},
|
||||
send: function () {
|
||||
$('#responseHeaders').empty();
|
||||
console.log(model);
|
||||
$('.api_request').find('.response_headers').empty();
|
||||
view.responseBody.setValue('');
|
||||
let startTime = new Date().getTime();
|
||||
if (model.path !== '') {
|
||||
@@ -430,6 +436,18 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
addCollection: function () {
|
||||
|
||||
},
|
||||
removeCollection: function () {
|
||||
|
||||
},
|
||||
addAPIRequest: function () {
|
||||
|
||||
},
|
||||
removeAPIRequest: function () {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user