1. 首頁 > 生活百科 > >

Angular + NG-ZORRO快速開發一個后臺系統( 二 )

小知識it知識

Ng-Zorro
菜單展示 ， 如果我們需要做權限管理的話 ， 是需要后端配合進行傳值的 ， 然后我們再把相關的權限菜單渲染到頁面
替換成上面的代碼后 ， 得到的基本骨架如下：
Angular + NG-ZORRO快速開發一個后臺系統

文章插圖

完成用戶列表
接下來完成用戶列表的骨架 ， 因為使用了 UI 框架 ， 我么寫起來異常的方便：
獲取用戶列表
// user.component.html<nz-table #basicTable [nzData]="list"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Action</th> </tr> </thead> <tbody> <!-- 對獲取到的數據進行遍歷 --> <tr *ngFor="let data of basicTable.data"> <td>{{data.name}}</td> <td>{{data.position}}</td> <td> <a style="color: #f00;">Delete</a> </td> </tr> </tbody></nz-table>我們模擬了些數據在 assets 文件夾中 user.json:
{ "users": [ { "uuid": 1, "name": "Jimmy", "position": "Frontend" }, { "uuid": 2, "name": "Jim", "position": "Backend" } ], "environment": "development"}編寫好服務之后 ， 我們調用獲取用戶的數據：
// user.component.tsimport { Component, OnInit } from '@angular/core';import { UserService } from 'src/app/services/user.service';@Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss']})export class UserComponent implements OnInit { public list: any = [] constructor( private readonly userService: UserService ) { } ngOnInit(): void { if(localStorage.getItem('users')) { let obj = localStorage.getItem('users') || '{}' this.list = JSON.parse(obj) } else { this.getList() } } // 獲取用戶列表 getList() { this.userService.getUserList().subscribe({ next: (data: any) => { localStorage.setItem('users', JSON.stringify(data.users)) this.list = data.users }, error: (error: any) => { console.log(error) } }) }}因為沒有引入后端服務 ， 這里我們采用 localstorage 的方式記錄狀態 。
上面完成后 ， 我們得到列表信息如下：
Angular + NG-ZORRO快速開發一個后臺系統

文章插圖

新增用戶和編輯用戶
我們簡單建立個表單 ， 里面含有的字段就兩個 ， 分別是 name 和 position 。 這兩個功能是公用一個表單的～
我們在 html 中添加:
// user-info.component.html<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> <nz-form-item> <nz-form-control nzErrorTip="請輸入用戶名!"> <input type="text" nz-input formControlName="username" placeholder="請輸入用戶名" style="width: 160px;" /> </nz-form-control> </nz-form-item> <nz-form-item> <nz-form-control nzErrorTip="請輸入職位!"> <input type="text" nz-input formControlName="position" placeholder="請輸入職位" style="width: 160px;"/> </nz-form-control> </nz-form-item> <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">確認</button></form>頁面長這樣子：
Angular + NG-ZORRO快速開發一個后臺系統

文章插圖

然后就是邏輯的判斷 ， 進行添加或者是修改 。 如果是連接帶上 uuid 的標識 ， 就表示是編輯 ， show you the codes 。
// user-info.component.tsimport { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';import { ActivatedRoute, ParamMap } from '@angular/router';@Component({ selector: 'app-user-info', templateUrl: './user-info.component.html', styleUrls: ['./user-info.component.scss']})export class UserInfoComponent implements OnInit { public isAdd: boolean = true; public userInfo: any = [] public uuid: number = 0; validateForm!: FormGroup; constructor( 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') }) // 是編輯狀態 ， 設置標志符 if(this.uuid) { this.isAdd = false } if(this.isAdd) { this.validateForm = this.fb.group({ username: [null, [Validators.required]], position: [null, [Validators.required]] }); } else { let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] || {} // 信息回填 this.validateForm = this.fb.group({ username: [current.name, [Validators.required]], position: [current.position, [Validators.required]] }) } } submitForm() { // 如果不符合提交 ， 則報錯 if(!this.validateForm.valid) { Object.values(this.validateForm.controls).forEach((control: any) => { if(control?.invalid) { control?.markAsDirty(); control?.updateValueAndValidity({ onlySelf: true }); } }) return } // 獲取到表單的數據 const data = https://www.52zixue.com/zhanzhang/webqd/js/04/21/70538/this.validateForm.value // 新增用戶 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 { // 編輯用戶 ， 更新信息 let mapList = this.userInfo.map((item: any) => { if(item.uuid === this.uuid) { return { uuid: this.uuid, name: data.username, position: data.position } } return item }) localStorage.setItem('users', JSON.stringify(mapList)) } }}

推薦閱讀