[Book] 15) 머스테치로 화면 구성을 해보자! -2

👻  인덱스 페이지 만들기!

{{>layout/header}}

<h1>Main Page</h1>
<!--  로그인 기능 영역  -->
<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
{{#userName}}
                Logged in as:<span id="user">{{userName}}</span>
                <a href="/logout" class="btn btn-info active" role="button">Logout</a>
{{/userName}}
            {{^userName}}
<a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                <a href="/oauth2/authorization/naver" class="btn btn-secondary active" role="button">Naver Login</a>
{{/userName}}
</div>
    </div>
</div>
<br>
<!-- 목록 출력 영역 -->
<table class="table table-horizontal table-bordered">
    <thead class="thead-strong">
    <tr>
        <th>게시글번호</th>
        <th>제목</th>
        <th>작성자</th>
        <th>최종수정일</th>
    </tr>
    </thead>
    <tbody id="tbody">
{{#posts}}
<tr>
            <td>{{id}}</td>
            <td><a href="/posts/update/{{id}}">{{title}}</a></td>
            <td>{{author}}</td>
            <td>{{modifiedDate}}</td>
        </tr>
{{/posts}}
</tbody>
</table>
<!--    -->
</div>
{{>layout/footer}}

👻  레이아웃 분리해보자!

footer.mustahce

header.mustache

👻  posts-save 페이지를 만들어보자!

{{>layout/header}}

<h1>게시글 등록</h1>

<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title" placeholder="제목을 입력하세요">
            </div>
            <div class="form-group">
                <label for="author">작성자</label>
                <input type="text" class="form-control" id="author" placeholder="작성자를 입력하세요">
            </div>
            <div class="form-group">
                <label for="content">내용</label>
                <textarea class="form-control" id="content" placeholder="내용을 입력하세요"></textarea>
            </div>
        </form>
        <a href="/" role="button" class="btn btn-secondary">취소</a>
        <button type="button" class="btn btn-primary" id="btn-save">등록</button>
    </div>
</div>
{{>layout/footer}}

👻  등록 버튼의 기능을 추가해봅시다.!

등록 기능은 js 로 만들어야합니다. 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', -> http 메서드 전송 방식 설정
            url: '/api/v1/posts', -> 글 등록 api url
            dataType: 'json', -> json 타입으로 설정
            contentType: 'application/json; charset=utf-8', -> json utf8 설정
            data:JSON.stringify(data)
        }).done(function() { -> 성공하면 글이 등록되었습니다. 출력
            alert('글이 등록되었습니다.');
            window.location.href = '/';
        }).fail(function(error) { -> 실패하면 에러메시지 출력
            alert(JSON.stringify(error));
        });
    }
};

main.init(); -> 생성

코드를 추가 하셨다면 서버를 실행 시켜 확인 해 봅시다!.