由于项目是前后端分离式开发，所以移动端使用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?
这个问题我会单独写一篇文章，这里如果你也遇到了类似的问题，不要慌，静等我的下一篇博客。
二、登录效果展示
