Angular完整项目开发8 - 制作登录功能

本周抽出业余时间做完了Angular前端系统的登录功能，在界面布局的问题上折腾了不少时间。内容记录如下：

1. 添加用户实体类（sysuser)

sysuser/sysuser.ts

export class Sysuser {
    id: number;
    username: string;
    password: string;
    name: string;
}

2. 添加登录模块（login)

ng generate component login

3. 制作登录界面

login.component.html

<div class="container">
  <div class="login-form">
    <h1 style="font-family: 微软雅黑;">用户登录</h1>
      <mat-form-field appearance="outline" style="width: 100%;">
        <mat-label>用户名</mat-label>
        <input matInput [(ngModel)]="user.username" placeholder="用户名" >
      </mat-form-field>
      <mat-form-field appearance="outline" style="width: 100%;">
        <mat-label>密码</mat-label>
        <input matInput type="password" [(ngModel)]="user.password" placeholder="密码">
      </mat-form-field>
      <br>
      <div class="button-row">
        <button mat-raised-button (click)="login()" color="primary"  class="login-button">登录</button>
      </div>
  </div>
</div>

login.component.css, 在assets/img目录下放了一个图片，作为登录界面的背景图。

.container {
    display: flex;
    width:100%;
    height:100%;
    background-image: url(../../assets/img/bg.png);
    background-position: center;
    /*background-color: chocolate;*/
}

.login-form {
    background-color:white;
    max-width: 250px;
    padding: 19px 29px 29px;
    margin: 60px auto auto auto;
    border: 1px solid darkolivegreen;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    justify-content: center;
  }

.button-row{
      display: flex;
      justify-content: center;
  }

.login-button{
    width: 50%;
    font-size: 18px;
    font-family: 微软雅黑;
}

其他：

style.css

html, body  {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    margin:0;
}

app-root {
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    display: block;
}

app.component.css

router-outlet {
   display: flex;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background-color: lightcoral;
}

...

效果：

4. 添加登录功能逻辑

服务器端定义好的登录返回内容格式如下：

{
"status":"ok",
"sysUser":{"id":1,"username":"admin","password":"123","name":"管理员"}
}

添加service部分，login.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { commonURL } from '../../global';
import { Sysuser } from '../sysuser/sysuser';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor(private http: HttpClient) { }

  url = commonURL + '/login';

  login(sysuser:Sysuser):Observable<any> {
    return this.http.post(this.url, sysuser);
  }

}

login.component.ts: 

...
import { Router } from '@angular/router';
import { Sysuser } from '../sysuser/sysuser';
import { LoginService } from './login.service';
...
export class LoginComponent implements OnInit {

  constructor(private loginService: LoginService, private router: Router) { }

  user = new Sysuser(); //与login.component.html动态数据绑定
  ...
  login() {
    this.loginService.login(this.user).subscribe(
      (data)=>{           
          if(data["status"]=="ok"){
             this.router.navigate(['kw/device']) //成功后url跳转
          }else{
             alert("登录失败：" + data["sysUser"]);
          }
       }
    );
  }
}

效果：登录成功后跳转到了kw/device路径，也就是进入了device组件中