移动开发：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?

这个问题我会单独写一篇文章，这里如果你也遇到了类似的问题，不要慌，静等我的下一篇博客。

二、登录效果展示

来源：oschina

链接：https://my.oschina.net/cztblog/blog/4284654