首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Angular+NG-ZORRO怎么开发一个后台系统

作者：灬毋黑色灬_447 | 来源：互联网 | 2023-05-19 04:55
今天小编给大家分享一下Angular+NG-ZORRO怎么开发一个后台系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享

今天小编给大家分享一下Angular+NG-ZORRO怎么开发一个后台系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

Angular+NG-ZORRO怎么开发一个后台系统

系统功能包括下面的内容：

  • 欢迎页面

  • 用户列表

  • 用户新增

  • 用户修改

  • 用户删除

所有的 service 使用模拟的数据。

说干咱就干。

结合 ng-zorro

angular 比较流行的 ui 框架有：

  • Angular Material 官方指定 UI 框架

  • NG-ZORRO，又名 Ant Design of Angular 国内比较流行的 UI 框架

Ant Design 相信做前端开发的人儿都比较熟悉了。所以这里我们结合 NG-ZORRO 这个框架来做。如果熟悉 Vue 或者 React 版本的 Ant Design，相信你可以无缝链接啊～

我们重新使用 angular-cli 生成一个项目 ng-zorro。

添加 ng-zorro 是很简单的事情：进入 ng-zorro 根目录，执行 ng add ng-zorro-antd 即可。

当然你也可以执行 npm install ng-zorro-antd 添加，不推荐。

结合 ng-zorro 完成之后，我们运行项目起来 npm run start，你会在 http://localhost:4200 的页面看到下图内容。

Angular+NG-ZORRO怎么开发一个后台系统

Not Bad, Bro.

配置路由

我们改成 hash 路由，并添加用户路由，脚手架都帮我们完事了，我们只要做点小修改。

思路：

  • 先添加页面 user 用户的列表页面，使用 ng-zorro 中 table 组件

  • 用户的新增和更改页面可以共用同一个页面，使用 ng-zorro 中 form 组件

  • 页面删除功能直接使用弹窗提示，使用 ng-zorro 中 modal 组件

  • 对 ng-zorro 组件按需引入

  • 调整路由文件

按照思路，我们得在 ng-zorro 引入：

// app.module.ts

import { ReactiveFormsModule } from &＃39;@angular/forms&＃39;;
import { NzTableModule } from &＃39;ng-zorro-antd/table&＃39;;
import { NzModalModule } from &＃39;ng-zorro-antd/modal&＃39;;
import { NzButtonModule } from &＃39;ng-zorro-antd/button&＃39;;
import { NzFormModule } from &＃39;ng-zorro-antd/form&＃39;;
import { NzInputModule } from &＃39;ng-zorro-antd/input&＃39;;


// ...

imports: [ // 是在 imports 中添加，而不是 declarations 中声明
  NzTableModule,
  NzModalModule,
  NzButtonModule,
  NzFormModule,
  ReactiveFormsModule,
  NzInputModule
],

简单易理解原则，我们这里不使用 children 进行路由的嵌套：

// app.routing.module.ts

import { NgModule } from &＃39;@angular/core&＃39;;
import { Routes, RouterModule, PreloadAllModules } from &＃39;@angular/router&＃39;;
import { WelcomeComponent } from &＃39;./pages/welcome/welcome.component&＃39;;
import { UserComponent } from &＃39;./pages/user/user.component&＃39;;
import { UserInfoComponent } from &＃39;./pages/user/user-info/user-info.component&＃39;;

// 相关的路由
const routes: Routes = [
  { 
    path: &＃39;&＃39;, 
    pathMatch: &＃39;full&＃39;, 
    redirectTo: &＃39;/welcome&＃39; 
  },
  {
    path: &＃39;welcome&＃39;,
    component: WelcomeComponent
  },
  {
    path: &＃39;user&＃39;,
    component: UserComponent
  },
  {
    path: &＃39;user/add&＃39;,
    component: UserInfoComponent
  },
  {
    path: &＃39;user/edit/:uuid&＃39;,
    component: UserInfoComponent
  }
];

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

更改菜单

使用脚手架生成的菜单与我们需要开发的功能不符合，我们来调整下。

// app.component.html


  
    
      
      
        
        
Ng-Zorro

      
    
                    
                           用户列表                    
                                                                   
                                
       

菜单展示，如果我们需要做权限管理的话，是需要后端配合进行传值的，然后我们再把相关的权限菜单渲染到页面

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

Angular+NG-ZORRO怎么开发一个后台系统

完成用户列表

接下来完成用户列表的骨架，因为使用了 UI 框架，我么写起来异常的方便：

获取用户列表

// user.component.html


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

我们模拟了些数据在 assets 文件夹中 user.json:

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

编写好服务之后，我们调用获取用户的数据：

// user.component.ts

import { Component, OnInit } from &＃39;@angular/core&＃39;;
import { UserService } from &＃39;src/app/services/user.service&＃39;;

@Component({
  selector: &＃39;app-user&＃39;,
  templateUrl: &＃39;./user.component.html&＃39;,
  styleUrls: [&＃39;./user.component.scss&＃39;]
})
export class UserComponent implements OnInit {

  public list: any = []

  constructor(
    private readonly userService: UserService
  ) { }

  ngOnInit(): void {
    if(localStorage.getItem(&＃39;users&＃39;)) {
      let obj = localStorage.getItem(&＃39;users&＃39;) || &＃39;{}&＃39;
      this.list =  JSON.parse(obj)
    } else {
      this.getList()
    }
  }

  // 获取用户列表
  getList() {
    this.userService.getUserList().subscribe({
      next: (data: any) => {
        localStorage.setItem(&＃39;users&＃39;, 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


  
    
      
    
  
  
    
      
    
  
  确认

页面长这样子：

Angular+NG-ZORRO怎么开发一个后台系统

然后就是逻辑的判断，进行添加或者是修改。如果是连接带上 uuid 的标识，就表示是编辑，show you the codes。

// user-info.component.ts

import { Component, OnInit } from &＃39;@angular/core&＃39;;
import { FormBuilder, FormGroup, Validators } from &＃39;@angular/forms&＃39;;
import { ActivatedRoute, ParamMap } from &＃39;@angular/router&＃39;;

@Component({
  selector: &＃39;app-user-info&＃39;,
  templateUrl: &＃39;./user-info.component.html&＃39;,
  styleUrls: [&＃39;./user-info.component.scss&＃39;]
})
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(&＃39;users&＃39;) || &＃39;[]&＃39;)
    this.route.paramMap.subscribe((params: ParamMap)=>{
      this.uuid = parseInt(params.get(&＃39;uuid&＃39;) || &＃39;0&＃39;)
    })
    // 是编辑状态，设置标志符
    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 = 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(&＃39;users&＃39;, 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(&＃39;users&＃39;, JSON.stringify(mapList))
    }
  }

}

我们先设定一个标志符 isAdd，默认是新建用户；当 uuid 存在的时候，将其设置为 false 值，表示是编辑的状态，对内容进行表单的回填。提交表单的操作也是按照该标志符进行判断。我们直接对 localStorage 的信息进行变更，以保证同步列表信息。

删除功能

我们引入模态对话框进行询问是否删除。

// user.component.ts

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

Angular+NG-ZORRO怎么开发一个后台系统

我们找到删除的数据，将其剔除，重新缓存新的用户数据，并更新 table 的用户列表数据。

以上就是“Angular+NG-ZORRO怎么开发一个后台系统”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程笔记行业资讯频道。


推荐阅读
author-avatar
灬毋黑色灬_447
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有