Http 요청 기능 추가

This commit is contained in:
hsoh
2022-10-31 18:05:00 +09:00
parent fe99fd5658
commit 9d10e6b4aa
16 changed files with 1106 additions and 25 deletions
@@ -89,6 +89,12 @@
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a th:href="@{/manage/findAllHttpRequestInfos}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>HTTP 요청 관리</p>
</a>
</li>
<li class="nav-item">
<a th:href="@{/manage/findAllScriptInfos}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
@@ -29,7 +29,7 @@
<div class="container-fluid">
<form id="form" class="inputForm" action="#" th:action="@{/manage/saveApi}"
th:object="${apiInfo}" method="post">
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Basic Info</h3>
</div>
@@ -103,7 +103,7 @@
</div>
</div>
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Response Info</h3>
</div>
@@ -198,7 +198,7 @@
<div class="form-group row">
<label class="col-sm-3 col-form-label">응답 Body1</label>
<div class="col-sm-9">
<div id="responseBody1" class="shadow-sm" style="height:400px"></div>
<div id="responseBody1" class="shadow-sm" style="height: 200px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
<!-- <textarea class="form-control" th:field="*{responseBody1}"-->
<!-- rows="3"></textarea>-->
</div>
@@ -210,7 +210,7 @@
<div class="col-sm-9">
<!-- <textarea class="form-control" th:field="*{responseBody2}"-->
<!-- rows="3"></textarea>-->
<div id="responseBody2" class="shadow-sm" style="height:400px"></div>
<div id="responseBody2" class="shadow-sm" style="height: 200px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
</div>
</div>
</div>
@@ -282,8 +282,8 @@
});
}
setMonaco('responseBody1', 'syntaxResponseBody1', [[${apiInfo.responseBody1}]]);
setMonaco('responseBody2', 'syntaxResponseBody2', [[${apiInfo.responseBody2}]]);
setMonaco('responseBody1', 'syntaxResponseBody1', /*[[${apiInfo.responseBody1}]]*/);
setMonaco('responseBody2', 'syntaxResponseBody2', /*[[${apiInfo.responseBody2}]]*/);
</script>
</th:block>
</html>
@@ -29,7 +29,7 @@
<div class="container-fluid">
<form id="bytesMessageSpecForm" name="bytesMessageSpecForm" class="inputForm" action="#" th:action="@{/manage/saveBytesMessageSpec}"
th:object="${bytesMessageSpec}" method="post">
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Basic Info</h3>
</div>
@@ -122,7 +122,7 @@
</div>
</div>
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Response Message Info</h3>
<br>
@@ -136,7 +136,7 @@
</div>
</div>
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Acho Message Info</h3>
@@ -0,0 +1,321 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default_layout">
<div class="content-wrapper" layout:fragment="content">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 th:if="${httpRequestInfo.id == null}">HTTP 요청 정보 등록</h1>
<h1 th:unless="${httpRequestInfo.id == null}">HTTP 요청 정보 수정</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">부가 기능</li>
</ol>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content" style="padding-bottom: 1rem;">
<div class="container-fluid">
<form id="form" class="inputForm" action="#" th:action="@{/manage/saveHttpRequestInfo}"
th:object="${httpRequestInfo}" method="post">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Basic Info</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">요청 그룹명<small>(*)</small></label>
<div class="col-sm-9">
<input type="text" th:field="*{requestGroupName}"
class="form-control"> <span
th:if="${#fields.hasErrors('requestGroupName')}"
th:errors="*{requestGroupName}" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">요청명<small>(*)</small></label>
<div class="col-sm-9">
<input type="text" th:field="*{requestName}" class="form-control">
<span th:if="${#fields.hasErrors('requestName')}"
th:errors="*{requestName}" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">URL<small>(*)</small></label>
<div class="col-sm-9">
<input type="text" th:field="*{url}" class="form-control"
placeholder="ex) http://~~:8080/api/~~"> <span
th:if="${#fields.hasErrors('url')}" th:errors="*{url}"
class="text-danger"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Method<small>(*)</small></label>
<div class="col-sm-2">
<div class="form-radio">
<label class="form-check-label"> <input type="radio"
th:field="*{method}" class="form-check-input" value="POST">
POST <i class="input-helper"></i></label>
</div>
</div>
<div class="col-sm-2">
<div class="form-radio">
<label class="form-check-label"> <input type="radio"
th:field="*{method}" class="form-check-input" value="GET">
GET <i class="input-helper"></i></label>
</div>
</div>
<div class="col-sm-2">
<div class="form-radio">
<label class="form-check-label"> <input type="radio"
th:field="*{method}" class="form-check-input" value="PUT">
PUT <i class="input-helper"></i></label>
</div>
</div>
<div class="col-sm-3">
<div class="form-radio">
<label class="form-check-label"> <input type="radio"
th:field="*{method}" class="form-check-input" value="DELETE">
DELETE <i class="input-helper"></i></label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">URL Query Params</label>
<div class="col-sm-9">
<input type="text" th:field="*{queryParams}"
class="form-control"
placeholder="ex) apiCode=A10&userId=James&...">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Request Info</h3>
</div>
<div class="card-body">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Content Type</label>
<div class="col-sm-9">
<select class="form-control" th:field="*{requestContentType}" th:value="*{requestContentType}">
<option th:value="'application/json'" th:text="'application/json'"></option>
<option th:value="'application/xml'" th:text="'application/xml'"></option>
<option th:value="'application/x-www-form-urlencoded'" th:text="'application/x-www-form-urlencoded'"></option>
<option th:value="'text/plain'" th:text="'text/plain'"></option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Encode</label>
<div class="col-sm-9">
<input type="text" th:field="*{encode}"
class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">요청 Headers</label>
<div class="col-sm-9">
<input type="text" th:field="*{requestHeaders}"
class="form-control"
placeholder="ex) api-code=A10,user-id=James,...">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">요청 Body</label>
<div class="col-sm-9">
<div id="requestBodyDiv" class="shadow-sm" style="height: 200px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
<input type="hidden" th:field="*{requestBody}">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Response Data</h3>
</div>
<div class="card-body">
<div class="form-group row">
<label class="col-sm-3 col-form-label">응답 Status Code</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="responseStatusCode" name="responseStatusCode">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">응답 Headers</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="responseHeaders" name="responseHeaders">
</div>
</div>
<div class="row" style="margin-top: 2em;">
<label class="col-sm-3 col-form-label">&nbsp;</label>
<div class="col-sm-9">
<button type="button" class="btn btn-default btn-sm" id="btn_json" style="float: right;">Format JSON</button>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">응답 Body</label>
<div class="col-sm-9">
<div id="responseBody" class="shadow-sm" style="height: 200px; border: 1px solid #ced4da; border-radius: .25rem;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" th:field="*{id}">
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button type="button" class="btn btn-secondary"
onclick="history.go(-1);">Cancel</button>
<button type="button" class="btn btn-primary mr-2" id="execBtn" style="float: right;">Execute</button>
</form>
</div>
</section>
</div>
<th:block layout:fragment="script">
<link rel="stylesheet" data-name="vs/editor/editor.main"
th:href="@{/plugins/vs/editor/editor.main.css}">
<link rel="stylesheet" th:href="@{/plugins/select2/css/select2.min.css}">
<link rel="stylesheet" th:href="@{/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css}">
<script th:src="@{/plugins/select2/js/select2.full.js}"></script>
<script>var require = { paths: { 'vs': '../../plugins/vs' } };</script>
<script th:src="@{/plugins/vs/loader.js}"></script>
<script th:src="@{/plugins/vs/editor/editor.main.nls.js}"></script>
<script th:src="@{/plugins/vs/editor/editor.main.js}"></script>
<script th:inline="javascript">
var urlForSidebar = "/manage/findAllHttpRequestInfos";
//Initialize Select2 Elements
$('.select2bs4').select2({
theme: 'bootstrap4'
})
$("#execBtn").click(function() {
$("#requestBody").val(window.editor.getValue());
var postData = $('#form').serializeArray();
$.ajax({
url : "/manage/executeHttpRequest",
data : postData,
dataType : "json",
type : "POST",
success : function(raw) {
$("#responseStatusCode").val(raw.statusCode);
$("#responseHeaders").val(raw.headers);
window.editor2.setValue(raw.body);
},
error : function(e) {
alert("전송에 실패했습니다.\n" + e.responseText);
}
});
});
$("#btn_json").click(function() {
try {
var jsonObj = JSON.parse(window.editor2.getValue());
window.editor2.setValue(JSON.stringify(jsonObj, null, 4));
} catch (e) {}
});
function setMonaco(elementId, selectId, initValue){
var targetDivElement = document.getElementById(elementId);
var lang = $("#"+selectId+" option:selected").val();
window.editor = monaco.editor.create(targetDivElement, {
value: initValue,
language: lang,
minimap: {
enabled: false
},
wordWrap: 'on',
wrappingStrategy: 'simple',
wordWrapBreakAfterCharacters: '',
wordWrapBreakBeforeCharacters: '',
wrappingIndent: 'none',
automaticLayout: true
});
$("#"+selectId).change(function(){
var selectLang = $("#"+selectId+" option:selected").val();
if (selectLang == "application/x-www-form-urlencoded") {
alert("요청 Body에 'userId=aaa&userName=이링크' 형식으로 입력해야 합니다.");
}
monaco.editor.setModelLanguage(editor.getModel(), selectLang);
});
$('#form').submit(function(eventObj) {
$("#requestBody").val(window.editor.getValue());
return true;
});
}
function setMonaco2(elementId, selectId, initValue){
var targetDivElement = document.getElementById(elementId);
var lang = $("#"+selectId+" option:selected").val();
window.editor2 = monaco.editor.create(targetDivElement, {
value: initValue,
language: lang,
minimap: {
enabled: false
},
wordWrap: 'on',
wrappingStrategy: 'simple',
wordWrapBreakAfterCharacters: '',
wordWrapBreakBeforeCharacters: '',
wrappingIndent: 'none',
automaticLayout: true
});
$("#"+selectId).change(function(){
var selectLang = $("#"+selectId+" option:selected").val();
monaco.editor.setModelLanguage(window.editor2.getModel(), selectLang);
});
}
setMonaco('requestBodyDiv', 'requestContentType', /*[[${httpRequestInfo.requestBody}]]*/);
setMonaco2('responseBody', 'requestContentType', "");
</script>
</th:block>
</html>
@@ -29,7 +29,7 @@
<div class="container-fluid">
<form id="form" class="inputForm" action="#" th:action="@{/manage/saveScriptInfo}"
th:object="${scriptInfo}" method="post">
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Basic Info</h3>
</div>
@@ -59,7 +59,7 @@
</div>
</div>
<div class="card card-default">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Script Code</h3>
</div>
@@ -103,7 +103,7 @@
let editor;
let constrainedInstance;
const isNew = [[${scriptInfo.id == null}]];
const isNew = /*[[${scriptInfo.id == null}]]*/ false;
function findLineNumberByText(text){
const linesContent = editor.getModel().getLinesContent();
@@ -172,7 +172,7 @@
return true;
});
}
setMonaco('scriptCode', [[${scriptInfo.scriptCode}]]);
setMonaco('scriptCode', /*[[${scriptInfo.scriptCode}]]*/);
if(isNew == false){
$('#scriptName').prop( "disabled", true );
}
@@ -50,7 +50,6 @@
<th>API명</th>
<th>URL</th>
<th>서비스코드</th>
<th>스크립트</th>
<th>Method</th>
<th>수정</th>
<th>삭제</th>
@@ -118,7 +117,6 @@
{"data": "apiName"},
{"data": "url"},
{"data": "serviceValue"},
{"data": "scriptName"},
{"data": "method", "searchable": false, "orderable": false},
{"data": "id", "searchable": false, "orderable": false},
{"data": "id", "searchable": false, "orderable": false}
@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default_layout">
<th:block layout:fragment="css">
<link rel="stylesheet"
th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
<link rel="stylesheet"
th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
<link rel="stylesheet"
th:href="@{/plugins/datatables-buttons/css/buttons.bootstrap4.min.css}">
</th:block>
<div class="content-wrapper" layout:fragment="content">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>HTTP 요청 관리</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">부가 기능</li>
</ol>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">HTTP API 호출 테스트를 수행할 수 있다.</h3>
</div>
<div class="card-body">
<table id="listHttpRequestInfoTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>요청그룹</th>
<th>요청명</th>
<th>URL</th>
<th>Method</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
</div>
<th:block layout:fragment="script">
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script
th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
<script
th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
<script
th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>
<script
th:src="@{/plugins/datatables-buttons/js/dataTables.buttons.min.js}"></script>
<script
th:src="@{/plugins/datatables-buttons/js/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/plugins/jszip/jszip.min.js}"></script>
<script th:src="@{/plugins/pdfmake/pdfmake.min.js}"></script>
<script th:src="@{/plugins/pdfmake/vfs_fonts.js}"></script>
<script th:src="@{/plugins/datatables-buttons/js/buttons.html5.min.js}"></script>
<script th:src="@{/plugins/datatables-buttons/js/buttons.print.min.js}"></script>
<script
th:src="@{/plugins/datatables-buttons/js/buttons.colVis.min.js}"></script>
<script th:inline="javascript">
$.fn.dataTable.ext.buttons.new = {
text: 'New',
action: function ( e, dt, node, config ) {
location.href = "/manage/getHttpRequestInfoForm";
}
};
var listHttpRequestInfoTable = $("#listHttpRequestInfoTable").DataTable({
"responsive": true, "lengthChange": false, "autoWidth": false,
"processing": true,
"serverSide": true,
"pageLength": 50,
"searchDelay": 1200,
"ajax": {
"url": "/manage/rest/httpRequestInfos",
"type": "POST",
"dataType": "json",
"contentType": "application/json",
"data": function (d) {
return JSON.stringify(d);
}
},
"columns": [
{"data": "requestGroupName"},
{"data": "requestName"},
{"data": "url"},
{"data": "method", "searchable": false, "orderable": false},
{"data": "id", "searchable": false, "orderable": false},
{"data": "id", "searchable": false, "orderable": false}
],
"columnDefs": [
{
"render": function (data, type, row) {
return '<a href="/manage/getHttpRequestInfoForm/' + row.id + '">' + data + '</a>';
},
"targets": 1
},
{
"render": function (data, type, row) {
return '<a href="/manage/getHttpRequestInfoForm/' + data + '" class="btn btn-primary"><i class="fas fa-edit"></i></a>';
},
"targets": -2
},
{
"render": function (data, type, row) {
var msg = "'정말로 데이터를 삭제 하시겠습니까?'";
return '<a href="/manage/deleteHttpRequestInfo/' + data + '" onclick="return confirm(' + msg +');" class="btn btn-primary"><i class="fas fa-trash"></i></a>';
},
"targets": -1
}
],
"buttons": ["new", "excel", "colvis"],
"initComplete": function() {
listHttpRequestInfoTable.buttons().container().appendTo('#listHttpRequestInfoTable_wrapper .col-md-6:eq(0)');
}
});
/*
$(".dataTables_filter input").unbind().bind("input", function(e) { // Bind our desired behavior
// If the length is 3 or more characters, or the user pressed ENTER, search
if(this.value.length >= 3 || e.keyCode == 13) {
// Call the API search function
listHttpRequestInfoTable.search(this.value).draw();
}
// Ensure we clear the search if they backspace far enough
if(this.value == "") {
listHttpRequestInfoTable.search("").draw();
}
return;
});
*/
</script>
</th:block>
</html>
@@ -24,7 +24,7 @@
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">스크립트 관리</li>
<li class="breadcrumb-item active">부가 기능</li>
</ol>
</div>
</div>