Vue_ShoppingMall

Project 사이트 바로가기

develop tool

BackEnd Frame Work & DB

BackEnd Library

FrontEnd Frame Work

FrontEnd Library

What is Vue_ShoppingMall?

Vue_ShoppingMall은 vue와 nodejs를 활용한 간단한 쇼핑몰 사이트 입니다. 일반 사용자 페이지와 관리자 페이지로 나뉘어져 있으며 실제 쇼핑몰 사이트 처럼 구현을 했습니다.

바로가기

PROJECT 구성 ERD 및 테이블 설명 주요 기능 스크린샷

PROJECT 구성

팀 구성 : 1인 (개인 프로젝트)
개발일정

일정	진행상황
1~3일	필요기능 분석 테이블 설계
4~5일	nodejs exprss 프로젝트 구축 및 mysql 연동/li> vuejs vue-cli로 프로젝트 구축 부트스트랩 템플릿 적용
6~7일	mysql 연동 오류 및 pool오류 개선 회원가입폼과 로그인 폼 기본틀 완료 회원가입 구현 로그인 구현 JWT와 cookie를 이용해 기존 localstrorage -> cookie로 토큰 발행 수정 관리자 페이지 추가
8~12일	관리자 페이지 -> 상품등록 구현 상품 설명에 ckEditor 추가 관리자 페이지 -> 상품수정 모달창 구현 관리자 페이지 -> 상품수정 모달창 수정, 삭제 구현 상품 설명에 ckeditor 적용 Multer를 추가하여 파일 업로드 구현 (상품 이미지) 업로드를 프론트 프로젝트 디렉토리 assets에 저장
13~14일	메인페이지 퍼블리싱 메인페이지 상품목록 및 상세보기 조회 구현 상품 조회 화면 댓글 부트스트랩 템플릿 적용 댓글 등록 삭제 구현
15~16일	상품 장바구니에 담기 구현 총 가격 계산 상품 카테고리 조회 상품 카테고리 해당 상품들 조회
17~18일	장바구니 상품 삭제 유효성 추가 및 버그 픽스 상품 주문하기 구현 상품 주문 후 상태 업데이트 주문 한 상품은 장바구니에서 삭제
19~21일	상품 목록 페이징 처리 상품 댓글 버그 픽스 tui grid, tui date picker, daum postcode 추가 관리자 페이지 -> 유저관리 tui grid 적용, 검색조건 추가, 유저 삭제 수정 유저 가입 쿼리 수정 회원가입 daum post code를 적용 하여 주소입력 추가 장바구니에 담긴 물품의 수량이 1개 미만일 때 체크해제
22~23일	주문목록 구현 주문 후 상품 삭제 주문상태 변경
24일	상품검색기능 추가 주문목록 검색 및 페이징처리 상품목록 페이징처리 router link replace 수정(query를 유동적으로 바꾸는 작업)
25~26일	카카오 회원가입 로그인 로그아웃 구현 이미지 업로드 front 디렉토리 -> C드라이브 > upload로 수정 네비게이션 가드 수정
27 ~28일	회원탈퇴 구현 내 정보 수정 구현 backend에 첫 빌드
29~30일	댓글 답글기능 구현 기타 편의 기능 추가 프로필 사진 추가 코드 리팩토링 주문하기 유효성 추가 주문시 내 주소 체크박스 추가 이메일로 비밀번호 찾기 및 회원가입 이메일란 추가 프로젝트 마무리

추가 수정

수정 날짜	수정 내용
20-08-05	ui 및 검색 쿼리 수정
20-08-07	node express mysql npm 변경 mysql -> mysql2

맨 위로

ERD 및 테이블 설명

유저 테이블 (USER_TABLE)

1) USER_ID -> 아이디
2) USER_PW -> 비밀번호(bcrypt로 암호화되어 삽입)
3) USER_EMAIL -> 비밀번호 찾기 용도로 추가 되었음.
4) USER_THUMBNAIL -> 유저 프로필 사진.
5) USER_VERIFY -> 유저 권한 0 : 일반 9 : 관리자(회원가입시 default 0)
6) ISSNS -> 카카오 로그인인지 일반 로그인 구분(default : null kakao : 'kakao')

상품 테이블(GOODS_TABLE)

1) GDS_NUM -> 상품 고유 아이디 autoIncrease
2) GDS_CATEGORY_CODE -> 상품 카테고리 코드
3) GDS_IMG -> 상품 이미지

상품 댓글 테이블(GOODS_REPLY_TABLE)

1) GDS_NUM -> 해당 상품 아이디(GOODS_TABLE GDS_NUM)
2) REPLY_NUM -> 댓글 고유 아이디 autoIncrease
3) REPLY_GROUP -> 답글포함 댓글들 그룹(그룹별로 댓글 리스트 조회)
4) REPLY_PARENT -> 답글의 부모 댓글
5) IS_DELETE -> 삭제 여부(답글이 달려있는 경우 '삭제된 댓글입니다'표시

상품 주문 테이블(GOODS_ORDER_TABLE)

1) ORDER_ID -> 주문 아이디 UUID v4 16자리로 구현
2) ORDER_IDX -> 주문 고유 아이디 autoIncrease
3) ORDER_RECIEVE -> 수령자
4) GDS_NUM -> 상품 고유아이디(GOODS_TABLE 과 mapping)

상품 주문 상세 테이블(GOODS_ORDER_DETAIL_TABLE)

1) ORDER_DETAIL_ID -> 상세주문 고유아이디 autoIncrease
2) ORDER_ID -> 주문 아이디(GOODS_ORDER_TABLE과 mapping)
3) GDS_NUM -> 상품 고유아이디(GOODS_TABLE 과 mapping)
4) STATUS -> 주문 상태
    0 신규 주문 
    1 발송대기
    2 배송중
    3 배송완료
    4 구매확정
    5 취소요청

상품 카테고리 테이블(GOODS_CATEGORY_TABLE)

1) CATEGORY_NAME -> 카테고리 이름
2) CATEGORY_CODE -> 카테고리 코드(100 단위 코드 == 상위 카테고리 코드)
3) CATEGORY_REF -> 부모 카테고리
4) CATEGORY_LEVEL -> 카테고리 단계(1 - 부모, 2 - 자식)

상품 장바구니 테이블(GOODS_CART_TABLE)

1) CART_NUM -> 장바구니 고유아이디 autoIncrease
2) USER_ID -> 유저 아이디(USER_TABLE과 mapping)
3) GDS_NUM -> 상품 고유아이디(GOODS_TABLE과 mapping)

맨 위로

주요기능

기능

로그인 프로세스
회원가입 프로세스 [TOAST DATEPICKER(데이트피커 라이브러리), VUEJS DAUM POSTCODE(다음 우편찾기 라이브러리)]
회원탈퇴 프로세스
장바구니에 담기 프로세스
주문하기 프로세스 [VUEJS DAUM POSTCODE(다음 우편찾기 라이브러리)]
내정보 수정 프로세스 [MULTER(파일업로드 라이브러리)]
댓글, 답글 프로세스
관리자 -> 상품crud 프로세스 [CKEDITOR(에디터 라이브러리), TOAST PAGINATION(페이징 라이브러리), MULTER(파일업로드 라이브러리)]
관리자 -> 주문목록 프로세스 [TOAST GRID(그리드 라이브러리)]
비밀번호 찾기 프로세스 [NODE MAILER(메일통신 라이브러리)]
관리자 -> 유저목록 프로세스 [TOAST GRID(그리드 라이브러리), VUE EXCEL EXPORT(엑셀 내보내기)]
서버, 프론트 개발환경 [ MYSQL(DB 라이브러리), MYBATIS-MAPPER(SQL 라이브러리) ]