YoYoCms.AbpProjectTemplate

Sitio web de demostración

Hablemos primero de este proyecto. Al igual que el título, es un marco desarrollado en base a VUE+.NET. También es el marco ABP que los miembros del grupo han estado pidiendo a gritos una versión de vue. Primero echemos un vistazo a la página de inicio:

Es genial. Te proporcionaré una cuenta de demostración.

Dirección de demostración: http://vue.yoyocms.com/ Cuenta: contraseña de demostración: bb123456 Por supuesto, también puede registrar una cuenta usted mismo para su verificación.

introducir

Primero, para los estudiantes que no conocen el marco ABP, expliquemos qué es el marco ABP:

ABP es la abreviatura de "Proyecto ASP.NET Boilerplate (Proyecto de muestra ASP.NET)". ASP.NET Boilerplate es un nuevo punto de partida para desarrollar aplicaciones WEB modernas utilizando las mejores prácticas y tecnologías populares. Su objetivo es convertirse en un marco de aplicación WEB universal y una plantilla de proyecto. Framework ABP es un marco de aplicación basado en las últimas tecnologías ASP.NET CORE, ASP.NET MVC y Web API. Y utilizando marcos y bibliotecas populares, proporciona funciones comunes fáciles de usar, como autorización, inyección de dependencia, validación, manejo de excepciones, localización, registro, almacenamiento en caché, etc. Arquitectura ABP implementa una arquitectura multicapa (capa de dominio, capa de aplicación, capa de infraestructura y capa de presentación), así como un diseño basado en dominios (entidades, repositorios, servicios de dominio, servicios de aplicaciones, DTO, etc.). También se implementa y proporciona una buena infraestructura para implementar las mejores prácticas, como la inyección de dependencia. Template ABP crea fácilmente plantillas de inicio para sus proyectos. Incluye los frameworks y bibliotecas más utilizados de forma predeterminada. También le permite elegir arquitectura de una sola página (Angularjs) o de varias páginas, EntityFramework o NHibernate como ORM. Visite el sitio web oficial para obtener más información.

estructura

La estructura del proyecto seleccionado en esta ocasión es:

• Marco .net 4.6
• VUE + VUEX + VUE-ROUTER es una tecnología de separación de front-end y back-end, pero la separación no es muy pura. Debido al diseño de ABP, si desea separar puramente el front-end y el back-end, lo hará. Puede ser un poco problemático al realizar la autorización, por lo que no se utiliza el método de token.

En el artículo anterior [Marco ABP] Uso de interceptación de API web dinámica, se explicó cómo usar el token para la verificación de autorización. Actualmente, el método de cookie todavía se usa para la verificación. Pero no afecta los métodos de desarrollo front-end y back-end. Eche un vistazo a la página de inicio de sesión:

Realización de funciones

• Iniciar sesión Registrarse
• Cambio de varios idiomas
• Gestión de mensajes
• Gestión de inquilinos (multiinquilino)
• gestión de roles
• Sesión
• Autorización (gestión de derechos)
• Gestión de configuración
• Gestión multilingüe
• Registro de auditoría
• WebApi dinámico y otras funciones, espero que puedas experimentarlo tú mismo.

Si tus habilidades en .NET no son sólidas o quieres mejorarlas, ABP es el mejor marco de aprendizaje.

Descripción de la pila de tecnología front-end:

#### Marco utilizado por el front-end 1.vue
2.vuex
3.vue-enrutador
4.jquery

biblioteca de interfaz de usuario

1.elemento-ui
2.ondas
3.arranque
4.BSBADMIN

Estructura del proyecto

• construir script creado por webpack
• config configuración integrada del paquete web
• Archivos después de la compilación dist
• directorio de código fuente src
  • archivos de recursos globales de activos
  • método público de estilo público común
    • Paquete de idioma (sin usar temporalmente)
    • clase de herramienta utiles
  • componentes componentes globales
  • filtros filtros
  • Los mixins almacenan varios estilos de descaro.
  • configuración de enrutamiento del enrutador
  • capa de solicitud de interfaz de servicio
  • tiendavuex
  • El proveedor almacena bibliotecas de terceros.
  • vistas ver archivo
  • vuePlugin complemento vue personalizado
• archivos estáticos estáticos, el directorio compilado permanece sin cambios

Las siguientes son las palabras originales del personal de front-end. Gracias Huixin666 por tomarse el tiempo para mejorar la interfaz de vue.

Pasos de desarrollo

Antes de continuar con el desarrollo, asumimos que tiene conocimientos básicos de es6 , sass , vue , vue-router y vuex .
Se recomienda leer los consejos de You Yuxi.

Instalar dependencias de front-end

Ingrese al directorio de Activos en Web项目

 $ npm i

ejecutar el proyecto

Recuerda comenzar con el fondo primero.

 $ npm run dev

webpack utilizará express para iniciar un servidor web con el puerto 8986

desplegar

 $ npm run build

Este comando compilará todos los archivos en el directorio dist ; consulte el diagrama de estructura del proyecto anterior

1.Agregar página

• Primero vaya a src/views para crear un directorio de módulo.
  Por ejemplo, actualmente agregué un directorio llamado administration , que contiene todas las páginas de administración del sistema. Cada módulo también puede contener directorios components y assets , lo que significa que los componentes y recursos que contiene solo pertenecen al módulo actual.
• A continuación, agregue Index.vue como página de enrutamiento principal para controlar todas las páginas de este módulo.
  Es necesario prestar atención al papel de mantener vivo.
• Luego agregue la página que necesita, como User.vue
  Si necesita obtener datos, agregue un método llamado fetchData en methods . En este método, debe llamar a abp.view.setContentLoading(false) después de obtener los datos para cerrar la capa de máscara de carga del área de contenido. (Puede consultar User.vue)

2.Agregar ruta

• Ingrese al directorio src/router , agregue la carpeta del módulo de enrutamiento y agregue un archivo llamado index.js en la carpeta.
• Luego registre la información de enrutamiento agregada actualmente en src/router/index.js

3.Agregar servicio

• Ingrese al directorio src/services y agregue el módulo correspondiente a la solicitud de interfaz. Por ejemplo, los objetos relacionados con roles se colocan en roleService.js Los objetos exportados por el archivo roleService.js corresponden a abp.services.yoyocms.role . La ventaja de utilizarlo de esta manera es que se puede gestionar y ampliar de manera uniforme.

Lo anterior es la situación básica de la versión vue de ABP.

Dirección de descarga:

La dirección de código abierto de la versión vue: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate La dirección de demostración de la versión vue: http://vue.yoyocms.com/ La dirección de código abierto de la versión angularJS: https ://github.com/ltm0203/YoYoCms Dirección de demostración de la versión angularJS: http://www.yoyocms.com

Si tiene buenas sugerencias o comentarios sobre errores, presente un problema en github.

Al mismo tiempo, también creamos un generador de proyectos cuya función es similar a la plantilla oficial de ABP. La función se lanzará a mediados de año, así que estad atentos.