[Spring Boot] 6. Spring Boot Project (Store v1) in Curser_1.View Connect (mustache)

김미숙

Mar 27, 2025

[Spring Boot] 6. Spring Boot Project (Store v1) in Curser_1.View Connect (mustache)

Contents

⬇ 해당 예시대로 Table, Dummy Data, Site 만들고 확인하기 application.properties

⬇ 해당 예시대로 Table, Dummy Data, Site 만들고 확인하기

Dummy Data

‼️

구매하고 나면 store_tb의 상품 개수가 바뀌어야 하는데

store_tb의 상품 개수를 구매 전 수량으로 하면 데이터 일치가 안 되므로

dummt data를 만들 때도 시나리오를 반영해서 만들어야 한다

⬇ 바나나 10개 구매 → 바나나 수량: 50 - 10 = 40

⬇ 딸기 5개 구매 → 딸기 수량: 50 - 5 = 45


insert into store_tb(name,stock,price) values('바나나',40,3000);
insert into store_tb(name,stock,price) values('딸기',45,2000);

insert into log_tb(store_id,qty,total_price,buyer) values(1,5,15000,'ssar');
insert into log_tb(store_id,qty,total_price,buyer) values(1,5,15000,'ssar');
insert into log_tb(store_id,qty,total_price,buyer) values(2,5,10000,'cos');

HelloController


package com.metacoding.storev1;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

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

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

    @GetMapping("/store/detail")
    public String t3() {
        return "store/detail";
    }

    @GetMapping("/store/save-form")
    public String t4() {
        return "store/save-form";
    }

    @GetMapping("/store/update-form")
    public String t5() {
        return "store/update-form";
    }

}

application.properties


# vscode console highlight
spring.output.ansi.enabled=always
# utf-8
server.servlet.encoding.charset=utf-8
server.servlet.encoding.force=true
# DB
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:mem:test
spring.datasource.username=sa
spring.datasource.password=
spring.h2.console.enabled=true
# JPA table create or none
spring.jpa.hibernate.ddl-auto=create
# query log
spring.jpa.show-sql=true
# dummy data
spring.sql.init.data-locations=classpath:db/data.sql
# create dummy data  after ddl-auto create
spring.jpa.defer-datasource-initialization=true
# mustache request expose
spring.mustache.servlet.expose-request-attributes=true
# Sql formatter
spring.jpa.properties.hibernate.format_sql=true

layout/header


<!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>
        <li>
            <a href="#">구매목록</a>
        </li>
    </ul>
</nav>

<hr>

log/list


{{>layout/header}}


<section>
    <table border="1">
        <tr>
            <th>주문번호</th>
            <th>상품명(조인)</th>
            <th>구매개수</th>
            <th>총가격</th>
            <th>구매자이름</th>
        </tr>

        <tr>
            <td>1</td>
            <td>바나나</td>
            <td>5개</td>
            <td>15000원</td>
            <td>ssar</td>
        </tr>

        <tr>
            <td>2</td>
            <td>바나나</td>
            <td>5개</td>
            <td>15000원</td>
            <td>ssar</td>
        </tr>

        <tr>
            <td>3</td>
            <td>딸기</td>
            <td>5개</td>
            <td>10000원</td>
            <td>cos</td>
        </tr>

    </table>
</section>

</body>
</html>

store/detail


{{> layout/header}}

<section>
    <a href="#">수정화면가기</a>
    <form action="#">
        <button type="submit">삭제</button>
    </form>
    <div>
        번호 : 1 <br>
        상품명 : 바나나 <br>
        상품가격 : 3000원 <br>
        상품재고 : 100개 <br>
    </div>
    <form action="#">
        <input type="hidden" value="1">
        <input type="text" placeholder="당신은 누구인가요?">
        <input type="text" placeholder="Enter 개수">
        <button type="submit">구매</button>
    </form>
</section>

</body>
</html>

store/list


{{>layout/header}}


<section>
    <table border="1">
        <tr>
            <th>번호</th>
            <th>상품명</th>
            <th></th>
        </tr>

        <tr>
            <td>1</td>
            <td>바나나</td>
            <td><a href="#">상세보기</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>딸기</td>
            <td><a href="#">상세보기</a></td>
        </tr>


    </table>
</section>

</body>
</html>

store/save-form


{{> layout/header}}

<section>
    <form action="#">
        <input type="text" placeholder="상품명"><br>
        <input type="text" placeholder="수량"><br>
        <input type="text" placeholder="가격"><br>
        <button type="submit">상품등록</button>
    </form>
</section>

</body>
</html>

store/update-form


{{> layout/header}}

<section>
    <form action="#">
        <input type="text" value="바나나"><br>
        <input type="text" value="100"><br>
        <input type="text" value="3000"><br>
        <button type="submit">상품수정</button>
    </form>
</section>

</body>
</html>

사이트 확인

store/list

log/list

store/detail

store/save-form

store/update-form

Contents

⬇ 해당 예시대로 Table, Dummy Data, Site 만들고 확인하기 application.properties

insert into store_tb(name,stock,price) values('바나나',40,3000); insert into store_tb(name,stock,price) values('딸기',45,2000); insert into log_tb(store_id,qty,total_price,buyer) values(1,5,15000,'ssar'); insert into log_tb(store_id,qty,total_price,buyer) values(1,5,15000,'ssar'); insert into log_tb(store_id,qty,total_price,buyer) values(2,5,10000,'cos');

package com.metacoding.storev1; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HelloController { @GetMapping("/log/list") public String t1() { return "log/list"; } @GetMapping("/store/list") public String t2() { return "store/list"; } @GetMapping("/store/detail") public String t3() { return "store/detail"; } @GetMapping("/store/save-form") public String t4() { return "store/save-form"; } @GetMapping("/store/update-form") public String t5() { return "store/update-form"; } }

# vscode console highlight spring.output.ansi.enabled=always # utf-8 server.servlet.encoding.charset=utf-8 server.servlet.encoding.force=true # DB spring.datasource.driver-class-name=org.h2.Driver spring.datasource.url=jdbc:h2:mem:test spring.datasource.username=sa spring.datasource.password= spring.h2.console.enabled=true # JPA table create or none spring.jpa.hibernate.ddl-auto=create # query log spring.jpa.show-sql=true # dummy data spring.sql.init.data-locations=classpath:db/data.sql # create dummy data after ddl-auto create spring.jpa.defer-datasource-initialization=true # mustache request expose spring.mustache.servlet.expose-request-attributes=true # Sql formatter spring.jpa.properties.hibernate.format_sql=true

<!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> <li> <a href="#">구매목록</a> </li> </ul> </nav> <hr>

{{>layout/header}} <section> <table border="1"> <tr> <th>주문번호</th> <th>상품명(조인)</th> <th>구매개수</th> <th>총가격</th> <th>구매자이름</th> </tr> <tr> <td>1</td> <td>바나나</td> <td>5개</td> <td>15000원</td> <td>ssar</td> </tr> <tr> <td>2</td> <td>바나나</td> <td>5개</td> <td>15000원</td> <td>ssar</td> </tr> <tr> <td>3</td> <td>딸기</td> <td>5개</td> <td>10000원</td> <td>cos</td> </tr> </table> </section> </body> </html>

{{> layout/header}} <section> <a href="#">수정화면가기</a> <form action="#"> <button type="submit">삭제</button> </form> <div> 번호 : 1 <br> 상품명 : 바나나 <br> 상품가격 : 3000원 <br> 상품재고 : 100개 <br> </div> <form action="#"> <input type="hidden" value="1"> <input type="text" placeholder="당신은 누구인가요?"> <input type="text" placeholder="Enter 개수"> <button type="submit">구매</button> </form> </section> </body> </html>

{{>layout/header}} <section> <table border="1"> <tr> <th>번호</th> <th>상품명</th> <th></th> </tr> <tr> <td>1</td> <td>바나나</td> <td><a href="#">상세보기</a></td> </tr> <tr> <td>2</td> <td>딸기</td> <td><a href="#">상세보기</a></td> </tr> </table> </section> </body> </html>

{{> layout/header}} <section> <form action="#"> <input type="text" placeholder="상품명"><br> <input type="text" placeholder="수량"><br> <input type="text" placeholder="가격"><br> <button type="submit">상품등록</button> </form> </section> </body> </html>

{{> layout/header}} <section> <form action="#"> <input type="text" value="바나나"><br> <input type="text" value="100"><br> <input type="text" value="3000"><br> <button type="submit">상품수정</button> </form> </section> </body> </html>