wms client

Prefacio

El punto de partida de este proyecto es personalizar las necesidades reales de gestión de inventario de mis amigos. Para mí, también es el primer proyecto de práctica de Vue2 para practicar mejor la ingeniería del desarrollo front-end.

También se debe a que este proyecto está personalizado en función de las necesidades reales, por lo que este proyecto también corresponde a un proyecto de back-end (el portal del proyecto se enumerará a continuación), que también completé personalmente. en el marco Express de Node y la base de datos usa Mysql . Para aquellos que solo estudian este proyecto front-end, el proyecto utiliza un servidor back-end remoto de forma predeterminada y el portal de documentos de la interfaz se encuentra a continuación (basado en la documentación en línea de ApiFox). Para los socios que quieran utilizar servicios de backend locales, pueden consultar el proyecto de backend.

Este proyecto utiliza principalmente depósitos de la familia Vue , Vuex y Vue-router . La interfaz de usuario usa Element-Ui y la herramienta de compilación usa Vue-cli . Por supuesto, también hay proyectos creados basados ​​​​en webpack. Si desea obtener más información, puede cambiar a Webpack para conocer la configuración específica, consulte README en Webpack .

Este proyecto se mantendrá durante mucho tiempo. Si tiene alguna pregunta, plantéela directamente en Problemas. Si encuentra un problema y tiene una buena solución, relaciones públicas son bienvenidas.

PD: El servidor remoto solo proporciona pruebas y el backend no impone demasiadas restricciones, filtrado y verificación. Todos juegan a la ligera, pero el servidor falla y tengo que reiniciarlo manualmente.

?Portal

• ¿Dirección de demostración en línea del proyecto? Haga clic en mí con fuerza (la contraseña predeterminada de la cuenta es root, root, el nombre de dominio se está volviendo a registrar, el acceso IP está un poco lleno y la carga diferida será muy lenta ~)

• ¿El proyecto proporciona la dirección del documento de la interfaz remota? Haga clic en mí.

• ¿Dirección coincidente del proyecto backend? Haz clic en mí con fuerza.

?Pila de tecnología

tecnología	ilustrar	Versión	Sitio web oficial
vista	Marco de JavaScript progresivo		?https://vuejs.org/
enrutador vue	Gestión de rutas		https://router.vuejs.org/
Vuex	Gestión del estado global		https://vuex.vuejs.org/
Elemento-Ui	marco de interfaz de usuario		?https://element.eleme.io
axios	Biblioteca de solicitudes de red basada en promesas		https://www.axios-http.cn/
Gráficos electrónicos	Biblioteca de gráficos visuales		?https://echarts.apache.org/
Menos	Lenguaje de extensión CSS compatible con versiones anteriores		?https://less.bootcss.com/

Entorno de desarrollo: Windows, Node(v16.18.0), Npm(v8.19.2)

?Introducción a la función

Funciones técnicas

• ✅Carga diferida de rutas
• ✅Control de permisos (Token)
• ✅Pantalla de visualización de datos
• ✅Basado en solicitud de Axios, control de interceptación de respuestas y gestión unificada de solicitudes
• ✅Gestión unificada de datos de estado complejos y reutilizables basada en Vuex
• ✅Bagcrumbs, caché de componentes, caché de registros global
• Generar dinámicamente rutas y barras de navegación dependiendo de los permisos del usuario.
• Diseño responsivo
• ✅Optimización de embalaje (se proporciona rama de paquete web)
• Continuará...

función empresarial

• visualización de datos

  • ✅Resumen de información básica
  • ✅Análisis de categorías de inventario
  • ✅Estadísticas de ventas, costos y ganancias.
  • ✅ Estadísticas completas de pedidos

• Depósito

  • ✅Agregar al inventario
  • ✅Consulta sobre condiciones de almacenamiento de registros

• fuera del almacén

  • ✅Agregar biblioteca saliente
  • ✅Consulta sobre condiciones de registro de entrega
  • ✅Cambiar estado de entrega

• Gestión de clientes

  • ✅Agregar cliente
  • ✅Editar cliente

• Gestión de usuarios

  • control de permisos
  • Modificación de información

ejecutar el proyecto

1️⃣Extrae archivos de proyecto

clon de git https://github.com/Hyrmm/wms-client

2️⃣Cambiar al directorio del proyecto

cd wms-cliente

3️⃣Instalar paquetes de dependencia

instalación npm

4️⃣Ejecuta el proyecto

• Utilice la interfaz remota del servicio backend en línea

  servicio de ejecución npm

• Para utilizar la interfaz del servicio backend local, debe cooperar con el portal del proyecto backend

  npm ejecuta localmente

?Feria de negocios

Estructura del proyecto

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