当前位置: 首页 > article >正文

angular使用http实现get和post请求

说明:
angular使用http实现get和post请求

提示:在运行本项目前,请先导入路由router,可以参考我上一篇文章。
效果图:
在这里插入图片描述

step1:E:\projectgood\ajsix\untitled4\package.json
“@angular/cdk”: “^18.2.10”,
“@angular/material”: “^18.2.10”,
step2:E:\projectgood\ajsix\untitled4\src\app\model\Service.ts


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class Service {
  url = 'https://demo.restheart.org/messages';

  constructor(private http: HttpClient) {
  }

  public get(page: number = 1): Observable<Array<any>> {
    return this.http.get<Array<any>>(`${this.url}?pagesize=5&page=${page}`);
  }

  public size(): Observable<any> {
    return this.http.get(`${this.url}/_size`);
  }

  public delete(id: string): Observable<any> {
    return this.http.delete(`${this.url}/${id}`);
  }

  public getSingleCharacterz(id:string):Observable<any>{
    return this.http.get(`http://localhost:5000/api/water`)
  }

  public postSingleCharacterz(data: any): Observable<any> {
    const water =  {
      watername: '韩红牌纯净水',
      watericon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg',
      waterstyle: '最中幻想',
      watersize: '50L',
      waterprice: '32',
      shopaccount: '772024102801',
      shopname: '大润发超市'
    }
    return this.http.post(`http://localhost:5000/api/wateradd`, water);
  }


  public post(data: any): Observable<any> {
    const _data = {
      message: data.message,
      from: data.from
    };

    return this.http.post(this.url, _data);
  }
}

step3:E:\projectgood\ajsix\untitled4\src\app\user\user.component.html

<p>user works!</p>
<button mat-flat-button color="primary" (click)="onAcceptClick('element.operate')">查询</button>
<button mat-flat-button color="primary" (click)="onAddClick('element.operate')">新增</button>

step4:E:\projectgood\ajsix\untitled4\src\app\user\user.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, tap } from 'rxjs';
// import { Service } from './service';
import { FormsModule } from '@angular/forms';
import { AsyncPipe, JsonPipe, DatePipe } from '@angular/common';
import { HttpClient, HttpClientModule, HttpHandler } from '@angular/common/http';

import {Service} from '../model/Service';
import {MatButtonModule} from '@angular/material/button';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [FormsModule,AsyncPipe,JsonPipe,DatePipe,HttpClientModule,MatButtonModule],
  templateUrl: './user.component.html',
  providers:[Service],
  styleUrl: './user.component.css'
})
export class UserComponent implements OnInit  {

  constructor(private service: Service) {}


  ngOnInit(): void {
  }
  onAcceptClick(key: string): void {
    console.log('you click onAcceptClick'+key)


    this.service.getSingleCharacterz('1').subscribe(
      (result:any)=>{
        console.log(result)
      },(error:any)=>{
        console.error('Error : '+error);
      }
    );
  }


  onAddClick(key: string): void {
    console.log('you click onAddClick' + key)
    this.service
      .postSingleCharacterz('1')
      .pipe(tap())
      .subscribe((resp) =>{
        console.log(resp)
      });
  }

}

end


http://www.kler.cn/a/371363.html

相关文章:

  • 【使用Flask构建RESTful API】从零开始开发简单的Web服务!
  • Linux 读者写者模型
  • 【高级IO】epoll的惊群效应
  • Apache paimon-CDC
  • 【笔记】大模型长度外推技术 NTK-Aware Scaled RoPE
  • 深度学习:YOLO v1网络架构、损失值及NMS极大值抑制
  • TimyNote:轻便高效的跨平台笔记工具
  • 如何使用Photoshop修改图标为纯色
  • MATLAB细胞干扰素信号矩阵和微分方程计算分析
  • 【06-并发控制:互斥 (1)-课堂示例代码运行】 modelchecker的使用封装 Peterson算法的修改和验证
  • 迈威通信西安采矿展大放异彩,驱动煤矿智能转型加速跑
  • 面试中的一个基本问题:如何在数据库中存储密码?
  • Codeforces Round 909 (Div. 3)
  • selenium解决调用Chrome str’ object has no attribute ‘capabilities’ Process finished
  • redis修改配置文件配置密码开启远程访问后台运行
  • Vscode中Github Copilot无法使用
  • 攻防世界的新手web题解
  • web前端多媒体标签设置(图片,视频,音频)以及图片热区(usemap)的设置
  • C++:多态(原理篇)
  • 交流调速系统分类
  • 如何从PPT中导出600dpi的高清图
  • 在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件
  • macOS开发环境配置与应用开发教程
  • java 泛型返回接口
  • vue使用rem适配各种分辨率设备
  • 【PTA】4-2 树的同构【数据结构】