In den letzten Tagen haben wir viel über angular gelernt. Dieses Mal werden wir uns ein kleines Produkt einfallen lassen.
angualr wird mit ng-zorro kombiniert, um schnell und standardisiert ein Backend-System zu entwickeln. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]
Zu den Systemfunktionen gehören die folgenden:
aller Dienste, Verwendung simulierter Daten.
Lass es uns tun.
Zu den beliebtesten ui angular
in Kombination mit NG-Zorro
Angular gehören:glaube Ant Design , diejenigen, die Front-End-Entwicklung betreiben sind damit vertraut. Hier kombinieren wir es mit dem NG-ZORRO -Framework. Wenn Sie mit Vue oder React Version von Ant Design vertraut sind, können Sie meiner Meinung nach eine nahtlose Verbindung herstellen ~
Wir verwenden angular-cli erneut, um ein Projekt ng-zorro zu generieren.
Das Hinzufügen von ng-zorro ist sehr einfach: Geben Sie ng-zorro ein und führen Sie ng add ng-zorro-antd aus.
Natürlich können Sie zum Hinzufügen auch
npm install ng-zorro-antdausführen, dies wird jedoch nicht empfohlen.
Nach der Kombination von ng-zorro führen wir das Projekt npm run start aus und Sie sehen das folgende Bild auf der Seite http://localhost:4200 .
Nicht schlecht, Bruder.
Wir habendas Konfigurationsrouting
auf hash -Routing umgestellt und das Gerüst hinzugefügt. Wir müssen nur ein paar kleinere Änderungen vornehmen.
Idee:
Fügen Sie zuerst die Seite mit user hinzu, verwenden Sie table in ng-zorro
um die Seite des Benutzers hinzuzufügen und zu ändern, um dieselbe Seite freizugeben, und verwenden form ng-zorro
Funktion zum Löschen von Formularkomponentenseiten in ng-zorro, um die Popup-Eingabeaufforderung direkt zu verwenden , verwenden ng-zorro
führt ng-zorro Komponente nach Bedarf ein, um
die Routing-Datei anzupassen.
Gemäß der Idee müssen wir sie in ng-zorro einführen:
// app.module.ts
import { ReactiveFormsModule } aus '@angular/forms';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
// ...
imports: [ // Fügen Sie es in Imports hinzu, anstatt NzTableModule in Deklarationen zu deklarieren.
NzModalModule,
NzButtonModule,
NzFormModule,
ReactiveFormsModule,
NzInputModule
], einfaches und leicht verständliches Prinzip, wir verwenden keine children zum Verschachteln von Routing:
// app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { WelcomeComponent } from './pages/welcome/welcome.component';
import { UserComponent } aus './pages/user/user.component';
import { UserInfoComponent } aus './pages/user/user-info/user-info.component';
//Verwandte Routen const Routen: Routes = [
{
Weg: '',
pathMatch: 'full',
RedirectTo: '/welcome'
},
{
Pfad: 'Willkommen',
Komponente: WelcomeComponent
},
{
Pfad: 'Benutzer',
Komponente: UserComponent
},
{
Pfad: 'Benutzer/Hinzufügen',
Komponente: UserInfoComponent
},
{
Pfad: 'user/edit/:uuid',
Komponente: UserInfoComponent
}
];
@NgModule({
Importe: [RouterModule.forRoot(
Routen,
{
useHash: true, // Hash-Modus verwenden preloadingStrategy: PreloadAllModules
}
)],
Exporte: [RouterModule]
})
export class AppRoutingModule { } Menü ändern
Das mit Scaffolding generierte Menü entspricht nicht den Funktionen, die wir entwickeln müssen.
// app.component.html
<nz-layout class="app-layout">
<nz-sider class="menu-sidebar"
nzZusammenklappbar
nzWidth="256px"
nzBreakpoint="md"
[(nzCollapsed)]="isCollapsed"
[nzTrigger]="null">
<div class="sidebar-logo">
<!-- Klicken Sie standardmäßig auf das Logo, um zur Startseite zu springen -->
<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="Benutzerverwaltung" nzIcon="dashboard">
<ul>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">Benutzerliste</a>
</li>
</ul>
</li>
</ul>
</nz-sider>
<nz-layout>
<nz-header>
<div class="app-header">
<span class="header-trigger" (click)="isCollapsed = !isCollapsed">
<i class="trigger"
NZ-Symbol
[nzType]="isCollapsed ? 'menu-unfold': 'menu-fold'"
></i>
</span>
</div>
</nz-header>
<nz-content>
<div class="inner-content">
<router-outlet></router-outlet>
</div>
</nz-content>
</nz-layout>
</nz-layout> Menüanzeige: Wenn wir eine Berechtigungsverwaltung durchführen müssen, müssen wir das Backend bei der Wertübertragung unterstützen. Anschließend rendern wir das entsprechende Berechtigungsmenü auf der Seite
und ersetzen es durch den oben genannten Grundcode ist wie folgt:
Vervollständigen Sie die Benutzerliste.
Vervollständigen Sie als Nächstes das Grundgerüst der Benutzerliste. Da wir das UI Framework verwenden, ist es für uns äußerst praktisch, Folgendes zu schreiben:
Holen Sie sich die Benutzerliste
// user.component.html
<nz-table #basicTable [nzData]="list">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Aktion</th>
</tr>
</thead>
<tbody>
<!-- Durchlaufen Sie die erhaltenen Daten -->
<tr *ngFor="let data of basicTable.data">
<td>{{data.name}}</td>
<td>{{data.position}}</td>
<td>
<a style="color: #f00;">Löschen</a>
</td>
</tr>
</tbody>
</nz-table> Wir haben einige Daten im assets -Ordner user.json simuliert:
{
„Benutzer“: [
{
"uuid": 1,
„Name“: „Jimmy“,
„position“: „Frontend“
},
{
"uuid": 2,
„Name“: „Jim“,
„position“: „Backend“
}
],
„Umwelt“: „Entwicklung“
} Nachdem wir den Dienst geschrieben haben, rufen wir auf, um die Daten des Benutzers abzurufen:
// user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } aus 'src/app/services/user.service';
@Komponente({
Selektor: 'App-Benutzer',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
Die Exportklasse UserComponent implementiert OnInit {
öffentliche Liste: any = []
Konstruktor(
privater schreibgeschützter userService: UserService
) { }
ngOnInit(): void {
if(localStorage.getItem('users')) {
let obj = localStorage.getItem('users') ||.
this.list = JSON.parse(obj)
} anders {
this.getList()
}
}
// Holen Sie sich die Benutzerliste getList() {
this.userService.getUserList().subscribe({
weiter: (Daten: beliebig) => {
localStorage.setItem('users', JSON.stringify(data.users))
this.list = data.users
},
Fehler: (Fehler: beliebig) => {
console.log(Fehler)
}
})
}
} Da kein Back-End-Dienst eingeführt wird, verwenden wir hier localstorage um den Status aufzuzeichnen.
Nachdem wir die oben genannten Schritte ausgeführt haben, erhalten wir die Listeninformationen wie folgt:
Um Benutzer hinzuzufügen und Benutzer zu bearbeiten,
erstellen wir einfach ein Formular, das nur zwei Felder enthält, nämlich name und position . Diese beiden Funktionen teilen sich ein Formular ~
wir fügen es in html ein:
// user-info.component.html
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Bitte Benutzernamen eingeben!">
<input type="text" nz-input formControlName="username" placeholder="Please enter username" style="width: 160px;" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Bitte geben Sie eine Position ein!">
<input type="text" nz-input formControlName="position" placeholder="Bitte geben Sie die Position ein" style="width: 160px;"/>
</nz-form-control>
</nz-form-item>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Bestätigen</button>
</form> Die Seite sieht so aus:
Dann gibt es die logische Entscheidung, etwas hinzuzufügen oder zu ändern. Wenn die Verbindung mit uuid gekennzeichnet ist, bedeutet dies, dass sie bearbeitet wird. show you the codes .
// user-info.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
@Komponente({
Selektor: 'App-Benutzerinfo',
templateUrl: './user-info.component.html',
styleUrls: ['./user-info.component.scss']
})
Die Exportklasse UserInfoComponent implementiert OnInit {
public isAdd: boolean = true;
öffentliche Benutzerinfo: any = []
öffentliche UUID: Zahl = 0;
validierenForm!: FormGroup;
Konstruktor(
private fb: FormBuilder,
private Route: ActivatedRoute,
) { }
ngOnInit(): void {
this.userInfo = JSON.parse(localStorage.getItem('users') || '[]')
this.route.paramMap.subscribe((params: ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// Es ist der Bearbeitungsstatus, setze die Kennung if(this.uuid) {
this.isAdd = false
}
if(this.isAdd) {
this.validateForm = this.fb.group({
Benutzername: [null, [Validators.required]],
Position: [null, [Validators.required]]
});
} anders {
let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] || {}
// Informations-Backfill this.validateForm = this.fb.group({
Benutzername: [aktueller.Name, [Validatoren.erforderlich]],
Position: [aktuelle.Position, [Validatoren.erforderlich]]
})
}
}
sendForm() {
// Wenn es der Übermittlung nicht entspricht, wird ein Fehler gemeldet if(!this.validateForm.valid) {
Object.values(this.validateForm.controls).forEach((control: any) => {
if(control?.invalid) {
control?.markAsDirty();
control?.updateValueAndValidity({ onlySelf: true });
}
})
zurückkehren
}
// Formulardaten abrufen const data = this.validateForm.value
//Neuen Benutzer hinzufügen 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),
Name: data.username,
Position: data.position
})
localStorage.setItem('users', JSON.stringify(this.userInfo))
} else { //Benutzer bearbeiten, Informationen aktualisieren let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
zurückkehren {
uuid: this.uuid,
Name: data.username,
Position: data.position
}
}
Artikel zurücksenden
})
localStorage.setItem('users', JSON.stringify(mapList))
}
}
} Wir setzen zunächst einen Bezeichner isAdd , der standardmäßig einen neuen Benutzer verwendet. Wenn uuid vorhanden ist, setzen wir sie auf einen false Wert, um anzuzeigen, dass sie sich in einem Bearbeitungsstatus befindet, und füllen das Formular mit dem Inhalt auf. Der Vorgang des Absendens eines Formulars wird ebenfalls anhand dieser Kennung beurteilt. Wir ändern die localStorage -Informationen direkt, um die Synchronisierung der Listeninformationen sicherzustellen.
Für die Löschfunktion
führen wir ein modales Dialogfeld ein, in dem Sie gefragt werden, ob gelöscht werden soll.
// user.component.ts
// Löschen delete(data: any) {
this.modal.confirm({
nzTitle: '<i>Möchten Sie diesen Benutzer löschen?</i>',
nzOnOk: () => {
letuser = JSON.parse(localStorage.getItem('users') || '[]');
let filterList = users.filter((item: any) => item.uuid !== data.uuid);
localStorage.setItem('users', JSON.stringify(filterList));
this.list = filterList
}
});
} 
Wir finden die gelöschten Daten, entfernen sie, speichern die neuen Benutzerdaten erneut zwischen und aktualisieren table .
Bisher haben wir ein einfaches Projekt erfolgreich abgeschlossen. Schauen wir uns das Ganze anhand Gif an.
【über】