Spring Boot(게시글작성)

header

헤더바에서 글쓰기 버튼을 누르면 글을 작성할 수 있는 폼으로 이동시켜줘야한다.

 

header.jsp

header.jsp을 보면 글쓰기를 클릭하면 /board/saveForm으로 이동하게 설정되어 있다. 이를 잡아줄 수 있는 컨트롤러를 하나 만들어야 한다.

 

boardController.java

 

/board/saveForm으로 이동하는 url을 핸들링해서 "board/saveForm"으로 이동시켜준다.

board/saveForm은 실제로 사용자들이 글을 작성할 수 있게끔 폼을 보여줘야하므로, views 폴더 밑에 board라는 폴더를 생성 후 saveForm.jsp를 생성해준다.

 

 

W3Schools Free Online Web Tutorials

 

위의 링크로 이동해서 bs4 bootstrap Form을 가져와 글쓰기 폼에 맞게 양식을 가져와 사용해도 되고. loginForm.jsp에 사용되었던 폼을 그대로 사용해도 된다. (참고로 필자는 summernote를 사용했기 때문에 저 처럼 summernote를 사용해서 간단하게 꾸미실분은 코드를 참고하시면 됩니다.)

<div class="container">
	<form>
		<div class="form-group">
			<input type="text" class="form-control" placeholder="Enter title" id="title">
		</div>



		<div class="form-group">
			<textarea class="form-control summernote" rows="5" id="content"></textarea>
		</div>

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

<script>
      $('.summernote').summernote({
        tabsize: 2,
        height: 300
      });
</script>

<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

 

글쓰기 폼

글을 다 작성하고 글쓰기 완료 버튼을 누르면 글이 성공적으로 저장되어 다른 사용자들도 게시글을 볼 수 있게끔 메인 페이지에 업로드가 되어야한다. 이를 위해서 board.js에서 구현이 필요하다.

let index = {
	init: function(){
		$("#btn-save").on("click",()=>{
			this.save();
		});
	}
    
save: function(){
		let data = {
			title : $("#title").val(),
			content : $("#content").val(),
		}
		
		console.log(data);
		
		
		$.ajax({
			type: "POST",
			url:"/api/board",
			data: JSON.stringify(data),
			contentType:"application/json; charset=utf-8",
			dataType: "json"
		}).done(function(data){
			alert("글쓰기가 완료되었습니다.");
			console.log(data);
			location.href= "/";
		}).fail(function(error){
			alert(JSON.stringify(error));
		}); 
	},
}
index.init();

 

이렇게 코드를 구현하면 어떤식으로 작동하게 되냐

• index.init()으로 인해 ("#btn-save") 버튼이 눌리게 되면 즉, 글쓰기 완료 버튼이 눌리게 되면 this.save() 메소드를 실행시킨다.
• save() 메소드에서는 ("#title")과 ("#content")의 val 값을 가진 데이터들이 존재하고
• 이 데이터들이 api/board의 url로 "POST" 방식으로 이동할 것이다.

여기서 눈치챈 사람들을 바로 api/board로 이동하는 이 데이터들을 핸들링 할 수 있는 컨트롤러의 생성이 필요하다는 것을 느꼈을 것이다 ㅎㅎ

 

바로 api 패키지속에 BoardApiController.java 파일을 생성 후 작성한 글이 save 될 수 있게 만들어줘야한다.

천천히 생각을 해보면 Controller에서 해줘야할 일이 몇가지 존재한다.

1. title과 content를 받아줘야함.
2. 어떤 user가 썼는지 user도 받아줘야함.
3. Repository와 Service를 연결시켜서 글이 save 되도록 해야함.

 

BoardApiController.java

boardService를 di(의존성주입) 해주고, save 메소드는 title과 content를 받아줄 수 있는 board와 현재 유저의 정보를 가지고 있는 principal을 받을 수 있도록 설계하고, boardService에서는 글쓰기() 메소드를 생성하여 데이터를 그대로 보내준다.

 

 

BoardService.java

데이터를 넘겨받은 Service에서는 boardRepository(JPA Repository)를 의존성 주입해주고, Count(조회수), user(principal.getUser()) 설정을 해주고 save 해준다. (boardRepository도 따로 생성을 해줘야함 JPA repository를 상속받아서!!)

 

모든 구현을 마치고 글쓰기를 써서 완료 버튼을 누르면 모든 절차를 마친 board.js가 alert창으로 글쓰기를 성공했습니다! 라는 알림창을 보여주고, "/" 메인페이지로 이동하며 글쓰기가 성공한다!(물론 데이터베이스에 값이 알맞게 들어간다)