移動開發：Ionic框架實現註冊與登錄功能

由於項目是前後端分離式開發，所以移動端使用ionic框架，後端API接口使用SpringBoot框架。註冊與登錄的後端實現可以參考我的這篇文章：後端開發：SpringBoot實現註冊與登錄功能。ionic框架實現註冊與登錄其實就是調用後端API接口對數據進行處理。移動端主要負責界面的設計和接口的調用。

---

一、代碼部分

1、創建模型類

根據數據庫的字段進行建模，在model文件夾下創建一個Typescript文件，命名爲Users。代碼如下：

export class Users{
    usersid:string;
    pass:string;
    roleid:string;
    username:string;
    cellphone:string;
    nickname:string;
    icon:string;
    sex:string;
}

2、創建service

創建命令：ionic g service service/auth

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {ConfigService} from "./config.service";
import {Users} from "../model/Users";

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

    constructor(private http:HttpClient,private config:ConfigService) { }

    //用戶信息添加及修改
    private addOrUpdateUserUrl=this.config.HOST+"/public/saveUser";
    addOrUpdateUser(users:Users){
        return this.http.post(this.addOrUpdateUserUrl,users).toPromise();
    }

    //登錄
    private loginUrl=this.config.HOST+"/public/login";
    login(username:string,
          password:string){
        let parm={
            "username":username,
            "password":password
        }
        return this.http.post(this.loginUrl,parm).toPromise();
    }


}

3、創建註冊頁面

創建頁面命令：ionic g page page/regist

（1）、邏輯部分代碼——regist.page.ts

import { Component, OnInit } from '@angular/core';
import {Users} from '../../model/Users';
import {AuthService} from "../../service/auth.service";
import {ToastService} from "../../service/toast.service";

@Component({
  selector: 'app-regist',
  templateUrl: './regist.page.html',
  styleUrls: ['./regist.page.scss'],
})
export class RegistPage implements OnInit {
    user:Users;
  constructor(private authservice:AuthService
      ,private toastservice:ToastService) {
      this.user=new Users();
  }

  ngOnInit() {
  }

  //保存方法
    save(){
        console.dir(this.user);

        this.authservice.addOrUpdateUser(this.user)
            .then((data:any)=>{
                if(data.msg=='ok'){
                    this.toastservice.showSuccessToast('保存成功');
                }
                else{
                    this.toastservice.showErrrorToast('保存失敗，請重試');
                }
            })
    }

}

（2）、註冊界面HTML部分代碼

<ion-header>
  <ion-toolbar>
    <!--添加返回按鈕-->
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>

    <ion-title>用戶註冊</ion-title>
    <!--爲保存按鈕添加點擊事件-->
    <ion-button slot="end" size="small" (click)="save()">保存</ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-item>
      <ion-label position="stacked">用戶名</ion-label>
      <ion-input [(ngModel)]="user.username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">密碼</ion-label>
      <ion-input type="password" [(ngModel)]="user.pass"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">聯繫電話</ion-label>
      <ion-input [(ngModel)]="user.cellphone"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">暱稱</ion-label>
      <ion-input [(ngModel)]="user.nickname"></ion-input>
    </ion-item>


    <ion-item>
      <ion-label position="stacked">頭像地址</ion-label>
      <ion-input [(ngModel)]="user.icon"></ion-input>
    </ion-item>


    <ion-radio-group [(ngModel)]="user.sex">
      <ion-list-header>
        <ion-label>
          性別
        </ion-label>
      </ion-list-header>

      <ion-item>
        <ion-label>男</ion-label>
        <ion-radio value="M"></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>女</ion-label>
        <ion-radio value="F"></ion-radio>
      </ion-item>

    </ion-radio-group>
  </ion-list>

</ion-content>

（3）、註冊界面效果圖

4、創建登錄模塊組件

登錄這裏使用組件化（component），主要是因爲要實現軟件打開時會自動彈出登錄頁面。可以通過組件來實現。

（1）、創建登錄組件

創建命令：ionic g component components/login

（2）、登錄界面邏輯代碼——login.component.ts

import { Component, OnInit } from '@angular/core';
import {AuthService} from "../../service/auth.service";
import {ToastService} from "../../service/toast.service";

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
    username:string;
    password:string;
    constructor(private authservice:AuthService
        ,private toastservice:ToastService) { }

    ngOnInit() {}

//點擊登錄按鈕觸發的事件方法
    login(){
        this.authservice.login(this.username,this.password)
            .then((data:any)=>{

                if(data.msg=='ok'){
                    this.toastservice.showSuccessToast('登錄成功');
                }
                else {
                    this.toastservice.showWarningToast('用戶名或是密碼錯誤，請重試');
                    this.username="";
                    this.password="";
                }

            })
    }

}

(3)、登錄界面HTML代碼

<ion-list>
  <ion-item>
    <ion-label position="stacked">用戶名</ion-label>
    <ion-input [(ngModel)]="username"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">密碼</ion-label>
    <ion-input [(ngModel)]="password"></ion-input>
  </ion-item>

  <ion-button  (click)="login()">登錄</ion-button>
  <ion-button color="danger">重置</ion-button>


</ion-list>

5、在app.module.ts中註冊組件

在app.module.ts的imports版塊中加入：FormsModule

6、在tabs中設置彈出框

（1）、tabs.page.ts中添加彈出框的觸發方法

import { Component } from '@angular/core';
import {ModalController} from "@ionic/angular";
import {ModalOptions} from '@ionic/core'
import {LoginComponent} from '../components/login/login.component';


@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  constructor(public modalController: ModalController) {}

    //當軟件開始運行時調用presentModal方法，彈出登錄窗口
    ngOnInit(){
        this.presentModal();
    }


    //彈出登錄窗口
    async presentModal() {
        const modal = await this.modalController.create(<ModalOptions>{
            component: LoginComponent
        });
        return await modal.present();
    }

}

這個時候正常情況登錄界面的效果就做完了，不過因爲我用的ionic版本過高，遇到了一個問題。報錯：

Error: No component factory found for LoginComponent. Did you add it to @NgModule.entryComponents?

這個問題我會單獨寫一篇文章，這裏如果你也遇到了類似的問題，不要慌，靜等我的下一篇博客。

二、登錄效果展示