View 구현은 시간 부족으로 인해 다른 기술을 사용하지 못하고 Spring boot에서 제공하는 thymeleaf 템플릿을 사용하여 구현하였다. 화면 중 메인 화면과 추가로 사용된 기술 위주로 정리하였다.

 

(1) 메인 화면

    카테고리 선택 기능위해 ajax를 사용하여 서버 단으로 데이터를 전달하는 방법으로 구현하였다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/all.js"></script>
<div class="container">
    <div>
        <p th:text="${member.nickName}"></p> <p th:text="${member.location.address}"></p>
        <a href="/mains/register">게시물 등록</a> <br>

        <select th:name="category" onchange="clickOption()">
            <option th:each="category : ${allCategory}" th:value="${category.categoryName}" th:text="${category.categoryName}"></option>
        </select>

        <table id="resultTable">
            <thead>
            <tr>
                <th>상품이름</th>
                <th>가격</th>
                <th>좋아요수</th>
                <th>내용</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="product : ${products}" >
                <td>
                    <a th:href="@{/products/view(productId=${product.productId})}">
                        [[${product.productName}]]
                    </a>
                </td>
                <td th:text="${product.price}"></td>
                <td th:text="${product.likeCount}"></td>
                <td th:text="${product.contents}"></td>
            </tr>
            </tbody>
        </table>

        <br><br>

        <button onclick="location.href='/members/myPage'">마이페이지</button>

    </div>
</div>
</body>
</html>
function clickOption() {

    var category = $("select[name=category] > option:selected").val();

    var param = {"category": category}

   $.ajax({
        url: "/",
        contentType: "application/json",
        data: JSON.stringify(param),
        type: "POST",
   }).done(function (fragment) {
        $('#resultTable').replaceWith(fragment);
   });

}

 

(2) 회원가입 화면

    지역 검색 기능 위해 ajax를 이용해 비동기 통신 하였다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="/js/getAllLocations.js"></script>
<div class = "container">

    <form action="/members/new" method="post">
        <div class = "form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name" placeholder="이름을 입력하세요"><br>

            <label for="email">이메일</label>
            <input type="email" id="email" name="email" placeholder="email을 입력하세요"><br>

            <label for="password">비밀번호</label>
            <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요"><br>

            <label for="phoneNumber">전화번호</label>
            <input type="text" id="phoneNumber" name="phoneNumber" placeholder="핸드폰 번호를 입력하세요"><br>

            <label for="nickName">닉네임</label>
            <input type="text" id="nickName" name="nickName" placeholder="닉네임을 입력하세요"><br>

            <label for="location">지역</label>
            <input type="text" id="location" name="location" onkeyup="filter()" placeholder="지역을 입력하세요"><br>
            <select id="resultLocationList" name="locations" onchange="setting()">
                <option th:each="location : ${locationList}" th:value="${location.address}" th:text="${location.address}">
                </option>

            </select>

        </div>
        <br>
        <button type="submit">등록</button>
    </form>
</div>

</body>
</html>
function filter() {

    var address = $("#location").val();

   $.ajax({
        url: "/test",
        data : {
        "address" : address
        },
        type: "POST",
   }).done(function (fragment) {

      $('#resultLocationList').replaceWith(fragment);
     });

}

function setting() {

    var location = $("select[name=locations] > option:selected").val();

    $("#location").val(location);
}

 

(3) 상품 게시물 수정 화면

    화면 로드 시 수정 전 게시물 내용 세팅되게 구현하였다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="container">
    <br>
    <form action="/" method="get">
        <button type="submit">홈</button>
    </form>
    <br>
    <form action="/products/update" method="post">
        <div class = "form-group">
            <label for="productName">제목</label>
            <input type="text" id="productName" name="productName" placeholder="제목"><br>

            <label>카테고리</label>
            <select th:name="category">
                <option th:each="category : ${allCategory}" th:value="${category.categoryName}" th:text="${category.categoryName}"></option>
            </select><br>

            <select name="status">
                <option name="st" value="RESERVATION" text="RESERVATION">예약중</option>
                <option name="st" value="SALE" text="SALE">판매중</option>
                <option name="st" value="COMPLETE" text="COMPLETE">거래완료</option>
            </select>

            <label for="price">가격</label>
            <input type="text" id="price" name="price" placeholder="가격"><br>

            <label for="contents">내용</label>
            <input type="text" id="contents" name="contents" placeholder="내용"><br>

            <input type="hidden" name="productId" th:value="*{product.productId}">
        </div>
        <br>
        <button type="submit">수정</button>
    </form>
    <br>
    <form action="/members/myPage">
        <input type="submit" value="마이페이지">
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#productName').val('[[${product.productName}]]')
        $('#price').val('[[${product.price}]]')
        $('#contents').val('[[${product.contents}]]')
    });
</script>
</body>
</html>

'개인 프로젝트' 카테고리의 다른 글

4. 정리  (0) 2022.01.23
3 - (4). 주요 코드 - Controller  (0) 2022.01.23
3 - (3). 주요 코드 - Service  (0) 2022.01.23
3 - (2). 주요 코드 - Repository  (0) 2022.01.23
3 - (1). 주요 코드 - 엔티티  (0) 2022.01.23

+ Recent posts