wms client

머리말

이 프로젝트의 출발점은 친구들의 실제 재고 관리 요구 사항을 맞춤화하는 것입니다. 나에게는 프론트 엔드 개발 엔지니어링을 더 잘 실천하기 위한 Vue2 의 첫 번째 실습 프로젝트이기도 합니다.

또한 이 프로젝트는 실제 요구에 따라 맞춤화되었기 때문에 이 프로젝트도 백엔드 프로젝트(아래 프로젝트 포털에 나열됨)에 해당하며, 이 백엔드 프로젝트도 제가 개인적으로 구축한 것입니다. Node 의 Express 프레임워크에서 데이터베이스는 Mysql 사용합니다. 이 프론트엔드 프로젝트만 공부하시는 분들을 위해 해당 프로젝트는 기본적으로 원격 백엔드 서버를 사용하며, 인터페이스 문서 포털은 아래에 배치되어 있습니다(ApiFox의 온라인 문서 기준). 로컬 백엔드 서비스를 이용하고 싶은 파트너는 백엔드 프로젝트를 참고하세요.

이 프로젝트에서는 주로 Vue , Vuex 및 Vue-router 제품군 버킷을 사용합니다. UI는 Element-Ui 사용하고 빌드 도구는 Vue-cli 사용합니다. 물론 webpack을 기반으로 구축된 프로젝트도 있습니다. 자세한 내용은 Webpack 브랜치로 전환하여 Webpack 브랜치 아래의 README 참조하세요.

본 프로젝트는 오랫동안 유지될 예정입니다. 궁금한 점이 있으시면 Issues에 직접 올려주세요. 좋은 해결책이 있다면 PR 환영합니다.

추신: 원격 서버는 테스트만 제공하고 백엔드는 많은 제한, 필터링 및 확인을 수행하지 않습니다. 모두 가볍게 플레이하지만 서버가 충돌하여 수동으로 다시 시작해야 합니다.

?문

• 프로젝트 온라인 데모 주소를 클릭해 주세요. (기본 계정 비밀번호는 루트, 루트입니다. 도메인 이름을 다시 등록하는 중이며, IP 액세스가 약간 꽉 차서 지연 로딩이 매우 느릴 것입니다~)

• 프로젝트는 원격 인터페이스 문서 주소를 제공합니다. Click me hard?

• 백엔드 프로젝트 주소가 일치하나요?

?기술 스택

기술	설명하다	버전	공식 홈페이지
뷰	프로그레시브 자바스크립트 프레임워크		?https://vuejs.org/
Vue 라우터	노선관리		?https://router.vuejs.org/
Vuex	글로벌 상태 관리		?https://vuex.vuejs.org/
요소-Ui	UI 프레임워크		?https://element.eleme.io
액시오스	약속 기반 네트워크 요청 라이브러리		?https://www.axios-http.cn/
전자차트	시각적 차트 라이브러리		?https://echarts.apache.org/
더 적은	이전 버전과 호환되는 CSS 확장 언어		?https://less.bootcss.com/

개발 환경: Windows, Node(v16.18.0), Npm(v8.19.2)

?기능 소개

기술적 기능

• ✅경로의 지연 로딩
• ✅권한 제어(토큰)
• ✅데이터 시각화 디스플레이
• ✅Axios 요청을 기반으로 응답 차단 제어 및 요청 통합 관리
• ✅Vuex를 기반으로 재사용 가능하고 복잡한 상태 데이터의 통합 관리
• ✅Bagcrumbs, 구성요소 캐시, 글로벌 레코드 캐시
• 사용자 권한에 따라 경로 및 탐색 모음을 동적으로 생성
• 반응형 레이아웃
• ✅패키징 최적화 (webpack 브랜치 제공)
• 계속하려면 ...

비즈니스 기능

• 데이터 시각화

  • ✅기본정보 개요
  • ✅재고 카테고리 분석
  • ✅매출, 비용, 이익 통계
  • ✅ 완전한 주문 통계

• 창고

  • ✅인벤토리에 추가
  • ✅보관기록조건 문의

• 창고에서

  • ✅아웃바운드 라이브러리 추가
  • ✅배송기록 조건 조회
  • ✅배송상태 변경

• 고객관리

  • ✅고객 추가
  • ✅고객 수정

• 사용자 관리

  • 권한 제어
  • 정보 수정

프로젝트 실행

1️⃣프로젝트 파일 가져오기

자식 클론 https://github.com/Hyrmm/wms-client

2️⃣프로젝트 디렉토리로 전환

CD wms-클라이언트

3️⃣종속성 패키지 설치

npm 설치

4️⃣프로젝트 실행

• 원격 온라인 백엔드 서비스 인터페이스 사용

  npm 실행 서브

• 로컬 백엔드 서비스 인터페이스를 사용하려면 백엔드 프로젝트 포털과 협력해야 합니다.

  npm 로컬 실행

?비즈니스 쇼

프로젝트 구조

 ├── src
│   ├── App.vue
│   ├── api
│   ├── assets
│   ├── components
│   │   ├── AgentFail
│   │   ├── Breadcrumb
│   │   ├── PagiNation
│   │   ├── TableFilter
│   │   └── ViewFilter
│   ├── main.js
│   ├── mixin
│   ├── pages
│   │   ├── home
│   │   └── login
│   ├── router
│   ├── store
│   ├── utils
│   └── view
│       ├── Client
│       │   ├── Add
│       │   ├── Modify
│       │   └── index.vue
│       ├── Setting
│       ├── Store
│       ├── StoreIn
│       │   ├── Add
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│       │   ├── Order.vue
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│           ├── Order.vue
│           ├── Sales.vue
│           ├── Store.vue
│           └── index.vue
├── jsconfig.json
├── package-lock.json
├── package.json