快捷導航

Angular使用Restful的增刪改

更新時間：2018年12月28日 09:40:26 作者：liumiaocn

今天小編就為大家分享一篇關(guān)于Angular使用Restful的增刪改，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

這篇來看一下如何進行增刪改。

刪除

使用delete進行刪除，一般頁面設(shè)計的時候也基本都是在列表頁進行操作的。首先為刪除的鏈接添加一個函數(shù)，因為一般刪除都需要傳入可定位刪除的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都進行了使用

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)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章: