앞선 아티클에서 작성한 RESTful 서버 구현 예제를 이어서 진행해 보겠습니다.
[restFront.css]
a {
color: blue;
text-decoration: none;
}
[restFront.html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESTful SERVER EXAMPLE</title>
<link rel="stylesheet" href="./restFront.css" />
</head>
<body>
<nav>
<a href="/">home</a>
<a href="/about">about</a>
</nav>
<div>
<form id="form">
<input type="text" id="username">
<button type="submit">등록하기</button>
</form>
</div>
<div id="list"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./restFront.js"></script>
</body>
</html>
[restFront.js]
// 로딩 시 사용자 정보를 가져오는 함수
async function getUser() {
try {
const res = await axios.get('/users');
const users = res.data;
const list = document.getElementById('list');
list.innerHTML = '';
// 사용자마다 반복적으로 화면 표시 및 이벤트 연결
Object.keys(users).map(function (key) {
const userDiv = document.createElement('div');
const span = document.createElement('span');
span.textContent = users[key];
const edit = document.createElement('button');
edit.textContent = '수정';
// 수정 버튼 클릭
edit.addEventListener('click', async () => {
const name = prompt('바꿀 이름을 입력하세요');
if (!name) {
return alert('이름을 반드시 입력하쇼');
}
try {
await axios.put('/user/' + key, { name });
getUser();
} catch (err) {
console.error(err);
}
});
const remove = document.createElement('button');
remove.textContent = '삭제';
// 삭제 버튼 클릭
remove.addEventListener('click', async () => {
try {
await axios.delete('/user/' + key);
getUser();
} catch (err) {
console.error(err);
}
});
userDiv.appendChild(span);
userDiv.appendChild(edit);
userDiv.appendChild(remove);
list.appendChild(userDiv);
console.log(res.data);
});
} catch (err) {
console.error(err);
}
}
// 화면이 로드될 때 getUser 호출
window.onload = getUser;
// form 제출(submit) 시 실행
document.getElementById('form').addEventListener('submit', async (e) => {
e.preventDefault();
const name = e.target.username.value;
if (!name) {
return alert('이름 입력 필요함');
}
try {
await axios.post('/user', { name });
getUser();
} catch (err) {
console.error(err);
}
e.target.username.value = '';
});
[about.html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESTful SERVER</title>
<link rel="stylesheet" href="./restFront.css">
</head>
<body>
<nav>
<a href="/">home</a>
<a href="/about">about</a>
</nav>
<div>
<h2>소개 페이지</h2>
<p>사용자 이름을 등록하시오.</p>
</div>
</body>
</html>
'Programming > Node.js' 카테고리의 다른 글
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [6] (0) | 2024.07.08 |
|---|---|
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [5] (0) | 2024.07.08 |
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [3] (0) | 2024.07.05 |
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [2] (0) | 2024.07.04 |
| 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [1] (0) | 2024.07.03 |
