这篇来看一下如何进行增删改。
删除
使用delete进行删除，一般页面设计的时候也基本都是在列表页进行操作的。首先为删除的链接添加一个函数，因为一般删除都需要传入可定位删除的id或者name，前提是后端api是否支持，查看如下的调用之后，可以看到：
所以，只需要method使用delete，在传入的url中指定id或者name即可。
删除的restful调用：https://docs.konghq.com/0.13.x/admin-api/#delete-api
模版修改
html页面做如下修改
添加click处理函数
添加页面定义的click处理函数handleDeleteFunc：
handleDeleteFunc(apiName) {
this._actionInformation = 'Delete';
this.isSpinning = true;
this.modalService.confirm({
nzTitle : 'Are you sure to delete this item selected?',
nzContent: 'The api selected will be deleted.',
nzonOk : () => {
this.http.delete('/apis/' + apiName.toString()).subscribe(
item => {
this.isSpinning = false;
this._getApis();
}
);
}
});
}
添加&更新&查看
其他操作诸如添加/更新/查看, 这样基本上get/delete/post/put都进行了使用
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 = item;
this.isSpinning = false;
}
);
this.isModalVisible = true;
}
handleDeleteFunc(apiName) {
this._actionInformation = 'Delete';
this.isSpinning = true;
this.modalService.confirm({
nzTitle : 'Are you sure to delete this item selected?',
nzContent: 'The api selected will be deleted.',
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 = 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模版
Operations Apis
Name Host Https only Retry Cnt Upstream url Created Operation {{data.name}} {{data.hosts}} {{data.https_only}} {{data.retries}} {{data.upstream_url}} {{data.created_at | date:'yyyy/MM/dd HH:MM:SS'}} | |
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对考高分网的支持。如果你想了解更多相关内容请查看下面相关链接
