TIL 2023.02.14 Java Web 5 (SPA, libs, CORS, web.xml, modal)

Single Page Application

서버로 부터 새로운 페이지를 받는게 아니고 기존 페이지를 동적으로 다시 작성하는 것이므로 통신하는 양이 줄어들기 때문에 속도가 빠르다.
창의 전환 대신에 기존페이지를 애니메이션을 이용하여 페이지의 내용을 바꾸는 퍼포먼스를 보여줄 수 있다는 점도 장점

eclipse libraries 세팅

 

 

 

 

CORS (Cross Origin Resource Sharing)

허용되어있지 않은 사용자가 접속을 해서 값을 가져가는 것이 방지 하기 위한 정책
서버가 클라이언트에게 응답을 줄 때 즉 response를 줄 때 header에 특정 정보를 실어 보내서 구분
Controller 단에서 Response의 header를 세팅해주는 방법

resp.setHeader("Access-Control-Allow-Origin", "*");

web.xml의 init-param 태그

<servlet>
	<servlet-name>list</servlet-name>
	<servlet-class>com.bit.controller.ListController</servlet-class>
	<init-param>
		<description>description</description>
		<param-name>key1</param-name>
		<param-value>value1</param-value>
	</init-param>
</servlet>

init-param value값 얻어내기

String val = this.getInitParameter("key1");
		System.out.println(val);

init-param key값 얻어내기

Enumeration<String> enu = this.getInitParameterNames();
		while(enu.hasMoreElements()) {
			System.out.println(enu.nextElement()); // key1
		}

context 설정

---- web.xml
<context-param>
  	<param-name>key1</param-name>
  	<param-value>value1</param-value>
</context-param>
  
---- controller
ServletContext context = req.getServletContext();
String url = context.getInitParameter("key1");

modal

#popup{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    left: 0px;
    top: 0px;
}
#popup>.frame{
    width: 400px;
    margin: 50px auto;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}
#popup>.frame>div{
    padding: 2px;
}
#popup>.frame>div:first-child{
    background-color: seagreen;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
}
#popup>.frame>div:first-child+div{
    padding: 50px 20px;
    background-color: white;
}
#popup>.frame>div:last-child{
    background-color: seagreen;
    border-radius: 0px 0px 5px 5px;
    text-align: right;
}
#popup label{
	display: inline-block;
	width: 45px;
}
------ javascript
$(function(){
	// 버튼 또는 게시글 클릭 했을 때 모달창 띄우기
    $(document).on('click', '.p3>p>a', function(e){
	$('#popup').show();
	return false;
    });
	// 게시글을 눌렀을 때 상세보기
    $(document).on('click', '.p3>.table a', function(e){
	e.preventDefault();
	var deptno = $(this).children().first().html();
	$.getJSON('http://127.0.0.1:8080/api/dept.json', {deptno:deptno}, function(data){
		console.log(data)
	    $('#popup')
	    .show()
	    .find('h2').html('상세페이지')
	    .end()
	    .find('.footer>a:first-child').html('수정')
	    .end()
	    .find('input')
		.eq(0).val(deptno)
		.end()
		.eq(1).val(data.dept[0].dname)
		.end()
		.eq(2).val(data.dept[0].loc)
		.end()
		.prop('readonly',true);
	});
    });
    // X 버튼
    $('X').css({
	float:'right',
	border:'1px solid gray',
	borderRadius: '2px',
	display: 'block',
	width: '20px',
	height: '20px',
	color: 'white',
	backgroundColor: 'red'
    }).prependTo('#popup>.frame>.header')
    .click(function(){
	$('#popup').click();
    })
    // 안쪽 눌러도 모달창 안꺼지도록
    $('#popup>div').click(function(e){
	e.stopPropagation();
    });
    // 수정
    $('#popup .footer>a').click(function(e){
	e.preventDefault();
	if($(this).html()=='수정' && $('#popup .header h2').html()=='상세페이지'){
		$('#popup .header h2').html('수정페이지');
		$('#popup').find('input').not(":first").removeProp('readonly');
	} else if($(this).html()=='수정'){
		$('#popup form').submit();
	}
	if($(this).html()=='입력'){
	    $('#popup form').submit();
	}
	if($(this).html()=='닫기') $('#popup').click();
    });
    // 데이터 추가 or 수정
    $('#popup form').submit(function(e){
	e.preventDefault();
	if($('#popup').find('h2').html().startsWith('입력')){
	    var url ='http://127.0.0.1:8080/api/add.json';
	}
	if($('#popup').find('h2').html().startsWith('수정')){
	    var url ='http://127.0.0.1:8080/api/edit.json';
	}
	var param = $(e.target).serialize();
	console.log(url, param);
	$.post(url,param,function(){
	    $('#popup').click();
	    deptList();
	})
    });
    // 모달 기본 세팅 - 입력페이지
    $('#popup').hide()
	.click(function(e){
	    $(this).hide();
	    $(this)
		.find('input')
			.val("")
			.removeProp('readonly')
		.end()
		.find('h2').html('입력페이지')
		.end()
		.find('a').first().html('입력');
	});
----- html

 

 

입력 닫기