-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d3e74be
commit dfa854b
Showing
9 changed files
with
217 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title><%= title %></title> | ||
| <link rel="stylesheet" href="../styles.css"> | ||
| </head> | ||
| <body> | ||
| <header class="main_header"> | ||
| <a href="/"> | ||
| <h1><%= message %></h1> | ||
| </a> | ||
| <nav class="main_nav"> | ||
| <a href="guide/index.ejs" class="modal-button">Guide</a> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <section class="guide"> | ||
| <h1>API란?</h1> | ||
| <div>API(Application Programming Interface)는 응용 프로그램이 서로 통신하고 데이터를 주고받을 수 있도록 하는 인터페이스입니다.</div> | ||
| </section> | ||
|
|
||
| <section class="guide"> | ||
| <h1>어떨때 사용하나요?</h1> | ||
| <div>MOCK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.</div> | ||
| </section> | ||
|
|
||
| <section class="endpoint"> | ||
| <h1>데이터 전체 조회 API</h1> | ||
| <div class="data_container"> | ||
| <% endpoints.forEach(endpoint => { %> | ||
| <div> | ||
| <p><%= endpoint.method %></p> | ||
| <a href="<%= endpoint.url %>" target="_blank"><%= endpoint.description %></a> | ||
| <span id="<%= endpoint.id %>"></span> | ||
| </div> | ||
| <% }) %> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="endpoint"> | ||
| <h1>특정 조건의 데이터 조회 API</h1> | ||
| <div class="data_container"> | ||
| <% specificEndpoints.forEach(endpoint => { %> | ||
| <div> | ||
| <p><%= endpoint.method %></p> | ||
| <a href="<%= endpoint.url %>" target="_blank"><%= endpoint.description %></a> | ||
| </div> | ||
| <% }) %> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="endpoint"> | ||
| <h1>API TEST (GET)</h1> | ||
| <nav class="sub_nav"> | ||
| <ul> | ||
| <% inputSections.forEach(section => { %> | ||
| <li><a href="#" onclick="showInput('<%= section.type %>'); return false;">특정 <%= section.type %> 조회</a></li> | ||
| <% }) %> | ||
| </ul> | ||
| </nav> | ||
| <div id="input-container"> | ||
| <% inputSections.forEach(section => { %> | ||
| <div class="input-section <%= section.type %>"> | ||
| <label for="input-id-<%= section.type %>"><%= section.label %></label> | ||
| <input type="text" id="input-id-<%= section.type %>" placeholder="<%= section.placeholder %>"> | ||
| <button class="run-button" onclick="fetchSpecificData('<%= section.type %>')">Run</button> | ||
| </div> | ||
| <% }) %> | ||
| </div> | ||
|
|
||
| <pre id="result">{}</pre> | ||
| </section> | ||
|
|
||
| <script> | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| // 기본적으로 특정 유저 조회 입력 창만 보이도록 설정 | ||
| const inputSections = document.querySelectorAll('.input-section'); | ||
| inputSections.forEach(section => { | ||
| if (section.classList.contains('users')) { | ||
| section.style.display = 'flex'; // 또는 'block' 등으로 설정 | ||
| } else { | ||
| section.style.display = 'none'; | ||
| } | ||
| }); | ||
| fetchData(); | ||
| }); | ||
| function fetchData() { | ||
| const endpoints = [ | ||
| <% endpoints.forEach(endpoint => { %> | ||
| { id: '<%= endpoint.id %>', url: '<%= endpoint.url %>' }, | ||
| <% }) %> | ||
| ]; | ||
| endpoints.forEach(endpoint => { | ||
| fetch(endpoint.url) | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| document.getElementById(endpoint.id).textContent = `전체 ${endpoint.id.split('-')[0]} ${data.count}개 조회`; | ||
| }) | ||
| .catch(error => { | ||
| console.error('데이터 가져오기 실패:', error); | ||
| }); | ||
| }); | ||
| } | ||
| function fetchSpecificData(type) { | ||
| const input = document.getElementById(`input-id-${type}`).value; | ||
| let url = ''; | ||
| if (type === 'users') { | ||
| url = `http://34.197.44.20/admin/user/${input}`; | ||
| } else if (type === 'books') { | ||
| url = `http://34.197.44.20/books/info/${input}`; | ||
| } else if (type === 'products') { | ||
| url = `http://34.197.44.20/coupang_products/product/${input}`; | ||
| } | ||
| fetch(url) | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| document.getElementById('result').textContent = JSON.stringify(data, null, 2); | ||
| }) | ||
| .catch(error => { | ||
| console.error('데이터 가져오기 실패:', error); | ||
| }); | ||
| } | ||
| function showInput(section) { | ||
| // 모든 입력 섹션을 숨김 | ||
| const inputSections = document.querySelectorAll('.input-section'); | ||
| inputSections.forEach(sec => { | ||
| sec.style.display = 'none'; | ||
| }); | ||
| // 선택한 섹션만 보이도록 함 | ||
| const selectedInput = document.querySelector(`.input-section.${section}`); | ||
| if (selectedInput) { | ||
| selectedInput.style.display = 'flex'; | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.