jddaojia
소개
JDDAOJIA는 JD.com을 모방하여 구축 한 웹 모바일 이메일입니다. 이 창고는 프론트 엔드 프로젝트입니다. 백엔드 API 인터페이스 부분은 Jddaojia-Backapi를 참조하십시오.
이 프로젝트는 로그인 등록, 상점 제품 디스플레이, 쇼핑 카트, 주문 배치, 과거 주문 쿼리, 저장 및 편집 주소를 포함하여 E-Mall 사용자 측의 기본 작업을 구현하며 JD.com의 고유 한 UI 스타일을 복원하려고합니다.
데모 비디오 : Bilibili 비디오를 참조하십시오.
사용 된 기술
- vue3 + vuex + vue-router + vue-cli
- axios
- eslint
- 웹 팩
- SCSS
- ES6
기본 명령 줄 작업 :
프로젝트 프로젝트 설정을 설치하십시오
개발을 위해 컴파일 및 핫 릴로드
생산을 위해 컴파일하고 최소화합니다
라인 및 수정 파일
구성을 사용자 정의합니다
참조 : 참조 :
구성 참조.
성공적으로 실행하십시오
프로세스가 원활하게 진행되고 프로젝트가 DEV 환경에서 성공적으로 실행되면 명령 줄은 다음과 유사한 프롬프트를 표시합니다.
여기에 주어진 URL을 사용하여 페이지에 액세스하십시오. 그러나 프로젝트의 백엔드 인터페이스 서버를 먼저 실행하고 기본적으로 포트 3000을 사용해야합니다.
힌트
- 사용자 이름 : 관리자 및 비밀번호 : admin을 통해 직접 쇼핑몰에 로그인하여 등록 프로세스를 우회 할 수 있습니다. 또한 쇼핑몰에는 모바일 SMS 로그인 기능이 없으므로 사용자 이름과 비밀번호를 사용하여 로그인하십시오.
- 이 프로젝트는 REM 체계를 사용하여 적응 형 레이아웃을 달성합니다.
- 이 프로젝트는 Firefox 및 Edge 브라우저에서만 테스트되었습니다. Chrome 및 Safari 브라우저는 레이아웃 버그를 발생시킬 수 있습니다. 당신이 발견되면, 저에게 연락하여 수정하십시오.
- 레이아웃은 Flex를 최대한 활용하고 CSS 코드를 단순화합니다.
- 쇼핑 카트 기능은 주로 Vuex 및 SessionStorage를 사용하여 클라이언트 측의 데이터를 관리합니다. 이는 현지화 된 정보 관리 기능을 연습하는 목표입니다. 다른 기능은 주로 백엔드에서 데이터를 처리합니다.
- 로그인 정보는 SessionStorage에 저장됩니다.
개선 방향
- 캐시 사용, 레이아웃 지터 감소 등과 같은 페이지로드 성능 및 프리젠 테이션의 개선의 여지가 여전히 남아 있습니다.
- 브라우저의 특정 설정에서는 페이지가 닫혀 있어도 SessionStorage가 지워지지 않습니다. 페이지를 일정 시간 동안 작동하지 않으면 자동으로 로그 아웃하고 SessionStorage를 지울 수 있습니다.
- HTTP 요청을 사용하는 많은 부품은보다 구체적인 오류 처리 방법을 채택 할 수 있습니다.
