Angular使用Restful的增删改


Posted in Javascript onDecember 28, 2018

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

删除

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

Angular使用Restful的增删改

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

删除的restful调用: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处理函数

添加页面定义的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();
     }
    );
   }
  });
 }

Angular使用Restful的增删改

添加&更新&查看

其他操作诸如添加/更新/查看, 这样基本上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>

总结

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

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
webpack打包多页面的方法
Nov 30 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Element Notification通知的实现示例
Jul 27 Javascript
原生js实现公告滚动效果
Jan 10 #Javascript
微信小程序实现文字无限轮播效果
Dec 28 #Javascript
小程序实现左右来回滚动字幕效果
Dec 28 #Javascript
原生JS实现的自动轮播图功能详解
Dec 28 #Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
微信小程序实现简单跑马灯效果
May 26 #Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 #Javascript
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python绘图实现显示中文
2019/12/04 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
年度考核评语
2014/01/19 职场文书
2014新年寄语
2014/01/20 职场文书
会计专业导师推荐信
2014/03/08 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
新教师培训方案
2014/06/08 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript