大牛's 筆記

前端頁面使用 Angular2 框架，後端則用 Asp.Net Core Web API

 

首先建立基本結構 passlogin.component.ts 檔(前半部)如下：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Headers, Http, Response } from '@angular/http';

//引用Model UserInfo
import { UserInfo } from '../../hero';

import 'rxjs/add/operator/map';


@Component({
    selector: 'my-passlogin',
    templateUrl: '../View/Login/passlogin.component.html',
    providers: [UserInfo] //引入你需要用的Model
})

 

建立一個 Model 讓前端可以用物件的方式來存取：

export class UserInfo {
    UserInfo_sn: number;
    Auth_code_sn: number;
    Gov_code_sn: number;
    username: string;
    userid: string;
    usermail: string;
    usertel: string;
    userphone: string;
    userpassword: string;
    isvalid: boolean;
    inputdate: string;
    lastlogindate: string;
}

 

 

接著先來了解 HTML 標頭的 Content-Type 分別有以下四種：

1.  application/x-www-form-urlencoded
2.  application/json
3.  text/xml
4.  multipart/form-data

這裡我們暫時只用到第二種 application/json 詳細傑說可參考 四種常見的 POST 提交數據方式。

 

接著我們會在 PassLoginComponent 中增加以下標頭檔：

var headers = new Headers();    
    headers.append('Content-Type', 'application/json');    

增加 Post URL：

var link = "";
    link = 'http://localhost:7000/api/login/passlogin/';

增加所要帶的參數：

1. 純字串組合

var body1 = "UserInfo_sn=2&Gov_code_sn=7001"

2. 組合成物件型式

var body2 = { UserInfo_sn: 2, Gov_code_sn: 7001 };

3. 用 Model 來存取資料

constructor(
  private router: Router, 
  private http: Http, 
  private user: UserInfo) { }


this.user.UserInfo_sn = 2;
this.user.Gov_code_sn = 7001;
var body3 = this.user;

接著實作Post：

//this.http.post( '路徑', '參數', '標頭' )
        this.http.post(link, JSON.stringify(body2), { headers: headers }
            ).map(res => res.json())
            .subscribe(data => console.log(data),
            () => console.log('Register Complete'))

 

傳遞到後端可正確使用 Model 來接取資料。

 

 

 

 passlogin.component.ts 檔完整範例如下：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Headers, Http, Response } from '@angular/http';
import { UserInfo } from '../../hero';

import 'rxjs/add/operator/map';


@Component({
    selector: 'my-passlogin',
    templateUrl: '../View/Login/passlogin.component.html',
    providers: [UserInfo] //引入你需要用的Model
})


export class PassLoginComponent {
    constructor(private router: Router, private http: Http, private user: UserInfo) {
     
    }

    CheckID(Sn) {
        // Post標頭檔
        var headers = new Headers();    
        headers.append('Content-Type', 'application/json');    

        //要post的URL
        var link ='http://localhost:7000/api/login/passlogin/';

        //純字串組合
        var body1 = "UserInfo_sn=2&Gov_code_sn=7001"

        //組合成物件型式
        var body2 = { UserInfo_sn: 2, Gov_code_sn: 7001 };

        // Model存取資料
        this.user.UserInfo_sn = 2;
        this.user.Gov_code_sn = 7001;
        var body3 = this.user;
        

        //this.http.post( '路徑', '參數', '標頭' )
        this.http.post(link, JSON.stringify(body3), { headers: headers }
            ).map(res => res.json())
            .subscribe(data => console.log(data),
            () => console.log('Register Complete'))
    }

}