Cómo utilizar AngularJs para crear un sistema de gestión de permisos simple_AngularJS
Este artículo presentará cómo aplicar AngularJs a proyectos reales. Este artículo utilizará AngularJS para crear un sistema de gestión de permisos simple. Sin más, vayamos directo al grano.
2. Diseño arquitectónico general
Primero, echemos un vistazo al diagrama de diseño arquitectónico de todo el proyecto:
En la figura anterior, podemos ver la estructura general de todo el proyecto A continuación, permítanme presentarles la arquitectura general del proyecto en detalle:
Utilice la API web Asp.net para implementar servicios REST. La capa web se basa en la interfaz del servicio de la aplicación e implementa la inyección de dependencia utilizando Castle Windsor.
Capa de visualización (UI de usuario)
La capa de visualización utiliza AngularJS para implementar la página SPA. Todos los datos de la página se cargan de forma asincrónica y se actualizan parcialmente, por lo que hay una mejor experiencia de usuario al ejecutar.
Servicio de aplicación
AngularJS utiliza el servicio Http para solicitar una API web para obtener datos, y la implementación de la API web llama a la capa de aplicación para solicitar datos.
Capa de infraestructura
La capa de infraestructura incluye la implementación de almacenamiento y la implementación de algunos métodos de utilidad.
La capa de almacenamiento se implementa utilizando EF Code First y utiliza EF Migration para crear y actualizar la base de datos.
La capa LH.Common implementa algunos métodos comunes, como el registro de clases auxiliares, extensiones de árboles de expresión y otras implementaciones de clases.
Capa de dominio
La capa de dominio implementa todos los modelos de dominio del proyecto, incluida la implementación del modelo de dominio y la definición de la interfaz de almacenamiento.
Después de presentar la estructura completa, a continuación se presentarán la implementación del servicio back-end y la implementación del front-end web del proyecto.
3. Implementación del servicio back-end
El servicio back-end utiliza principalmente la API web Asp.net para implementar servicios back-end y utiliza Castle Windsor para completar la inyección de dependencia.
Aquí presentamos la implementación del servicio Rest Web API basado en la gestión de permisos en la gestión de usuarios.
Implementación del servicio REST que proporciona datos del usuario:
Como se puede ver en la implementación del código anterior, el servicio REST del usuario se basa en la interfaz IUserService y no combina toda la lógica empresarial en De la manera tradicional, todos se colocan en la implementación de la API web, pero algunas implementaciones comerciales específicas se encapsulan en la capa de aplicación correspondiente. La API Rest solo es responsable de llamar a la capa de aplicación correspondiente. Web API solo es responsable de llamar a los servicios de la capa de aplicación correspondientes. La ventaja de este diseño es:
El departamento de servicio REST se basa en la interfaz de la capa de aplicación, que separa las responsabilidades. La creación de instancias de los servicios de la capa de aplicación se completa mediante un contenedor de inyección de dependencia separado, mientras que el servicio REST solo es responsable. para llamar a los métodos de servicio Apply correspondientes para obtener datos. El uso de interfaces dependientes no necesita depender de la implementación de clases específicas, por lo que el grado de acoplamiento entre clases es muy bajo. Los servicios REST no incluyen la implementación de lógica empresarial específica. Este diseño puede separar mejor los servicios. Si se va a utilizar WCF para implementar servicios REST en el futuro, no es necesario escribir repetidamente la lógica de la API web en la clase de servicio WCF REST. se puede llamar para implementar WCF REST. Por lo tanto, la implementación de la lógica empresarial se transferirá a la capa de servicio de la aplicación. Este diseño hará que las responsabilidades del servicio REST sean más únicas y la implementación del servicio REST sea más fácil de expandir.
Implementación de servicios de aplicaciones de usuario:
Aquí puede optimizar aún más la capa de servicios de aplicaciones, lograr la separación de lectura y escritura a nivel de código, definir la interfaz IReadOnlyService y la interfaz IWriteServie, y escribir operaciones. puedo usar generic El método se abstrae en BaseService para implementar. De esta manera, se implementan algunas operaciones comunes de agregar, eliminar, modificar y verificar. La razón por la que se pueden implementar operaciones comunes aquí es porque estas operaciones son muy similares, pero las entidades operadas son diferentes.
De hecho, dicha implementación se encuentra en otro proyecto de código abierto que he usado: OnlineStore. Puede consultar esto para implementarlo usted mismo.
Implementación de la capa de almacén:
Los servicios de aplicaciones de usuario no dependen directamente de una clase de almacenamiento específica, sino que también dependen de su interfaz. La clase de almacenamiento de usuario correspondiente se implementa de la siguiente manera:
4. Implementación del front-end de AngularJS
La implementación del front-end web se implementa utilizando AngularJS y adopta un modelo de desarrollo modular. La estructura del código de front-end web específica se muestra en la siguiente figura:
La jerarquía de llamadas entre los códigos de aplicaciones web desarrolladas con AngularJS es básicamente la misma que la del back-end, que también es la página de vista-" Módulo controlador--Módulo de servicio--". Servicio de API web.
Los recursos CSS y JS del front-end web se cargan mediante el método Bundle para reducir la cantidad de solicitudes de recursos y acelerar el tiempo de carga de la página. Configuración de clase de paquete específica:
Índice de la página de inicio. cshtml
Quinto, efecto operativo
Después de presentar la implementación del front-end y el back-end, echemos un vistazo al efecto operativo de todo el proyecto:
Sexto, resumen
p>Resumen
Hasta ahora, se han presentado todos los contenidos de este artículo, aunque el proyecto de aplicación AngularJS en este artículo todavía tiene muchas imperfecciones, por ejemplo, ninguna. soporte de buffer y sin separación de lectura y escritura, sin pruebas de estrés de algunas API, etc. Pero la aplicación de AngularJS en proyectos reales es básicamente así. Si necesita usar AngularJS en su proyecto, el backend de su empresa es .NET. Creo que compartir este artículo puede brindarle una buena referencia. Además, con respecto al diseño de la arquitectura, también puedes consultar mi otro proyecto de código abierto: OnlineStore y FastWorks.