블로그 만들기 | 게시글 쓰기 :: 혼자 깨닫기 위함

블로그 만들기 | 게시글 쓰기

2022. 11. 14. 21:47

글 작성 페이지 만들기

[header.jsp]

<ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="/board/saveForm">글쓰기</a></li>
    <li class="nav-item"><a class="nav-link" href="/user/updateForm">회원정보</a></li>
    <li class="nav-item"><a class="nav-link" href="/logout">로그아웃</a></li>
</ul>

글쓰기 버튼을 눌렀을때 /board/saveForm 주소 Controller 만들기

[BoardController]

// USER 권한이 필요
@GetMapping("/board/saveForm")
public String saveForm() {
    return "board/saveForm";
}

리턴시 saveForm 뷰화면 생성하기

[saveForm]

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

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

<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 src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

* 주의 ../layout/header.jsp 폴더위치 잘보자! ../ 는 board 폴더는 layout폴더 위의 폴더

- 결과 화면

글쓰기 페이지에서 내용부분에 summernote 를 적용해보자

써머노트란?

https://summernote.org/getting-started/#for-bootstrap-4

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

▼ 썸머노트 홈페이지 - Gettring started - Installation - For bootstrap4 태그

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

위의 전체 태그에서 필요한 태그만 가져간다

1. 두 링크만 header.jsp 의 <head>태그 안에 추가해주기. (나머지는 jquery, bootstrap..있는거라서 필요없음)

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

2. script 부분은 글쓰기 페이지[saveForm] 에 넣어주기

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

[saveForm]

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

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

<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"%>

script 태그의 .suumernote 는 textarea태그의 클래스이다.

- 써머 노트 적용됨

글 작성해보기

글쓰기는 form 태그로 요청하지 않고 자바스크립트를 써서 제이슨으로 요청을 할것이다.

** 버튼 태그를 form밖으로 꺼내야 정상실행.

1. 글쓰기 완료 버튼을 누르면 Title과 Content 의 id를 가지고 <script src="/js/board.js"></script>자바스크립트로 이동한다

<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>

board.js 파일만들기

2. #title, #content 두개의 data를 가지고 제이슨으로 데이터로 변경하고 url:"/api/board" 주소인 Controller 로 보낸다.

[board.js]

** user.js 복붙해서 수정하기

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

index.init();

3. [BoardApiController]

현재 title, content만 들고 있는 상태에서 글쓰기()넘어가면 안되니까 user객체도 추가하기 (누가 썼는지 알수있음)

▶ @AuthenticationPrincipal PrincipalDetail principal 추가하여 user 객체도 함께 가져오도록

@RestController
public class BoardApiController {

@Autowired
private BoardService boardService;

@PostMapping("/api/board")
public ResponseDto<Integer> save(@RequestBody Board board,@AuthenticationPrincipal PrincipalDetail principal) {
boardService.글쓰기(board, principal.getUser());
return new ResponseDto<Integer>(HttpStatus.OK.value(), 1); //자바 오브젝트를 JSON으로 변환해서 리턴
}
}

boardService.글쓰기() 에는 title, content, user정보가 넘어간다

이때 중요한것! principal.getUser() 을 하기위해서는

PrincipalDetail 클래스에 @Getter 어노테이션이 있어야 user객체를 꺼내쓸 수 있는데

@Getter @Setter 가 포함된 @Data 어노테이션을 썼다

@Data
public class PrincipalDetail implements UserDetails{

}

4. [BoardRepository]

public interface BoardRepository extends JpaRepository<Board, Integer>{

}

5. [BoardService]

@Service
public class BoardService {

private final BoardRepository boardRepository;

@Transactional
public void 글쓰기(Board board,User user) {
board.setCount(0);
board.setUser(user);
boardRepository.save(board);
}
}

boardService.글쓰기(board, principal.getUser()); 유저객체를 담아 보냈으니 글쓰기() 에도 User객체를 받아준다.
count는 @ColumnDefalut("0") 어노테이션을 지우고 직접 값을 가져옴 board.setCount(0);

~~@ColumnDefault("0")~~

private int count;

[Board]

public class Board {

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY) //auto_increment
	private int id;
	
	@Column(nullable = false, length=100)
	private String title;
	
	@Lob //대용량 데이터
	private String content; 	// 섬머노트 라이브러리 <html>태그가 섞여서 디자인이 됨.

	private int count; //조회수
	
	@ManyToOne(fetch = FetchType.EAGER) // Many=Board , One=User (한명의 유저는 여러개 게시글을 쓸수있다.)
	@JoinColumn(name="userId")
	private User user; // DB는 오브젝트를 저장할 수없다. FK,자바는 오브젝트를 저장할 수 있다.
	
	// 무조건 들고와야하면 EAGER , 댓글펼치기 기능처럼 필요하지 않을 수도 있다면 LAZY전략
	@OneToMany(mappedBy = "board",fetch = FetchType.EAGER) //mappedBy 연관관계의 주인이 아니다(난 FK가 아니다 ,DB에 칼럼을 만들지 마세요)
	private List<Reply> reply;
	
	@CreationTimestamp // insert,update 될 때 시간이 자동 입력 (비워놔도 됨)
	private Timestamp createDate; 
}

title,content는 이미 들고있고
id, userId, reply, createDate 는 DB에서 처리. 가져올 필요없음
count 값 강제로 넣음
user 정보는 @AuthenticationPrincipal PrincipalDetail principal 써서 가져옴

6. 글과 이미지도 DB저장된 것을 볼 수 있다

(2~11을 에 삭제해버려서 id가 1,12 인 것)

* p태그는 써머노트가 만들어줌

LIST

'Spring boot | 블로그 만들기' 카테고리의 다른 글

블로그 만들기 \| 게시글 상세 페이지, 수정 , 삭제 (1)	2022.11.15
블로그 만들기 \| 게시글 목록 보기, 페이징 처리하기 (0)	2022.11.14
스프링 시큐리티 로그인 \| loadUserByUsername 오버라이드, 암호화 된 비밀번호 비교하기 (0)	2022.11.13
스프링 시큐리티 로그인 \| UserDetails , getAuthorities() 람다식 (0)	2022.11.13
비밀번호 해쉬화 하여 회원가입하는 법 (0)	2022.11.12

혼자 깨닫기 위함