이 글은 이 책을 참고하여 쓰여졌습니다.
일단 어제 있었던 한글 깨짐 이슈는 별 것도 아니었다.
그냥 index.mustache 파일을 메모장으로 열어서 UTF-8 로 인코딩을 바꾼뒤 저장하니 깔끔히 해결되었다. 아마 mustache 파일을 생성할때 설정이 제대로 안되었던 것 같다.
이제 부트스트랩을 이용하여 게시글 등록 화면을 제작한다.
외부 CDN 방식으로 간단하게 추가할 수 있다.
<!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><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>
header와 footer를 추가한다. 이렇게 작성하면 index.mustache 에는 필요한 코드만 남길 수 있다.
한눈에 알아보기 쉬운 코드로 바뀌었다.
{{> }}는 다른 머스테치 파일을 가져오는데 쓰이는 문법이다.
버튼 생성을 위한 코드를 추가한다.
IndexController에도 postsSave() 함수를 추가하여 /posts/save/를 호출 시 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의 main을 실행시키고 localhost로 접근하면 이런 화면이 나온다. 여기서 글 등록을 클릭하면
이렇게 게시글 등록 form이 나온다. 이제 등록 버튼에 기능을 넣어야 한다.
var main = {
init : function () {
var _this = this;
$('#btn-save').on('click', function () {
_this.save();
});
$('#btn-update').on('click', function () {
_this.update();
});
$('#btn-delete').on('click', function () {
_this.delete();
});
},
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();
index.js의 내용이다. 코드는 마찬가지로 여기에서 얻었다.
이제 이것을 footer.mustache에 추가만 하면 끝이다.
<!--index.js 추가-->
<script src="/js/app/index.js"></script>footer.mustache에 해당 라인을 추가하면 정상 적용된다.
localhost에 접속하여 잘 적용되었는지 확인한다.
등록되었다는 alert는 뜨는데 잘 적용되었는지 확인하기 위해 DB에 접속한다.
잘 등록된 것을 확인할 수 있다!
'따라 공부하기 > Spring boot 혼자 개발하는 웹 서비스' 카테고리의 다른 글
| [Spring Boot]OAuth2 사용을 위한 구글 서비스 등록 (0) | 2020.12.28 |
|---|---|
| [Spring Boot]전체 조회 화면 구성, 게시글 수정과 삭제 (0) | 2020.12.27 |
| [Spring Boot]머스테치 플러그인 설치 후 기본 페이지 만들기 (0) | 2020.12.25 |
| [Spring Boot]수정,조회 API 제작과 JPA Auditing 적용하기 (0) | 2020.12.24 |
| [Spring Boot]Spring의 웹 계층과 등록 API 만들기 (0) | 2020.12.23 |
댓글