Dalam artikel beberapa hari terakhir, kami telah belajar banyak tentang angular . Kali ini kami akan membuat produk kecil.
angualr dikombinasikan dengan ng-zorro untuk mengembangkan sistem backend dengan cepat dan terstandarisasi. [Rekomendasi tutorial terkait: "Tutorial Sudut"]
Fungsi sistem meliputi:
semua layanan, gunakan data simulasi.
Mari kita lakukan.
angular ui yang lebih populer
dikombinasikan dengan sudut ng-zorro
meliputi:Ant Design yakin mereka yang melakukan pengembangan front-end akrab dengannya. Jadi disini kami menggabungkannya dengan framework NG-ZORRO . Jika Anda familiar dengan Ant Design versi Vue atau React , saya yakin Anda dapat terhubung dengan lancar ~
Kami menggunakan kembali angular-cli untuk menghasilkan proyek ng-zorro .
Menambahkan ng-zorro sangat sederhana: masuk ng-zorro dan jalankan ng add ng-zorro-antd .
Tentu saja, Anda juga dapat menjalankan
npm install ng-zorro-antduntuk menambahkannya, tetapi ini tidak disarankan.
Setelah menggabungkan ng-zorro , kami menjalankan proyek npm run start , dan Anda akan melihat gambar berikut di halaman http://localhost:4200 .
Lumayan Gan.
Kami mengubahperutean konfigurasi
menjadi perutean hash dan menambahkan perutean pengguna. Perancah sudah melakukannya untuk kami.
Ide:
Pertama tambahkan halaman daftar user halaman, gunakan komponen table di ng-zorro
untuk menambah dan mengubah halaman pengguna untuk berbagi halaman yang sama ng-zorro form
fungsi penghapusan halaman komponen formulir di ng-zorro untuk langsung menggunakan prompt pop-up , gunakan ng-zorro
memperkenalkan komponen ng-zorro sesuai kebutuhan untuk
menyesuaikan file perutean.
Menurut idenya, kita harus memperkenalkannya di ng-zorro :
// app.module.ts
impor { ReactiveFormsModule } dari '@angular/forms';
impor { NzTableModule } dari 'ng-zorro-antd/table';
impor { NzModalModule } dari 'ng-zorro-antd/modal';
impor { NzButtonModule } dari 'ng-zorro-antd/button';
impor { NzFormModule } dari 'ng-zorro-antd/form';
impor { NzInputModule } dari 'ng-zorro-antd/input';
// ...
impor: [ // Tambahkan dalam impor alih-alih mendeklarasikan NzTableModule dalam deklarasi,
NzModalModul,
NzButtonModul,
Modul NzForm,
Modul Bentuk Reaktif,
NzInputModule
], prinsip sederhana dan mudah dipahami, kami tidak menggunakan children untuk membuat perutean sarang:
// app.routing.module.ts
impor { NgModule } dari '@angular/core';
import { Rute, RouterModule, PreloadAllModules } dari '@angular/router';
impor { WelcomeComponent } dari './pages/welcome/welcome.component';
impor { UserComponent } dari './pages/user/user.component';
impor { UserInfoComponent } dari './pages/user/user-info/user-info.component';
//Rute terkait rute const: Rute = [
{
jalur: '',
pathMatch: 'penuh',
redirectTo: '/ selamat datang'
},
{
jalur: 'selamat datang',
komponen: Selamat DatangKomponen
},
{
jalur: 'pengguna',
komponen: Komponen Pengguna
},
{
jalur: 'pengguna/tambah',
komponen: UserInfoComponent
},
{
jalur: 'pengguna/edit/:uuid',
komponen: UserInfoComponent
}
];
@NgModule({
impor: [RouterModule.forRoot(
rute,
{
useHash: true,//Gunakan mode hash preloadingStrategy: PreloadAllModules
}
)],
ekspor: [RouterModule]
})
kelas ekspor AppRoutingModule {} Ubah menu
Menu yang dihasilkan menggunakan scaffolding tidak sesuai dengan fungsi yang perlu kita kembangkan.
// aplikasi.component.html
<nz-layout class="aplikasi-tata letak">
<nz-sider class="menu-sidebar"
nzDapat dilipat
nzLebar = "256 piksel"
nzBreakpoint="md"
[(nzCollapsed)]="isCollapsed"
[nzTrigger]="batal">
<div class="sidebar-logo">
<!-- Secara default, klik logo untuk melompat ke beranda -->
<a routerLink="/selamat datang">
<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="Manajemen Pengguna" nzIcon="dashboard">
<ul>
<li nz-menu-item nzMatchRouter>
<a routerLink="/user">Daftar pengguna</a>
</li>
</ul>
</li>
</ul>
</nz-sider>
<tata letak-nz>
<nz-header>
<div class="aplikasi-header">
<span class="header-trigger" (klik)="isCollapsed = !isCollapsed">
<i class="pemicu"
nz-ikon
[nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
></i>
</span>
</div>
</nz-header>
<nz-konten>
<div class="konten-dalam">
<router-outlet></router-outlet>
</div>
</nz-konten>
</nz-tata letak>
</nz-layout> Tampilan menu, jika kita perlu melakukan manajemen izin, kita memerlukan backend untuk bekerja sama dengan transfer nilai. Kemudian kita merender menu izin yang relevan ke halaman
dan menggantinya dengan kode di atas yang diperoleh adalah sebagai berikut:
Lengkapi daftar pengguna.
Selanjutnya, lengkapi kerangka daftar pengguna. Karena kami menggunakan kerangka UI , akan sangat mudah bagi kami untuk menulis:
Dapatkan daftar pengguna
// pengguna.component.html
<nz-tabel #basicTable [nzData]="daftar">
<kepala>
<tr>
<th>Nama</th>
<th>Posisi</th>
<th>Aksi</th>
</tr>
</kepala>
<tubuh>
<!-- Lintasi data yang diperoleh -->
<tr *ngFor="biarkan data dari basicTable.data">
<td>{{data.nama}}</td>
<td>{{data.posisi}}</td>
<td>
<a style="color: #f00;">Hapus</a>
</td>
</tr>
</tbody>
</nz-table> Kami menyimulasikan beberapa data di folder assets user.json :
{
"pengguna": [
{
"uuid": 1,
"nama": "Jimmy",
"posisi": "Bagian depan"
},
{
"uuid": 2,
"nama": "Jim",
"posisi": "Bagian Belakang"
}
],
"lingkungan": "pembangunan"
} Setelah menulis layanan, kami memanggil untuk mendapatkan data pengguna:
// user.component.ts
impor { Komponen, OnInit } dari '@angular/core';
impor {UserService} dari 'src/app/services/user.service';
@Komponen({
pemilih: 'pengguna aplikasi',
templatUrl: './pengguna.component.html',
styleUrls: ['./user.component.scss']
})
kelas ekspor UserComponent mengimplementasikan OnInit {
daftar publik: apa saja = []
konstruktor(
layanan pengguna hanya baca pribadi: Layanan Pengguna
) {}
ngOnInit(): batal {
if(localStorage.getItem('pengguna')) {
biarkan obj = localStorage.getItem('pengguna') ||.
this.list = JSON.parse(obj)
} kalau tidak {
ini.getList()
}
}
// Dapatkan daftar pengguna getList() {
this.userService.getUserList().subscribe({
selanjutnya: (data: apa saja) => {
Penyimpanan lokal.setItem('pengguna', JSON.stringify(data.pengguna))
this.list = data.pengguna
},
kesalahan: (kesalahan: apa saja) => {
konsol.log(kesalahan)
}
})
}
} Karena tidak ada layanan back-end yang diperkenalkan, di sini kami menggunakan localstorage untuk mencatat status.
Setelah menyelesaikan hal di atas, kita mendapatkan informasi daftarnya sebagai berikut:
Untuk menambah pengguna dan mengedit pengguna,
kita cukup membuat form yang hanya berisi dua field yaitu name dan position . Kedua fungsi ini berbagi formulir ~
kita menambahkannya di html :
// user-info.component.html
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-bentuk-item>
<nz-form-control nzErrorTip="Silakan masukkan nama pengguna!">
<input type="teks" nz-input formControlName="nama pengguna" placeholder="Silakan masukkan nama pengguna" style="lebar: 160px;"
</nz-kontrol-bentuk>
</nz-bentuk-item>
<nz-bentuk-item>
<nz-form-control nzErrorTip="Silakan masukkan posisi!">
<input type="text" nz-input formControlName="position" placeholder="Silakan masukkan posisi" style="width: 160px;"/>
</nz-kontrol-bentuk>
</nz-bentuk-item>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Konfirmasi</button>
</form> Halamannya terlihat seperti ini:
Lalu ada penilaian logis untuk menambah atau memodifikasi. Jika koneksi ditandai dengan uuid , artinya mengedit, show you the codes .
// info-pengguna.component.ts
impor { Komponen, OnInit } dari '@angular/core';
impor { FormBuilder, FormGroup, Validator } dari '@angular/forms';
impor { ActivatedRoute, ParamMap } dari '@angular/router';
@Komponen({
pemilih: 'info-pengguna-aplikasi',
templateUrl: './user-info.component.html',
styleUrls: ['./user-info.component.scss']
})
kelas ekspor UserInfoComponent mengimplementasikan OnInit {
isAdd publik: boolean = benar;
Info pengguna publik: apa saja = []
uuid publik: angka = 0;
validasiForm!: FormGroup;
konstruktor(
fb pribadi: FormBuilder,
rute pribadi: ActivatedRoute,
) {}
ngOnInit(): batal {
this.userInfo = JSON.parse(localStorage.getItem('pengguna') || '[]')
this.route.paramMap.subscribe((params: ParamMap)=>{
this.uuid = parseInt(params.get('uuid') || '0')
})
// Ini adalah status pengeditan, atur pengenal if(this.uuid) {
ini.isAdd = salah
}
if(ini.isTambahkan) {
this.validateForm = ini.fb.grup({
nama pengguna: [null, [Validator.wajib]],
posisi: [null, [Validator.wajib]]
});
} kalau tidak {
biarkan saat ini = (ini.userInfo.filter((item: apa saja) => item.uuid === ini.uuid))[0] || {}
// Isi ulang informasi this.validateForm = this.fb.group({
nama pengguna: [nama saat ini, [Validator.diperlukan]],
posisi: [posisi saat ini, [Validator.diperlukan]]
})
}
}
kirimkanFormulir() {
// Jika tidak sesuai dengan pengajuan, kesalahan akan dilaporkan if(!this.validateForm.valid) {
Objek.nilai(ini.validateForm.kontrol).forEach((kontrol: apa saja) => {
if(kontrol?.tidak valid) {
kontrol?.markAsDirty();
kontrol?.updateValueAndValidity({ onlySelf: true });
}
})
kembali
}
// Dapatkan data formulir const data = this.validateForm.value
//Tambahkan pengguna baru if(this.isAdd) {
biarkan lastOne = (ini.userInfo.panjang > 0 ? ini.userInfo[ini.userInfo.panjang-1] : {});
ini.userInfo.push({
uuid: (lastOne.uuid ? (lastOne.uuid + 1) : 1),
nama: data.nama pengguna,
posisi: data.posisi
})
localStorage.setItem('pengguna', JSON.stringify(ini.userInfo))
} else { //Edit pengguna, perbarui informasi let mapList = this.userInfo.map((item: any) => {
if(item.uuid === this.uuid) {
kembali {
uuid: ini.uuid,
nama: data.nama pengguna,
posisi: data.posisi
}
}
barang kembali
})
localStorage.setItem('pengguna', JSON.stringify(mapList))
}
}
} Pertama-tama kita menyetel pengidentifikasi isAdd , yang defaultnya adalah pengguna baru; ketika uuid ada, setel ke nilai false , yang menunjukkan bahwa ia berada dalam status pengeditan dan mengisi ulang formulir dengan konten. Pengoperasian pengiriman formulir juga dinilai berdasarkan pengidentifikasi ini. Kami langsung mengubah informasi localStorage untuk memastikan sinkronisasi informasi daftar.
Untuk fungsi penghapusan,
kami memperkenalkan kotak dialog modal untuk menanyakan apakah akan menghapus.
// pengguna.komponen.ts
// Hapus hapus(data: apa saja) {
ini.modal.konfirmasi({
nzTitle: '<i>Apakah Anda ingin menghapus pengguna ini?</i>',
nzOnOk: () => {
biarkan pengguna = JSON.parse(localStorage.getItem('users') || '[]');
biarkan filterList = pengguna.filter((item: apa saja) => item.uuid !== data.uuid);
localStorage.setItem('pengguna', JSON.stringify(filterList));
this.list = filterList
}
});
} 
Kami menemukan data yang dihapus, menghapusnya, menyimpan ulang data pengguna baru, dan memperbarui data daftar pengguna table .
Sejauh ini, kami telah berhasil menyelesaikan proyek sederhana. Mari kita lihat secara keseluruhan menggunakan Gif .
【lebih】