[spring] 클론코딩14 Post - 게시글 등록

Controller

---

PostsController

//게시글 작성 페이지 personal-write.jsp 요청
@RequestMapping(value="/{id}/personal-write", method=RequestMethod.GET)
public String personalWrite(@PathVariable String id, Model model, HttpSession session) throws Exception {
	
	
	//id로 회원의 모든 정보 조회
	UsersVO user = usersService.inquiryOfUserById(id);
	
	//로그인한 회원 (=나) 정보 담기
	Object object = session.getAttribute("login");
	UsersVO loginUser = (UsersVO)object;
	
	//개인페이지의 유저 번호 가져오기
	int userNo = user.getUserNo();
	//로그인 회원 유저 번호 가져오기
	int loginUserNo = loginUser.getUserNo();
	logger.info("현재 페이지 주인의 번호 : " + userNo + ", 로그인 유저의 번호 : " + loginUserNo);
	
       
	//사용자 아이디로 사용자 번호(pk)를 조회해서 그 번호로 게시물 가져오기
	model.addAttribute("post", postsService.selectPostListById(id));
	//회원의 정보
	model.addAttribute("user", user);

		
	return "post/personal-write";
}

personal-write.jsp

인스타그램 웹페이지에서는 게시글을 업로드할 수 없도록 되어있다. 하스타그램에서는 업로드할 수 있도록 개인적으로 틀을 만들어보았다. 프론트엔드 다루는게 익숙치 않아서 밑에 버튼 두개를 배치하는데 어려움을 느꼈다. 결국 배치는 위에 사진상태로 완성 되었지만 다른 기능들 만들고 다시 건들여봐야겠다.

 

 

//게시글 등록 요청
@RequestMapping(value="/upload", method=RequestMethod.POST)
public String write(PostsVO post) throws Exception {
	
	logger.info("/post/upload : POST요청");
	
	//프론트에서 가져온 게시글 확인
	logger.info("가져온 글 : " + post.toString());
	
	//파일데이터를 가져온다.
	MultipartFile mfile = post.getFile();
	//post에 값 지정해주기
	post.setFileName(mfile.getOriginalFilename());	//파일 이름 지정
	post.setFileSize(mfile.getSize());
	post.setFileContentType(mfile.getContentType());
	post.setFileData(mfile.getBytes());
	
	//게시글 내용 다시 확인
	logger.info("게시글 : " + post.toString());
	//게시글 등록 요청
	postsService.insertPost(post);
	
	
	//재요청 redirect : DB를 거쳐서 나와야하기 때문에 
	return "redirect:/post/list";

프론트에서 user_no, id, caption, file을 가져온다. 파일 처리를 해준 후 DB에 등록 요청을 한다. DB를 거쳐 나와야하기 때문에 redirect로 재요청한다. 

 

 

 

 

Service

---

PostsService

//게시물 등록 기능(사진 첨부파일 포함)
@Override
public void insertPost(PostsVO post) throws Exception {
	
	//엔터키와 스페이스바 처리 제약 로직을 게시글 등록시에 처리
	String adjustCaption = post.getCaption()
							.replace("\n", "<br>")
							.replace("u0020", "&nbsp;");
	
	post.setCaption(adjustCaption);
	
	postsDAO.insertPost(post);
}

서비스 단에서 게시글 등록시 엔터키와 스페이스바를 처리해주었다.

 

 

 

 

View

---

personal-write.jsp

<!-- 게시물 작성 공간 -->
<article class="write-article">
	<form class="write-form" action="<c:url value='/post/upload' />" method="post" enctype="multipart/form-data">

		<input type="hidden" name="userNo" value="${login.userNo }">
		<input type="hidden" name="id" value="${login.id }">
					
		<div class="write-upload">
		 	<!-- 이미지 미리보기 부분 -->
			<div class="left-side">
			 	<img id="img" class="preview-img">   
			</div>
			<!-- 게시글 내용 작성 부분 -->
			<div class="right-side">
				<textarea class="input-textarea" name="caption" placeholder="문구 입력..." style="resize: none;"></textarea>
			</div>
		</div>
					
		<div class="write-upload">
			<!-- 이미지 업로드 버튼 부분 -->
			<div class="left-side fileBox" style="padding-right: 80px;">
				<input type="file" id="input_img" name="file" style="width: 0; height: 0;">
			</div>
			<!-- 공유 버튼 부분 -->
			<div class="right-side">
				<input type="submit" value="공유" class="input-btn upload-btn" disabled="disabled">
			</div>
		</div>
	</form>
				
	<div class="left-side fileBox" style="padding-right: 80px;">
		<button class="input-btn photo_find_btn">찾기</button>
	</div>
</article>

게시물 작성 공간 form

 

var sel_file;

$('#input_img').on("change", handleImgFileSelect);

function handleImgFileSelect(e) {

	$('.upload-btn').attr('disabled', false);

	var files = e.target.files;
	var filesArr = Array.prototype.slice.call(files);

	filesArr.forEach(function(f){
		sel_file = f;

		var reader = new FileReader();
		reader.onload = function(e) {
			$("#img").attr("src", e.target.result);
		}
		reader.readAsDataURL(f);
	});
}

$('.photo_find_btn').click(function(e) {
	$("input:file").click();
});

 파일 이미지 찾기 버튼