Angular + NG-ZORRO快速开发一个后台系统( 二 )

2022-04-21 小知识 it知识

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 的方式记录状态。
上面完成后，我们得到列表信息如下：

文章插图

新增用户和编辑用户
我们简单建立个表单，里面含有的字段就两个，分别是 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>页面长这样子：

文章插图

然后就是逻辑的判断，进行添加或者是修改。如果是连接带上 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)) } }}