站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-04-22 [网络编程]作者:fabuyuan 浏览:10 次

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

连更的这几天的文章,我们已经了解了不少 angular 的知识点了,这次我们来个小成品。

angualr 结合 ng-zorro 快速且规范的开发一个后台系统。【相关教程推荐:《angular教程》】

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

  • 欢迎页面
  • 用户列表
  • 用户新增
  • 用户修改
  • 用户删除

所有的 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 的页面看到下图内容。

Not Bad, Bro.

配置路由

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

思路:

  • 先添加页面 user 用户的列表页面,使用 ng-zorrotable 组件

  • 用户的新增和更改页面可以共用同一个页面,使用 ng-zorroform 组件

  • 页面删除功能直接使用弹窗提示,使用 ng-zorromodal 组件

  • ng-zorro 组件按需引入

  • 调整路由文件

按照思路,我们得在 ng-zorro 引入:

// 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
],

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

// 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';

// 相关的路由
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

<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <!-- 默认点击 logo 跳转到首页 -->
      <a routerLink="/welcome">
        <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="用户管理" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/user">用户列表</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>

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

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

完成用户列表

接下来完成用户列表的骨架,因为使用了 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.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)
      }
    })
  }

}

因为没有引入后端服务,这里我们采用 localstorage 的方式记录状态。

上面完成后,我们得到列表信息如下:

新增用户和编辑用户

我们简单建立个表单,里面含有的字段就两个,分别是 nameposition。这两个功能是公用一个表单的~

我们在 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.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')
    })
    // 是编辑状态,设置标志符
    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('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))
    }
  }

}

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

删除功能

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

// user.component.ts

// 删除
delete(data: any) {
  this.modal.confirm({
    nzTitle: '<i>你想删除该用户?</i>',
    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
    }
  });
}

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

So,到此为止,我们顺利完成了一个简单的项目。我们用 Gif 图整体来看看。

【完】

更多编程相关知识,请访问:编程入门!!

以上就是Angular + NG-ZORRO快速开发一个后台系统的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Angular

转载请注明来源:Angular + NG-ZORRO快速开发一个后台系统

本文永久链接地址:https://www.adminjie.com/post/11450.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle怎么使外键失效

      oracle怎么使外键失效

      在oracle中,可以利用altertable语句配合disableconstraint使外键失效,语法为“altertable表名disablec...

    • jquery get可以有几个参数

      jquery get可以有几个参数

      get()可以有4个参数:1、第一个参数不可省略,用于规定需要请求的URL;2、第二个参数可省略,用于规定连同请求发送到服务器的数据;3、第三参数可省略,指定当...

    • jquery怎么改变a标签值

      jquery怎么改变a标签值

      改变方法:1、选取a标签,语法“$("选择器")”,会返回一个包含a标签的jQuery对象;2、用text()或html()修改指定a标签对象的内容值,语法“a...

    • Oracle的12505错误怎么解决

      Oracle的12505错误怎么解决

      12505错误的出现原因是“service_name”和sid不一致。解决方法:1、使用“selectINSTANCE_NAMEfromv$instanc...

    • jquery移动端库有哪些

      jquery移动端库有哪些

      jquery移动端库有:1、Mobiscroll,用于触屏设备的旋转滚动、日期和时间选择;2、“Ion.Sound”,用于即时声音通知;3、mmenu,用于创建...

    热门文章