整站优化

查看: 88|回复: 0

Angular9+Ant构建一个后台管理系统(三)

[复制链接]

120

主题

120

帖子

372

积分

中级会员

Rank: 3Rank: 3

积分
372
 楼主| 发表于 2021-6-11 19:54:39| 字数 7,782 | 显示全部楼层 |阅读模式
Angular9+Ant构建一个背景治理体系(三)整站劣化,1. 媒介
5 l) s1 h& f( P
8 V, g6 [1 U( w上一节中我们教会了装置TypeScript撑持,和建立了一个根本的Angular工程。并实验启动了工程,看到了尾页。% K3 ]1 T) W2 C; R0 t7 j1 B
本节内乱容中,我们要教会做我们的第一个页里,登录页里。. ^2 }- N5 N/ ?- E1 |% y
同时我们要教会合成我们利用的UI框架Ant Design For Angular,NG-ZORRO4 K/ p$ ]9 j: ]8 J0 E. R; H
2. 散成NG-ZORRO& h4 s& T( P7 W8 V% T! Z
/ v1 w' G( U% M" ^. g% S$ E
2.1. NG-ZORRO简介
1 _2 E% T( o% W2 S, X* G9 A" f/ S7 p& D$ A
Ant Design :源自蚂蚁金服体验手艺部的背景产物开辟,蚂蚁金服的设想师战前端工程师经由大批的项目理论战总结,笼统出的一套企业级的交互视觉标准,同一背景项目标前端 UI 设想,屏障种种没必要要的设想差别战前端完成本钱,束缚设想战前端开辟资本。Ant Design供给了对Angular、Vue、React等前端框架的撑持。
& J. L3 k4 Z& iNG-ZORRO:是遵照 Ant Design 设想标准的 Angular UI 组件库,次要用于研收企业级中背景产物。所有代码开源并遵照 MIT 和谈,任何企业、构造及小我私家都可免费利用。9 u; n2 `6 D- E, _& O. }* E7 J
民圆网站可参考:https://ng.ant.design/docs/introduce/zh
. ^1 R7 W, M( V, x# e+ d, L% u2.2. NG-ZORRO装置
8 k2 u6 x: {; b$ t$ X& ]
5 U  w% l5 P3 I6 ]7 f1、主动装置
) ]( p# B: }1 ^% y9 N' v/ W' i. @只需求进进我们的工程目次,施行以下下令便可:. y, r8 H3 D! P
ng add ng-zorro-antdVSCode中,步调以下:
3 D! n1 O8 D# c, E挑选菜单栏中的末端(Terminal) - 新建末端(New Terminal),然后正在新的末端窗心中输进上里的下令便可。8 y( {: a& I# e5 y
6 V" I4 t9 Q4 w& d5 S# ~

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)
; B; J; M  Z9 U& T+ }2 ~7 j
% m0 m( J! N* X: Y7 u$ p9 L7 m; U% n

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)

$ c$ ?) ~* n% |) _* [1 p! r3 n- v/ ]) k$ d6 q6 @

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)
* p' X  ]- a7 q. Y0 j* U  y
装置时会有选项提醒,凭据需求挑选便可。
% n6 p* j% J' x: x( F3 i, V如许会主动装置乐成NG-ZORRO。8 c; y% z+ M/ O$ T: b
我们能够启开工程看一下:1 H6 V9 C. V; v5 B- E8 C% x
/ w+ ]0 y1 J6 b& K: X- f1 b

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)

5 v% F3 _- Z( T1 f" T% h0 E6 n曾经为我们设置了一个接待主页里,利用了侧边栏,并且侧边边栏是能够主动缩短的。' f) k" v* J: @  [' B
1 `, D  F3 W' s5 C

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)
6 k4 ?6 Q1 q2 E+ I( i! F1 G$ Z
2、我们也能够脚动装置NG-ZORRO+ p* u% o4 W5 I& m$ a7 _" R
起首,正在工程目次下,施行装置组件下令:5 q5 p: i' {& R1 }
npm install ng-zorro-antd --save接着,我们援用款式:
7 S) H7 d/ L1 S2 U& x4 g正在 angular.json 中引进:4 W: Q! c8 M$ k9 W3 L- H! I8 @8 A, x
{  "styles": [    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"  ]}正在 style.css 中引进预构建款式文件:
' N/ j' r% z4 \( d( O6 F@import "~ng-zorro-antd/ng-zorro-antd.min.css";最初,我们念利用哪一个组件模块,便正在app.module.ts中引进就能够利用了。举个例子,我们要利用按钮组件,需求引进NzButtonModule:
  q5 e; P. ^& Q% `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 { }然后正在模板中利用:
5 W! {% u- a  b! j" G% |<button nz-button nzType="primary">Primary</button>3. 建造登录页里/ W  E/ N6 q8 V: b& Z# F/ G

* T9 J8 V6 L8 Q* }3.1. 引进NG-ZORRO的Form表单组件
# u5 C3 @* L% q# T. r) G" P' V8 {, |2 n  t1 g
登录页里次要显现的皆是表单,因而需求引进表单组件,正在app.module.ts文件中增添以下部门代码:( ~7 G& c' z/ Z$ q( Z1 C- d# C
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 { }上述代码中疏忽了 既有的其他代码。我们只需求导进包:/ y: O+ u9 Z8 [1 G, x1 l# b$ h
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 的 imports属性中,增添NzFormModule、NzButtonModule、NzInputModule、 NzCheckboxModule便可。
" n! o& o; e! H+ g3.2. 利用足脚架建立登录页里3 X" G6 g3 O. i/ d, Z
$ v8 G( D0 Z/ P  ]! F  C, X. [
切换到我们工程下的pages目次,完好途径:src/app/pages/。我们一切的页里都市放正在那个目次下保护。
& k: L( M" Q# I/ c% r然后输进以下下令,建立login组件:2 U. Q4 h* O3 A( T
ng generate component login齐历程以下:+ i; G* f7 u( Q: e, G* K
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 参数便可。
( [' h# C7 W0 d) Q) ^天生的代码以下:
! Z+ I. d) {: D7 @9 c
! r* p# {* e. C- V: [5 Q$ K! D3 F) q$ S

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)
" Q* Q, k$ @# `
3.3. 建立登录表单
+ \, A& J$ x4 o# J8 x% \5 c3 R* C& U1 z( W8 {2 v$ G- E
1、正在login.component.html中参加以下代码:; |9 U. z% l  i- B# k
<div style="text-align: center; margin: auto">  <i class="fa fa-superpowers fa-4x" style="color: #40a9ff;"></i><!-- 那里安排LOGO -->  <span class="align-middle" style="font-size:65px; color:grey;"> ECMS</span></div><div style="margin: 25px auto auto auto;">  <form nz-form [formGroup]="validateForm" class="login-form" style="margin: auto;" (ngSubmit)="submitForm()">    <nz-form-item>      <nz-form-control nzErrorTip="请输进登任命户名!">        <nz-input-group nzPrefixIcon="user">          <input type="text" nz-input formControlName="userName" placeholder="用户名/脚机/邮箱" />        </nz-input-group>      </nz-form-control>    </nz-form-item>    <nz-form-item>      <nz-form-control nzErrorTip="请输进登录暗码!">        <nz-input-group nzPrefixIcon="lock">          <input type="password" nz-input formControlName="password" placeholder="暗码" />        </nz-input-group>      </nz-form-control>    </nz-form-item>    <div nz-row class="login-form-margin">      <div nz-col [nzSpan]="12">        <label nz-checkbox formControlName="remember">          <span>记着</span>        </label>      </div>      <div nz-col [nzSpan]="12">        <a class="login-form-forgot">遗忘暗码?</a>      </div>    </div>    <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button>    大概 <a> 来注册! </a>  </form></div>2、正在login.component.css中参加以下代码:$ \0 G# @" F+ q9 A4 ^
.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中参加以下代码:  @3 l1 S4 \' Q5 j! J
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.markAsDirty();      this.validateForm.controls.updateValueAndValidity();    }    // 表单考证失利返回    if (this.validateForm.invalid) {      return;    }    // 表单考证经由过程,挪用登录逻辑    // 登录代码疏忽    // 登录乐成跳转到welcome 页里    this.router.navigate(['welcome']);  }}4. 设置路由2 h9 ~2 \% F9 j0 U! E' C+ T; O) G( Q( z
# d  i0 D) ]; N% V, ^: {' ?
我们修正路由把登录页里设置为默许减载页里:# R9 n+ e$ T% p4 L8 m: P
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组件
, |! l) C# [0 G; D, O7 j
* E+ ^8 @/ t. ^8 m& ~我们修正app.module.ts文件,增加以下的组件援用:
2 ^8 ~! n$ Z8 Z/ @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 { }代码中我疏忽了没有相关的代码。
/ O: @; N4 }, l6 j0 S. `6. 启动& H+ ^- i0 M$ e- M" m& G: ]0 j6 L

* X/ |  x" w" b* u$ T. X我们启开工程去看一下结果:* |+ E' y. @! K1 }5 [3 T: G7 g
- w' @# j6 F5 t1 x, T1 D

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)
% c8 n% o% G/ A. c' a
间接面击登录看一下:5 D8 _' `$ t& q6 u
5 t8 M2 }) I$ w4 l

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)

4 G1 D% d8 N. |我们随意输进一个用户名战暗码,面击登录看看:2 S# k, L+ I% s- J- f

% Q4 z$ k) x4 |( l

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)

+ S  S5 {# z  R, |2 ^
; \+ T1 A# B* E, N; t8 y1 t

Angular9+Ant构建一个背景治理体系(三)

Angular9+Ant构建一个背景治理体系(三)

5 k, `7 c; L1 w乐成天跳转到了welcome页里。% ^, E; ^, i* R" j) W3 F3 w
7. 小结
, K" p2 h0 @/ Z. J& D% e" e
# j0 m. P- G4 a# P本篇教程中我们进修了怎样散成NG-ZORRO到Angular工程中,然后我们实验着,利用NG-ZORRO的表单组件,构建了一个登录页里。并设置了网站的默许页里为登录页里。各人能够看到 利用Angular + NG-ZORRO构建一个前真个网站是云云简朴。3 \1 S4 m: g5 S
! P! q- I; M7 ^) a" G
本文链接:捡着六便士瞻仰玉轮|存眷整站劣化网 进修更多seo相干要领...
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • QQ|Archiver|手机版|小黑屋|整站优化 — 整站SEO优化,万维网 SEO 整站优化网 ( 粤ICP备19158344号 ) |

    GMT+8, 2021-6-19 14:59 , Processed in 0.100370 second(s), 30 queries , Gzip On, Redis On.

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表