這篇文章來介紹一下如何進行前後端互動，一個常見的場景就是前端呼叫後端提供的restful api，進行增刪改查，結合之前提到的新版本的http模組和rxjs，這篇文章首先使用kong搭建一個提供後端restful的api介面，對微服務的api增刪改查進行處理，以實現api的簡單管理。

事前準備

搭建kong，同時啟動api服務，然後將此api註冊到kong上，通過kong提供的查詢的相關Rest Api進行查詢

[root@kong ~]# curl http://127.0.0.1:8001/apis
{"total":1,"data":[{"created_at":1527809237323
 
,"strip_uri":true,"id":"5f41ad1d-f9b2-4dc7-98fc-fc003ec366bb","hosts":["userhost"],"name":"userapi","http_if_terminated":false,"https_only":false,"retries":5,"preserve_host":false,"upstream_connect_timeout":60000,"upstream_read_timeout":60000,"upstream_send_timeout":60000,"upstream_url":"http:\/\/192.168.163.117:9001\/"
 
}]}
[root@kong ~]#

設定proxy

在根目錄下建立proxy.conf.json,因為牽扯到跨域訪問，這裡使用在angular中最為簡單的本地開發環境的設定方式之一，通過這個配置檔案設定諸如nginx可以實現的反向代理的功能,內容如下

{
  "/api": {
    "target": "http://127.0.0.1:8001",
    "secure": false,
    "logLevel": "debug"
  }
}
注意此處是demo用的，實際環境的時候一般為設定nginx，這樣會根據url進行匹配，因為kong的api直接是在/下，往往會出現對其他頁面的路由產生影響，可以將logLevel開啟以確認狀況
 

修改pacakge.json中的npm start命令，載入上述配置資訊檔案，修改為：

"start": "ng serve --proxy-config proxy.conf.json",

請注意，靜態資訊的修改需要重新執行start命令才行，因為proxy-config就是一個轉發功能的開發環境整合，如果使用nginx的直接使用bypass等即可。

建立用於demo的元件

liumiaocn:content-module liumiao$ ls
content-module.module.spec.ts content-module.module.ts      f2-demo                       g2-demo
liumiaocn:content-module liumiao$ ng generate component rest-demo
CREATE src/app/default-layout/content-module/rest-demo/rest-demo.component.css (0 bytes)
CREATE src/app/default-layout/content-module/rest-demo/rest-demo.component.html (28 bytes)
CREATE src/app/default-layout/content-module/rest-demo/rest-demo.component.spec.ts (643 bytes)
CREATE src/app/default-layout/content-module/rest-demo/rest-demo.component.ts (280 bytes)
UPDATE src/app/default-layout/content-module/content-module.module.ts (633 bytes)
liumiaocn:content-module liumiao$

新增子路由資訊

    path: 'layout',
    component: DefaultLayoutComponent,
    children: [
      {
        path: 'g2',
        component: G2DemoComponent
      },
      {
        path: 'f2',
        component: F2DemoComponent
      },
      {
        path: 'rest',
        component: RestDemoComponent
      },
    ]

新增routerlink資訊

在左側選單中新增如下routerlink資訊

<li nz-menu-item><a routerLink="/layout/rest" routerLinkActive="active">Apis</a></li>

css佈局

這個系列的教程基於由後端轉的前端，或者有後端基礎的的，本著能不動css就不動的原則，這裡僅僅調整一下 麵包屑的對齊方式和邊距。

liumiaocn:rest-demo liumiao$ cat rest-demo.component.css
.ant-breadcrumb{
  text-align: left;
  margin-left: 10px;
}
liumiaocn:rest-demo liumiao$

html模版

這裡只需要注意幾點最為基礎的：

• 日期的轉換使用管道方式進行設定
• nzTable的資料的設定以及繫結的名稱
• 這裡沒有判空，實際專案中判空等基本事項都不可或缺

liumiaocn:rest-demo liumiao$ cat rest-demo.component.html 
<nz-breadcrumb>
  <nz-breadcrumb-item>Operations</nz-breadcrumb-item>
  <nz-breadcrumb-item>Apis</nz-breadcrumb-item>
</nz-breadcrumb>

<br>

<nz-table #dataSource [nzData]="dataModel">
  <thead>
  <tr>
    <th>Name</th>
    <th>Host</th>
    <th>Https only</th>
    <th>Retry Cnt</th>
    <th>Upstream url</th>
    <th>Created</th>
    <th>Operation</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of dataSource.data">
    <td>{{data.name}}</td>
    <td>{{data.hosts}}</td>
    <td>{{data.https_only}}</td>
    <td>{{data.retries}}</td>
    <td>{{data.upstream_url}}</td>
    <td>{{data.created_at | date:'yyyy/MM/dd HH:MM:SS'}}</td>
    <td>
      <a nz-tooltip nzTitle="Delete"><i class="anticon anticon-minus-circle-o"></i></a>
      <nz-divider nzType="vertical">|</nz-divider>
      <a nz-tooltip nzTitle="Update"><i class="anticon anticon-edit"></i></a>
      <nz-divider nzType="vertical">|</nz-divider>
      <a nz-tooltip nzTitle="Retrieve"><i class="anticon anticon-exclamation-circle-o"></i></a>
    </td>
  </tr>
  </tbody>
</nz-table>
liumiaocn:rest-demo liumiao$ 

rest-demo.component.ts

程式碼說明：
可以看到目前的程式碼非常簡單，只是使用HttpClient的get方法，然後將資料讀到ApiModel的這樣一個類似bean中，然後通過dataModel與頁面的Table進行繫結顯示。

liumiaocn:rest-demo liumiao$ cat rest-demo.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs';

export class ApiModel {
  created_at: string;
  strip_uri: boolean;
  id: string;
  hosts: [''];
  name: string;
  http_if_terminated: boolean;
  https_only: boolean;
  retries: number;
  preserve_host: boolean;
  upstream_connect_timeout: number;
  upstream_read_timeout: number;
  upstream_send_timeout: number;
  upstream_url: string;
}

@Component({
  selector: 'app-rest-demo',
  templateUrl: './rest-demo.component.html',
  styleUrls: ['./rest-demo.component.css']
})
export class RestDemoComponent implements OnInit {
  dataModel = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this._getApis();
  }

  _getApis() {
    this.http.get('/apis').subscribe(
      item => {
        this.dataModel = item['data'];
      }
    );
  }



}
liumiaocn:rest-demo liumiao$

結果顯示

總結

這篇文章設定了用於互動的後端環境，並生成了一個用於demo的元件，使用get方法取得了kong中預先註冊了的api列表資訊（預先準備的資料僅有一條）。下篇文章來繼續瞭解一下增刪改的使用方式。