What to do?
View 만들기
- Articles Page : 게시글 List가 있는 화면
- Detail Page : 게시글 단건을 조회할 수 있는 화면
Thymeleaf
Template으로 Thymeleaf를 사용하였다.
이 때 Decoupled Logic을 사용하기 위해 Cofiguraton 파일 작성
@Configuration
public class ThymeleafConfig {
@Bean
public SpringResourceTemplateResolver thymeleafTemplateResolver(
SpringResourceTemplateResolver defaultTemplateResolver
) {
defaultTemplateResolver.setUseDecoupledLogic(true); // ← use decoupled logic
return defaultTemplateResolver;
}
}
파일 구조
resources/templates 경로에 다음과 같이 html파일을 작성하였다.
Header, Footer
아직은 아무런 내용도 넣지 않았다.
다만 decoupled logic이 잘 적용되는지 확인하기 위해서 만들어두었다.
resources/templates/header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Header</title>
</head>
<body>
<!--TODO-->
<header id="header">
<h1>Header</h1>
</header>
</body>
</html>resources/templates/footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Footer</title>
</head>
<body>
<!--TODO-->
<footer id="footer">
<h1>Footer</h1>
</footer>
</body>
</html>Article Page
resources/templates/article/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Article</title>
</head>
<body>
<header id="header"/>
<!--Search Bar-->
<form id="search-bar">
<label for="search-type" hidden>Type</label>
<select id="search-type" name="search-type">
<option>Title</option>
<option>Author</option>
<option>Hashtag</option>
</select>
<label for="keyword" hidden>Keyword</label>
<input type="search" placeholder="keyword..." name="keyword" id="keyword">
<button type="submit">Search</button>
</form>
<main>
<!--Article-->
<table>
<tr>
<th>Title</th>
<th>Hashtag</th>
<th>Author</th>
<th>Written At</th>
</tr>
<tbody>
<tr>
<td>Test Title</td>
<td>Test Hashtag</td>
<td>Test Author</td>
<td>Test Written At</td>
</tr>
</tbody>
<tfoot>
<nav>
<table>
<tr>
<td>◀</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>▶</td>
</tr>
</table>
</nav>
</tfoot>
</table>
</main>
<footer id="footer"/>
</body>
</html>resources/templates/article/index.th.xml
<?xml version="1.0"?>
<thlogic xmlns:th="http://www.thymeleaf.org">
<attr sel="#header" th:replace="header :: #header"></attr>
<attr sel="#footer" th:replace="footer :: #footer"></attr>
</thlogic>- attr sel ="#header" → resources/templates/article/index.th.html 의 id가 header인 영역을
- th:replace → 대체할 껀데
- header :: #header → resources/templates/header.html 의 id가 header인 영역을 부분으로
- attr sel ="#footer" → resources/templates/article/index.th.html 의 id가 footer인 영역을
- th:replace → 대체할 껀데
- footer :: #footer → resources/templates/footer.html 의 id가 footer인 영역을 부분으로
Detail Page
resources/templates/article/detail/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Detail</title>
</head>
<body>
<header id="header"/>
<main>
<header id="sub-header">Sub Header</header>
<aside>
<p><span>Username</span></p>
<p><span>Email</span></p>
<p><time datetime="2022-11-11">2022-11-11</time></p>
<p><span>Hashtag</span></p>
</aside>
<section>
<div>
<!--Write Comment-->
<form>
<label for="comment-input"></label>
<textarea id="comment-input" name="comment-input" rows="5" placeholder="comment..."></textarea>
<button type="submit">Submit</button>
</form>
</div>
<!--Comments-->
<div>
<ul>
<li>
<div>
<p>Test Written By1</p>
<p>Test Comment1</p>
<p>Test Written At1</p>
</div>
</li>
<li>
<div>
<p>Test Written By2</p>
<p>Test Comment2</p>
<p>Test Written At2</p>
</div>
</li>
<li>
<div>
<p>Test Written By3</p>
<p>Test Comment3</p>
<p>Test Written At3</p>
</div>
</li>
</ul>
</div>
<nav>
<ul>
<li><a>Previous Article</a></li>
<li><a>Next Article</a></li>
</ul>
</nav>
</section>
</main>
<footer id="footer"/>
</body>
</html>resources/templates/article/detail/index.th.xml
<?xml version="1.0"?>
<thlogic xmlns:th="http://www.thymeleaf.org">
<attr sel="#header" th:replace="header :: #header"/>
<attr sel="#footer" th:replace="footer :: #footer"/>
</thlogic>Controller
컨트롤러 코드 작성
- /articles 경로 접근 : resources/article/index.html을 보여줌
- /articles/{articleId} 경로 접근 : resources/article/detail/index.html을 보여줌
@Controller
@RequestMapping("/articles")
public class ArticleController {
@GetMapping
public String articles(ModelMap map){
map.addAttribute("articles", List.of()); // TODO - send pageable of article
return "article/index";
}
@GetMapping("/{articleId}")
public String article(@PathVariable Long articleId, ModelMap map){
map.addAttribute("article", null); // TODO
map.addAttribute("comments", List.of());
return "article/detail/index";
}
}View
아직 데이터나 디자인을 입히지 않아서 매우 허접하다...
- Article Page
- Detail Page
'Java > Spring' 카테고리의 다른 글
| [Spring] 게시판 만들기 #7 (0) | 2022.11.22 |
|---|---|
| [Spring] 게시판 만들기 #6 (0) | 2022.11.21 |
| [Spring] 게시판 만들기 #4 (0) | 2022.11.13 |
| [Spring] 게시판 만들기 #3 (0) | 2022.11.13 |
| [Spring] 게시판 만들기 #2 (0) | 2022.11.13 |
