게시글 등록화면 만들기

부트스트랩과 제이쿼리 등 프론트엔드 라이브러리를 사용할 수 이쓴 방법은 크게 2가지가 있다.

1. 외부 CDN 사용

2. 직접 라이브러리 다운받아서 사용

 

외부 CDN을 사용하는게 간단하니 이걸로 한다.

 

2개의 라이브러리 부트스트랩과 제이쿼리를 index.mustache에 추가해야한다. 

하지만, 여기서는 바로 추가하지 않고 레이아웃 방식으로 추가한다. 

 -> 레이아웃 방식이란 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식을 이야기한다.

 

부트스트랩과 제이쿼리는 머스테치화면 어디에서나 필요하다. 매번 라이브러리를 머스테치 파일에 추가하는 것은 귀찮은 일이다.

layout 디렉토리를 추가로 생성하고 footer와 header를 생성한다.

그리고 index.mustache header와 footer를 불러온다.

{{>layout/header}}
    <h1>스프링 부트로 시작하는 웹서비스</h1>
{{>layout/footer}}

{{>layout/header}}

- {{>}}는 현재 머스테치 파일을 기준으로 다른 파일을 가져온다.

 

posts-save.mustache 파일을 생성해서

위와 같이 만들어 주고

 

/src/main/resources에 static/js/app 디렉토리를 생성한다.

 

index.js의 코드는 다음과 같다.

var main = {
    init : function () {
        var _this = this;
        $('#btn-save').on('click', function () {
            _this.save();
        });
    },
    save : function () {
        var data = {
            title: $('#title').val(),
            author: $('#author').val(),
            content: $('#content').val()
        };

        $.ajax({
            type: 'POST',
            url: '/api/v1/posts',
            dataType: 'json',
            contentType:'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function() {
            alert('글이 등록되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            alert(JSON.stringify(error));
        });
    }
};

main.init();

 

window.location.href = "/"

- 글 등록이 성공하면 메인페이지로 이동

 

굳이 main이라는 변수의 속성으로 function을 추가한 이유는 나중에 로딩된 init, save가 js의 function을 덮어 쓰게 될 수 있기때문이다.

중복을 피하기 위해 var main이라는 객체를 만들어 해당 객체 내에서 필요한 모든 function을 선언하는 것이다.

 

다음 생성된 index.js를 머스테치 파일이 쓸 수 있도록 footer.mustache파일에 추가한다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!--index.js 추가-->
<script src="/js/app/index.js"></script>
</body>
</html>

이로써 등록 화면을 만들어봤다.