如何在Angular中使用Restful实现增删改

如何在Angular中使用Restful实现增删改？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

删除

使用delete进行删除，一般页面设计的时候也基本都是在列表页进行操作的。首先为删除的链接添加一个函数，因为一般删除都需要传入可定位删除的id或者name，前提是后端api是否支持，查看如下的调用之后，可以看到：

所以，只需要method使用delete，在传入的url中指定id或者name即可。

删除的restful调用：https://docs.konghq.com/0.13.x/admin-api/#delete-api

模版修改

html页面做如下修改

<anz-tooltipnzTitle="Delete"(click)="handleDeleteFunc()"><iclass="anticonanticon-minus-circle-o"></i></a>

添加click处理函数

添加页面定义的click处理函数handleDeleteFunc：

handleDeleteFunc(apiName){
this._actionInformation='Delete';
this.isSpinning=true;
this.modalService.confirm({
nzTitle:'<i>Areyousuretodeletethisitemselected?</i>',
nzContent:'<b>Theapiselectedwillbedeleted.</b>',
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';
exportclassApiModel{
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']
})
exportclassRestDemoComponentimplementsOnInit{
dataModel=[];
isModalVisible=false;
_actionInformation:string;
_dataSelected:ApiModel;
isSpinning=true;
publichttpOptions={
headers:newHttpHeaders({'Content-Type':'application/json'})
};
constructor(privatehttp:HttpClient,
privatemodalService:NzModalService){
}
ngOnInit(){
this._getApis();
this._initData();
}
_initData(){
this._dataSelected=newApiModel();
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>Areyousuretodeletethisitemselected?</i>',
nzContent:'<b>Theapiselectedwillbedeleted.</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();
});
}elseif(this._actionInformation==='Edit'){
this.http.put('/apis/',JSON.stringify(this._dataSelected),this.httpOptions).subscribe(item=>{
this.isSpinning=false;
this._getApis();
});
}elseif(this._actionInformation==='Search'){
}
}
}

HTML模版

<div>
<nz-breadcrumb>
<nz-breadcrumb-item>Operations</nz-breadcrumb-item>
<nz-breadcrumb-item>Apis</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div>
<anz-tooltipnzTitle="Add"(click)="handleAddFunc()"><iclass="anticonanticon-plus-circle-o"></i></a>
</div>
<br>
<nz-table#dataSource[nzData]="dataModel">
<thead>
<tr>
<th>Name</th>
<th>Host</th>
<th>Httpsonly</th>
<th>RetryCnt</th>
<th>Upstreamurl</th>
<th>Created</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr*ngFor="letdataofdataSource.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/ddHH:MM:SS'}}</td>
<td>
<anz-tooltipnzTitle="Delete"(click)="handleDeleteFunc(data.name)"><iclass="anticonanticon-minus-circle-o"></i></a>
<nz-dividernzType="vertical">|</nz-divider>
<anz-tooltipnzTitle="Update"(click)="handleEditeFunc(data.name)"><iclass="anticonanticon-edit"></i></a>
<nz-dividernzType="vertical">|</nz-divider>
<anz-tooltipnzTitle="Retrieve"(click)="handleSearchFunc(data.name)"><iclass="anticonanticon-exclamation-circle-o"></i></a>
</td>
</tr>
</tbody>
</nz-table>
<nz-modalnzWrapClassName="vertical-center-modal"[(nzVisible)]="isModalVisible"nzTitle="ApiDetail(Operation:{{_actionInformation}})"(nzOnCancel)="handleOperationCancel()"(nzOnOk)="handleOperationOk()">
<formnz-form>
<nz-form-item>
<nz-form-labelnzRequired[nzSpan]="3"nzFor="id-api-name">Name</nz-form-label>
<nz-form-control[nzSpan]="9">
<inputnz-inputname='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">
<inputnz-inputname="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">
<labelname="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">
<inputnz-inputid="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">
<inputnz-inputid="id-api-url"name="id-api-url"[(ngModel)]="_dataSelected.upstream_url">
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>

关于如何在Angular中使用Restful实现增删改问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。