wms client

Préface

Le point de départ de ce projet est de personnaliser les besoins réels des amis en matière de gestion des stocks. Pour moi, c'est aussi le premier projet pratique pour Vue2 pour mieux pratiquer l'ingénierie du développement front-end.

C'est aussi parce que ce projet est personnalisé en fonction de besoins réels, donc ce projet correspond également à un projet back-end (le portail du projet sera listé ci-dessous), qui a également été réalisé par moi personnellement. Le projet back-end est construit en fonction. sur le framework Express de Node , et la base de données utilise Mysql . Pour ceux qui étudient uniquement ce projet front-end, le projet utilise par défaut un serveur back-end distant et le portail de documents d'interface est placé en dessous (basé sur la documentation en ligne d'ApiFox). Pour les partenaires qui souhaitent utiliser des services backend locaux, vous pouvez vous référer au projet backend.

Ce projet utilise principalement les buckets des familles Vue , Vuex et Vue-router . L'interface utilisateur utilise Element-Ui et l'outil de construction utilise Vue-cli . Bien sûr, il existe également des projets basés sur webpack. Si vous souhaitez en savoir plus, vous pouvez passer à Webpack . Pour la configuration spécifique, veuillez consulter README sous Webpack .

Ce projet sera maintenu pendant longtemps. Si vous avez des questions, veuillez les poser directement dans Problèmes. Si vous trouvez un problème et avez une bonne solution, les relations publiques sont les bienvenues.

PS : Le serveur distant ne fournit que des tests, et le backend ne fait pas trop de restrictions, de filtrage et de vérification. Tout le monde joue à la légère, mais le serveur plante et je dois le redémarrer manuellement.

?Portail

• Adresse de démonstration en ligne du projet ? Cliquez-moi fort (le mot de passe du compte par défaut est root, root, le nom de domaine est en cours de réenregistrement, l'accès IP est un peu plein et le chargement paresseux sera très lent ~)

• Le projet fournit l'adresse du document d'interface distante ? Cliquez-moi fort ?

• Adresse du projet backend correspondant ? Cliquez-moi fort

?Pile technologique

technologie	illustrer	Version	Site officiel
Vue	Cadre JavaScript progressif		?https://vuejs.org/
Vue-routeur	Gestion des itinéraires		?https://router.vuejs.org/
Vuex	Gestion globale de l'État		?https://vuex.vuejs.org/
Élément-UI	Cadre d'interface utilisateur		?https://element.eleme.io
Axios	Bibliothèque de requêtes réseau basée sur des promesses		?https://www.axios-http.cn/
Graphiques électroniques	Bibliothèque de graphiques visuels		?https://echarts.apache.org/
Moins	Langage d'extension CSS rétrocompatible		?https://less.bootcss.com/

Environnement de développement : Windows, Node(v16.18.0), Npm(v8.19.2)

?Présentation de la fonction

Fonctions techniques

• ✅Chargement paresseux des itinéraires
• ✅Contrôle des autorisations (jeton)
• ✅Affichage de visualisation des données
• ✅Basé sur la requête Axios, contrôle d'interception des réponses et gestion unifiée des requêtes
• ✅Gestion unifiée des données d'état réutilisables et complexes basées sur Vuex
• ✅Bagcrumbs, cache de composants, cache d'enregistrement global
• Générez dynamiquement des itinéraires et des barres de navigation en fonction des autorisations de l'utilisateur
• Mise en page réactive
• ✅Optimisation du packaging (branche webpack fournie)
• À suivre...

fonction commerciale

• visualisation des données

  • ✅Aperçu des informations de base
  • ✅Analyse des catégories d'inventaire
  • ✅Statistiques de ventes, de coûts et de bénéfices
  • ✅ Statistiques complètes des commandes

• Entrepôt

  • ✅Ajouter à l'inventaire
  • ✅Enquête sur les conditions d'enregistrement du stockage

• hors entrepôt

  • ✅Ajouter une bibliothèque sortante
  • ✅Requête sur les conditions d'enregistrement de livraison
  • ✅Modifier le statut de livraison

• Gestion des clients

  • ✅Ajouter un client
  • ✅Modifier le client

• Gestion des utilisateurs

  • Contrôle des autorisations
  • Modification des informations

Exécuter le projet

1️⃣Extraire les fichiers du projet

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

2️⃣Basculez vers le répertoire du projet

cd client wms

3️⃣Installer les packages de dépendances

installation npm

4️⃣Exécuter le projet

• Utiliser l'interface du service backend en ligne à distance

  npm exécuter servir

• Pour utiliser l'interface du service backend local, vous devez coopérer avec le portail du projet backend

  npm exécuté localement

?Salon d'affaires

Structure du projet

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