스프링부트 공부기록(8) - 게시판 프로젝트 :: 머스테치 사용, 게시판 글 등록 구현하기

지난번 포스팅에서 머스테치를 사용하여 첫 페이지까지 만들었다.

이제 만들어둔 머스테치에 URL을 매핑해야 한다.

1. IndexController 클래스 작성

머스테치 스타터 덕분에 컨트로러에서 문자열 반환 시 앞의 경로와 뒤의 파일 확장자는 자동으로 지정됨.
앞의 경로는 src/main/resources/templates , 확장자는 .mustache 로 전환되어 View Resolver가 처리하게 됨.

2. IndexControllerTest 클래스 작성

테스트 통과

🤍게시판 글 등록 화면 만들기 :: 부트스트랩 활용

1.레이아웃 파일 만들기

header.mustache

<!DOCTYPE HTML>
<html>
<head>
    <title>스프링부트 웹서비스</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>

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

페이지 로딩 속도를 높이기 위해 css는 header, js는 footer에 위치함.
HTML은 위에서부터 코드가 실행되기 때문에, head가 불러지지 않으면 사용자 쪽에서는 백지 화면만 노출됨.
js 용량이 클수록 body 부분의 실행이 늦어지기 때문에, js는 body 하단에 두어 화면이 다 그려진 뒤 호출하는 것이 좋다.

2. 글 등록 버튼 추가

<a> 태그를 이용해 글 등록 페이지로 이동

3. 글 등록 버튼 클릭 시 이동하는 주소 IndexController에 매핑

@GetMapping("/posts/save")
    public String postsSave(){  // /posts/save 를 호출하면 psts-save.mustache를 호출하는 메소드 추가
        return "posts-save";
    }

4. 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}}

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

6. 글 등록 실행해보기

http://localhost:8080/ 으로 접근 후 글 등록 버튼 클릭 시 게시글 등록 페이지로 이동!

~~역시 한 번에 될리가 없쥬~~?ㅎ~~

~~역시 오타였쥬..?ㅎㅎ~~

등록 후 '글이 등록되었습니다.' 팝업 창이 나온다.

글 등록 후 SELECT 쿼리문 실행해 보면 등록한 글을 확인할 수 있다.

'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글

스프링부트 공부기록(10) - 게시판 프로젝트 :: 스프링 시큐리티, OAuth 2.0 구글 로그인 구현하기 (0)	2022.03.01
스프링부트 공부기록(9) - 게시판 프로젝트 :: 머스테치 사용, 게시판 글 조회, 수정, 삭제 구현하기 (0)	2022.02.27
스프링부트 공부기록(7) - 머스테치(Mustache) 화면 구성하기 (0)	2022.02.27
스프링부트 공부기록(6) - JPA Auditing으로 생성 시간/수정시간 자동화하기 (0)	2022.02.27
스프링부트 공부기록(5) - 게시판 프로젝트 :: Dao 도메인 패키지, 글 등록, 수정, 조회 JPA 어노테이션, 테스트 코드 작성 (0)	2022.02.27