쇼핑몰 프로젝트(7) 메뉴

쇼핑몰 프로젝트(7) 메뉴

2023. 3. 28. 16:42ㆍSpring

메뉴 기능 구현.

관리자 메뉴는 메인 메뉴와 서브 메뉴 2가지.

메뉴 테이블, 서브 메뉴 테이블 생성

메뉴는 따로 insert 기능 하지 않고 db에 데이터 넣고 시작

--관리자 메뉴 정보(상단 메뉴)
CREATE TABLE ADMIN_MENU (
    MENU_CODE VARCHAR2(20) CONSTRAINT MENU_PK PRIMARY KEY
    , MENU_NAME VARCHAR2(50) NOT NULL
    , MENU_URL VARCHAR2(100)
);

DELETE ADMIN_MENU;
INSERT INTO ADMIN_MENU VALUES('MENU_001', '상품관리', '/cateManage');
INSERT INTO ADMIN_MENU VALUES('MENU_002', '회원관리', '/memberManage');
INSERT INTO ADMIN_MENU VALUES('MENU_003', '주문관리', '/orderManage');

--서브 메뉴 테이블
CREATE TABLE ADMIN_SUB_MENU (
    SUB_MENU_CODE VARCHAR2(20) CONSTRAINT SUB_MENU_PK PRIMARY KEY
    , SUB_MENU_NAME VARCHAR2(50) NOT NULL
    , SUB_MENU_URL VARCHAR2(100)
    , MENU_CODE VARCHAR2(20) CONSTRAINT MENU_FK
        REFERENCES ADMIN_MENU (MENU_CODE) ON DELETE CASCADE NOT NULL
);

INSERT INTO ADMIN_SUB_MENU VALUES ('SUB_MENU_001', '카테고리 관리', '/cateManage', 'MENU_001');
INSERT INTO ADMIN_SUB_MENU VALUES ('SUB_MENU_002', '상품 등록', '/regItem', 'MENU_001');
INSERT INTO ADMIN_SUB_MENU VALUES ('SUB_MENU_003', '상품 재고', '/stockManage', 'MENU_001');
INSERT INTO ADMIN_SUB_MENU VALUES ('SUB_MENU_004', '상품 수정', '/updateItem', 'MENU_001');

db에 넣은 menu 데이터 header.html에서 조회될 수 있게 함.

메인 메뉴 조회 쿼리 작성

	<!-- 메인 메뉴 -->
	<select id="getAdminMenuList" resultMap="adminMenu">
		SELECT MENU_CODE
			, MENU_NAME
			, MENU_URL
		FROM ADMIN_MENU
		
	</select>

AdminService 메소드 작성

	//메인메뉴 조회
	List<AdminMenuVO> getAdminMenuList();

AdminServiceImpl 메소드 구현

	//메인 메뉴 
	@Override
	public List<AdminMenuVO> getAdminMenuList() {
		return sqlSession.selectList("adminMapper.getAdminMenuList");
	}

AdminController 작성

메뉴 목록은 카테고리 관리 페이지 올 때 카테고리 목록과 같이 조회되면 됨.

	//카테고리 관리 페이지
	@GetMapping("/cateManage")
	public String cateManage(Model model) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//카테고리 목록 조회
		model.addAttribute("cateList", adminService.getCateListForAdmin());
		
		return "content/admin/cate_manage";
	}

header.html에 조회한 메뉴 리스트 뿌려주기.

메뉴 목록은 관리자와 일반회원에 따라 달라져야 됨.

현재 상태 상품목록페이지에 오면 일반회원이 보는 메뉴가 조회되는 상황.

조건문으로 로그인 여부와 권한 정보에 따라 메뉴 다르게 조회되게 설정.

<!-- 로그인 X -->
<th:block th:if="${session.loginInfo == null}">
	<th:block th:each="category : ${categoryList}">
		<li class="nav-item">
			<a class="nav-link">[[${category.cateName}]]</a> 
		</li>
	</th:block>
</th:block>
							
<th:block th:unless="${session.loginInfo == null}">
	<!-- 로그인 O, 일반회원 -->
	<th:block th:if="${session.loginInfo.memRole =='USER'}">
		<th:block th:each="category : ${categoryList}">
			<li class="nav-item">
				<a class="nav-link">[[${category.cateName}]]</a> 
			</li>
		</th:block>
	</th:block>
	<!-- 로그인 O, 관리자 -->
	<th:block th:if="${session.loginInfo.memRole =='ADMIN'}">
		<th:block th:each="adminMenu : ${adminMenuList}">
			<li class="nav-item">
				<a class="nav-link">[[${adminMenu.menuName}]]</a> 
			</li>
		</th:block>
	</th:block>
</th:block>

서브 메뉴도 동일하게 작업.

조회 쿼리

AdminService 메소드 작성

AdminServiceImpl 메소드 구현

서브메뉴는 admin_side.html에 보여줘야 함. 같이 화면이 열리기 때문에 공유 가능

html에 뿌려주기

각 서브 메뉴 클릭 시 페이지 이동

서브 메뉴들 html 생성

서브 메뉴 클릭하면 각각 해당 페이지로 이동하게 서브 메뉴들 a태그로 감싸줌

페이지 이동은 조회된 subMenuUrl 데이터 이용

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="adminSideFragment">
	<div class="row">
		<div class="col">    <!-- active -->
			<div class="list-group"> <!-- 메뉴의 상품 관리 버튼 클릭 시  -->
				<th:bolck th:each="subMenu : ${subMenuList}">
					<a th:href="@{'/admin' + ${subMenu.subMenuUrl}}" class="list-group-item list-group-item-action">
						[[${subMenu.subMenuName}]]
					</a>
				</th:bolck>
			</div>
		</div>
	</div>
</th:block>	
</html>

각각의 서브메뉴로 페이지 이동해도 메뉴와 서브메뉴 목록 조회 되어야 함.

해당 페이지 이동할 때마다 위 두 메소드 사용해야 됨.

	//상품 등록 페이지
	@GetMapping("/regItem")
	public String regItemForm(Model model) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		
		return "content/admin/reg_item";
	}
	
	//상품 재고 관리 페이지
	@GetMapping("/stockManage")
	public String stockManage(Model model) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		
		return "content/admin/stock_manage";
	}
	
	//상품 수정 페이지
	@GetMapping("/updateItem")
	public String updateItem(Model model) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		
		return "content/admin/update_item";
	}

내가 클릭한 서브 메뉴의 class에 active 속성을 줘야 클릭한 메뉴 색주기

어떤 서브 메뉴를 클릭했는지 판단할 수 있어야 한다.

> subMenuCode (PK)로 판단 가능!

해당 서브 메뉴의 url을 통해 Controller로 이동할 때 해당 서브 메뉴의 subMenuCode 값 가져가야 됨.

<th:bolck th:each="subMenu : ${subMenuList}">
	<a th:href="@{'/admin' + ${subMenu.subMenuUrl}(subMenuCode=${subMenu.subMenuCode})}" class="list-group-item list-group-item-action">
		[[${subMenu.subMenuName}]]
	</a>
</th:bolck>

AdminController에서 모든 서브 메뉴 컨트롤러들에 subMenuCode 값 받아주기.

커맨드 객체 사용 subMenuCode 받아줌 > html로 데이터 다시 넘겨주기 위해(자동 넘어감)

해당 서브 메뉴 페이지로 넘어가면 같이 열리는 admin_side.html에서 데이터 공유 가능

//카테고리 관리 페이지
	@GetMapping("/cateManage")
	public String cateManage(Model model, AdminSubMenuVO adminSubMenuVO) {
		
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		//카테고리 목록 조회
		model.addAttribute("cateList", adminService.getCateListForAdmin());
		
		return "content/admin/cate_manage";
	}

//상품 등록 페이지						
	@GetMapping("/regItem")					
	public String regItemForm(Model model, AdminSubMenuVO adminSubMenuVO) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		
		return "content/admin/reg_item";
	}
	
	//상품 재고 관리 페이지
	@GetMapping("/stockManage")
	public String stockManage(Model model, AdminSubMenuVO adminSubMenuVO) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		
		return "content/admin/stock_manage";
	}
	
	//상품 수정 페이지
	@GetMapping("/updateItem")
	public String updateItem(Model model, AdminSubMenuVO adminSubMenuVO) {
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		
		return "content/admin/update_item";
	}

admin_side.html에서 subMenuCode 받아줌.

서브 메뉴 이동 시 클릭한 서브 메뉴가 가진 subMenuCode와

컨트롤러에서 admin_side.html로 전달한 subMenuCode가 같으면 active 클래스 속성 추가하면 된다.

th:classappend 속성 사용(기존 class 속성에 조건에 따라 속성 추가할 때 사용)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<th:block th:fragment="adminSideFragment">
	<div class="row">
		<div class="col">    <!-- active -->
			<div class="list-group"> <!-- 메뉴의 상품 관리 버튼 클릭 시  -->
				<th:bolck th:each="subMenu : ${subMenuList}">
					<a th:href="@{'/admin' + ${subMenu.subMenuUrl}(subMenuCode=${subMenu.subMenuCode})}" 
					class="list-group-item list-group-item-action" 
					th:classappend="${subMenu.subMenuCode == adminSubMenuVO.subMenuCode ? 'active' : ''}">
						<!-- 서브 메뉴가 가진 메뉴코드 == Controller에서 가져온 메뉴 코드 -->
						[[${subMenu.subMenuName}]]
					</a>
				</th:bolck>
			</div>
		</div>
	</div>
</th:block>
</html>

문제점

관리자로 로그인해서 첫 페이지인 카테고리 관리 페이지 들어오는 경우 active 속성 적용 안 됨.

로그인하면 인덱스 컨트롤러로 가는데 인덱스 컨트롤러에서 카테고리 관리 페이지로 올 때는 subMenuCode 데이터 안 넘기기 때문에.

서브 메뉴 코드 null일 때는 강제로 메뉴 코드 넣어줌.

	//카테고리 관리 페이지
	@GetMapping("/cateManage")
	public String cateManage(Model model, AdminSubMenuVO adminSubMenuVO) {
		//인덱스 컨트롤러에서 올 때는 데이터 없기 때문에 서브 메뉴 코드 데이터 넣기.
		if(adminSubMenuVO.getSubMenuCode() == null) {
			adminSubMenuVO.setSubMenuCode("SUB_MENU_001");
		}
		
		//메인(상단) 메뉴 목록 조회
		model.addAttribute("adminMenuList", adminService.getAdminMenuList());
		//서브 메뉴 목록 조회
		model.addAttribute("subMenuList", adminService.getSubMenuList());
		
		//카테고리 목록 조회
		model.addAttribute("cateList", adminService.getCateListForAdmin());
		
		return "content/admin/cate_manage";
	}

현재 상태

AdminController에서 서브 메뉴 올 때마다 어쩔 수 없이 메뉴들을 화면에 보여주기 위해 반복적으로 메뉴들을 조회하고 있음.

코드의 흐름을 위해 원래 해당 Controller의 주기능 제외하고 다른 일들을 하고 있음 (전처리, 후처리)

전처리 후처리를 따로 빼서 처리 가능

그때 AOP, intercepter, filter 등을 사용.

Intercepter 사용

인터셉터 클래스 MenuIntercepter 생성

HandlerInterceptor를 구현

postHandle 오버라이딩

메소드 사용을 위해 AdminService 의존성 주입

데이터 보내면서 메뉴 목록 조회 메소드 실행.

언제 메소드 실행, 어디서 메소드 실행할 지 설정.

설정 클래스 IntercepterConfig 생성 (설정 파일)

WebMvcConfigurer를 구현

@Configuration 어노테이션 붙여서 설정 파일임을 인식, 객체 생성

오버라이딩

package com.study.shop.intercepter;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class IntercepterConfig implements WebMvcConfigurer{

	@Override
	public void addInterceptors(InterceptorRegistry registry) {
								//아래 객체 새로 만드는 메소드 실행
		registry.addInterceptor(getMenuIntercepter())
				.addPathPatterns("/admin/cateManage") //카테고리 관리 페이지
				.addPathPatterns("/admin/regItem") //카테고리 관리 페이지
				.addPathPatterns("/admin/stockManage") //카테고리 관리 페이지
				.addPathPatterns("/admin/updateItem"); //카테고리 관리 페이지
	}
	
		//@Bean : 객체를 의미, 리턴되는 데이터를 객체로 생성 (프로젝트 run과 동시에)
		@Bean    //만든 인터셉터 클래스
		public MenuIntercepter getMenuIntercepter() {
			return new MenuIntercepter();  //새로운 메뉴 인터셉터 만들어서 리턴해줌
			
		}
}

Controller에서 메뉴 조회 메소드 다 삭제해주기. 이제는 인터셉터에서 다 함.

관리자가 아닌 경우 관리자 페이지로 이동되는 것을 막는 기능 인터셉터로 추가

접속 권한에 따라 페이지 이동 못하게 설정할 인터셉터 AuthoIntercepter 생성

HandlerInterceptor 구현

preHandle() 오버라이딩

package com.study.shop.intercepter;

import org.springframework.web.servlet.HandlerInterceptor;

import com.study.shop.member.vo.MemberVO;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;

public class AuthoIntercepter implements HandlerInterceptor{
	
	//관리자가 아니면 관리자 페이지에 접근을 막는 기능
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		
		HttpSession session = request.getSession();
		MemberVO loginInfo = (MemberVO)session.getAttribute("loginInfo");
		
				//null이면 true
		boolean condition1 = loginInfo == null;
				//관리자X면 true
		boolean condition2 = loginInfo != null && loginInfo.getMemRole().equals("USER");
		
		
		if(condition1 || condition2) {
			response.sendRedirect("/");
			return false;
		}
		
		return true;
	}
	
	

}

IntercepterConfig 작업

package com.study.shop.intercepter;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class IntercepterConfig implements WebMvcConfigurer{

	@Override
	public void addInterceptors(InterceptorRegistry registry) {
							
		
					//아래의 객체 새로 만드는 메소드 실행
		registry.addInterceptor(getMenuIntercepter())
				.order(2)
				.addPathPatterns("/admin/cateManage") //카테고리 관리 페이지
				.addPathPatterns("/admin/regItem") 
				.addPathPatterns("/admin/stockManage") 
				.addPathPatterns("/admin/updateItem"); 
		
		//ajax 실행되는 메소드에는 인터셉터 제외 시켜야 함.(ajax 같이 쓰면 충돌)
		registry.addInterceptor(getaAuthoIntercepter())
				.order(1) //인터셉터 중 첫번째로 실행(순서 지정)
				.addPathPatterns("/admin/**") //관리자 관련 페이지 들어갈 때마다
				.excludePathPatterns("/admin/*Ajax"); //*Ajax로 끝나는 이동경로 제외
	}
	

		//@Bean : 객체를 의미, 리턴되는 데이터를 객체로 생성 (프로젝트 run과 동시에)
		@Bean    //만든 인터셉터 클래스
		public MenuIntercepter getMenuIntercepter() {
			return new MenuIntercepter();  //새로운 메뉴 인터셉터 만들어서 리턴해줌
			
		}
		
		@Bean
		public AuthoIntercepter getaAuthoIntercepter() {
			return new AuthoIntercepter();
		}

}

**주의사항

ajax와 intercepter 같이 쓰지 말기! 충돌돼서 오류 생김.

ajax 쓰는 곳은 intercepter 제외 시키기.

js에서 이동경로 /admin인 곳인데 ajax 같이 사용하면 이동 경로 마지막에 Ajax 붙여주기

※ 서브 메뉴 수정

DB에서 'SUB_MENU_004' 삭제

DELETE ADMIN_SUB_MENU WHERE SUB_MENU_CODE = 'SUB_MENU_004';

'SUB_MENU_003'을 수정

이전 서브 메뉴였던 재고 관리(메뉴003)와 상품 정보 수정(메뉴004) 메뉴를 'SUB_MENU_003'인 상품관리로 합침.

UPDATE ADMIN_SUB_MENU
SET 
SUB_MENU_NAME = '상품 관리'
, SUB_MENU_URL = '/itemManage'
WHERE SUB_MENU_CODE = 'SUB_MENU_003';

이전 작성한 updateItem Controller 지워주고 update_item.html도 삭제

stock_manage.html을 item_manage.html로 수정

상품 재고 controller를 상품 관리 페이지 controller로 수정.

	//상품 관리 페이지
	@GetMapping("/itemManage")
	public String stockManage(Model model, AdminSubMenuVO adminSubMenuVO) {
		
		return "content/admin/item_manage";
	}

'Spring' 카테고리의 다른 글

쇼핑몰 프로젝트(8) 상품 등록 (0)	2023.03.29
응집도 높이는 Intercepter (0)	2023.03.29
쇼핑몰 프로젝트(6) 상품 (0)	2023.03.28
쇼핑몰 프로젝트(5) 로그인 기능 (0)	2023.03.28
쇼핑몰 프로젝트(4) 회원 가입 기능 (0)	2023.03.27

📚개발 복습 노트

📚개발 복습 노트

태그

최근글

댓글

공지사항

아카이브

'Spring' 카테고리의 다른 글

관련글

티스토리툴바