Angular使用Restful的增刪改
更新時(shí)間：2018年12月28日 09:40:26 作者：liumiaocn
今天小編就為大家分享一篇關(guān)于Angular使用Restful的增刪改，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
這篇來看一下如何進(jìn)行增刪改。
刪除
使用delete進(jìn)行刪除，一般頁面設(shè)計(jì)的時(shí)候也基本都是在列表頁進(jìn)行操作的。首先為刪除的鏈接添加一個(gè)函數(shù)，因?yàn)橐话銊h除都需要傳入可定位刪除的id或者name，前提是后端api是否支持，查看如下的調(diào)用之后，可以看到：
所以，只需要method使用delete，在傳入的url中指定id或者name即可。
刪除的restful調(diào)用：https://docs.konghq.com/0.13.x/admin-api/#delete-api
模版修改
html頁面做如下修改
<a nz-tooltip nzTitle="Delete" (click)="handleDeleteFunc()"><i class="anticon anticon-minus-circle-o"></i></a>
添加click處理函數(shù)
添加頁面定義的click處理函數(shù)handleDeleteFunc：
handleDeleteFunc(apiName) {
this._actionInformation = 'Delete';
this.isSpinning = true;
this.modalService.confirm({
nzTitle : '<i>Are you sure to delete this item selected?</i>',
nzContent: '<b>The api selected will be deleted.</b>',
nzOnOk : () => {
this.http.delete('/apis/' + apiName.toString()).subscribe(
item => {
this.isSpinning = false;
this._getApis();
}
);
}
});
}
添加&更新&查看
其他操作諸如添加/更新/查看, 這樣基本上get/delete/post/put都進(jìn)行了使用
TS文件
import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { NzModalService } from 'ng-zorro-antd';
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 = [];
isModalVisible = false;
_actionInformation: string;
_dataSelected: ApiModel;
isSpinning = true;
public httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private http: HttpClient,
private modalService: NzModalService) {
}
ngOnInit() {
this._getApis();
this._initData();
}
_initData() {
this._dataSelected = new ApiModel();
this._dataSelected.upstream_connect_timeout = 6000;
this._dataSelected.retries = 5;
}
_getApis() {
this.isSpinning = true;
this.http.get('/apis').subscribe(
item => {
this.dataModel = item['data'];
this.isSpinning = false;
}
);
}
handleAddFunc() {
this._actionInformation = 'Add';
this.isModalVisible = true;
}
handleSearchFunc(apiName) {
this._actionInformation = 'Search';
this.http.get('/apis/' + apiName).subscribe(
item => {
this._dataSelected = <ApiModel> item;
this.isSpinning = false;
}
);
this.isModalVisible = true;
}
handleDeleteFunc(apiName) {
this._actionInformation = 'Delete';
this.isSpinning = true;
this.modalService.confirm({
nzTitle : '<i>Are you sure to delete this item selected?</i>',
nzContent: '<b>The api selected will be deleted.</b>',
nzOnOk : () => {
this.http.delete('/apis/' + apiName.toString()).subscribe(
item => {
this.isSpinning = false;
this._getApis();
}
);
}
});
}
handleEditeFunc(apiName) {
this._actionInformation = 'Edit';
this.http.get('/apis/' + apiName).subscribe(
item => {
this._dataSelected = <ApiModel> item;
this.isSpinning = false;
}
);
this.isModalVisible = true;
}
handleOperationCancel() {
this.isModalVisible = false;
}
handleOperationOk() {
this.isSpinning = true;
this.isModalVisible = false;
if (this._actionInformation === 'Add') {
this.http.post('/apis/', JSON.stringify(this._dataSelected), this.httpOptions).subscribe( item => {
this.isSpinning = false;
this._getApis();
});
} else if (this._actionInformation === 'Edit') {
this.http.put('/apis/', JSON.stringify(this._dataSelected), this.httpOptions).subscribe( item => {
this.isSpinning = false;
this._getApis();
});
} else if (this._actionInformation === 'Search') {
}
}
}
HTML模版
<div style="display:inline-block;width: 50%;">
<nz-breadcrumb style="line-height: 40px; vertical-align: middle">
<nz-breadcrumb-item>Operations</nz-breadcrumb-item>
<nz-breadcrumb-item>Apis</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div style="display:inline-block;width: 45%;text-align: right;margin-right: 5%; line-height: 40px; font-size: xx-large">
<a nz-tooltip nzTitle="Add" (click)="handleAddFunc()"> <i style="text-align: right" class="anticon anticon-plus-circle-o"></i> </a>
</div>
<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" (click)="handleDeleteFunc(data.name)"><i class="anticon anticon-minus-circle-o"></i></a>
<nz-divider nzType="vertical">|</nz-divider>
<a nz-tooltip nzTitle="Update" (click)="handleEditeFunc(data.name)"><i class="anticon anticon-edit"></i></a>
<nz-divider nzType="vertical">|</nz-divider>
<a nz-tooltip nzTitle="Retrieve" (click)="handleSearchFunc(data.name)"><i class="anticon anticon-exclamation-circle-o"></i></a>
</td>
</tr>
</tbody>
</nz-table>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isModalVisible" nzTitle="Api Detail (Operation: {{_actionInformation}})" (nzOnCancel)="handleOperationCancel()" (nzOnOk)="handleOperationOk()">
<form nz-form>
<nz-form-item>
<nz-form-label nzRequired [nzSpan]="3" nzFor="id-api-name">Name</nz-form-label>
<nz-form-control [nzSpan]="9">
<input nz-input name='id-api-name' id='id-api-name' [(ngModel)]=_dataSelected.name>
</nz-form-control>
<nz-form-label [nzSpan]="3" nzFor="id-api-host">Host</nz-form-label>
<nz-form-control [nzSpan]="9">
<input nz-input name="id-api-host" id="id-api-host" [(ngModel)]='_dataSelected.hosts'>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-col [nzSpan]="3" >
</nz-col>
<nz-col [nzSpan]="9">
<label name="id-api-https" nz-checkbox [(ngModel)]="_dataSelected.https_only">Https
</label>
</nz-col>
<nz-form-label [nzSpan]="3" nzFor="id-api-retry">Retry</nz-form-label>
<nz-form-control [nzSpan]="9">
<input nz-input id="id-api-retry" name="id-api-retry" [(ngModel)]="_dataSelected.retries">
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="id-api-url">Url</nz-form-label>
<nz-form-control [nzSpan]="21">
<input nz-input id="id-api-url" name="id-api-url" [(ngModel)]="_dataSelected.upstream_url">
</nz-form-control>
</nz-form-item >
</form>
</nz-modal>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
您可能感興趣的文章:
- Angular Material Icon使用詳解
- Material(包括Material Icon)在Angular2中的使用詳解
- 從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法
- 詳解angular2封裝material2對話框組件
- Angularjs material 實(shí)現(xiàn)搜索框功能
- angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
- Angular(5.2->6.1)升級小結(jié)
- angular6 填坑之sdk的方法
- angular6的table組件開發(fā)的實(shí)現(xiàn)示例
- Angular6新特性之Angular Material
相關(guān)文章
AngularJS 基礎(chǔ)ng-class-even指令用法
本文主要介紹AngularJS ng-class-even 指令,這里整理了ng-class-even基礎(chǔ)知識(shí)資料,并附實(shí)例代碼和效果圖,學(xué)習(xí)AngularJS指令的朋友可以看下2016-08-08
angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)
這篇文章主要介紹了angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
angular4中*ngFor不能對返回來的對象進(jìn)行循環(huán)的解決方法
今天小編就為大家分享一篇angular4中*ngFor不能對返回來的對象進(jìn)行循環(huán)的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
angular5 子組件監(jiān)聽父組件傳入值的變化方法
今天小編就為大家分享一篇angular5 子組件監(jiān)聽父組件傳入值的變化方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了AngularJS路由Ui-router模塊用法,結(jié)合實(shí)例形式分析了Ui-router模塊的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05
Angular使用操作事件指令ng-click傳多個(gè)參數(shù)示例
這篇文章主要介紹了Angular使用操作事件指令ng-click傳多個(gè)參數(shù),結(jié)合實(shí)例形式分析了AngularJS事件指令及相關(guān)的響應(yīng)、處理操作技巧,需要的朋友可以參考下2018-03-03
詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-08-08
利用Angularjs和原生JS分別實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動(dòng)態(tài)的效果，這樣對于用戶體檢來說非常好，這篇文章分別用Angularjs和原生JS兩種方法來實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框，具有一定的參考價(jià)值，有需要的小伙伴們可以來參考借鑒。2016-09-09
用AngularJS的指令實(shí)現(xiàn)tabs切換效果
這篇文章介紹的是寫一個(gè)通過指令嵌套實(shí)現(xiàn)tabs功能的指令模塊，這也是我在一個(gè)項(xiàng)目中應(yīng)用到的，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-08-08
使用ionic播放輪詢廣告的實(shí)現(xiàn)方法(必看)
下面小編就為大家?guī)硪黄褂胕onic播放輪詢廣告的實(shí)現(xiàn)方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04