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

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

成都创新互联成都网站建设按需设计，是成都网站制作公司,为成都地磅秤提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站制作热线：18982081108

删除

使用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