ecommerce management system

요소 백엔드 관리 시스템

프론트엔드와 백엔드 분리 개발 모델을 사용하는 Vue 기반의 전자상거래 백엔드 관리 시스템입니다. 프로젝트에 사용된 프런트엔드 기술 스택에는 Vue, vue-router, Element-UI, Axios, Echarts 등이 포함됩니다.

기술선택

프런트엔드 기술 스택:

• 뷰
• Vue 라우터
• 요소 UI
• 액시오스
• 전자 차트

비즈니스 기능

기능 관련 기술 포인트

1. 사용자 로그인

• 사용자가 성공적으로 로그인한 후 클라이언트는 sessionStorage 및 token 통해 로그인 상태를 기억하고 유지합니다.

• 경로 탐색 가드 router.beforeEach 통해 사용자 액세스 권한을 제어합니다. 로그인하지 않은 사용자가 해당 URL을 통해 로그인 페이지가 아닌 다른 페이지에 접근하는 것을 방지합니다.

2.홈 페이지 레이아웃

• 공들여 나열한 것
  • Element-UI 컴포넌트 라이브러리를 통해 홈페이지의 페이지 레이아웃을 구현합니다.
  • <el-menu> 사용하여 측면 탐색 표시줄을 구현하고, activePath 속성을 sessionStorage 에 추가하여 탐색 표시줄을 강조 표시한 상태로 유지하세요.
  • 측면 탐색 모음의 아이콘은 Iconfont Alibaba 벡터 아이콘 라이브러리를 사용합니다.
• 데이터 요청
  • Axios 통해 인터페이스 데이터를 요청하고 Axios 요청 인터셉터에 토큰을 추가하여 데이터 획득 권한을 보장합니다.
  • NProgress 진행률 표시줄을 사용하여 페이지 로딩(데이터 요청) 진행 상황을 표시합니다.

3. 사용자 관리-사용자 목록

• <el-form> 사용하여 사용자 양식을 추가하고, 양식 확인 규칙을 맞춤설정하고, 제출 전 양식 재설정 및 사전 확인을 구현하세요.

• slot-scope 사용하여 구성요소 데이터를 가져오고 렌더링 템플릿을 맞춤설정하세요.

4.권한 관리

• 역할 목록

  • 3계층 v-for 루프를 사용하여 역할의 첫 번째, 두 번째, 세 번째 수준 권한을 각각 렌더링합니다.

  • <el-tree> 트리 컨트롤을 사용하여 역할 할당 가능 권한 목록을 표시합니다.

• 권한 목록

5.상품 관리

• 제품 목록

  • Date 객체의 표시 형식을 사용자 정의하려면 전역 필터 Vue.filter 사용하세요.

• 제품 추가

  • <el-steps> 단계 표시줄 구성 요소를 사용하여 프로세스에 따라 제품 추가 양식을 작성하도록 사용자를 안내합니다.

  • 사용자가 제품 이미지를 업로드할 수 있도록 하려면 <el-upload> 구성 요소를 사용하세요.

  • 사용자가 제품 콘텐츠를 채울 수 있도록 하려면 vue-quill-editor 서식 있는 텍스트 편집기를 사용하세요.

  • <el-form> 사용하여 제품 추가 양식을 작성하고, 양식 확인 규칙을 사용자 정의하고, 양식 제출 전 사전 확인을 구현하세요.

• 분류 매개변수

• 제품 분류

  • vue-table-with-tree-grid 트리 테이블 구성 요소를 사용하여 첫 번째, 두 번째 및 세 번째 수준의 제품 분류를 표시합니다.

6. 주문관리-주문목록

• <el-timeline> 타임라인 구성요소를 사용하여 주문의 물류 정보를 표시합니다.

7. 데이터 통계-데이터 보고서

• Echarts 사용하여 사용자 소스 데이터 보고서를 표시합니다.

---

프로젝트 종속성

종속성 실행

• axios => 요청 보내기
• echarts => 차트
• element-ui => Element-UI 구성 요소 라이브러리
• lodash => 깊은 복사 및 개체 병합
• nprogress => 진행 표시줄
• vue-quill-editor => 리치 텍스트 편집기
• vue-table-with-tree-grid => 트리 테이블

개발 종속성

• babel => ES6 구문 변환
• eslint/babel-eslint => 구문 검사
• sass/sass-loader => sass 구문
• babel-plugin-transform-remove-console => 프로덕션 환경에서 콘솔 제거
• @babel/plugin-syntax-dynamic-import => 경로 지연 로딩

프로젝트 최적화

1. 포장 보고서 생성

Vue UI 시각화 패널을 통해 패키징 보고서를 보고 너무 큰 파일을 최적화/압축하는 방법을 분석하세요.

2. 웹팩 구성

• chainWebpack 통해 개발 모드와 릴리스 모드에 대해 서로 다른 패키징 항목 파일을 지정합니다.

  1. 개발 모드 항목 파일 src/main-dev.js
  2. 릴리스 모드 항목 파일 src/main-prod.js

• 프로덕션 환경에서는 너무 큰 일부 타사 라이브러리가 CDN

  기본적으로 가져오기 구문을 통해 가져온 타사 종속성 패키지는 결국 패키지화되어 동일한 파일로 병합되므로 패키징 성공 후 단일 파일 크기가 너무 커지는 문제가 발생합니다.

  위의 문제를 해결하기 위해 Webpack의 externals 노드를 통해 외부 CDN 리소스를 로드해야 하는 종속성을 구성할 수 있습니다. 외부에 선언된 타사 종속성 패키지는 패키지되지 않습니다.

• 플러그인을 통해 다양한 환경의 홈페이지 콘텐츠를 사용자 정의합니다. (예: 개발 모드에서 종속 패키지를 가져오려면 가져오기를 사용하고, 릴리스 모드에서는 CDN을 사용하여 가져옵니다.)

   // Vue.config.js
  config . plugin ( 'html' ) . tap ( args => {
      args [ 0 ] . isProd = true / false
      return args
  } ) 

   <!-- index.html -->
  < title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
  < % if(htmlWebpackPlugin.options.isProd) { % >
      此处为CDN引入的第三方资源
  < % } % > 

3. 경로의 지연 로딩

프로젝트를 패키징할 때 너무 큰 js 패키지는 페이지 로딩 속도에 영향을 미칩니다.

@babel/plugin-syntax-dynamic-import 플러그인을 사용하고 요청 시 로드되도록 라우팅을 변경하세요. 해당 구성 요소는 경로에 액세스할 때만 로드됩니다.

프로젝트 설정

 npm install

개발을 위한 컴파일 및 핫 리로드

 npm run serve

프로덕션을 위해 컴파일 및 축소

 npm run build

파일 린트 및 수정

 npm run lint