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几种形式的树结构菜单
May 10 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 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
加速XP搜索功能堪比vista
2007/03/22 PHP
php框架Phpbean说明
2008/01/10 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
jquery实现的网页自动播放声音
2014/04/30 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python with语句用法原理详解
2020/07/03 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
几道PHP面试题
2013/04/14 面试题
Linux中如何用命令创建目录
2016/12/02 面试题
大一新生期末自我评价
2014/09/12 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
优秀教师工作总结2015
2015/07/22 职场文书