用户注册

model：临时、过渡的一个弹窗
nav：用于层级关系的页面的展示 this.navCtrl.pop(); nav过渡出去的页面必须用pop返回到上一页面
验证优缺点

前后端验证区别

前端验证	优点	快，不需要后台返回结果即可提示用户哪里出错了
	缺点	整体代码的灵活性被限制在了固定的App版本中
后台验证	优点	灵活性，提示用户的信息或者业务逻辑可以随时变更
	缺点	慢，增加服务器的压力，占用一些用户的流量

用户登录

• 创建register文件夹

ionic g page register

• register.html文件

<!--
  Generated template for the RegisterPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>用户注册</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list>
    <ion-item>
      <ion-label stacked>手机号码</ion-label>
      <ion-input type="text" [(ngModel)]="mobile"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label stacked>昵称</ion-label>
      <ion-input type="text" [(ngModel)]="nickname"></ion-input>
    </ion-item>

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

    <ion-item>
      <ion-label stacked>确认密码</ion-label>
      <ion-input type="password" [(ngModel)]="confirmPassword"></ion-input>
    </ion-item>

  </ion-list>
  <div padding>
    <button ion-button color="primary" block (click)="doRegister()">注 册</button>
  </div>
  <div padding text-center>
    <button ion-button color="primary" outline (click)="gotoLogin()">已有账号？登录</button>
  </div>
</ion-content>

• register.ts文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseui';
import { RestProvider } from '../../providers/rest/rest';

/**
 * Generated class for the RegisterPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage extends BaseUI {

  public mobile: string;
  public nickname: string;
  public password: string;
  public confirmPassword: any;
  public errorMessage: any;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public loadingCtrl: LoadingController,
    public rest: RestProvider,
    public toastCtrl: ToastController) {
    super()
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RegisterPage');
  }

  dismiss() {
    this.viewCtrl.dismiss();    //自身modal隐藏
  }

  gotoLogin() {
    this.navCtrl.pop();
  }

  doRegister() {
    //前台验证表单数据的正确性，包括手机号码、昵称长度、密码长度
    //验证国内手机号码的格式，考虑所有的当前手机号码的可能性
    //第一位数字为1，第二位数字在[34578]中任选一位
    if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
      //后台进行大数据的保存
      super.showToast(this.toastCtrl, "您的手机号码格式不正确")
    } else if (this.nickname.length < 3 || this.nickname.length > 10) {
      super.showToast(this.toastCtrl, "昵称长度在3~10位之间")
    } else if (this.password.length < 6 || this.password.length > 20
      || this.confirmPassword.length < 6 || this.confirmPassword.length > 20) {
      super.showToast(this.toastCtrl, "密码长度在6~20位之间")
    } else if (this.password !== this.confirmPassword) {
      super.showToast(this.toastCtrl, "两次输入密码不匹配")
    } else {
      let loading = super.showLoading(this.loadingCtrl, '注册中...');
      this.rest.register(this.mobile, this.nickname, this.password)
        .subscribe(
          f => {
            loading.dismiss();
            super.showToast(this.toastCtrl, "注册成功")
            if (f["Status"] == "OK") {
              this.dismiss();
            } else {
              loading.dismiss();
              super.showToast(this.toastCtrl, f["StatusContent"])
            }
          },
          error => this.errorMessage = <any>error);
    }


  }

}

在rest.ts文件中添加register（注册）的API

  /**
   * 注册登录
   * 
   * @param {any} mobile 
   * @param {any} nickname 
   * @param {any} password 
   * @returns {Observable<string[]>} 
   * @memberof RestProvider
   */
  register(mobile, nickname, password): Observable<string[]> {
    return this.getUrlReturn(this.apiUrlRegister + '?mobile' + mobile + '&nickname=' + nickname + "&password" + password)
  }

如何全局修改=>Back

  imports: [
    BrowserModule,
    HttpModule,   //全局需要导入http
    IonicModule.forRoot(MyApp, {
      backButtonText: '返回',
    }),
    IonicStorageModule.forRoot()  //全局定义storage的模块
  ],