클라이언트 설계하기
- 필요 기능
- 메모 조회
- GET API 사용해서 메모 목록 불러오기
- 메모마다 HTML 만들고 붙이기 - 메모 생성
- 사용자가 입력한 메모 내용 확인
- POST API 사용해서 메모 신규 생성
- 화면 새로고침하여 업데이트 된 메모 목록 확인 - 메모 변경
- 사용자가 클릭한 메모가 어떤 것인지 확인
- 변경한 메모 내용 확인
- PUT API 사용해서 메모 내용 변경
- 화면 새로고침하여 업데이트 된 메모 목록 확인 - 메모 삭제
- 사용자가 클릭한 메모가 어떤 것인지 확인
- DELETE API 사용해서 메모 삭제
- 화면 새로고침하여 업데이트 된 메모 목록 확인
- 메모 조회
함수 작성하기
- 메모 조회 - getMessages, addHTML, makeMessage 함수
// 메모를 불러와서 보여줌 function getMessages() { // 1. 기존 메모 내용 삭제 $('#cards-box').empty(); // 2. 메모 목록을 불러와서 HTML로 붙임 $.ajax({ type: 'GET', url: '/api/memos', success: function (response) { for (let i = 0; i < response.length; i++) { let message = response[i]; let id = message['id']; let username = message['username']; let contents = message['contents']; let modifiedAt = message['modifiedAt']; addHTML(id, username, contents, modifiedAt); } } }); } // 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙임 function addHTML(id, username, contents, modifiedAt) { // 1. HTML 태그 생성 let tempHtml = makeMessage(id, username, contents, modifiedAt); // 2. #card-box 에 HTML 붙임 $('#cards-box').append(tempHtml); } // HTML 태그 생성 함수 function makeMessage(id, username, contents, modifiedAt, i) { return `<div class="card"> <!-- date/username 영역 --> <div class="metadata"> <div class="date"> ${modifiedAt} </div> <div id="${id}-username" class="username"> ${username} </div> </div> <!-- contents 조회/수정 영역--> <div class="contents"> <div id="${id}-contents" class="text"> ${contents} </div> <div id="${id}-editarea" class="edit"> <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea> </div> </div> <!-- 버튼 영역--> <div class="footer"> <img id="${id}-edit" class="icon-start-edit" src="images/edit.png" alt="" onclick="editPost('${id}')"> <img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')"> <img id="${id}-submit" class="icon-end-edit" src="images/done.png" alt="" onclick="submitEdit('${id}')"> </div> </div>`; }
- 메모 생성 - writePost 함수
// 메모 생성 function writePost() { // 1. 사용자가 작성한 메모를 불러옴 let contents = $('#contents').val(); // 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인 if (isValidContents(contents) == false) { return; } // 3. genRandomName 함수를 통해 익명의 username 생성 let username = genRandomName(10); // 4. 전달할 data를 JSON으로 생성 let data = {'usename': username, 'contents': contents}; // 5. POST /api/memos 에 data 전달 $.ajax({ type: "POST", url: "/api/memos", contentType: "application/json", // JSON 형식으로 전달함을 알리기 data: JSON.stringify(data), // JSON을 문자열로 만들어줌 success: function (response) { alert('메시지가 성공적으로 작성되었습니다.'); window.location.reload(); // 화면 새로고침 } }); }
- 메모 변경 - submitEdit 함수
// 메모 수정 function submitEdit(id) { // 1. 작성 대상 메모의 username과 contents 확인 let username = $(`#${id}-username`).text().trim(); let contents = $(`#${id}-textarea`).val().trim(); // 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인 if (isValidContents(contents) == false) { return; } // 3. 전달한 data 를 JSON 으로 만듦 let data = {'username': username, 'contents': contents}; //4. PUT /api/memos/{id} 에 data 전달 $.ajax({ type: "PUT", url: `/api/memos/${id}`, contentType: "application/json", data: JSON.stringify(data), success: function (response) { alert('메시지 변경에 성공하였습니다.'); window.location.reload(); } }); }
- 메모 삭제 - deleteOne 함수
// 메모 삭제 function deleteOne(id) { $.ajax({ type: "DELETE", url: `/api/memos/${id}`, success: function (response) { alert('메시지 삭제에 성공하였습니다.'); window.location.reload(); } }) }
타임라인 서비스 화면
'Spring' 카테고리의 다른 글
[Spring] 나만의 셀렉샵 프로젝트 - 서버(API, Spring MVC, JPA) (0) | 2024.07.29 |
---|---|
[Spring] 나만의 셀렉샵 프로젝트 - 네이버 쇼핑 API 이용(API, Spring MVC, JPA) (0) | 2024.07.29 |
[Spring] 타임라인 서비스 프로젝트 - 서버(API 설계/ Spring MVC/ JPA) (0) | 2024.07.23 |
[Spring] API (0) | 2024.07.18 |
[Spring] Lombok, DTO (0) | 2024.07.17 |