today_is
[ spring ] 다른 ip와 DB 내용 공유하기 본문
오늘의 목표
같은 형식의 테이블 구조를 가지고 있는
두개 이상의 컴퓨터 DB의 내용을 공유해보자
home.jsp
미리 const urls 에 DB데이터를 전달받고 싶은 ip주소를 기입해둔다 !!
지금은 나와 같은 실습 중인 컴퓨터들의 DB데이터를 보는 경우이기 때문에
프로젝트명까지 똑같이 기입해주자 !! ( /day13/schedules )
유의할 점
: 콜백함수가 계속 중첩되면 관리하기 힘들다 !
콜백함수란, 다른 함수에 전달되는 함수
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="${cpath }/resources/css/style.css">
<script>
const cpath = '${cpath}'
const urls = [
'http://localhost:8080/day13/schedules',
'http://192.168.112.31:8080/day13/schedules',
'http://192.168.112.7:8080/day13/schedules',
'http://192.168.112.24:8080/day13/schedules',
]
</script>
<script src="${cpath }/resources/js/function.js">
</script>
</head>
<body>
<h1>day13</h1>
<hr>
<div id="modal" class="hidden">
<div class="content">
<form id="addForm">
<h3>일정 추가하기</h3>
<p><input type="text" name="memo" placeholder="메모" required></p>
<p><input type="date" name="sDate" required></p>
<p>
<input type="submit" value="등록">
<input id="close" type="button" value="돌아가기">
</p>
</form>
</div>
<div class="overlay"></div>
</div>
<div class="buttons">
<button id="open">일정 추가</button>
</div>
<div id="root">
<div class="menu">
<div class="item selected">localhost</div>
<div class="item">나</div>
<div class="item">7번 자리</div>
<div class="item">24번 자리</div>
</div>
<div class="content">
<img src="${cpath }/resources/image/loading.gif">
</div>
</div>
<script>
// 문서가 모두 불러지면 특정 요소를 호출하여 이벤트를 연결하는 함수
function loadHandler() {
// 상단 메뉴를 클릭했을 때 스타일 옮겨가는 내용
const itemList = document.querySelectorAll('.menu > .item') // 이벤트 대상
itemList.forEach(element => element.addEventListener('click', itemListClickHandler))
// 상단 메뉴를 클릭했을때 fetch 로 데이터를 불러와서 div#root > div.content 에 내용 띄우기
itemList.forEach(element => element.addEventListener('click', menuClickHandler))
// 열기, 닫기 버튼에 모달 작동 연결
const modal = document.getElementById('modal')
const btns = [
document.getElementById('open'),
document.getElementById('close'),
document.querySelector('div.overlay')
]
btns.forEach(b => b.onclick = event => modal.classList.toggle('hidden'))
// form을 제출하면 자신의 서버에 POST 로 등록하기
const form = document.forms[0]
form.onsubmit = submitHandler // form.onsubmit 에다가 submitHandler 를 대입하기
}
window.addEventListener('DOMContentLoaded', loadHandler)
</script>
</body>
</html>
function.js
// HTML 문서를 불러오지 않아도 설정할 수 있는 전역변수 및 함수 정의
function itemListClickHandler(event) { // 이벤트 핸들러
document.querySelectorAll('.menu > .item').forEach(item => {
item.classList.remove('selected')
})
event.target.classList.add('selected')
}
function getDateStringFromLong(num) { // 매개변수 : 자바스크립트에서는 자료형 없이
const days = ['일', '월', '화', '수', '목', '금', '토' ]
const date = new Date(num)
let yyyy = date.getFullYear()
let mm = date.getMonth() + 1
let dd = date.getDate()
let day = date.getDay()
// return yyyy + '년 ' + mm + '월 ' + dd + '일 '
// 백틱이용해서 출력도 가능
return `${yyyy}년 ${mm}월 ${dd}일 ${days[day]}요일`
}
// json은 배열이다 (현재 배열 내부에는 idx / sDate / memo 속성이 있음)
function getHTMLfromJson(json) {
let tag = ''
tag += '<table>'
tag += ' <thead>'
tag += ' <tr>'
tag += ' <th>번호</th>'
tag += ' <th>날짜</th>'
tag += ' <th>내용</th>'
tag += ' <th>삭제</th>'
tag += ' </tr>'
tag += ' </thead>'
tag += ' <tbody>'
json.forEach(dto => {
tag += `<tr>`
tag += ` <td>${dto.idx}</td>`
tag += ` <td>${getDateStringFromLong(dto.sDate)}</td>`
tag += ` <td>${dto.memo}</td>`
tag += ` <td><button class="delete" idx=${dto.idx}>삭제</button></td>`
tag += `</tr>`
})
tag += ` </tbody>`
tag += `</table>`
return tag
}
async function menuClickHandler(event) { // async : 비동기함수
// 0) 반복문의 인덱스 대신, 이벤트 대상이 menu item의 몇번째인지 찾아낸다
const arr = Array.from(document.querySelectorAll('.menu > .item'))
const index = arr.indexOf(event.target)
// 1) 어떤 주소로 요청을 보낼 것인가 결정
const url = urls[index]
// 2) 주소로 요청하여 json 데이터를 받아온다
// await : await 가 걸린 async 함수는
// promise 타입이 아니라, 원본 그대로 반환된다 !!
const json = await fetch(url).then(resp => resp.json())
// 3) 받아온 json 을 HTML 태그 문자열로 변환
const tag = getHTMLfromJson(json)
// 4) 태그를 삽입할 HTMLElement 를 찾아서 태그를 넣는다
const content = document.querySelector('#root > .content')
content.innerHTML = tag
}
const submitHandler = event => {
const ob = {
sDate : event.target.querySelector('input[name="sDate"]').value ,
memo : event.target.querySelector('input[name="memo"]').value,
}
const url = cpath + '/schedules'
const opt = {
method: 'POST',
body: JSON.stringify(ob),
headers: {
'Content-Type' : 'application/json; charset=utf-8'
}
}
fetch(url, opt)
.then(resp => resp.text())
.then(text => {
if(text == 1) {
// 이벤트 강제 발생시키기
const event = new Event('click')
// querySelector 는 원래 첫번째 요소의 값을 가져온다
document.querySelector('.menu > .item').dispatchEvent(event)
close.dispatchEvent(event)
}
else {
alert('정상적으로 등록이 되지 않았습니다')
// document.querySelector('input').focus() : focus 와 select 둘 다 가능
document.querySelector('input').select()
}
})
}study_review
정상적으로 처리가 되지 않았을 경우에는 alert 처리를 해주었다
사용자에게 최대한 친절한 페이지를 만들기 위해서는
안내 메시지는 필수이다!
에러나 정상 처리가 되지 않았을때는 꼭 안내를 해주자.
그리고 json 은 배열임을 잊지말자
json데이터를 처리하기 전에는 어떤 속성이 있는지 먼저 원본 배열을 살펴보자 !
'spring' 카테고리의 다른 글
| [ websocket ] 채팅 (0) | 2024.03.04 |
|---|---|
| [ websocket ] 메모장 (0) | 2024.03.03 |
| [ json ] HashMap 을 이용한 json 데이터 mapping (0) | 2024.02.04 |
| [ Exception ] 예외처리, 예외전가 (0) | 2024.01.30 |
| [ spring ] 간단한 POS 구현 (0) | 2024.01.19 |
'spring' Related Articles
more
