[Web Service Project]5. 게시글 등록

Mustache를 활용한 게시글 등록화면 만들기

• HTML
  • Layout 방식을 활용하여 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식 활용
  • footer, header 공통 영역을 분리
  • src/main/resources/templates 디렉토리에 layout 디렉토리를 추가로 생성하여 저장
• CSS, JavaScript
  • BootStrap, JQuery 등 프론트엔드 라이브러리를 사용
  • 여기서는 외부 CDN을 사용하여 개발, 실제 서비스에서는 직접 라이브러리를 받아서 사용
  • 페이지 로딩속도를 높이기 위해 css 태그는 header, js 태그는 footer에 위치
  • HTML은 인터프리터언어로 소스코드를 위에서 아래로 읽고 실행하기 때문에 css를 읽지않고는 깨진화면이 보여질 수 있다.
  • JavaScript의 위치가 Header에 있을 경우 script 오류가 발생하는 경우 화면자체가 나오지 않을 수 있다.

IndexController

@RequiredArgsConstructor
@Controller
public class IndexController {

    @GetMapping
    public String index() {
        return "index";
    }

    @GetMapping
    public String postsSave() {
        return "posts-save";
    }
}

View Page

• 스프링 부트는 기본적으로 src/main/resources/static에 위치한 정적 자원을 호출한다.
  • 자바스크립트, CSS, 이미지 등 정적 파일들은 URL에서 /로 설정된다.
  • src/main/resources/static/js
  • src/main/resources/static/css
  • src/main/resources/static/image

posts-save.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}}

• index
  • 프로토타입 기반의 객체지향 언어로 사용
  • index이라는 객체 리터럴에 init, save 내부 함수를 생성
  • init 함수에는 id 값이 btn-save인 부분의 click 이벤트가 발생하는 경우 save 함수를 호출
  • save 함수는 title, author, content를 data라는 객체로 저장하여 /api/v1/posts URL로 AJAX 호출하여 게시글을 등록

var index = {
    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));
        });
    },
};

index.init();

게시글 등록 페이지

 

게시글 등록 확인

 

게시글 등록 DB 확인

• 게시글 등록확인

게시글 등록확인