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 相关文章推荐
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue axios整合使用全攻略
May 24 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
解析thinkphp中的导入文件标签
2013/06/20 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
python异步任务队列示例
2014/04/01 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python开发之for循环操作实例详解
2015/11/12 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
优秀的计算机专业求职信范文
2013/12/27 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL