[Spring Boot] aLog Project - 게시글 등록 페이지 만들기

김광현·2023년 9월 6일

Spring boot alog project

Project - aLog

목록 보기

6/12

[Spring Boot] aLog Project - 기본 페이지 만들기 에 이어서 머스테치와 부트스트랩을 사용하여 게시글 등록 페이지를 구현합니다. 🏆

layout

src/main/resources/templates 디렉토리에 layout 디렉토리를 추가로 생성하고 footer.mustache, header.mustache 파일을 생성합니다.

header.mustache

<!DOCTYPE HTML>
<html>
<head>
    <title>aLog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

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>

</body>
</html>

index.mustache

footer.mustache, header.mustache 파일이 추가됨에 따라 필요한 코드만 남깁니다.

{{>layout/header}}

    <h1>aLog</h1>

{{>layout/footer}}

📁 코드 설명

1. {{>layout/header}}
	- {{> }}는 현재 머스테치 파일(index.mustache)을 기준으로 다른 파일을 가져옵니다.

레이아웃으로 파일을 분리했으니 index.mustache에 글 등록 버튼을 추가합니다.

{{>layout/header}}

 	<h1>aLog</h1>
    <div class="row">
        <div class="col-md-6">
            <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
        </div>
    </div>

{{>layout/footer}}

indexController.java

/post/save를 호출하면 posts-save.mustache를 호출하는 메소드를 추가해줍니다.

@RequiredArgsConstructor
@Controller
public class IndexController {
	．．．
	@GetMapping("/posts/save")
    public String postsSave() {
        return "posts-save";
    }
}

posts-save.mustache

UI를 완성시킵니다.

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

application.yml

Spring boot가 버전업이 되면서 머스테치 화면 출력 시, 한글이 깨지는 현상을 설정 정보를 추가하여 해결합니다.

．．．
server:
  servlet:
    encoding:
      force-response: true

index.js

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();

📁 코드 설명

1. window.location.href = '/'
	- 글 등록이 성공하면 메인페이지(/)로 이동합니다.

footer.mustache

생성된 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>

<script src="/js/app/index.js"></script>
</body>
</html>