基于ionic的Angular 4与Express之间通信框架的搭建

ionic中的前后台通信架构与Clever中写的大同小异，有些方言改一改就好。

1. 登录页设计，是在ionic官方提供的网址拖出来的，设计好之后下载下来，体现POST提交方式。

    
        
        登录
        
    


    

        
            
                
                用户名
                
                 // Angular 4 风格的数据绑定
            
            
                
                密码
                
                
            
        
        
            
                Remember me
            
            
        
         // Angular 4 风格的数据绑定
        登录
        
        

        
        注册账户
        
    

2. home页设计，体现GET提交方式。

    
        
            
        
        
            Home
        
    


    
         // Angular 4 语法
            {{item.name}} // Angular 4 风格的数据绑定
        
    

3. 其它

都跟Clever中的一样，比较都是Angular 4 的东西，只是在ionic中的跳转是这么写的：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { RegisterPage } from '../register/register';
import { SubmitService } from '../../providers/submit.service'

@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})
export class LoginPage {
    errorMessage: string;
    constructor(public navCtrl: NavController, private submitService: SubmitService) {
    }
    goToHome(params){
        if (!params) params = {};
        this.navCtrl.setRoot(HomePage);
    }
    goToRegister(params){
        if (!params) params = {};
        this.navCtrl.push(RegisterPage);
    }
    loginAction (loginname: string, loginpass: string) {
        let respData = '';
        if (!loginname || !loginpass) {return; }
        const loginUrl = '/login/login';
        const params = {
            loginName: loginname,
            loginPass: loginpass
        };
        this.submitService.postSubmit(loginUrl, JSON.stringify(params))
        .then(
            responseData  => respData = responseData,
            error =>  this.errorMessage = error)
        .then(() => {
            const x = JSON.parse(respData);
            if (x === '1') {
                this.navCtrl.setRoot(HomePage);
            }else {
                alert('登录失败！');
            }
        });
    }
}

其中，this.navCtrl.setRoot(HomePage)和this.navCtrl.push(HomePage)前者是将后页设为根，后者是后页设为前页的下级页，在后页中会显示返回按键的。