<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>blog</title>
</head>
<body>
<nav>
<ul>
<li>
<a href="javascript:void(0);" onclick="renderList()">홈</a>
</li>
<li>
<a href="javascript:void(0);" onclick="renderSaveForm()">글쓰기</a>
</li>
</ul>
</nav>
<hr>
<section id="root">
</section>
<script>
// state
let state = {};
// init
let root = document.querySelector("#root");
renderList();
// list 디자인
async function renderList() {
clear();
let boards = await sendList2();
console.log(boards);
let dom = `
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th></th>
</tr>
</thead>
<tbody id="list-box">
${boards.map(b => renderListItem2(b)).join("")}
</tbody>
</table>
`;
root.innerHTML = dom;
}
function renderListItem2(board) {
let dom = `
<tr>
<td>${board.id}</td>
<td>${board.title}</td>
<td><a href="javascript:void(0);" onclick="renderDetail(${board.id})">상세보기</a></td>
</tr>
`;
return dom;
}
function renderListItem(board) {
let dom = `
<td>${board.id}</td>
<td>${board.title}</td>
<td><a href="javascript:void(0);" onclick="renderDetail(${board.id})">상세보기</a></td>
`;
let item = document.createElement("tr");
item.innerHTML = dom;
return item;
}
async function sendList() {
// 1. API 요청
let response = await fetch("http://localhost:8080/api");
let responseBody = await response.json();
// 2. 응답 처리
let boards = responseBody.body;
let listBox = document.querySelector("#list-box");
boards.forEach(board => {
let item = renderListItem(board);
listBox.append(item);
});
}
async function sendList2() {
// 1. API 요청
let response = await fetch("http://localhost:8080/api");
let responseBody = await response.json();
// 2. 응답 처리
return responseBody.body;
}
// detail 디자인
async function renderDetail(id) {
clear();
let board = await sendDetail(id);
state = board;
let dom = `
<form>
<button type="button" onclick="sendDelete();">삭제</button>
</form>
<form>
<button type="button" onclick="renderUpdateForm();">수정</button>
</form>
<div>
번호: ${board.id}<br>
제목: ${board.title}<br>
내용: ${board.content}<br>
작성일: ${board.createdAt}<br>
</div>
`
root.innerHTML = dom;
}
async function sendDetail(id) {
// 1. API 요청
let response = await fetch(`http://localhost:8080/api/board/${id}`);
let responseBody = await response.json();
// 2. 응답 처리
return responseBody.body;
}
// saveForm 디자인
function renderSaveForm() {
clear();
let dom = `
<form>
<input type="text" id="title" placeholder="제목"><br>
<input type="text" id="content" placeholder="내용"><br>
<button type="button" onclick="sendSave();">글쓰기</button>
</form>
`;
root.innerHTML = dom;
}
async function sendSave() {
// 1. 사용자 입력값 받기
let board={
title: document.querySelector("#title").value,
content: document.querySelector("#content").value,
};
// 2. JSON 변환
let requestBody = JSON.stringify(board);
// 3. API 요청
let response = await fetch("http://localhost:8080/api/board", {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: requestBody
});
let responseBody = await response.json();
// 4. 응답 처리
renderList();
}
async function sendDelete() {
await fetch(url=`http://localhost:8080/api/board/${state.id}`, {
method: "delete"
});
renderList();
}
async function sendUpdate() {
// 1. 사용자 입력값 받기
let board = {
title: document.querySelector("#title").value,
content: document.querySelector("#content").value,
};
// 2. JSON 변환
let requestBody = JSON.stringify(board);
// 3. API 요청
let response = await fetch(`http://localhost:8080/api/board/${state.id}`, {
method: "put",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: requestBody
});
// 4. 응답 처리
renderDetail(state.id);
}
// updateForm 디자인
async function renderUpdateForm() {
clear();
let dom = `
<form>
<input type="number" value="${state.id}" readonly><br>
<input type="text" id="title" value="${state.title}"><br>
<input type="text" id="content" value="${state.content}"><br>
<input type="text" value="${state.createdAt}" readonly><br>
<button type="button" onclick="sendUpdate();">수정</button>
</form>
`
root.innerHTML = dom;
}
// 화면 초기화
function clear() {
root.innerHTML = "";
}
</script>
</body>
</html>Share article