vue store
1.0.0
2020년 겨울방학은 특히 신종 코로나바이러스 폐렴 전염병으로 인해 개학이 아직 시작되지 않았기 때문에 더욱 특별합니다. 지난 학기에는 틈틈이 Vue.js 와 Node.js 배워서 연습할 수 있는 완전한 프로젝트를 만들고 싶었지만 예전에는 학교에 다닐 시간이 없었습니다. 이제 시간이 좀 있으니 이전에 배운 내용을 통합하는 프로젝트를 하고 싶습니다.
많은 고심 끝에 마침내 Xiaomi Mall을 모방한 전자상거래 프로젝트를 만들기로 결정했습니다. 오랜 시간이 흘러서인지 예전에 배웠던 많은 것들을 거의 잊어버렸을지 모르지만, 이 프로젝트를 할 때는 기본적으로 공식 문서를 따라 차근차근 진행해 나갔습니다. 집안의 여러 가지 일로 인해 프로젝트 진행이 지연되는 것은 불가피합니다. 이제 거의 완료되었습니다. 초보자가 시작할 수 있도록 공유하겠습니다. 실수가 있으면 조언을 부탁드립니다.
본 프로젝트는 프론트엔드와 백엔드가 분리되어 있습니다. 샤오미몰을 참고하여 구현하였습니다. 단, 샤오미 공식 홈페이지와는 아무런 관련이 없습니다. 샤오미 제품은 샤오미 공식몰을 방문해주세요.
본 프로젝트의 프론트엔드입니다. 백엔드는 스토어-서버로 이동해주세요.
프런트 엔드는 Alibaba Cloud에 배포되었습니다. http://101.132.181.9/를 방문하십시오. (모바일 장치와 호환되지 않습니다. 컴퓨터를 사용하여 액세스하십시오.)
백엔드도 Alibaba Cloud에 배포되었으며, 인터페이스 주소가 온라인 주소로 변경되었습니다. 로컬에서 실행되는 프런트엔드도 백엔드에 정상적으로 액세스할 수 있습니다.
저는 학부 3학년이고 이번 여름에 인턴십을 시작할 예정입니다. 앞으로는 그다지 자유로울 수는 없지만 수시로 프로젝트를 업데이트하고 개선할 예정입니다. 이슈에서 직접.
이 프로젝트가 좋다고 생각하신다면 오른쪽 상단의
Star눌러 후원해주세요. ^_^
본 프로젝트의 프론트엔드와 백엔드는 분리되어 있으며, 프론트엔드는 Vue + Vue-router + Vuex + Element-ui + Axios 기반으로 하며 Xiaomi Mall을 참고하여 구현됩니다. 백엔드는 Node.js(Koa框架) + Mysql 기반으로 구현됩니다.
프런트 엔드에는 홈페이지, 로그인, 등록, 모든 제품, 제품 세부 정보 페이지, 회사 소개, 내 컬렉션, 장바구니, 주문 결제 페이지, 내 주문 및 오류 처리 페이지 등 11개의 페이지가 있습니다.
상품 표시, 상품 분류 조회, 키워드 검색 상품, 상품 상세 정보 표시, 로그인, 회원가입, 사용자 장바구니, 주문 정산, 사용자 주문, 사용자 즐겨찾기 목록 및 오류 처리 기능을 구현합니다.
백엔드는 MVC 모델을 채택하고 해당 인터페이스, 제어 계층 및 데이터 지속성 계층은 프런트 엔드에 필요한 데이터 모듈에 따라 설계되었습니다. 백엔드 배송 주소 저장소-서버.
프런트엔드: Vue + Vue-router + Vuex + Element-ui + Axios
백엔드: Node.js , Koa框架
데이터베이스: Mysql
페이지는 element-ui의 Dialog 사용하여 마스크 대화 상자를 표시하는 효과를 얻습니다.登录버튼은 App.vue 루트 구성 요소에 설정되며 로그인 상자 표시 여부는 vuex 의 showLogin 상태를 통해 제어됩니다.
이 디자인은 사용자가 페이지의 버튼을 클릭하여 로그인할 수 있도록 하거나, 사용자가 로그인 확인이 필요한 페이지에 액세스하거나 백엔드에서 로그인 확인이 필요한 프롬프트를 반환한 후 로그인 상자가 자동으로 팝업되도록 하여 페이지 점프를 줄입니다. 사용자 작업을 단순화합니다.
사용자가 입력한 데이터는 신뢰할 수 없는 경우가 많기 때문에 이 프로젝트의 프런트엔드와 백엔드 모두에서 로그인 정보를 확인합니다. 프런트엔드는 element-ui의 양식 확인 방법을 기반으로 하며 확인을 위해 사용자 정의된 확인 규칙을 가지고 있습니다.
이 페이지는 또한 element-ui의 Dialog 사용하여 마스크 대화 상자를 표시하는 효과를 얻습니다.注册버튼은 App.vue 루트 구성 요소에 설정되고 상위-하위 구성 요소를 통해 전달된 값은 등록 상자 표시 여부를 제어합니다. .
사용자가 입력한 데이터는 신뢰할 수 없는 경우가 많기 때문에 이 프로젝트의 프런트엔드와 백엔드에서도 등록 정보를 확인합니다. 프런트 엔드는 element-ui의 양식 확인 방법을 기반으로 하며 확인을 위한 맞춤형 확인 규칙을 가지고 있습니다.
홈페이지는 주로 상품을 전시하는 곳으로, 캐러셀에는 추천 상품과 인기 상품이 카테고리별로 표시됩니다.
전체상품 페이지에는 전체 상품 표시, 상품 분류 쿼리, 키워드 기반 상품 검색 결과 표시가 통합되어 있습니다.
제품 세부정보 페이지에는 주로 특정 제품에 대한 세부 정보가 표시되며, 사용자는 즐겨찾는 제품을 장바구니나 즐겨찾기 목록에 추가할 수 있습니다.
장바구니는 vuex를 이용하여 구현되었으며, 페이지 효과는 Xiaomi Mall의 장바구니를 의미합니다.
자세한 구현 프로세스는 Vuex 기반 Xiaomi Mall 쇼핑 카트 구현을 참조하세요.
사용자가 장바구니에서 구매할 제품을 선택하고 "결제하기" 버튼을 클릭하면 이 페이지로 이동하게 됩니다. 여기에서 사용자는 배송 주소를 선택하고 주문 관련 정보를 확인한 후 구매를 확인합니다.
사용자는 상품 상세 페이지에서 '좋아요 추가' 버튼을 클릭하여 즐겨찾는 상품을 즐겨찾기 목록에 추가할 수 있습니다.
사용자가 주문한 모든 주문을 표시합니다.
알아채다:
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
첫 페이지
모든 제품
장바구니
내 컬렉션
내 주문
로그인
등록하다
작성자 hai-27
2020년 3월 8일
