Spring-Boot Blog Project 7. 글쓰기 구현하기

이전 포스팅 

 

Spring-Boot Blog Project 6. 로그아웃 구현하기

Spring-Boot Blog Project 6. 로그아웃 구현하기

 

먼저 글을 쓸 수 있는 페이지를 만든다.

 

 

...views/post/saveForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp" %> 

<div class="container">
   <form class="was-validated" >
   
   <input id="userId" type="hidden" value="${sessionScope.principal.id}">
     
     <div class="form-group">
       <label for="title">Title:</label>
       <input id="title" type="text" class="form-control"  placeholder="Enter username" required>
     </div>
     
     <div class="form-group">
       <label for="content">Content:</label>
       <textarea id="content" rows="10" cols="50" class="form-control"></textarea>
       
     </div>

     <button id="btn-save" type="button" class="btn btn-primary">글쓰기 완료</button>
   </form>
</div>

<script src="/js/post.js"></script>

<%@ include file="../layout/footer.jsp" %>

 

이 페이지로 이동하는 로직을 컨트롤러에서 코딩한다.

 

/controller/PostController.java

--중략--

	@GetMapping("/post/saveForm")
	public String postForm() {
		return "post/saveForm";
	}
    
--하략--

 

이 페이지로 진입하는 url 내비게이션은 header에 제작되어 있다.

 

 

header.jsp

--중략--
<li class="nav-item"><a class="nav-link" href="/post/saveForm">글쓰기</a></li>
--하략--

 

이제 글을 써서 데이터베이스에 저장한다.

먼저 값을 보내줄 자바 스크립트 코드를 생성한다.

이전에도 누누히 말했지만 리액트와 안드로이드와의 연동을 위해 json으로 값을 보낼 것이기 때문에 단순히 form을 통한 key-value로 이동시킬 수 없으므로 자바스크립트를 이용해 값을 json으로 파싱해 전달한다.

 

let index = {
		
	init: function(){
		// let _this = this; //this 바인딩
		// $("#btn-save").on("click", function (){
		
		// 1. 리스너
		$("#btn-save").on("click", ()=>{
			
			// 콜백 스택
			this.save();
		});
		
	},
	
	save: function(){
		// alert("btn-save 로직 실행");
		let data = {
				title: $("#title").val(),
				content: $("#content").val(),
				userId: $("#userId").val()
		};
		
		$.ajax({
			type: "POST",
			url: "/post",
			data: JSON.stringify(data), // json 으로 바꿔줌
			contentType: "application/json; charset=utf-8", 
			dataType: "json"
			
		}).done(function(resp){
			// console.log(JSON.parse(resp)); // text 타입으로 데이터를 받았을때 json 오브젝트로
			// 바꿔줌

				alert("글쓰기 성공");
				location.href="/";
		}).fail(function(error){
			alert("글쓰기 실패");
			console.log(error);
		})
	}
}

index.init();

 

컨트롤러를 생성한다.

 

/controller/PostController.java

--중략--
	@PostMapping("/post")
	public @ResponseBody CommonRespDto<?> postProc(@RequestBody Post post) {
		postService.글쓰기(post);
		return new CommonRespDto<String>(1,"글쓰기 성공");
	}
    
--하략--

서비스에서 글쓰기를 담당할 함수를 생성한다 

 

 

/service/PostService.java

--중략--
	@Transactional 
	public void 글쓰기(Post post) {
		 postRepository.save(post);
			
	}
--하략--

 

이제 Repository에서 데이터베이스(xml) 과 연결할 함수를 생성한다

 

/repository/PostRepository.java

package com.mary.blog.repository;


import com.mary.blog.model.Post;

public interface PostRepository {
	public void save(Post post);
}

 

이제 save 클래스 내부에 들어갈 xml mapper을 만든다.

 

post.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mary.blog.repository.PostRepository">
	<insert id="save">
		INSERT INTO post(title, content, userId, createDate)
		VALUES(#{title}, #{content}, #{userId}, now())
	</insert>
	
</mapper>

 

만일 글쓰기가 성공한다면 Dto에서 statusCode가 1이 들어오면서 정상코드로 작동된다. 만일 컨트롤러의 return까지 도착하지 못한다면 오류가 뜨면서 ajax에서 에러코드가 발생한다.