wms client

Vorwort

Der Ausgangspunkt dieses Projekts besteht darin, die tatsächlichen Anforderungen an die Bestandsverwaltung von Freunden anzupassen. Für mich ist es auch das erste Übungsprojekt für Vue2 , um die Technik der Front-End-Entwicklung besser zu üben.

Dies liegt auch daran, dass dieses Projekt auf die tatsächlichen Bedürfnisse zugeschnitten ist, sodass dieses Projekt auch einem Back-End-Projekt entspricht (das Projektportal wird unten aufgeführt), das auch von mir persönlich abgeschlossen wurde auf Express Framework von Node und die Datenbank verwendet Mysql . Für diejenigen, die nur dieses Front-End-Projekt studieren: Das Projekt verwendet standardmäßig einen Remote-Back-End-Server und das Schnittstellendokumentportal ist unten platziert (basierend auf der Online-Dokumentation von ApiFox). Für Partner, die lokale Backend-Dienste nutzen möchten, können Sie auf das Backend-Projekt verweisen.

Dieses Projekt verwendet hauptsächlich Buckets Vue , Vuex und Vue-router Familie. Die Benutzeroberfläche verwendet Element-Ui und das Build-Tool verwendet Vue-cli . Natürlich gibt es auch Projekte, die auf Webpack basieren. Wenn Sie mehr wissen möchten, können Sie zum Webpack -Zweig wechseln. Die spezifische Konfiguration finden Sie in README unter Webpack -Zweig.

Dieses Projekt wird noch lange gepflegt. Wenn Sie Fragen haben, stellen Sie diese bitte direkt unter „Probleme“. Wenn Sie ein Problem finden und eine gute Lösung haben, ist PR willkommen.

PS: Der Remote-Server bietet nur Tests und das Backend führt nicht zu viele Einschränkungen, Filter und Überprüfungen durch. Jeder spielt leicht, aber der Server stürzt ab und ich muss ihn manuell neu starten

?Portal

• Projekt-Online-Demonstrationsadresse? Klicken Sie hart auf mich (das Standardkontokennwort lautet root, root, der Domänenname wird neu registriert, der IP-Zugriff ist etwas voll und das verzögerte Laden wird sehr langsam sein ~)

• Das Projekt stellt die Adresse des Remote-Schnittstellendokuments bereit

• Passende Backend-Projektadresse? Klicken Sie hart auf mich

?Technologie-Stack

Technologie	veranschaulichen	Version	Offizielle Website
Vue	Progressives JavaScript-Framework		?https://vuejs.org/
Vue-Router	Routenmanagement		?https://router.vuejs.org/
Vuex	Globales Staatsmanagement		?https://vuex.vuejs.org/
Element-Ui	UI-Framework		?https://element.eleme.io
Axios	Versprechenbasierte Netzwerkanforderungsbibliothek		?https://www.axios-http.cn/
ECharts	Visuelle Diagrammbibliothek		?https://echarts.apache.org/
Weniger	Abwärtskompatible CSS-Erweiterungssprache		?https://less.bootcss.com/

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

?Funktionseinführung

Technische Funktionen

• ✅Verzögertes Laden von Routen
• ✅Berechtigungskontrolle (Token)
• ✅Datenvisualisierungsanzeige
• ✅Basierend auf Axios-Anfrage, Antwortabfangkontrolle und einheitlicher Verwaltung von Anfragen
• ✅Einheitliche Verwaltung wiederverwendbarer und komplexer Statusdaten basierend auf Vuex
• ✅Bagcrumbs, Komponenten-Cache, globaler Datensatz-Cache
• Generieren Sie dynamisch Routen und Navigationsleisten abhängig von den Benutzerberechtigungen
• Responsives Layout
• ✅Verpackungsoptimierung (Webpack-Zweig bereitgestellt)
• Fortgesetzt werden...

Geschäftsfunktion

• Datenvisualisierung

  • ✅Grundlegende Informationsübersicht
  • ✅Inventarkategorieanalyse
  • ✅Umsatz-, Kosten- und Gewinnstatistik
  • ✅ Vollständige Bestellstatistik

• Lager

  • ✅Zum Inventar hinzufügen
  • ✅Anfrage zu den Bedingungen für die Aufbewahrung von Aufzeichnungen

• aus dem Lager

  • ✅Outbound-Bibliothek hinzufügen
  • ✅Abfrage zu den Lieferdatensatzbedingungen
  • ✅Lieferstatus ändern

• Kundenmanagement

  • ✅Kunde hinzufügen
  • ✅Kunden bearbeiten

• Benutzerverwaltung

  • Berechtigungskontrolle
  • Informationsänderung

Führen Sie das Projekt aus

1️⃣Projektdateien abrufen

Git-Klon https://github.com/Hyrmm/wms-client

2️⃣Wechseln Sie in das Projektverzeichnis

cd wms-client

3️⃣Installieren Sie Abhängigkeitspakete

npm installieren

4️⃣Führen Sie das Projekt aus

• Verwenden Sie die Remote-Online-Backend-Serviceschnittstelle

  npm run dienen

• Um die lokale Backend-Serviceschnittstelle nutzen zu können, müssen Sie mit dem Backend-Projektportal zusammenarbeiten

  npm lokal ausführen

?Business-Show

Projektstruktur

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