VUE 전자상거래 프로젝트(프론트엔드 & 백엔드 듀얼 프로젝트 실전)

튜토리얼 소개

vue-cli 스캐폴딩 초기화 프로젝트

프로젝트의 다른 구성

프로젝트 라우팅 분석

머리글 및 바닥글 비라우팅 구성 요소 완료

라우팅 구성요소 구성 완료

라우팅 메타정보 활용

경로 전달 매개변수

라우팅 전송 매개변수와 관련된 인터뷰 질문

푸시 및 교체 메서드 재정의

홈페이지 구성요소 분할 사업 분석

TypeNav 3단계 연계 글로벌 컴포넌트 완성

홈정적 구성 요소 분할

보충 비디오 녹화 지침(인터페이스 및 기타 문제)

POSTMAN 도구 테스트 인터페이스

Axios 2차 포장

API 인터페이스의 통합 관리

nprogress 진행 표시줄 사용

Vuex 템플릿 개발

3단계 연계 데이터를 동적으로 표시

3단계 연계 동적 배경색 완성

JS를 통해 2차, 3차 카테고리 표시 및 숨기기 제어

데모 끊김 현상으로 인해 흔들림 방지 및 조절이 발생합니다.

손떨림 방지 기능 이해

기능 제한 이해

3단계 연계 조절

3단계 연계 라우팅 점프 분석

3단계 연계의 라우팅 점프 및 매개변수 전송 서비스를 완료합니다.

검토

검색 모듈의 제품 분류 및 전환 애니메이션

typeNav 제품 분류 목록 최적화

매개변수 병합

mockjs는 데이터를 시뮬레이션합니다.

배너 캐러셀 차트의 데이터 가져오기

swiper 기본 사용

Banner는 캐러셀 차트를 위한 첫 번째 솔루션을 구현합니다.

캐러셀 차트는 watch+nectTick을 통해 문제를 해결합니다.

바닥 구성요소 모의 데이터 가져오기

바닥 구성요소를 동적으로 표시

공유 구성 요소 Carsouel

검색 모듈의 정적 구성 요소

검색 모듈 veux 작업

검색 모듈에 상품 목록을 동적으로 표시

검색 모듈은 다양한 매개변수를 기반으로 데이터 표시를 얻습니다.

검색 모듈의 하위 구성요소 동적 개발

경로 변경 사항을 모니터링하고 데이터를 얻기 위해 다른 요청을 보냅니다.

탐색경로 처리 분류 작업

탐색경로 처리 키워드

빵 부스러기 브랜드 정보

플랫폼 판매 속성 운영

정렬 작업(1부)

정렬 작업(2부)

페이지네이터 정적 구성요소

정렬 검토

페이징 기능 분석

호출기 시작 및 끝 번호 계산

페이지네이터 동적 디스플레이

페이지네이터 완료

페이지네이터가 클래스 이름을 추가합니다.

스크롤 동작

제품 세부 정보 수집

제품 세부정보에는 동적 데이터가 표시됩니다.

페이지네이터 검토-자르기

확대/축소 돋보기 표시 데이터 자르기

세부 라우팅 구성요소는 제품 판매 속성을 표시합니다.

상품판매속성값 독점작업-자르기

돋보기 조작(전편)

돋보기 위에

구매상품 수량 운영

장바구니에 추가

장바구니 담기 성공 여부 판단

장바구니에 담기 작업

세션 저장소와 결합된 경로 전달 매개변수

장바구니 정적 구성요소 및 수정

uuid 방문자 ID로 장바구니 데이터 가져오기

장바구니 동적 디스플레이 데이터

가공제품 수량

장바구니에 담긴 상품 수량 수정이 완료되었습니다.

장바구니 상품 삭제

제품 상태 수정

검토

선택한 모든 제품 삭제

모든 상품의 확인 상태 수정

로그인 및 정적 구성 요소 등록

사업자 등록(1부)

사업자 등록(2부)

로그인 사업(토큰)

사용자 로그인은 사용자 정보를 얻기 위해 토큰을 전달합니다.

로그인 사업의 기존 문제점을 설명

로그아웃

내비게이션 가드 이해

내비게이션 가드 판단

네비게이션 가드 사용자 로그인 작업

정적 구성 요소 거래

거래 페이지 데이터 가져오기

사용자 주소 정보 표시

거래 페이지 완료

주문을 제출

주문 번호 받기 및 결제 정보 표시

결제 페이지에서 ElementUI를 활용하고 요청 시 도입

위챗 결제사업(1편)

위챗페이(2부)

개인센터 2차 라우팅 구축

내 주문

로그되지 않은 내비게이션 가드 판단

사용자 로그인(구성 요소 내 독점 라우팅 및 보호)

이미지의 지연 로딩

Vee-validate 양식 유효성 검사 사용

경로의 지연 로딩

프로세스 맵 파일

서버 구매

보안 그룹 및 xshell 작업

nginx 리버스 프록시

구성 요소 간 통신을 위한 6가지 방법

맞춤 이벤트 깊이

v 모드 심층

동기화 속성 수정자

$attrs与$리스너

$children 및 $parent

오염 mixin

스코프 슬롯

백엔드 관리 시스템 프로젝트 소개

백그라운드 관리 시스템 템플릿 소개

로그인 업무 완료

로그아웃

라우팅 구축

브랜드 관리 정적 구성 요소

브랜드 목록 표시

브랜드 도메인 추가 및 브랜드 정적 완성 수정

브랜드 추가 완료

브랜드 수정 완료

브랜드 양식 유효성 검사(맞춤 유효성 검사 규칙)

브랜드 운영 삭제

제품 관리 3단계 연계 정적 구성 요소

3단계 연계 동적 디스플레이

3단계 연계 완료

플랫폼 속성 관리 동적 표시 속성

플랫폼 속성의 속성 추가 및 속성 수정은 정적으로 완료됩니다.

속성 이름을 수집하는 작업

컬렉션 속성 값 작업

복귀 버튼 데이터 에코 문제 해결

속성 작업 수정

보기 모드와 수정 모드 간 전환

보기 모드 및 편집 모드 참고 사항

수정된 속성 보기 및 편집 모드 간 전환

양식 요소에 대한 자동 초점 구현

속성 값 삭제

저장 작업

버튼 및 3단계 연계 운용성

SPU 관리 모듈 사업 소개

SPU 관리 모듈 정적

SPU 목록을 동적으로 표시

SPU 관리 내용 전환

SpuForm 정적 구성 요소 완료

SpuForm 의뢰사업 분석

SpuForm 데이터 가져오기

SpuForm 구성 요소 데이터 표시 및 데이터 수집

SpuForm 판매 속성의 데이터 표시

SpuForm 포토월 데이터 수집 완성

판매 속성 추가 작업

매출 속성값 표시 및 수집

판매 속성 및 속성 값 삭제 작업

수정된 SPU의 저장 작업을 완료합니다.

SPU 추가 작업 완료

SPU 삭제

완전한 SKU 정적 구성요소

SKUForm 데이터 가져오기

SKU 표시 및 SKU 데이터 수집

SKU 이미지 목록 데이터 표시 및 수집 추가

SKU 저장 작업 추가 완료

SKU 목록 표시

로딩 효과

SKU 모듈 데이터 표시 및 페이징 기능

SKU 입고 및 철거 작업

SKU 세부정보 보기가 완료되었습니다.

깊이 선택기

데이터 시각화 소개

캔버스는 선분을 그립니다.

캔버스에 직사각형을 그립니다.

원을 그리세요

캔버스 지우기 및 텍스트 그리기

막대 차트 그리기

SVG의 기본 사용법

전자 차트의 기본 사용

차트는 여러 차트를 표시합니다.

하나의 컨테이너에 여러 차트가 표시됩니다.

전자 차트에서 데이터 세트 사용

echarts 내장 구성 요소 사용

전자 차트 좌표계

HomeCard 정적 구성 요소

꺾은선형 차트가 완료되었습니다.

막대 차트 및 진행률 표시줄 완료

판매 정적 구성요소(1부)

정적 구성요소 판매(중간)

판매 구성요소 완료

정적 구성 요소 관찰

모의 데이터를 동적으로 표시

권한 관리 모듈 소개

권한 관리 모듈에 대한 혼선

메뉴 및 버튼 권한