Angular 入門教程系列:35:Restful的增刪改查
阿新 • • 發佈:2019-01-10
這篇文章來介紹一下如何進行前後端互動,一個常見的場景就是前端呼叫後端提供的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列表資訊(預先準備的資料僅有一條)。下篇文章來繼續瞭解一下增刪改的使用方式。