ecmsloginphp技巧_Angular9Ant构建一个后台治理系统三

文章目录 [+]

本节内容中，我们要学会做我们的第一个页面，登录页面。

同时我们要学汇合成我们利用的UI框架Ant Design For Angular，NG-ZORRO。

ecmsloginphp技巧_Angular9Ant构建一个后台治理系统三

2. 集成NG-ZORRO2.1. NG-ZORRO简介

Ant Design ：源自蚂蚁金服体验技能部的后台产品开拓，蚂蚁金服的设计师和前端工程师经由大量的项目实践和总结，抽象出的一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现本钱，解放设计和前端开拓资源。
Ant Design供应了对Angular、Vue、React等前端框架的支持。

（图片来自网络侵删）

NG-ZORRO：是遵照 Ant Design 设计规范的 Angular UI 组件库，紧张用于研发企业级中后台产品。
全部代码开源并遵照 MIT 协议，任何企业、组织及个人均可免费利用。

官方网站可参考：https://ng.ant.design/docs/introduce/zh

2.2. NG-ZORRO安装

1、自动安装

只须要进入我们的工程目录，实行如下命令即可：

ng add ng-zorro-antd

VSCode中，步骤如下：

选择菜单栏中的终端（Terminal） - 新建终端（New Terminal），然后在新的终端窗口中输入上面的命令即可。

安装时会有选项提示，根据须要选择即可。

这样会自动安装成功NG-ZORRO。

我们可以启动工程看一下：

已经为我们配置了一个欢迎主页面，利用了侧边栏，而且侧边边栏是可以自动紧缩的。

2、我们也可以手动安装NG-ZORRO

首先，在工程目录下，实行安装组件命令：

npm install ng-zorro-antd --save

接着，我们引用样式:

在 angular.json 中引入:

{ "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ]}

在 style.css 中引入预构建样式文件:

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

末了，我们想利用哪个组件模块，就在app.module.ts中引入就可以利用了。
举个例子，我们要利用按钮组件，须要引入NzButtonModule：

import { NgModule } from '@angular/core';import { NzButtonModule } from 'ng-zorro-antd/button';import { AppComponent } from './app.component';@NgModule({ declarations: [ AppComponent ], imports: [ NzButtonModule ]})export class AppModule { }

然后在模板中利用：

<button nz-button nzType="primary">Primary</button>3. 制作登录页面3.1. 引入NG-ZORRO的Form表单组件

登录页面紧张显示的都是表单，因此须要引入表单组件，在app.module.ts文件中增加如下部分代码：

import { NzFormModule } from 'ng-zorro-antd/form';import { NzButtonModule } from 'ng-zorro-antd/button';import { NzInputModule } from 'ng-zorro-antd/input';import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';@NgModule({ declarations: [ AppComponent ], imports: [ NzFormModule, NzButtonModule, NzInputModule, NzCheckboxModule ]})export class AppModule { }

上述代码中忽略了既有的其他代码。
我们只须要导入包：

然后在@NgModule 的 imports属性中，增加NzFormModule、NzButtonModule、NzInputModule、 NzCheckboxModule即可。

3.2. 利用脚手架创建登录页面

切换到我们工程下的pages目录，完全路径：src/app/pages/。
我们所有的页面都会放在这个目录下掩护。

然后输入如下命令，创建login组件：

ng generate component login

全过程如下：

PS D:\ECMS\ecms-web\src\app\pages> ng generate component loginMore than one module matches. Use skip-import option to skip importing the component into the closest module.PS D:\ECMS\ecms-web\src\app\pages> ng generate component login --skip-importCREATE src/app/pages/login/login.component.html (20 bytes)CREATE src/app/pages/login/login.component.spec.ts (621 bytes)CREATE src/app/pages/login/login.component.ts (271 bytes)CREATE src/app/pages/login/login.component.css (0 bytes)PS D:\ECMS\ecms-web\src\app\pages>

第一次实行ng generate component login命令时提示More than one module matches，我们只须要加入--skip-import 参数即可。

天生的代码如下：

3.3. 创建登录表单

1、在login.component.html中加入如下代码：

2、在login.component.css中加入如下代码：

.login-form { max-width: 300px;}.login-form-margin { margin-bottom: 16px;}.login-form-forgot { float: right;}.login-form-button { width: 100%;c}

3、在login.component.ts中加入如下代码：

import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms'; // 导入构建表单须要的干系组件import { Router } from '@angular/router'; // 导入Router组件@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']})export class LoginComponent implements OnInit { validateForm!: FormGroup; // 定义表单组 constructor(private fb: FormBuilder, private router: Router) { } // 注入FormBuilder工具和Router工具 ngOnInit(): void { // 构建表单工具 this.validateForm = this.fb.group({ userName: [null, [Validators.required]], password: [null, [Validators.required]], remember: [true] }); } // 表单提交 submitForm(): void { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); } // 表单验证失落败返回 if (this.validateForm.invalid) { return; } // 表单验证通过，调用登录逻辑 // 登录代码忽略 // 登录成功跳转到welcome 页面 this.router.navigate(['welcome']); }}4. 配置路由

我们修正途由把登录页面设置为默认加载页面：

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { LoginComponent } from './pages/login/login.component';import { WelcomeComponent } from './pages/welcome/welcome.component';const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'login' }, // 当前网站根 { path: 'login', component: LoginComponent, data: { title: '登录' } }, { path: 'welcome', component: WelcomeComponent }];@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }5. 导入LoginComponent组件

我们修正app.module.ts文件，添加如下的组件引用：

import { LoginComponent } from './pages/login/login.component';import { WelcomeComponent } from './pages/welcome/welcome.component';@NgModule({ declarations: [ AppComponent , LoginComponent , WelcomeComponent ], imports: [ ], providers: [], bootstrap: [AppComponent]})export class AppModule { }

代码中我忽略了不相关的代码。

6. 启动

我们启动工程来看一下效果：

直接点击登录看一下：

我们随便输入一个用户名和密码，点击登录看看：

成功地跳转到了welcome页面。

7. 小结

本篇教程中我们学习了如何集成NG-ZORRO到Angular工程中，然后我们考试测验着，利用NG-ZORRO的表单组件，构建了一个登录页面。
并配置了网站的默认页面为登录页面。
大家可以看到利用Angular + NG-ZORRO构建一个前真个网站是如此大略。