iT邦幫忙

1

Angular#5 專案:路由 登入系統>>首頁

joor 2021-05-02 02:34:421989 瀏覽

Angular

[目標]

  • 進入系統>>登入>>首頁
    https://ithelp.ithome.com.tw/upload/images/20210501/20137134BstMdWuxNl.png

1. VSCode 撰寫

  • app
    app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing/app-routing.module';

// 引用的模組、元件
import {FormsModule} from '@angular/forms';
// 模組設定
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, 
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • login
    https://ithelp.ithome.com.tw/upload/images/20210502/20137134NKwzMdOzcH.jpg
  1. login.component.ts
import { Component, OnInit } from '@angular/core';
// 引用的模組
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {

  }
  //宣告acct,pwd去接html[(ngModel)]的value
  public acct: string | undefined;
  public pwd: string | undefined;
  
  public login() {
  
  //回傳資料給後端做確認
  //我們先做個假資料,可以判斷 登入成功 或 登入失敗
    let username="joor";
    let userpwd="55688";
  
    if (this.acct == username && this.pwd == userpwd ) {
      this.router.navigate(['home']);
    } else {
      alert("登入失敗");
      this.acct = "";
      this.pwd = "";
    }
  }
}
  1. login.component.html
<div style="text-align:center;margin:0px auto;width:300px;height:250px;">
    <div style=" text-align:center ">
        <h3>LOGIN</h3>
    </div>
    <div style="width:100%;text-align:center;margin-bottom:30px;margin-top:10px">
        <div><input class="input" type='text' [(ngModel)]="acct" placeholder="Username"></div>
        <div><input class="input" type='text' [(ngModel)]="pwd" placeholder="Password"></div>
        <div><button class="loginbtn" (click)="login()">LOGIN</button></div>
    </div>
</div>
  1. login.component.css
.input{
    text-align: left;
    width: 70%;
    margin-bottom:5px;
    margin-top:5px;
}

.loginbtn{
    width: 72%;
    margin-bottom:5px;
    margin-top:5px;
}

3. 啟動專案

ng serve --open --port [XXXX]

範例ng serve --open --port 9985


4. 完成

帳號joor
密碼55688
https://ithelp.ithome.com.tw/upload/images/20210501/20137134kZjC70KXjd.png

https://ithelp.ithome.com.tw/upload/images/20210501/20137134Y0xyTHx9Fd.png


上一篇
[下一篇]待續。。。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言