En los últimos días de artículos, hemos aprendido mucho sobre angular . Esta vez crearemos un pequeño producto.
angualr se combina con ng-zorro para desarrollar de forma rápida y estandarizada un sistema backend. [Recomendación de tutorial relacionada: "Tutorial angular"]
Las funciones del sistema incluyen lo siguiente:
de todos los servicios Uso de datos simulados.
Vamos a hacerlo.
Los angular ui más populares
combinados con ng-zorro
angular incluyen:Ant Design que aquellos que realizan desarrollo front-end. están familiarizados con él. Entonces aquí lo combinamos con el marco NG-ZORRO . Si está familiarizado con la versión Vue o React de Ant Design , creo que puede conectarse sin problemas ~
Reutilizamos angular-cli para generar un proyecto ng-zorro .
Agregar ng-zorro es muy simple: ingrese ng-zorro y ejecute ng add ng-zorro-antd .
Por supuesto, también puedes ejecutar
npm install ng-zorro-antdpara agregarlo, pero no se recomienda.
Después de combinar ng-zorro , ejecutamos el proyecto npm run start y verá la siguiente imagen en la página http://localhost:4200 .
No está mal, hermano.
Cambiamosel enrutamiento de configuración
a enrutamiento hash y agregamos enrutamiento de usuario. El andamio lo hizo por nosotros. Solo necesitamos hacer algunas modificaciones menores.
Idea:
primero agregue la página de lista user de la página, use table en ng-zorro
para agregar y cambiar la página del usuario para compartir la misma página, form ng-zorro
función de eliminación de página del componente de formulario en ng-zorro para usar directamente el mensaje emergente , use ng-zorro
introduce ng-zorro según sea necesario para
ajustar el archivo de enrutamiento.
Según la idea, tenemos que introducirlo en ng-zorro :
// app.module.ts.
importar {ReactiveFormsModule} desde '@angular/forms';
importar { NzTableModule } desde 'ng-zorro-antd/table';
importar {NzModalModule} desde 'ng-zorro-antd/modal';
importar {NzButtonModule} desde 'ng-zorro-antd/button';
importar { NzFormModule } desde 'ng-zorro-antd/form';
importar { NzInputModule } desde 'ng-zorro-antd/input';
//...
imports: [ // Agréguelo en imports en lugar de declarar NzTableModule en las declaraciones,
módulo nzmodal,
módulo de botón nz,
módulo nzform,
módulo de formas reactivas,
Módulo de entrada Nz
], principio simple y fácil de entender, no utilizamos children para anidar el enrutamiento:
// app.routing.module.ts
importar {NgModule} desde '@angular/core';
importar {Rutas, RouterModule, PreloadAllModules} desde '@angular/router';
importar {WelcomeComponent} desde './pages/welcome/welcome.component';
importar {UserComponent} desde './pages/user/user.component';
importar { UserInfoComponent } desde './pages/user/user-info/user-info.component';
//Rutas relacionadas const rutas: Rutas = [
{
camino: '',
pathMatch: 'completo',
redirigir a: '/bienvenido'
},
{
ruta: 'bienvenido',
componente: BienvenidoComponente
},
{
ruta: 'usuario',
componente: Componente de usuario
},
{
ruta: 'usuario/agregar',
componente: UserInfoComponent
},
{
ruta: 'usuario/editar/:uuid',
componente: UserInfoComponent
}
];
@NgModule({
importaciones: [RouterModule.forRoot(
rutas,
{
useHash: true, // Usar estrategia de precarga en modo hash: PreloadAllModules
}
)],
exportaciones: [Módulo de enrutador]
})
export class AppRoutingModule { } Cambiar menú
El menú generado usando scaffolding no coincide con las funciones que necesitamos desarrollar. Ajustémoslo.
// aplicación.componente.html
<nz-layout class="diseño-aplicación">
<nz-sider class="barra lateral de menú"
nzPlegable
nzAncho="256px"
nzBreakpoint="md"
[(nzCollapsed)]="está colapsado"
[nzTrigger]="nulo">
<div class="logotipo de barra lateral">
<!-- De forma predeterminada, haga clic en el logotipo para ir a la página de inicio -->
<a enrutadorEnlace="/bienvenido">
<img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
<h1>Ng-Zorro</h1>
</a>
</div>
<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
<li nz-submenu nzOpen nzTitle="Administración de usuarios" nzIcon="tablero">
<ul>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">Lista de usuarios</a>
</li>
</ul>
</li>
</ul>
</nz-sider>
<diseño-nz>
<encabezado-nz>
<div class="encabezado de aplicación">
<span class="header-trigger" (clic)="isCollapsed = !isCollapsed">
<i clase="disparador"
icono-nz
[nzType]="¿está colapsado? 'menú-desplegado': 'menú-plegado'"
>>i>
</span>
</div>
</nz-encabezado>
<contenido-nz>
<div class="contenido-interior">
<salida-enrutador></salida-enrutador>
</div>
</nz-content>
</nz-diseño>
</nz-layout> Visualización del menú, si necesitamos realizar la gestión de permisos, necesitamos que el backend coopere con la transferencia de valores. Luego presentamos el menú de permisos relevante en la página
y lo reemplazamos con el código anterior. es el siguiente:
Complete la lista de usuarios.
A continuación, complete el esqueleto de la lista de usuarios. Debido a que usamos el marco de UI , es muy conveniente para nosotros escribir:
Obtener la lista de usuarios
// user.component.html.
<nz-table #basicTable [nzData]="lista">
<cabeza>
<tr>
<th>Nombre</th>
<th>Posición</th>
<th>Acción</th>
</tr>
</thead>
<tcuerpo>
<!-- Recorrer los datos obtenidos -->
<tr *ngFor="dejar datos de basicTable.data">
<td>{{datos.nombre}}</td>
<td>{{data.position}}</td>
<td>
<a style="color: #f00;">Eliminar</a>
</td>
</tr>
</tbody>
</nz-table> Simulamos algunos datos en la carpeta de assets user.json :
{
"usuarios": [
{
"uuido": 1,
"nombre": "Jimmy",
"posición": "Frontal"
},
{
"uuido": 2,
"nombre": "Jim",
"posición": "Backend"
}
],
"medio ambiente": "desarrollo"
} Después de escribir el servicio, llamamos para obtener los datos del usuario:
// user.component.ts
importar {Componente, OnInit} desde '@angular/core';
importar {UserService} desde 'src/app/services/user.service';
@Componente({
selector: 'usuario de la aplicación',
URL de plantilla: './usuario.component.html',
URL de estilo: ['./user.component.scss']
})
clase de exportación UserComponent implementa OnInit {
lista pública: cualquiera = []
constructor(
Servicio de usuario privado de solo lectura: Servicio de usuario
) { }
ngOnInit(): nulo {
if(localStorage.getItem('usuarios')) {
let obj = localStorage.getItem('usuarios') || '{}'
esta.lista = JSON.parse(obj)
} demás {
this.getList()
}
}
// Obtener la lista de usuarios getList() {
this.userService.getUserList().subscribe({
siguiente: (datos: cualquiera) => {
localStorage.setItem('usuarios', JSON.stringify(datos.usuarios))
esta.lista = datos.usuarios
},
error: (error: cualquiera) => {
consola.log(error)
}
})
}
} Debido a que no se introduce ningún servicio de back-end, aquí utilizamos localstorage para registrar el estado.
Después de completar lo anterior, obtenemos la información de la lista de la siguiente manera:
Para agregar usuarios y editar usuarios,
simplemente creamos un formulario, que contiene solo dos campos, a saber, name y position . Estas dos funciones comparten un formulario ~
lo agregamos en html :
// user-info.component.html
<formulario nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<elemento-formulario-nz>
<nz-form-control nzErrorTip="¡Ingrese el nombre de usuario!">
<input type="text" nz-input formControlName="nombre de usuario" placeholder="Ingrese el nombre de usuario" style="width: 160px;"
</nz-form-control>
</nz-form-item>
<elemento-formulario-nz>
<nz-form-control nzErrorTip="¡Ingrese una posición!">
<input type="text" nz-input formControlName="position" placeholder="Ingrese la posición" style="width: 160px;"/>
</nz-form-control>
</nz-form-item>
<botón nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Confirmar</button>
</form> La página se ve así:
Luego está el juicio lógico de añadir o modificar. Si la conexión está marcada con uuid , significa editar, show you the codes .
// información-usuario.component.ts
importar {Componente, OnInit} desde '@angular/core';
importar {FormBuilder, FormGroup, Validadores} desde '@angular/forms';
importar {ActivatedRoute, ParamMap} desde '@angular/router';
@Componente({
selector: 'aplicación-información-usuario',
URL de plantilla: './user-info.component.html',
URL de estilo: ['./user-info.component.scss']
})
la clase de exportación UserInfoComponent implementa OnInit {
public isAdd: booleano = verdadero;
Información de usuario pública: cualquiera = []
uuid público: número = 0;
validarForm!: FormGroup;
constructor(
Facebook privado: FormBuilder,
ruta privada: Ruta Activada,
) { }
ngOnInit(): nulo {
this.userInfo = JSON.parse(localStorage.getItem('usuarios') || '[]')
this.route.paramMap.subscribe((params: ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// Es el estado de edición, establece el identificador if(this.uuid) {
this.isAdd = falso
}
si (esto.isAdd) {
this.validateForm = this.fb.group({
nombre de usuario: [nulo, [Validadores.requeridos]],
posición: [nulo, [Validadores.requeridos]]
});
} demás {
let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] ||
// Relleno de información this.validateForm = this.fb.group({
nombre de usuario: [nombre.actual, [Validadores.requeridos]],
posición: [posición.actual, [Validadores.requeridos]]
})
}
}
enviarForm() {
// Si no cumple con el envío, se informará un error if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((control: cualquiera) => {
si(control?.inválido) {
controlar?.markAsDirty();
control?.updateValueAndValidity({ onlySelf: true });
}
})
devolver
}
// Obtener los datos del formulario datos constantes = this.validateForm.value
//Agregar nuevo usuario if(this.isAdd) {
let lastOne = (this.userInfo.length > 0? this.userInfo[this.userInfo.length-1] : {});
this.userInfo.push({
uuid: (último.uuid? (último.uuid + 1): 1),
nombre: datos.nombre de usuario,
posición: datos.posición
})
localStorage.setItem('usuarios', JSON.stringify(this.userInfo))
} else { //Editar usuario, actualizar información let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
devolver {
uuid: este.uuid,
nombre: datos.nombre de usuario,
posición: datos.posición
}
}
devolver artículo
})
localStorage.setItem('usuarios', JSON.stringify(mapList))
}
}
} Primero configuramos un identificador isAdd , que de forma predeterminada es un nuevo usuario cuando uuid existe, lo configuramos en un valor false , lo que indica que está en estado de edición y completa el formulario con el contenido. La operación de envío de un formulario también se juzga según este identificador. Cambiamos directamente la información localStorage para garantizar la sincronización de la información de la lista.
Para la función de eliminación,
introducimos un cuadro de diálogo modal para preguntar si desea eliminar.
// usuario.componente.ts
// Eliminar eliminar(datos: cualquiera) {
this.modal.confirm({
nzTitle: '<i>¿Quieres eliminar este usuario?</i>',
nzOnOk: () => {
dejar usuarios = JSON.parse(localStorage.getItem('usuarios') || '[]');
let filterList = usuarios.filter((item: any) => item.uuid!== data.uuid);
localStorage.setItem('usuarios', JSON.stringify(filterList));
this.list = lista de filtros
}
});
} 
Encontramos los datos eliminados, los eliminamos, volvemos a almacenar en caché los datos del nuevo usuario y actualizamos los datos de table .
Hasta ahora, hemos completado con éxito un proyecto simple. Veámoslo en su conjunto usando Gif .
【encima】