真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

// app.module.ts

import { ReactiveFormsModule } from '@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: [ // 是在 imports 中添加，而不是 declarations 中聲明
  NzTableModule,
  NzModalModule,
  NzButtonModule,
  NzFormModule,
  ReactiveFormsModule,
  NzInputModule
],

// 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 } from './pages/user/user.component';
import { UserInfoComponent } from './pages/user/user-info/user-info.component';

// 相關(guān)的路由
const routes: Routes = [
  { 
    path: '', 
    pathMatch: 'full', 
    redirectTo: '/welcome' 
  },
  {
    path: 'welcome',
    component: WelcomeComponent
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'user/add',
    component: UserInfoComponent
  },
  {
    path: 'user/edit/:uuid',
    component: UserInfoComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(
    routes,
    {
      useHash: true,// 使用 hash 模式
      preloadingStrategy: PreloadAllModules
    }
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// app.component.html


  
    
      
      
        
        
Ng-Zorro
      
    

菜單展示，如果我們需要做權(quán)限管理的話，是需要后端配合進(jìn)行傳值的，然后我們再把相關(guān)的權(quán)限菜單渲染到頁面

替換成上面的代碼后，得到的基本骨架如下：

完成用戶列表

接下來完成用戶列表的骨架，因?yàn)槭褂昧?UI 框架，我么寫起來異常的方便：

獲取用戶列表

// user.component.html


  
    
      Name
      Position
      Action
    
  
  
    
    
      {{data.name}}
      {{data.position}}
      
        Delete
      
    
  

我們模擬了些數(shù)據(jù)在 assets 文件夾中 user.json:

{
  "users": [
    {
      "uuid": 1,
      "name": "Jimmy",
      "position": "Frontend"
    },
    {
      "uuid": 2,
      "name": "Jim",
      "position": "Backend"
    }
  ],
  "environment": "development"
}

編寫好服務(wù)之后，我們調(diào)用獲取用戶的數(shù)據(jù)：

// user.component.ts

import { 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)
      }
    })
  }

}

因?yàn)闆]有引入后端服務(wù)，這里我們采用 localstorage 的方式記錄狀態(tài)。

上面完成后，我們得到列表信息如下：

新增用戶和編輯用戶

我們簡單建立個(gè)表單，里面含有的字段就兩個(gè)，分別是 name 和 position。這兩個(gè)功能是公用一個(gè)表單的～

我們在 html 中添加:

// user-info.component.html


  
    
      
    
  
  
    
      
    
  
  確認(rèn)

頁面長這樣子：

然后就是邏輯的判斷，進(jìn)行添加或者是修改。如果是連接帶上 uuid 的標(biāo)識(shí)，就表示是編輯，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';

@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')
    })
    // 是編輯狀態(tài)，設(shè)置標(biāo)志符
    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() {
    // 如果不符合提交，則報(bào)錯(cuò)
    if(!this.validateForm.valid) {
      Object.values(this.validateForm.controls).forEach((control: any) => {
        if(control?.invalid) {
          control?.markAsDirty();
          control?.updateValueAndValidity({ onlySelf: true });
        }
      })
      return
    }

    // 獲取到表單的數(shù)據(jù)
    const data = 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))
    }
  }

}

我們先設(shè)定一個(gè)標(biāo)志符 isAdd，默認(rèn)是新建用戶；當(dāng) uuid 存在的時(shí)候，將其設(shè)置為 false 值，表示是編輯的狀態(tài)，對內(nèi)容進(jìn)行表單的回填。提交表單的操作也是按照該標(biāo)志符進(jìn)行判斷。我們直接對 localStorage 的信息進(jìn)行變更，以保證同步列表信息。

刪除功能

我們引入模態(tài)對話框進(jìn)行詢問是否刪除。

// user.component.ts

// 刪除
delete(data: any) {
  this.modal.confirm({
    nzTitle: '你想刪除該用戶?',
    nzOnOk: () => {
      let users = JSON.parse(localStorage.getItem('users') || '[]');
      let filterList = users.filter((item: any) => item.uuid !== data.uuid);
      localStorage.setItem('users', JSON.stringify(filterList));
      this.list = filterList
    }
  });
}

我們找到刪除的數(shù)據(jù)，將其剔除，重新緩存新的用戶數(shù)據(jù)，并更新 table 的用戶列表數(shù)據(jù)。

以上就是“Angular+NG-ZORRO怎么開發(fā)一個(gè)后臺(tái)系統(tǒng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。