Au cours des derniers jours d'articles, nous avons beaucoup appris sur angular . Cette fois, nous proposerons un petit produit.
angualr est combiné avec ng-zorro pour développer rapidement et de manière standardisée un système backend. [Recommandation du didacticiel associé : "Tutoriel angulaire"]
Les fonctions du système sont les suivantes :
tous les services utiliser des données simulées.
Faisons-le.
Les angular ui les plus populaires
combinés avec ng-zorro
angulaire incluent :Ant Design crois que ceux qui font du développement front-end. le connaissent. Nous le combinons donc ici avec le framework NG-ZORRO . Si vous connaissez la version Vue ou React d' Ant Design , je pense que vous pouvez vous connecter de manière transparente ~
Nous réutilisons angular-cli pour générer un projet ng-zorro .
L'ajout ng-zorro est très simple : entrez dans ng-zorro et exécutez ng add ng-zorro-antd .
Bien sûr, vous pouvez également exécuter
npm install ng-zorro-antdpour l'ajouter, mais ce n'est pas recommandé.
Après avoir combiné ng-zorro , nous exécutons le projet npm run start , et vous verrez l'image suivante sur la page http://localhost:4200 .
Pas mal, frère.
Nous avons modifiéle routage de configuration
en routage hash et ajouté le routage utilisateur l'a fait pour nous. Nous n'avons besoin que de quelques modifications mineures.
Idée :
ajoutez d'abord la page de liste user de la page, utilisez table dans ng-zorro
pour ajouter et modifier la page de l'utilisateur afin de partager la même page, form ng-zorro
fonction de suppression de page du composant de formulaire dans ng-zorro pour utiliser directement l'invite contextuelle , utilisez ng-zorro
introduit ng-zorro si nécessaire pour
ajuster le fichier de routage
Selon l'idée, nous devons l'introduire dans ng-zorro :
// app.module.ts.
importer { ReactiveFormsModule } depuis '@angular/forms' ;
importer { NzTableModule } depuis 'ng-zorro-antd/table' ;
importer { NzModalModule } depuis 'ng-zorro-antd/modal' ;
importer { NzButtonModule } depuis 'ng-zorro-antd/button' ;
importer { NzFormModule } depuis 'ng-zorro-antd/form' ;
importer { NzInputModule } depuis 'ng-zorro-antd/input' ;
//...
importations : [ // Ajoutez-le dans les importations au lieu de déclarer NzTableModule dans les déclarations,
NzModalModule,
NzButtonModule,
NzFormModule,
Module de formulaires réactifs,
NzInputModule
], principe simple et facile à comprendre, on n'utilise pas children pour imbriquer le routage :
// app.routing.module.ts
importer { NgModule } depuis '@angular/core' ;
importer { Routes, RouterModule, PreloadAllModules } depuis '@angular/router' ;
importer { WelcomeComponent } depuis './pages/welcome/welcome.component' ;
importer { UserComponent } depuis './pages/user/user.component' ;
importer { UserInfoComponent } depuis './pages/user/user-info/user-info.component' ;
//Routes associées const routes : Routes = [
{
chemin: '',
pathMatch : 'complet',
redirectTo : '/bienvenue'
},
{
chemin : 'bienvenue',
composant : BienvenueComponent
},
{
chemin : 'utilisateur',
composant : ComposantUtilisateur
},
{
chemin : 'utilisateur/ajouter',
composant : UserInfoComponent
},
{
chemin : 'utilisateur/edit/:uuid',
composant : UserInfoComponent
}
];
@NgModule({
importations : [RouterModule.forRoot(
les itinéraires,
{
useHash : true, // Utiliser le mode de hachage preloadingStrategy : PreloadAllModules
}
)],
exportations : [RouterModule]
})
export class AppRoutingModule { } Changer de menu
Le menu généré à l'aide de l'échafaudage ne correspond pas aux fonctions que nous devons développer.
// app.component.html
<nz-layout class="app-layout">
<nz-sider class="menu-sidebar"
nzPliable
nzLargeur="256px"
nzBreakpoint="md"
[(nzCollapsed)]="isCollapsed"
[nzTrigger]="null">
<div class="sidebar-logo">
<!-- Par défaut, cliquez sur le logo pour accéder à la page d'accueil -->
<a routerLink="/welcome">
<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="Gestion des utilisateurs" nzIcon="dashboard">
<ul>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">Liste des utilisateurs</a>
</li>
</ul>
</li>
</ul>
</nz-side>
<nz-layout>
<nz-en-tête>
<div class="app-header">
<span class="header-trigger" (click)="isCollapsed = !isCollapsed">
<i classe="déclencheur"
icône nz
[nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
></i>
</span>
</div>
</nz-header>
<nz-content>
<div class="contenu interne">
<sortie-routeur></sortie-routeur>
</div>
</nz-content>
</nz-layout>
</nz-layout> Affichage du menu, si nous devons gérer les autorisations, nous avons besoin que le backend coopère avec le transfert de valeur. Ensuite, nous rendons le menu d'autorisation correspondant sur la page
et le remplaçons par le code ci-dessus. est la suivante :
Complétez la liste des utilisateurs.
Ensuite, complétez le squelette de la liste des utilisateurs. Parce que nous utilisons le framework UI , il est extrêmement pratique pour nous d'écrire :
Obtenez la liste des utilisateurs
// user.component.html.
<nz-table #basicTable [nzData]="list">
<tête>
<tr>
<th>Nom</th>
<th>Position</th>
<th>Action</th>
</tr>
</tête>
<corps>
<!-- Parcourez les données obtenues -->
<tr *ngFor="laisser les données de basicTable.data">
<td>{{data.name}}</td>
<td>{{data.position}}</td>
<td>
<a style="color: #f00;">Supprimer</a>
</td>
</tr>
</tbody>
</nz-table> Nous avons simulé certaines données dans le dossier assets user.json :
{
"utilisateurs": [
{
"uuid": 1,
"nom": "Jimmy",
"position": "Frontend"
},
{
"uuid": 2,
"nom": "Jim",
"position": "Back-end"
}
],
"environnement": "développement"
} Après avoir écrit le service, nous appelons pour récupérer les données de l'utilisateur :
// user.component.ts
importer { Component, OnInit } depuis '@angular/core' ;
importer { UserService } depuis 'src/app/services/user.service' ;
@Composant({
sélecteur : 'app-user',
templateUrl : './user.component.html',
styleUrls : ['./user.component.scss']
})
classe d'exportation UserComponent implémente OnInit {
liste publique : any = []
constructeur(
userService privé en lecture seule : UserService
) { }
ngOnInit() : vide {
if(localStorage.getItem('utilisateurs')) {
laissez obj = localStorage.getItem('utilisateurs') || '{}'
this.list = JSON.parse(obj)
} autre {
ceci.getList()
}
}
// Récupère la liste des utilisateurs getList() {
this.userService.getUserList().subscribe({
suivant : (données : toutes) => {
localStorage.setItem('utilisateurs', JSON.stringify(data.users))
this.list = data.utilisateurs
},
erreur : (erreur : toute) => {
console.log (erreur)
}
})
}
} Comme aucun service back-end n'est introduit, nous utilisons ici localstorage pour enregistrer le statut.
Après avoir terminé ce qui précède, nous obtenons les informations de la liste comme suit :
Pour ajouter des utilisateurs et modifier des utilisateurs,
nous créons simplement un formulaire qui ne contient que deux champs, à savoir name et position . Ces deux fonctions partagent un formulaire ~
on l'ajoute en html :
// user-info.component.html
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Veuillez saisir votre nom d'utilisateur !">
<input type="text" nz-input formControlName="username" placeholder="Veuillez saisir le nom d'utilisateur" style="width : 160px;"
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Veuillez saisir un poste !">
<input type="text" nz-input formControlName="position" placeholder="Veuillez saisir la position" style="width : 160px;"/>
</nz-form-control>
</nz-form-item>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Confirmer</button>
</form> La page ressemble à ceci :
Ensuite, il y a le jugement logique à ajouter ou à modifier. Si la connexion est marquée d' uuid , cela signifie édition, show you the codes .
// info-utilisateur.component.ts
importer { Component, OnInit } depuis '@angular/core' ;
importer { FormBuilder, FormGroup, Validators } depuis '@angular/forms' ;
importer { ActivatedRoute, ParamMap } depuis '@angular/router' ;
@Composant({
sélecteur : 'app-user-info',
templateUrl : './user-info.component.html',
styleUrls : ['./user-info.component.scss']
})
classe d'exportation UserInfoComponent implémente OnInit {
public isAdd : booléen = vrai ;
information utilisateur publique : any = []
uuid public : nombre = 0 ;
validateForm! : FormGroup ;
constructeur(
fb privé : FormBuilder,
itinéraire privé : ActivatedRoute,
) { }
ngOnInit() : vide {
this.userInfo = JSON.parse(localStorage.getItem('users') || '[]')
this.route.paramMap.subscribe((params : ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// C'est l'état d'édition, définissez l'identifiant if(this.uuid) {
this.isAdd = faux
}
si (this.isAdd) {
this.validateForm = this.fb.group({
nom d'utilisateur : [null, [Validators.required]],
position : [null, [Validators.required]]
});
} autre {
let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] || {}
// Remplissage des informations this.validateForm = this.fb.group({
nom d'utilisateur : [current.name, [Validators.required]],
position : [position.actuelle, [Validateurs.obligatoires]]
})
}
}
soumettreFormulaire() {
// S'il n'est pas conforme à la soumission, une erreur sera signalée if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((control: any) => {
if(contrôle?.invalide) {
contrôle?.markAsDirty();
contrôle?.updateValueAndValidity({ onlySelf: true });
}
})
retour
}
// Récupère les données du formulaire const data = this.validateForm.value
//Ajouter un nouvel utilisateur if(this.isAdd) {
let lastOne = (this.userInfo.length > 0 ? this.userInfo[this.userInfo.length-1] : {});
this.userInfo.push({
uuid : (lastOne.uuid ? (lastOne.uuid + 1) : 1),
nom : data.nom d'utilisateur,
position : données.position
})
localStorage.setItem('utilisateurs', JSON.stringify(this.userInfo))
} else { //Modifier l'utilisateur, mettre à jour les informations let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
retour {
uuid : ceci.uuid,
nom : data.nom d'utilisateur,
position : données.position
}
}
retourner l'article
})
localStorage.setItem('utilisateurs', JSON.stringify(mapList))
}
}
} Nous définissons d'abord un identifiant isAdd , qui est par défaut un nouvel utilisateur ; lorsque uuid existe, définissons-le sur une valeur false , indiquant qu'il est dans un état d'édition et remplit le formulaire avec le contenu. L'opération de soumission d'un formulaire est également jugée en fonction de cet identifiant. Nous modifions directement les informations localStorage pour assurer la synchronisation des informations de la liste.
Pour la fonction de suppression,
nous introduisons une boîte de dialogue modale pour demander s'il faut supprimer.
// utilisateur.component.ts
// Supprimer delete (données : toutes) {
this.modal.confirm({
nzTitle : '<i>Voulez-vous supprimer cet utilisateur ?</i>',
nzOnOk : () => {
laissez les utilisateurs = JSON.parse(localStorage.getItem('users') || '[]');
let filterList = users.filter((item: any) => item.uuid !== data.uuid);
localStorage.setItem('utilisateurs', JSON.stringify(filterList));
this.list = liste de filtres
}
});
} 
Nous trouvons les données supprimées, les supprimons, remettons en cache les nouvelles données utilisateur et mettons à jour table .
Jusqu’à présent, nous avons mené à bien un projet simple. Jetons un coup d'oeil à cela dans son ensemble à l'aide Gif .
【sur】