[스프링 with AWS] mustache로 화면 구성하기

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

관리 메뉴

DevKim

[스프링 with AWS] mustache로 화면 구성하기 본문

Spring Boot

[스프링 with AWS] mustache로 화면 구성하기

on_doing 2021. 7. 11. 17:02

728x90

🏃CH.04 머스테치로 화면 구성하기🏃

이 책에서 머스테치를 사용하는 이유는 다음과 같다고한다.

1. 문법이 다른 템플릿 엔진보다 단순하며

2. 로직 코드를 사용할 수 없어, View의 역할과 서버의 역할이 명확하게 분리될 수 있고

3. .js / .java를 2가지가 다 있기 때문에 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용가능하다

머스테치는 플러그인을 사용할 수 있고, build.gradle에 의존성을 추가해주면 바로 사용할 수 있다.

간단한 기본 페이지를 만들고 머스테치와 API가 잘 작동이 되는지 테스트를 해보자.

- index.mustache

<!DOCTYPE HTML>
<html>
<head>
    <title>스프링 부트 웹서비스</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

<body>
<h1> 스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>

-IndexController 테스트

@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class IndexControllerTest {

    @Autowired
    private TestRestTemplate restTemplate;

    @Test
    public void 메인페이지_로딩() throws Exception{

        //when
        String body = this.restTemplate.getForObject("/", String.class);

        //then
        assertThat(body).contains("스프링 부트로 시작하는 웹 서비스");
        
    }
}

실제로 URL 호출 시 페이지의 내용이 제대로 호출되는지 ,즉 해당 문자열이 포함되는지 테스를 해보았다.

부트스트랩,제이쿼리 등 프론트엔드 라이브러리를 사용하기 위해 외부 CDN을 사용했고,

레이아웃 방식(공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식)으로 추가한다.

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

📌 게시글 등록

[ 글 등록 버튼 ]

{{>layout/header}}

<h1>스프링부트로 시작하는 웹 서비스 Ver.2</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>
    <br>
    <!-- 목록 출력 영역 -->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
        <tr>
            <th>게시글번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>최종수정일</th>
        </tr>
        </thead>
        <tbody id="tbody">
        {{#posts}}
            <tr>
                <td>{{id}}</td>
                <td><a href="/posts/update/{{id}}">{{title}}</a></td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
</div>

{{>layout/footer}}

{{>}}

: 현재 머스테치 파일을 기준으로 다른 파일을 가져온다.

{{#posts}} ~ {{/posts}}

: posts라는 List를 순회한다.

{{변수명}}

:List에서 뽑아낸 객체의 필드

[ 글 등록하는 /posts/save 페이지로 이동 ]

@GetMapping("/posts/save")
public String postsSave()
{
	return "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}}

📌 게시글 조회

[ Repository에 Query 추가 ]

게시글 목록 내림차순으로 정렬하여 조회기능 추가

...
@Query("select p from Posts p order by p.id DESC")
List<Posts> findAllDesc();

[ 담아서 보낼 DTO 생성 ]

@Getter
@NoArgsConstructor
public class postsListResponseDto {

    private Long id;
    private String title;
    private String content;
    private String author;

    public postsListResponseDto(Posts posts)
    {
        this.id=posts.getId();
        this.title=posts.getTitle();
        this.content= posts.getContent();
        this.author= posts.getAuthor();
    }
}

[ Service에 전체조회 추가 ]

foreach를 사용하지 않고 람다식을 적용했다.

public List<postsListResponseDto> findAllDesc()
{
	return postsRepository.findAllDesc().stream()
			.map(postsListResponseDto::new)
			.collect(Collectors.toList());
}

[ Controller 수정 ]

model에 담아서 List를 index.mustache에 전달한다.

@GetMapping("/")
public String index(Model model)
{
	List<Posts> postsList = postsRepository.findAllDesc();
	model.addAttribute("posts",postsList);
	return "index";
}

📌 게시글 수정

[ 수정화면과 연결할 Controller ]

수정화면에 수정된 Post를 Dto로 변환 -> model에 담아 전달

    @GetMapping("posts/update/{id}")
    public String postsUpdate(@PathVariable Long id, Model model)
    {
        Posts posts = postsRepository.findById(id).orElseThrow(
                () -> new IllegalArgumentException("해당하는 아이디가 존재하지 않습니다.")
        );
        PostsResponseDto postsResponseDto = new PostsResponseDto(posts);

        model.addAttribute("post",postsResponseDto);
        return "posts-update";
    }

[ js에 update 추가 ]

update : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };

        var id = $('#id').val();

        $.ajax({
            type: 'PUT',
            url: '/api/v1/posts/'+id,
            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));
        });
    }

728x90

'Spring Boot' 카테고리의 다른 글

[스프링 with AWS] EC2 인스턴스 생성, putty 로 원격접속 후 필수 설정들 (0)	2021.07.12
[스프링 with AWS] 구글,네이버 로그인 연동 (0)	2021.07.12
[스프링 with AWS] CRU 기능 - RestTemplate으로 API 테스트 (0)	2021.07.10
[스프링 with AWS] MockMvc를 이용한 API 테스트 코드 (0)	2021.07.10
[02] 주문 도메인 개발 (0)	2021.07.08

'Spring Boot' Related Articles

Comments

DevKim

[스프링 with AWS] mustache로 화면 구성하기 본문

[스프링 with AWS] mustache로 화면 구성하기

🏃CH.04 머스테치로 화면 구성하기🏃

📌 게시글 등록

📌 게시글 조회

📌 게시글 수정

'Spring Boot' 카테고리의 다른 글

티스토리툴바