포스코DX X 비트교육센터 6기 - AJAX 수업과제

MYSITE06 - Guestbook : AJAX CRUD

프로그램 실행 방법

  • MySiteApplication.java 실행

CREATE

image

image

  • Create(post) 는 사용자의 입력을 받아, DB에 저장하는 방식이다.

[main-ajax.jsp]

  • 따라서, 페이지를 보여주는(프론트단) jsp 파일에서 input에 들어오는 value값을 받아온다.
  • 그런 다음, ajax를 통해 post 방식으로 값을 넘겨준다.
  • 프론트단에서는 render함수를 이용해서 html코드를 생성해준다. (사용자가 입력한 데이터가, 사용자 눈에 보이도록)

  • render를 통해 보내는 mode값은 해당 html코드(게시물)를 목록의 상단에 보여줄지, 하단에 보여줄지를 결정한다.

  • 추가설명: prepend와 append 메소드

image

[ GuestbookController.java ]

  • 사용자가 입력한 값은, 이곳에서 DB에 저장시킨다. 만약, 이 곳에서 추가적인 작업없이 단순히 return JsonResult.success(vo) 를 해준다면, DB에는 값이 저장되지 않고, 사라지는 휘발성 데이터가 될 것이다.

  • 따라서 기존에 만들었던 GuestbookService.java와 GuestbookRepository.java, 그리고 guestbook.xml을 이용하여 DB에 저장시키는 과정의 트리거를 작성해준다. (트리거라는 말이 맞을까..?)

main-ajax.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>mysite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/guestbook-ajax.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery/jquery-1.9.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var render = function(vo, mode) {
	var html = 
		"<li data-no='" + vo.no + "'>" +
		"<strong>" + vo.name + "</strong>" +
		"<p>" + vo.contents + "</p>" +
		"<strong></strong>" +
		"<a href='#' data-no='" + vo.no + "'>삭제</a>" +
	    "</li>"
		    
	$("#list-guestbook")[mode ? 'prepend' : 'append'](html);
}

$(function(){
	$('#add-form').submit(function(event) {
		event.preventDefault();
		
		var vo = {};
		vo.name = $("#input-name").val();
		vo.password = $("#input-password").val();
		vo.contents = $("#tx-content").val();
		
		$.ajax({
			url: '${pageContext.request.contextPath }/api/guestbook',
			type: 'post',
			dataType: 'json',
			contentType: 'application/json',
			data: JSON.stringify(vo),
			success: function(response) {
				if(response.result === 'fail') {
					console.error(response.message);
					return;
				}
				
				render(response.data, true);
			}
		})
	});
});
</script>
</head>
<body>
	<div id="container">
		<c:import url="/WEB-INF/views/includes/header.jsp" />
		<div id="content">
			<div id="guestbook">
				<h1>방명록</h1>
				<form id="add-form" action="" method="post">
					<input type="text" id="input-name" placeholder="이름">
					<input type="password" id="input-password" placeholder="비밀번호">
					<textarea id="tx-content" placeholder="내용을 입력해 주세요."></textarea>
					<input type="submit" value="보내기" />
				</form>
				<ul id="list-guestbook">

					<li data-no=''>
						<strong>지나가다가</strong>
						<p>
							별루입니다.<br>
							비번:1234 -,.-
						</p>
						<strong></strong>
						<a href='' data-no=''>삭제</a> 
					</li>
					
					<li data-no=''>
						<strong>둘리</strong>
						<p>
							안녕하세요<br>
							홈페이지가 개 굿 입니다.
						</p>
						<strong></strong>
						<a href='' data-no=''>삭제</a> 
					</li>

					<li data-no=''>
						<strong>주인</strong>
						<p>
							아작스 방명록 입니다.<br>
							테스트~
						</p>
						<strong></strong>
						<a href='' data-no=''>삭제</a> 
					</li>
					
									
				</ul>
			</div>
			<div id="dialog-delete-form" title="메세지 삭제" style="display:none">
  				<p class="validateTips normal">작성시 입력했던 비밀번호를 입력하세요.</p>
  				<p class="validateTips error" style="display:none">비밀번호가 틀립니다.</p>
  				<form>
 					<input type="password" id="password-delete" value="" class="text ui-widget-content ui-corner-all">
					<input type="hidden" id="hidden-no" value="">
					<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
  				</form>
			</div>
			<div id="dialog-message" title="" style="display:none">
  				<p></p>
			</div>						
		</div>
		<c:import url="/WEB-INF/views/includes/navigation.jsp">
			<c:param name="menu" value="guestbook-ajax"/>
		</c:import>
		<c:import url="/WEB-INF/views/includes/footer.jsp" />
	</div>
</body>
</html>

GuestbookController.java

package com.poscodx.mysite.controller.api;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.poscodx.mysite.controller.dto.JsonResult;
import com.poscodx.mysite.service.GuestbookService;
import com.poscodx.mysite.vo.GuestbookVo;

@RestController("guestbookApiController")
@RequestMapping("/api/guestbook")
public class GuestbookController {
	
	@Autowired
	private GuestbookService guestbookService;
	
	@PostMapping
	public JsonResult create(@RequestBody GuestbookVo vo) {
		
		guestbookService.addContents(vo);
		return JsonResult.success(vo);
	}
	
}

(+) GuestbookService.java 일부분

	public Boolean addContents(GuestbookVo vo) {
		return guestbookRepository.insert(vo);
	}

(+) GuestbookRepository.java 일부분

	public Boolean insert(GuestbookVo vo) {
		int count = sqlSession.insert("guestbook.insert", vo);
		return count == 1;

(+) guestbook.xml 일부분

	<insert id="insert" parameterType="guestbookvo">
		<![CDATA[
		insert
		  into guestbook
		values (null, #{name }, #{password }, #{contents }, now())
		]]>
	</insert>
  • 더 필요한 처리 : 데이터가 성공적으로 처리될 경우, input 안의 내용을 지워주기.