環境配置

ionic start async-login blank

一、登錄與登出界面

1. 使用命令行生成界面

ionic generate page login
ionic generate page logout

2. 註冊登錄與登出界面

3. 登錄界面

<ion-header>

  <ion-navbar>
    <ion-title text-center>登錄</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form #f="
 
ngForm" (ngSubmit)="onLogin(f)">
    <ion-list>
      <ion-item>
        <ion-label floating>用戶名</ion-label>
        <ion-input type="text" ngModel name="username" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>密碼</ion-label>
        <ion-input type="
 
password" ngModel name="password"></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button full type="submit" [disabled]="!f.valid">登錄</button>
  </form>
</ion-content>

4. 登錄界面控制

import { Component } from ‘@angular/core‘;
import { NavController, NavParams } 
 
from ‘ionic-angular‘;
import { NgForm } from "@angular/forms";

import { HomePage } from ‘../home/home‘;

@Component({
  selector: ‘page-login‘,
  templateUrl: ‘login.html‘,
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log(‘ionViewDidLoad LoginPage‘);
  }

  onLogin(form: NgForm) {
    console.log(form.value);
  }

}

調試， 控制臺會輸出用戶名與密碼

二、實現服務

ionic generate provider Auth

1. 在src目錄下新建services目錄

2. 在services目錄下新建auth.ts文件

export class AuthService {
  login(username: string, password: string) {
    console.log(username);
    console.log(password);
  }
}

3. 在app.module中provider中註冊服務

4. 在 login模塊中導入且在construct中聲明

5. 在login模塊中onLogin方法傳遞值

  onLogin(form: NgForm) {
    // console.log(form.value);
    this.authService.login(form.value.username, form.value.password);
  }

ionic 實現登錄界面與驗證