LIFE CODING OF MINOKUMA

[E-3-2] 게시글 등록 화면

2020. 1. 31. 10:37ㆍProject E/Project E 파트3

src/main/resources

templates

layout

header.mustache

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>스프링 부트 웹서비스</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

페이징 로딩속도를 높이기 위해 css는 header에, js는 footer에 놔둔다.

HTML은 위에서부터 코드가 실행되기때문에 head가 실행되고나서야 body가 실행된다.

특히 js용량이 크면 클수록 body 부분의 실행이 늦어지기때문에 js는 body 하단에 둬서 화면이 다 그려진 뒤에 호출하는 것이 좋다.

src/main/resources

templates

layout

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>

src/main/resources

templates

index.mustache

{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스 Ver 2.0</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>
        </div>
    </div>
</div>
{{>layout/footer}}

src/main/java

com.minokuma.book.springboot

web.dto
IndexController.java

package com.minokuma.book.springboot.web;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@RequiredArgsConstructor
@Controller
public class IndexController {

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

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

}

src/main/resources

templates

posts-save.mustache

{{>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.java 실행

http://localhost:8080

불러오는 중입니다...

접속 후 글 등록 버튼 클릭

등록버튼 기능 구현

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

src/main/resources

templates

layout

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>

등록 실행 테스트

DB 데이터 등록 확인

http://localhost:8080/h2-console

불러오는 중입니다...

'Project E > Project E 파트3' 카테고리의 다른 글

[E-3-5] 게시글 삭제 (0)	2020.02.01
[E-3-4] 게시글 수정 화면 생성 (0)	2020.02.01
[E-3-3] 전체 조회 화면 (0)	2020.02.01
[E-3-1] 머스태쉬 설치 및 기본 페이지 작성 (0)	2020.01.31

관련글

댓글 0

티스토리툴바