![[Spring Boot] 7. Spring Boot Project (Bank v1)_1.View Connect (mustache)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-27T02%3A22%3A43.031Z-2faf3964-7304-4080-ba4a-018ab646d66d&w=2048&q=75)
Views
header
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">계좌목록</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">계좌생성</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">이체하기</a>
</li>
</ul>
</div>
</div>
</nav>footer
<footer class="mt-5 p-4 bg-dark text-white text-center d-flex justify-content-around">
<div>
<p>Created by Cos</p>
<p>🚩 겟인데어</p>
</div>
<div>
<p>🏴 부산 수영구 XX동</p>
<p>📞 010-2222-7777</p>
</div>
</footer>
</body>
</html>home
{{>layout/header}}
<!--마진 : mt,mr,ml,mb (1~5) ex) mt-5-->
<div class="container mt-2">
<div class="mt-4 p-5 bg-light text-dark rounded-4">
<h1>메타코딩 은행에 오신 것을 환영합니다</h1>
</div>
</div>
{{>layout/footer}}
join-form
{{>layout/header}}
<!--마진 : mt,mr,ml,mb (1~5) ex) mt-5-->
<div class="container mt-2">
<div class="mt-4 p-5 bg-light text-dark rounded-4">
<h1>회원가입 페이지</h1>
<form action="/join" method="post">
<div class="mb-3 mt-3">
<input type="text" class="form-control" placeholder="Enter username" name="username">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Enter password" name="password">
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Enter fullname" name="fullname">
</div>
<button type="submit" class="btn btn-primary">회원가입</button>
</form>
</div>
</div>
{{>layout/footer}}
login-form
{{>layout/header}}
<!--마진 : mt,mr,ml,mb (1~5) ex) mt-5-->
<div class="container mt-2">
<div class="mt-4 p-5 bg-light text-dark rounded-4">
<h1>로그인 페이지</h1>
<form action="/login" method="post">
<div class="mb-3 mt-3">
<input type="text" class="form-control" placeholder="Enter username" name="username">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Enter password" name="password">
</div>
<button type="submit" class="btn btn-primary">로그인</button>
</form>
</div>
</div>
{{>layout/footer}}
detail
{{>layout/header}}
<!--마진 : mt, mr, ml, mb (1~5) ex) mt-5-->
<div class="container mt-2">
<div class="mt-4 p-5 bg-light text-dark rounded-4">
<p>쌀님 계좌</p>
<p>계좌번호 : 1111</p>
<p>계좌잔액 : 1000원</p>
</div>
<div class="mt-3 mb-3">
<button type="button" class="btn btn-outline-primary">전체</button>
<button type="button" class="btn btn-outline-primary">입금</button>
<button type="button" class="btn btn-outline-primary">출금</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>날짜</th>
<th>보낸이</th>
<th>받은이</th>
<th>금액</th>
<th>계좌잔액</th>
<th>입금/출금</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025.03.24 : 10:00</td>
<td>1111</td>
<td>2222</td>
<td>100원</td>
<td>1000원</td>
<td>출금</td>
</tr>
<tr>
<td>2025.03.23 : 10:00</td>
<td>2222</td>
<td>1111</td>
<td>100원</td>
<td>1100원</td>
<td>입금</td>
</tr>
</tbody>
</table>
</div>
{{>layout/footer}}
list
{{>layout/header}}
<!--마진 : mt,mr,ml,mb (1~5) ex) mt-5-->
<div class="container mt-2">
<table class="table table-hover">
<thead>
<tr>
<th>계좌번호</th>
<th>잔액</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>900원</td>
</tr>
<tr>
<td>2222</td>
<td>1000원</td>
</tbody>
</table>
</div>
{{>layout/footer}}
save-form
{{>layout/header}}
<!--마진 : mt,mr,ml,mb (1~5) ex) mt-5-->
<div class="container mt-2">
<div class="mt-4 p-5 bg-light text-dark rounded-4">
<h1>계좌생성 페이지</h1>
<form action="/account/save" method="post">
<div class="mb-3 mt-3">
<input type="text" class="form-control" placeholder="Enter number" name="number">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Enter password" name="password">
</div>
<div class="mb-3 mt-3">
<input type="text" class="form-control" placeholder="Enter balance" name="balance">
</div>
<button type="submit" class="btn btn-primary">계좌생성</button>
</form>
</div>
</div>
{{>layout/footer}}
transfer-form
{{>layout/header}}
<!--마진 : mt,mr,ml,mb (1~5) ex) mt-5-->
<div class="container mt-2">
<div class="mt-4 p-5 bg-light text-dark rounded-4">
<h1>계좌이체 페이지</h1>
<form action="#" method="post">
<div class="mb-3 mt-3">
<input type="text" class="form-control" placeholder="Enter amount" name="amount">
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Enter withdrawNumber" name="withdrawNumber">
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Enter depositNumber" name="depositNumber">
</div>
<div class="mb-3 mt-3">
<input type="password" class="form-control" placeholder="Enter withdrawPassword"
name="withdrawPassword">
</div>
<button type="submit" class="btn btn-primary">이체하기</button>
</form>
</div>
</div>
{{>layout/footer}}
View Test
HelloController
package com.metacoding.bankv1;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("/t1")
public String t1() {
return "/account/detail";
}
@GetMapping("/t2")
public String t2() {
return "/account/list";
}
@GetMapping("/t3")
public String t3() {
return "/account/save-form";
}
@GetMapping("/t4")
public String t4() {
return "/account/transfer-form";
}
@GetMapping("/t5")
public String t5() {
return "/user/join-form";
}
@GetMapping("/t6")
public String t6() {
return "user/login-form";
}
@GetMapping("/t7")
public String t7() {
return "home";
}
}
detail("/t1")
list("/t2")
save-form("/t3")
transfer-form("/t4")
join-form("/t5")
login-form("/t6")
home("/t7")
Share article