Descarga ecommerce management system - descarga del código fuente ecommerce management system

ecommerce management system

Otras categorias

1.0.0

Descargar

Sistema de gestión de backend de elementos

Un sistema de gestión de backend de comercio electrónico basado en Vue, que utiliza un modelo de desarrollo de separación de front-end y back-end. Las pilas de tecnología front-end utilizadas en el proyecto incluyen Vue, vue-router, Element-UI, Axios, Echarts, etc.

Selección de tecnología

Pila de tecnología front-end:

vista
enrutador vue
Elemento-UI
axios
Cartas electrónicas

función empresarial

Puntos técnicos relacionados con las funciones.

1. Inicio de sesión de usuario

Después de que el usuario inicia sesión correctamente, el cliente recuerda y mantiene su estado de inicio de sesión a través de sessionStorage y token .
Controle los permisos de acceso de los usuarios a través del protector de navegación de ruta router.beforeEach . Evite que los usuarios que no han iniciado sesión intenten acceder a otras páginas además de la página de inicio de sesión a través de la URL.

2.Diseño de la página de inicio

disposición
- Implemente el diseño de la página de inicio a través de la biblioteca de componentes Element-UI .
- Utilice <el-menu> para implementar la barra de navegación lateral y agregue el atributo activePath a sessionStorage para mantener la barra de navegación resaltada.
- El ícono en la barra de navegación lateral utiliza Iconfont Alibaba.
solicitud de datos
- Solicite datos de la interfaz a través de Axios y agregue un token al interceptor de solicitudes de axios para garantizar el permiso para obtener datos.
- Utilice la barra de progreso NProgress para mostrar el progreso de carga de la página (solicitud de datos).

3. Lista de usuarios de gestión de usuarios

Utilice <el-form> para agregar formularios de usuario, personalizar las reglas de verificación de formularios e implementar el restablecimiento de formularios y la verificación previa antes del envío.
Utilice slot-scope para obtener datos de componentes y personalizar plantillas de renderizado.

4.Gestión de permisos

lista de roles
- Utilice un bucle v-for tres capas para representar los permisos de primer, segundo y tercer nivel del rol respectivamente.
- Utilice el control de árbol <el-tree> para mostrar una lista de permisos a los que se pueden asignar roles.
Lista de permisos

5.Gestión de productos básicos

Lista de productos
- Utilice el filtro global Vue.filter para personalizar el formato de visualización de los objetos de fecha.
Añadir producto
- Utilice el componente de la barra de pasos <el-steps> para guiar a los usuarios a completar el formulario para agregar producto de acuerdo con el proceso.
- Utilice el componente <el-upload> para permitir a los usuarios cargar imágenes de productos.
- Utilice vue-quill-editor para permitir a los usuarios completar el contenido del producto.
- Utilice <el-form> para completar el formulario de adición de productos, personalizar las reglas de verificación del formulario e implementar una verificación previa antes del envío del formulario.
Parámetros de clasificación
Clasificación de productos
- Utilice el componente de tabla de árbol vue-table-with-tree-grid para mostrar la clasificación de productos de primer, segundo y tercer nivel.

6. Gestión de pedidos-lista de pedidos

Utilice el componente de línea de tiempo <el-timeline> para mostrar la información logística del pedido.

7. Estadísticas de datos-informes de datos

Utilice Echarts para mostrar informes de datos de origen de usuarios.

Dependencias del proyecto

Ejecutando dependencias

axios => Enviar solicitud
echarts => gráficos
element-ui => Biblioteca de componentes Element-UI
lodash => copia profunda y fusión de objetos
nprogress => barra de progreso
vue-quill-editor => Editor de texto enriquecido
vue-table-with-tree-grid => tabla de árbol

Dependencias de desarrollo

babel => conversión de sintaxis ES6
eslint/babel-eslint => verificación de sintaxis
sass/sass-loader => sintaxis descarada
babel-plugin-transform-remove-console => Eliminar la consola del entorno de producción
@babel/plugin-syntax-dynamic-import => Carga diferida de rutas

Optimización de proyectos

1. Generar informe de embalaje

Vea informes de empaquetado a través del panel de visualización de la interfaz de usuario de Vue y analice cómo optimizar/comprimir archivos que son demasiado grandes.

2. Configurar el paquete web

Especifique diferentes archivos de entrada de paquete para el modo de desarrollo y el modo de lanzamiento a través de chainWebpack
1. Archivo de entrada del modo de desarrollo src/main-dev.js
2. Archivo de entrada del modo de lanzamiento src/main-prod.js
En el entorno de producción, algunas bibliotecas de terceros que son demasiado grandes se introducirán mediante CDN
De forma predeterminada, los paquetes de dependencias de terceros importados mediante la sintaxis de importación eventualmente se empaquetarán y fusionarán en el mismo archivo, lo que generará el problema de que el tamaño del archivo único sea demasiado grande después de un empaquetado exitoso.
Para resolver los problemas anteriores, puede configurar las dependencias que necesitan cargar recursos CDN externos a través del nodo externals de Webpack. No se empaquetarán los paquetes de dependencia de terceros declarados en externos.

Personalice el contenido de la página de inicio de diferentes entornos a través de complementos (por ejemplo, use importar para importar paquetes dependientes en modo de desarrollo y use CDN para importar en modo de lanzamiento)

 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} )

 <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >

3. Carga diferida de rutas

Al empaquetar proyectos, los paquetes js que son demasiado grandes afectarán la velocidad de carga de la página.
Utilice @babel/plugin-syntax-dynamic-import y cambie la ruta para cargar bajo demanda. El componente correspondiente se cargará sólo cuando se acceda a la ruta.