История страницы
HTML |
---|
<style> .apitester { box-sizing: border-box; border: 1px solid #eaeaea; font-family: sans-serif; } .apitester * { box-sizing: border-box; } .apitester h3 { margin: 0; } .apitester pre { margin: 0; font-family: monospace; } .apitester-editor { padding: 1rem; } .apitester-editor>div { margin-top: 0.5rem; } .apitester [data-ref=enable-http]-link { display: inline-block; margin-left: 1rem; color: #ccc#0000EE; } .apitester [data-ref=enable-http]-link:hover { color: #0000EE; text-decoration: none; } .apitester [data-ref=enable-http]-link:visited { color: #ccc#0000EE; } .apitester [data-ref=enable-http]:visited:hovermethod] { colordisplay: #0000EE; text-decoration: none; } inline-block; } .apitester [data-ref=method] { display: inline-block; } .apitester [data-ref=host] { display: inline-block; resize: horizontal; border: 1px solid #eaeaea; padding: 0.5rem; white-space: pre-wrap; font-family: monospace; } .apitester [data-ref=url] { display: inline-block; padding: 0; white-space: pre-wrap; } .apitester [data-ref=body] { display: block; resize: vertical; width: 100%; min-height: 3rem; border: 1px solid #eaeaea; padding: 0.5rem; white-space: pre-wrap; } .apitester [data-ref=execute] { padding: 0.5rem 1rem; } .apitester [data-ref=clearoutput] { displaybackground: inline-block#eaeaea; margin-left:padding: 0.5rem 1rem; color: #0000EE; } .apitester [data-ref=clear]:hover { text-decoration: none; } .apitester [data-ref=clear]:visited { color: #0000EE; } .apitester [data-ref=output] { background: #eaeaea; padding: 0.5rem 1rem; white-space: pre-white-space: pre-wrap; } .apitester-error { border-color: red; } </style> |
HTML |
---|
<script> "use strict"; const DEFAULT_HOST = "http://localhost:8080"; function stringify(obj) { let objStr = JSON.stringify(obj, null, 4); if (objStr == "{}") { objStr = obj.toString(); } return objStr; } function show(el) { el.style.display = ""; } function hide(el) { el.style.display = "none"; } class ApiTester { constructor(selector, httpMethod, apiMethod, body) { this.state = { host: localStorage.getItem("apitester.hostname") || DEFAULT_HOST, httpMethod: httpMethod, apiMethod: apiMethod, body: body, isExecuting: false, output: null, }; this.el = this.initEl(selector); this.ui = this.initUi(this.el); this.listen(); this.render(); } get isMixedContent() { return ( location.protocol == "https:" && this.state.host.startsWith("http:") ); } initEl(selector) { const el = document.querySelector(selector); el.innerHTML = ` <div class="apitester-editor"> <h3> API-тестер <a data-ref="enable-http" class="apitester-link" href="#enable-http#" title="Если вы открыли Confluence через HTTPS, запросы к HTTP-серверам подсказок работать не будут. Переключайтесь на HTTP, чтобы заработали">включить HTTP</a> <a data-ref="enable-https" class="apitester-link" href="#">включить HTTPS</a> </h3> <div> <pre data-ref="method"></pre> <input data-ref="host"> <pre data-ref="url"></pre> </div> <div> <textarea data-ref="body"></textarea> </div> <div> <button data-ref="execute">Выполнить</button> <a data-ref="clear" class="apitester-link" href="#enable-http#">очистить</a> </div> </div> <pre data-ref="output"> </pre> </div>`; return </div>el; } <pre data-ref="output"> initUi(el) { return </pre> { `;enableHttp: el.querySelector("[data-ref=enable-http]"), return el; } enableHttps: el.querySelector("[data-ref=enable-https]"), initUi(el) { return {method: el.querySelector("[data-ref=method]"), enableHttphost: el.querySelector("[data-ref=enable-httphost]"), methodurl: el.querySelector("[data-ref=methodurl]"), hostbody: el.querySelector("[data-ref=hostbody]"), urlexecute: el.querySelector("[data-ref=urlexecute]"), bodyclear: el.querySelector("[data-ref=bodyclear]"), executeoutput: this.el.querySelector("[data-ref=executeoutput]"), }; } clear: el.querySelector("[data-ref=clear]"), listen() { this.el.addEventListener("keydown", (event) => { output: this.el.querySelector("[data-ref=output]"),onKeydown(event); }); } listen() { this.elthis.ui.enableHttp.addEventListener("keydownclick", (event) => { this.onKeydown(onSwitchProtocol("http:", event); }); this.ui.enableHttpenableHttps.addEventListener("click", (event) => { this.onEnableHttp(onSwitchProtocol("https:", event); }); this.ui.host.addEventListener("change", (event) => { this.onEdit(event); }); this.ui.body.addEventListener("change", (event) => { this.onEdit(event); }); this.ui.execute.addEventListener("click", (event) => { this.onExecute(event); }); this.ui.clear.addEventListener("click", (event) => { this.onClear(event); }); } onKeydown(event) { if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) { // Ctrl + Enter event.preventDefault(); this.onEdit(); this.onExecute(); } } onEnableHttponSwitchProtocol(protocol, event) { event.preventDefault(); window.location.protocol = "http:"protocol; } onEdit() { this.state.host = this.ui.host.value; this.state.body = this.ui.body.value; .value; localStorage.setItem("apitester.hostname", this.state.host); this.render(); } onExecute() { localStorage.setItem("apitester.hostname", this.state.hostmarkAsExecuting(); this.renderexecute(); } onExecute.then((response) => { this.markAsExecuting return response.json(); this.execute(}) .then((response) => { return responsethis.jsonshowResponse(response); }) .thencatch((responseerr) => { this.showResponse(responseerr); }); } .catch((erronClear() => { this.state.output = null; this.showResponserender(err); } }); markAsExecuting() { } onClear() {this.state.output = null; this.state.outputisExecuting = nulltrue; this.render(); } markAsExecutingshowResponse(response) { this.state.output = nullstringify(response); this.state.isExecuting = truefalse; this.render(); } showResponseexecute(response) { ) { const url = this.state.host + this.state.apiMethod; const this.state.outputoptions = stringify(response); { method: this.state.isExecutinghttpMethod, = false; this.render(); } mode: "cors", execute() { const url = this.state.host + this.state.apiMethod; headers: { const options = { "Content-Type": "application/json", method: this.state.httpMethod}, }; mode:if (this.state.httpMethod == "corsPOST",) { options.body headers: {= this.state.body; } "Content-Type": "application/json", return fetch(url, options); }, };render() { if (this.state.httpMethod == "POST"this.isMixedContent) { options.body = show(this.stateui.bodyenableHttp); } else { return fetch(url, optionshide(this.ui.enableHttp); } render() {} if (this.isMixedContentlocation.protocol == "http:") { show(this.ui.enableHttpenableHttps); } else { hide(this.ui.enableHttpenableHttps); } this.ui.method.innerHTML = this.state.httpMethod; this.ui.host.value = this.state.host; this.ui.url.innerHTML = this.state.apiMethod; this.ui.body.value = this.state.body; if (this.state.isExecuting) { this.ui.execute.setAttribute("disabled", "disabled"); } else { this.ui.execute.removeAttribute("disabled"); } this.ui.output.innerHTML = this.state.output; if (this.state.output) { show(this.ui.output); show(this.ui.clear); } else { hide(this.ui.output); hide(this.ui.clear); } } } </script> |
Обзор
Инструменты контента