[블로그프로젝트] 20. 글작성하기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

이제 로그인까지 진행했으니 글을 작성하는 기능을 작업해보자.

가장먼저 BoardControllerf로 이동해 주소를 변경해준다.

컨트롤러에서 주소를 변경했으니 header에서도 주소를 변경해주자

주소를 변경해주었으니 이제 해당 주소대로 파일을 생성하자

views 패키지 아래에 board폴더를 생성 후 saveForm.jsp를 만들어주자(loginForm을 복사한 후 이름을 바꾸면 편하다)

간단하게 잘 작동을 하는지 테스트해보도록 하자

참고로 loginForm을 복사해서 이름을 변경했다면 header와 footer 주소를 상위폴더로 만들어주어야한다

layout 앞에 "../" 를 추가해주면 된다

주소로 이동해보면 잘 작동하는걸 확인할 수 있다.

간단하게 제목과 내용을 작성할 수 있는 부분을 만들어준다.

<form action="#" method="post">
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" id="title" placeholder="title">
        </div>
        <div class="form-group">
            <label for="content">Content</label>
            <textarea class="form-control summernote" rows="5" id="content"></textarea>
        </div>


    </form>

위와같이 기본적인 텍스트박스가 아닌 조금 꾸며보도록하자

https://summernote.org/getting-started/

검색창에 summernote를 검색 후 페이지로 이동해

(상단)getting started -> (사이드)installation -> for bootstrap 4로 이동하거나 위에 첨부된 링크로 이동하면 된다.

그런다음 아래 두줄의 코드를 복사한다.

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

복사한 코드를 header.jsp에 <head> 부분에 추가한다.

다시 summernote로 이동해서 스크립트 부분을 복사해주자

	<script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>

해당코드를 saveForm.jsp 에 추가해준다.

이제 텍스트박스에 summernote를 적용해보도록하자

서버를 실행 후 해당 주소로 이동해보면 잘 적용된 모습을 확인할 수 있다.

이제 버튼을 눌렀을 때 반응할 이벤트를 추가해줄 차례 js패키지에 Board.js를 생성해주자(user.js를 복사한 후 이름을 바꾸어도 된다.)

내용은 아래와 같다.

버튼을 눌렀을때 save를 호출하고 여기서 사용자가 작성한 title 과 content값을 가져와 /api/board 라는 주소로 전송한다.

let index ={
    init: function(){
        $("#btn-save").on("click",()=> {
            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("글작성실패")
                alert(JSON.stringify(error));
            });

    }


}




index.init();

그 값을 어디로 보내는데? 그 값들을 boardApiController로 가져간다.

해당 사진에선 주소가 /auth/board로 되어있지만 /api/board로 변경해주었다.

 @PostMapping("/api/board")
    public ResponseDTO<Integer> save(@RequestBody Board board){
    
        return new ResponseDTO<Integer>(HttpStatus.OK.value(),1);
    }

repository 패키지에 BoardRepository를 생성해준다.(userRepositry를 복사해주어도 된다.)

public interface BoardRepository extends JpaRepository<Board,Integer> {


}

다음으로 서비스를 생성해주자 service 패키지에 BoardService 파일을 생성해주자

기능을 작성하기 전 board.java 파일을 확인해보면 title 과 content 외에도 유저정보가 필요하다.

@AllArgsConstructor
@NoArgsConstructor
@Builder
@Data
@Entity
public class Board {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int board_idx;

    @Column(length = 100,nullable = false)
    private String title;

    @Lob
    private String content; 

    private int count;

    @ManyToOne //Mnay = board, one+ user
    @JoinColumn(name = "user_idx")
    private User user; 

    @OneToMany(mappedBy = "board", fetch = FetchType.EAGER)
    private List<Reply> reply;

    @CreationTimestamp
    private Timestamp createDate;

}

유저정보를 가져오기 위해서 principalDetail.Java로 이동해서 getter 어노테이션을 추가해준다.

setter 까지는 필요하지 않아서 data 나 setter 를 추가하지 않고 getter만 추가해주어도 무방하다.

boardService로 이동해 기능코드를 작성해주자

매개변수는 Board 와 User 두개를 받는 메서드 글쓰기를 작성해준다.

여기서 조회수는 0을 기본으로 넣어주고 유저정보도 함께 넘겨준다.

@Autowired
    private BoardRepository boardRepository;

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

BoardApiController로 이동해서 기능을 마저 작성해주도록 하자

저번포스트에서 로그인한 user 정보를 시큐리티세션에 저장한 값을 principalDetail에서 확인해볼 수 있었다.

서비스단에서 board와 user정보를 사용하기위해 컨트롤러에서 두개의 매개변수를 받아서

서비스단에 작성한 글쓰기 메서드에 보내준다.

 @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);
    }

이제 기능작성은 모두 해보았고 테스트를 해볼시간이다.

버튼을 누르면 작성한 alert대로 글작성완료라고 뜬다.

값이 제대로 db에 들어갔는지 확인해보면 작성자가 작성한 title, content 뿐만아니라 작성자의 인덱스번호까지 저장이되는걸 확인할 수 있다.

저작자표시 비영리 동일조건

'프로젝트 > Spring Boot 블로그프로젝트' 카테고리의 다른 글

[블로그프로젝트] 22. 글목록 페이징처리 (0)	2023.06.12
[블로그프로젝트] 21. 글목록 만들기 (0)	2023.06.11
[블로그프로젝트] 19-1. 시큐리티세션에 저장된 아이디값 확인해보기 (0)	2023.06.09
[블로그프로젝트] 19. 시큐리티로 로그인하기 (4)	2023.06.09
[블로그프로젝트] 18. 비밀번호 해쉬 후 회원가입하기 (0)	2023.06.07