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 document.images实例
May 27 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js脚本实现数据去重
Nov 27 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
原生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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
php常用的工具开发整理
2019/09/26 PHP
flexigrid 参数说明
2010/11/23 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
js new Date()实例测试
2019/10/31 Javascript
python3+requests接口自动化session操作方法
2018/10/13 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
解析python实现Lasso回归
2019/09/11 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
自考生自我鉴定范文
2013/10/01 职场文书
自我鉴定模板
2013/10/29 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
机关出纳岗位职责
2014/04/03 职场文书
白血病募捐倡议书
2014/05/14 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
入党函调证明材料
2015/06/19 职场文书