나의 블로그 만들기 프로젝트 (6일차) - 글쓰기 완료

오늘 공부할 주제

Javascript 에 대해서

 

Github 코드 보기

---

1. 글쓰기 페이지 만들기

회원가입, 로그인 페이지를 만든 것과 같이 자신이 원하는 디자인을 입혀서 글쓰기 페이지를 만들도록 한다.

 

//writeForm.jsp

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

<div class="form-save">
    <form>
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" placeholder="Enter title" id="title">
        </div>

        <div class="form-group">
            <label for="content">Content</label>
            <textarea class="summernote" rows="5" id="content"></textarea>
        </div>
    </form>
    <button id="btn-write" class="btn btn-primary">글작성완료</button>

</div>

<script>
    $('.summernote').summernote({
        placeholder: '글을 작성해주세요',
        tabsize: 2,
        height: 300,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });
</script>

나 같은 경우 제목의 input은 그대로 사용하였고, 내용은 summernote를 통해 edit기능가지 추가하였다.

 

자세한 것은 이쪽 링크를 통해 알아보자 https://summernote.org/getting-started/

Summernote - Super Simple WYSIWYG editor

---

2. Controller 만들기

우리가 만든 글쓰기 페이지를 리턴 받기위해 view 리턴 Controller를 만들어 주어야 한다.

//BoardController 클래스

@GetMapping("/board/writeForm")
public String writeForm(){
    return "board/writeForm";
}

간단하게 BoardController에 writeForm() 메소드를 Get방식으로 만들어준다.

 

그리고 navbar가 있는 header.jsp에서 글쓰기 버튼의 url를 @GetMapping()안과 같게 설정해준다.

 

주소를 바로 입력해도 좋고 버튼을 통해 이동해도 상관없다.

 

다만 주소형식에 /auth/가 없기 때문에 로그인를 하지않고 해당 주소로 이동한다면 Spring Security가 강제로 로그인 페이지로 이동시킬 것이다.

 

정상적으로 페이지가 만들어 진것을 확인 할 수 있다.

 

디자인과 추가적인 기능은 차차 수정하도록 하겠다.

---

3. Javascript로 데이터 보내기

이제 btn-write 이름을 가진 버튼을 클릭 했을 때, javascript 문법을 통해 데이터를 json으로 변환하여 POST해보자

 

user.js와 같은 위치에 user.js를 복사한 뒤 아래와 같이 수정을 하였다.

 

//board.js

let index = {
    init: function() {

        //juery문법으로 button의 id값일 경우 #id, class값일 경우 .class 를 입력해준다.
        //"click"이 일어날 경우 , 뒤의 값이 리턴되는데 람다 식을 이용하여 함수가 실행되도록 한다.
        $("#btn-write").on("click", () => {
            this.write();
        })
    },
    write: function (){
        //우리가 joinForm에서 보낼 값들을 호출한다.
        //마찬가지로 joinForm의 input태그안의 id값을 제대로 입력해주어야 한다.
        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));
            location.href = "/";
        });
    }
}
index.init();

위의 문법을 해석해보자면, 

 

btn-write 이라는 id의 버튼에 "클릭" 이벤트가 발생하면 write() 함수가 실행 되도록 한다.

 

write() 함수가 실행되면 해당 페이지에서 title, content라는 id를 가진 value를 data 변수에 담아 JSON타입으로 변환한다.

 

변환된 데이터는 해당 url로 POST방식으로 보내지게 된다.

 

데이터 전송이 성공하여 응답한다면 done()함수를, 실패한다면 fail() 함수를 실행하게된다.

 

성공하든 실패하든 글쓰기 해당 과정 이후에 "/ ", 즉, 홈페이지로 이동된다.

 

4. RestController, Service 만들기

javascript를 통해 보내진 데이터를 받아서 처리하기 위해 RestController를 먼저 만들어준다.

 

@RestController
public class BoardApiController {
    @Autowired
    private BoardService boardService;

    @PostMapping("/api/board")
    public ResponseDto<Integer> write(@RequestBody Board board, @AuthenticationPrincipal PrincipalDetail principal){
        boardService.글쓰기(board, principal.getUser());

        return new ResponseDto<Integer>(HttpStatus.OK.value(),1);

    }
}

data변수를 통해 body를 통해 보내진 데이터는 Board타입으로 지정하면 해당 model의 변수명과 매칭되어 setter가 된다.

 

그리고 @AuthenticationPrincipal 어노테이션을 통해 데이터가 보내질 때 Authentication객체에 담긴 값들을 UserDetails를 상속받은 PrincipalDetail타입으로 받아서 사용 가능하다.

 

정리하자면 파라미터를 통해 전달된 데이터는 title, content, User정보 인 셈이다.

 

이제 Service클래스를 통해 나머지 count값과 User값을 Board에 setting한 다음 데이터베이스에 저장하도록 하겠다.

@Service
public class BoardService {
    @Autowired
    private BoardRepository boardRepository;
    @Transactional
    public void 글쓰기(Board board, User user){
        board.setCount(0);
        board.setUser(user);
        boardRepository.save(board);
    }
}

글쓰기()라는 메소드를 생성하여 BoardApiController클래스의 write()메소드가 받은 파라미터를 그대로 받아서

 

위와 같이 setter 해준다음 BoardRepository를 통해 insert해준다.

 

이제 실제로 동작하는지 확인해보겠다.

 

---

 

글이 정상적으로 데이터 베이스에 Insert된 것을 확인할 수 있다.