[스프링부트- blogV1] 6. 머스태치로 글 목록 보기 그림그리기

Dec 30, 2024

Contents

1. Mustache 플러그인 설치 2. UTF-8 설정하기 3. resources폴더의 templates폴더(외부접근 불가)에 .mustache 파일 생성 4. mustache문법을 적용하여 그린다! 시작은 html 단축키

1. Mustache 플러그인 설치

2. UTF-8 설정하기

UTF-8설정을 하지 않으면 글이 깨지므로 application.properties에 들어가서 설정 필수!

3. resources폴더의 templates폴더(외부접근 불가)에 .mustache 파일 생성

static에는 정적파일(HTML, CSS, JavaScript,image파일…)을 넣고,

templates에는 동적파일( Mustache, Thymeleaf….)을 넣는다.

4. mustache문법을 적용하여 그린다! 시작은 html 단축키


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>blog</title>
</head>
<body>
<nav>
    <ul>
        <li>
            <a href="#">홈</a>
        </li>
        <li>
            <a href="#">글쓰기</a>
        </li>
    </ul>
</nav>

<hr>

<section>
    <table border="1">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th></th>
        </tr>
        {{#models}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td><a href="/board/{{id}}">상세보기</a></td>
        </tr>
        {{/models}}
    </table>
</section>

</body>
</html>

Controller


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

return “list”만해도 list.mustache를 불러오는 이유

Spring에서는 contoller실행 시 뷰 리졸버가 실행되어 프리픽스(prefix)와 서픽스(suffix)를 지정한다.

(RestController 실행 시에는 뷰 리졸버가 실행되지 않는다.) 프리픽스: 템플릿 파일이 위치하는 경로 (예: classpath:/templates/) 서픽스: 템플릿 파일의 확장자 (예: .mustache)

Contents

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>blog</title> </head> <body> <nav> <ul> <li> <a href="#">홈</a> </li> <li> <a href="#">글쓰기</a> </li> </ul> </nav> <hr> <section> <table border="1"> <tr> <th>번호</th> <th>제목</th> <th></th> </tr> {{#models}} <tr> <td>{{id}}</td> <td>{{title}}</td> <td><a href="/board/{{id}}">상세보기</a></td> </tr> {{/models}} </table> </section> </body> </html>