wms client

Kata pengantar

Titik awal dari proyek ini adalah untuk menyesuaikan kebutuhan manajemen inventaris aktual teman-teman. Bagi saya, ini juga merupakan proyek latihan pertama bagi Vue2 untuk mempraktikkan teknik pengembangan front-end dengan lebih baik.

Karena proyek ini disesuaikan berdasarkan kebutuhan nyata, maka proyek ini juga sesuai dengan proyek back-end (portal proyek akan dicantumkan di bawah), yang juga diselesaikan oleh saya pribadi. Proyek back-end dibangun berdasarkan pada kerangka Node Express , dan database menggunakan Mysql . Bagi mereka yang hanya mempelajari proyek front-end ini, proyek ini menggunakan server back-end jarak jauh secara default, dan portal dokumen antarmuka ditempatkan di bawah (berdasarkan dokumentasi online ApiFox). Bagi partner yang ingin menggunakan layanan backend lokal, Anda dapat merujuk ke proyek backend.

Proyek ini terutama menggunakan bucket keluarga Vue , Vuex , dan Vue-router . UI-nya menggunakan Element-Ui , dan alat pembangunannya menggunakan Vue-cli . Tentu saja, ada juga proyek yang dibangun berdasarkan webpack. Jika Anda ingin tahu lebih banyak, Anda dapat beralih ke cabang Webpack . Untuk konfigurasi spesifik, silakan lihat README di bawah cabang Webpack .

Proyek ini akan dipertahankan untuk waktu yang lama. Jika Anda memiliki pertanyaan, silakan ajukan langsung di Masalah. Jika Anda menemukan masalah dan memiliki solusi yang baik, PR dipersilakan.

PS: Server jarak jauh hanya menyediakan pengujian, dan backend tidak melakukan terlalu banyak pembatasan, memfilter dan memeriksa. Semua orang bermain ringan, tetapi server mogok dan saya harus memulai ulang secara manual~

?Portal

• Alamat demonstrasi online proyek? Klik saya dengan keras (kata sandi akun default adalah root, root, nama domain sedang didaftarkan ulang, akses IP agak penuh, dan pemuatan lambat akan sangat lambat~)

• Proyek ini menyediakan alamat dokumen antarmuka jarak jauh? Klik saya dengan keras

• Cocok dengan alamat proyek backend? Klik saya dengan keras

?Tumpukan teknologi

teknologi	menjelaskan	Versi	Situs web resmi
Lihat	Kerangka kerja JavaScript progresif		?https://vuejs.org/
Vue-router	Manajemen rute		?https://router.vuejs.org/
Vuex	Manajemen negara global		?https://vuex.vuejs.org/
Elemen-Ui	Kerangka UI		?https://element.eleme.io
aksio	Pustaka permintaan jaringan berbasis janji		?https://www.axios-http.cn/
Grafik E	Perpustakaan grafik visual		?https://echarts.apache.org/
Lebih sedikit	Bahasa ekstensi CSS yang kompatibel dengan versi sebelumnya		?https://less.bootcss.com/

Lingkungan pengembangan: Windows, Node(v16.18.0), Npm(v8.19.2)

?Pengenalan fungsi

Fungsi teknis

• ✅ Pemuatan rute yang lambat
• ✅Kontrol izin (Token)
• ✅Tampilan visualisasi data
• ✅Berdasarkan permintaan Axios, kontrol intersepsi respons, dan manajemen permintaan terpadu
• ✅Manajemen terpadu atas data status yang dapat digunakan kembali dan kompleks berdasarkan Vuex
• ✅Bagcrumbs, cache komponen, cache catatan global
• Menghasilkan rute dan bilah navigasi secara dinamis bergantung pada izin pengguna
• Tata letak responsif
• ✅Pengoptimalan pengemasan (disediakan cabang webpack)
• Untuk dilanjutkan...

fungsi bisnis

• visualisasi data

  • ✅Ikhtisar informasi dasar
  • ✅Analisis kategori inventaris
  • ✅Statistik penjualan, biaya, dan keuntungan
  • ✅ Statistik pesanan lengkap

• Gudang

  • ✅Tambahkan ke inventaris
  • ✅Pertanyaan tentang kondisi catatan penyimpanan

• keluar dari gudang

  • ✅Tambahkan perpustakaan keluar
  • ✅Pertanyaan tentang kondisi catatan pengiriman
  • ✅Ubah status pengiriman

• Manajemen pelanggan

  • ✅Tambahkan pelanggan
  • ✅Edit pelanggan

• Manajemen pengguna

  • Kontrol izin
  • Modifikasi informasi

Jalankan proyek

1️⃣Tarik file proyek

git clone https://github.com/Hyrmm/wms-client

2️⃣Beralih ke direktori proyek

cd wms-klien

3️⃣Instal paket ketergantungan

instalasi npm

4️⃣Jalankan proyek

• Gunakan antarmuka layanan backend online jarak jauh

  npm menjalankan servis

• Untuk menggunakan antarmuka layanan backend lokal, Anda perlu bekerja sama dengan portal proyek backend

  npm dijalankan secara lokal

?Pertunjukan bisnis

Struktur proyek

 ├── 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