스프링부트+jsp로 배달사이트 만들기-09 매장목록, 매장상세

매장목록 페이지

매장목록js추가.zip

0.00MB

 

압축을 풀고 해당 위치에 붙여 넣습니다

store-li는 store페이지에서 매장목록을 보여주는 <li>부분인데 따로 분리한 이유는 다른 페이지에서도 비슷하게 사용하기 위해 분리했습니다

 

Store 패키지를 추가하고 StoreController를 생성합니다

@Controller
public class StoreController {

	@Autowired
	private StoreService storeService;
	
	@GetMapping("/store/{category}/{address1}")
	public String store(@PathVariable int category, @PathVariable int address1, Model model) {
		
		List<Store> storeList = storeService.storeList(category, address1 / 100);
		model.addAttribute("storeList", storeList);
		return "store/store";
	}
	
}

@GetMapping("/store/{category}/{address1}") 부분의 {category}는 넘어오는 값을 @PathVariable로 받아 사용할 수 있습니다

 

ex) /store/100/31000으로 요청하면 category = 100, address1 = 31000

우편번호를 100으로 나눈 이유는 우편번호 중 앞 3자리가 같으면 같은 구로 보기 때문입니다

 

매장목록을 담을 Store클래스와 Service, DAO를 생성합니다

@Getter
@Setter
@ToString
public class Store {
	private long id;
	private int category;
	private String storeName;
	private int storeAddress1;
	private String storeAddress2;
	private String storeAddress3;
	private String storePhone;
	private String storeImg;
	private String storeThumb;
	private int openingTime;
	private int closingTime;
	private int minDelevery;
	private int deleveryTime;
	private int deleveryTip;
	private String storeDes;
}

 

public interface StoreService {
	List<Store> storeList(int category, int address);
}

 

@Service
public class StoreServiceImp implements StoreService {

	@Autowired
	private StoreDAO storeDAO;
	
	@Override
	public List<Store> storeList(int category, int address) {
		Map<String, Object> map = new HashMap<>();
		map.put("category", category);
		map.put("address1", address);
		
		return storeDAO.storeList(map);
	}

}

 

public interface StoreDAO {

	List<Store> storeList(Map<String, Object> map);

}

 

@Repository
public class StoreDAOImp implements StoreDAO {

	@Autowired
	private SqlSession sql;
	
	@Override
	public List<Store> storeList(Map<String, Object> map) {
		return sql.selectList("store.storeList", map);
	}
}

 

쿼리를 실행할 StoreMapper.xml을 생성합니다

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="store">

	<select id="storeList" resultType="Store">
		SELECT * FROM BM_STORE
	</select>	
	
</mapper>

 

 

 

아직 관리자 페이지를 만들지 않았기 때문에 매장들을 db에서 직접 추가해줍니다

INSERT INTO bm_store VALUES (STORE_ID_SEQ.NEXTVAL, 100, '도미노피자'
		    ,'31099','천안시 두정동', '상세주소', '01013245678', '\img\none.gif', '\img\none.gif', 10, 19, 2000
		    ,30, 2000, '가게 소개'  );
            
INSERT INTO bm_store VALUES ( STORE_ID_SEQ.NEXTVAL, 100, '빅스타피자'
		    ,'31099','천안시 두정동', '상세주소', '01013245678', '\img\none.gif', '\img\none.gif', 13, 25, 3000
		    ,40, 3000, '가게 소개'  );	
            
INSERT INTO bm_store VALUES ( STORE_ID_SEQ.NEXTVAL, 100, '피자스쿨'
		    ,'31099','천안시 두정동', '상세주소', '01013245678', '\img\none.gif', '\img\none.gif', 10, 15, 4000
		    ,50, 4000, '가게 소개'  );	
            
INSERT INTO bm_store VALUES ( STORE_ID_SEQ.NEXTVAL, 100, '피자헛'
		    ,'31099','천안시 두정동', '상세주소', '01013245678', '\img\none.gif', '\img\none.gif', 11, 13, 1000
		    ,30, 2000, '가게 소개'  );

 

아직 별점과 리뷰수가 없기때문에 store-li 페이지에서 에러가 납니다

별점과 리뷰 출력부분을 주석처리 후 다시 실행해봅니다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
    
<li>
		<div class="img_box">
			<a href="${store_admin }/detail/${storeList.id }"><img src="${storeList.storeImg }" alt="이미지"></a>
		</div>

		<div class="info_box">
		
			<h2><a href="${store_admin }/detail/${storeList.id }">${storeList.storeName }</a></h2>
			
			<a href="${store_admin }/detail/${storeList.id }">
				<span>
					<%-- <span>평점 ${storeList.score }</span>
					
					<span class="score_box">
						<c:forEach begin="0" end="4" var="i">
							<c:if test="${Math.round(storeList.score) > i }">
								<i class="far fas fa-star"></i>
							</c:if>
							<c:if test="${Math.round(storeList.score) <= i }">
								<i class="far fa-star"></i>
							</c:if>
						</c:forEach>
					</span> --%>
				</span>
				
			<span>
			<%-- 
				<span>리뷰 ${storeList.reviewCount }</span>
				<span>사장님 댓글 ${storeList.bossCommentCount }</span>
				 --%>
			</span>
			
			<span>
				<span>최소주문금액 <fm:formatNumber value="${storeList.minDelevery }" pattern="###,###" />원</span>
				<span>배달팁 <fm:formatNumber value="${storeList.deleveryTip }" pattern="###,###" />원</span>
			</span>
			<span>배달시간 ${storeList.deleveryTime }분</span>
			</a>
		</div>
		
		<%-- 
	<c:if test="${!storeList.isOpen}">
		<div class="is_open">
			<a href="/store/detail/${storeList.id }">지금은 준비중입니다</a>
		</div>
	</c:if>
	 --%>
</li>

 

 

 

 

 

 

---

매장 상세페이지

 

매장 상세페이지를 불러올땐 가게 정보, 음식 리스트, 리뷰 리스트 등이 필요합니다

이 세가지를 받을 수 있는 StoreDetail을 만듭니다

@NoArgsConstructor
@AllArgsConstructor
@ToString
@Getter
@Setter
public class StoreDetail {
	private Store storeInfo;
//	private List<Food> foodList;
//	private List<Review> reviewList;
}

@NoArgsConstructor와 @AllArgsConstructor는 생성자를 만드는 롬복어노테이션입니다

일단은 매장정보만 받을 수 있게 주석처리 합니다

 

가게 id로 데이터를 받을 수 있게 Controller, Service, DAO를 추가합니다

	@GetMapping("/store/detail/{id}")
	public String storeDetail(@PathVariable long id, Model model) {

		StoreDetail storeDetail = storeService.storeDetail(id);

		model.addAttribute("store", storeDetail);

		return "store/detail";
	}

 

public interface StoreService {
	List<Store> storeList(int category, int address);

	StoreDetail storeDetail(long id);
}

 

	@Override
	public StoreDetail storeDetail(long storeId) {
		Store storeInfo = storeDAO.storeDetail(storeId); 
		
//		List<Food> foodList = storeDAO.foodList(storeId);
//		List<Review> reviewList = storeDAO.reviewList(storeId);
		
		return new StoreDetail(storeInfo);
	}

서비스단에서 가게정보, 음식리스트, 댓글리스트를 storeDetail에 담아 반환하게 만들었습니다

 

public interface StoreDAO {

	List<Store> storeList(Map<String, Object> map);

	Store storeDetail(long storeId);

}

 

@Repository
public class StoreDAOImp implements StoreDAO {

	@Autowired
	private SqlSession sql;
	
	@Override
	public List<Store> storeList(Map<String, Object> map) {
		return sql.selectList("store.storeList", map);
	}

	@Override
	public Store storeDetail(long storeId) {
		return sql.selectOne("store.storeDetail", storeId);
	}
}

 

	<select id="storeDetail">
		SELECT * FROM BM_STORE WHERE ID = #{storeId }
	</select>

 

 

화면을 보여줄 파일입니다

매장상세.zip

0.01MB

 

 

아직 주석도 많고 빈칸도 많지만 하나씩 채워보겠습니다