[스프링 -5]Spring 상품리스트화면 구현하기 (product)

 맨 처음 JSP 페이지에 라이브러리를 추가한다 !

1
2
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
cs

 

1. JSP 페이지 구현하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
     
         <div class="container">
 
   <c:if test="${sessionScope.admin_userid != null }">
 
  <button class="btn btn-outline-dark" type="button"  id="btnAdd"  style="float: right;" > 상품등록  </button>
                 </c:if>
 
 
             <div class="row mb-3">
               <div class="col-3">
                <select class="form-select">
                    <option selected></option>
                    <option value="1">남성신발</option>
                    <option value="2">여성신발</option>
                    <option value="3">여성구두</option>
                  </select>
               </div>
             </div>
           <div class="row g-3">
           
              <!-- var="레코드변수" items="리스트변수" -->
                <c:forEach var="row" items="${list}">
             <!-- C: 반복문 사용 !! -->
 <!--나누기-->
 <div class="col-lg-3 com-md-6" style="border-radius: 5px;">
    <div class="card" style="width: 18rem;">
        <img src="/spring/resources/images/${row.filename}" class="card-img-top" alt="..." width="200px" height="200px">
        <div class="card-body">
          <h5 class="card-title" style="text-align: center;color: black;"><Hr/>
          <a href="/spring/shop/product/detail/${row.product_code}" style="text-decoration: none; color: black">${row.product_name}</a>
          </h5>
          <!-- 편집기능 제공 --> 
          <c:if test="${sessionScope.admin_userid !=null }"> 
            
                                  
                                    <a href="/spring/shop/product/edit/${row.product_code}">
                                    
                                 
                        <button class="btn btn-outline-dark" type="button" onclick="location='<%=request.getContextPath()%>/member/memberJoin.do'" style="float: center;margin-left: 100px;" >
                        수정
                        </button>
                                                       </a>
                                    
                                    </c:if>
                                    <!-- 편집기능끝 -->
                                    <hr/>
          <p class="card-text" style="text-align: center;">
            <span class="badge bg-dark">신발</span>  
            <span class="badge bg-dark">인기</span>
            <span class="badge bg-dark">셀럽</span>
          </p>
          <div style="text-align: center;">
   
              </div> -->
            <div class="text-dark" style="text-align: center;">&nbsp;<strong><fmt:formatNumber value="${row.price}" pattern="#,###" /></strong>&nbsp;원</div>
          </div>
          
        </div>
      </div>                 
</div>
    </c:forEach>
cs

 

2. Controller 구현하기

1
2
3
4
5
6
7
8
  @RequestMapping("list.do")
  public ModelAndView list(ModelAndView mav) {
      mav.setViewName("/shop/product_list");
      //이동할 페이지를 setviewname 으로 지정
      mav.addObject("list", productService.list());
      //model 인 mav 에 변수 "list" 로 담고 값을 productService.list() 실행
      return mav; // /shop/product_list 이동
  }
cs

3.Serivce 구현하기

1
2
3
public List<ProductVo> list(){
        return productDao.list();
    }
cs

4.dao 구현하기

1
2
3
    public List<ProductVo> list() {
        return sqlSession.selectList(MAPPER+".list");
    }
cs

5.mapper 구현하기

1
2
3
4
<select id="list" resultType="com.example.spring.vo.ProductVo">
select * from product order by product_name
 
</select>
cs

 

 

6. 여기까지 완성하시면 리스트 페이지가 딱! !!! 나와용!!