Angular使用Restful的增删改

这篇来看一下如何进行增删改。

删除

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

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

删除的restful调用：

模版修改

html页面做如下修改

<a nz-tooltip nztitle="delete" (click)="handledeletefunc()"><i class="anticon anticon-minus-circle-o"></i></a>

添加click处理函数

添加页面定义的click处理函数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都进行了使用

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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接