angular网络请求

最新推荐文章于 2022-05-31 22:39:50 发布

勘察加熊人

最新推荐文章于 2022-05-31 22:39:50 发布

阅读量1.4k

点赞数

分类专栏： typescript 文章标签： java typescript

本文链接：https://blog.csdn.net/cf8833/article/details/124617146

版权

本文档详细介绍了使用Angular进行网络请求的步骤，包括集成API、定义类型、权限注册、功能代码实现、布局设计。同时，还涉及到了后端SpringBoot的跨域配置、数据库结构设计、实体类映射以及JPA的使用。

摘要由CSDN通过智能技术生成

step1: 网络请求，集成api D:\vue\nghttpdemo\src\app\services\cliente.service.ts

import {
   HttpClient, HttpHeaders, HttpClientModule} from '@angular/common/http';
import {
   Injectable} from '@angular/core';
import {
   Observable, catchError, throwError, map, tap} from 'rxjs';
import {
   UserBean} from "../interfaces/api.model";

@Injectable({
   
  providedIn: 'root',
})
export class ApiService {
   
  private httpHeaders = new HttpHeaders({
    'Content-Type': 'application/json' });

  constructor(private http: HttpClient) {
   
  }

  postUserData(data: any) {
   
    console.log('Data', data);
    // Here we are passing the endpoints from gorest api to post data
    return this.http.post<any>('https://gorest.co.in/public/v2/users', data);
  }

  getUserData() {
   
    // Here we are passing the endpoints from gorest api to get all data
    return this.http.get<any>('https://gorest.co.in/public/v2/users');
  }

  getUserId(id: number): Observable<any> {
   
    return this.http.get("http://192.168.101.227:5000/test/query?id=" + id).pipe(
      catchError((e) => {
   
        console.log(e.error.error)
        return throwError(e);
      })
    );
  }

  getAllList(): Observable<any> {
   
    return this.http.get("http://192.168.101.227:5000/test/query/all").pipe(
      catchError((e) => {
   
        console.log(e.error.error)
        return throwError(e);
      })
    );
  }


  deleteAllList(id: number): Observable<UserBean> {
   
    return this.http
      .delete<UserBean>("http://192.168.101.227:5000/test/delete?id="+id)
      .pipe(
        catchError((e) => {
   
          return throwError(e);
        })
      );
  }


  /*  addAllList(): Observable<any> {
      let url = "http://127.0.0.1:8080/doLogin";
      this.http.post(url, {"id": 22, "email": "1452478563@qq.com", "last_name": "苹果"}).pipe(
        catchError((e) => {
          console.log(e.error.error)
          return throwError(e);
        })
        map()
      )
        .subscribe((response) => {
          console.log(response)
        })

    }*/


  // http://192.168.101.227:5000/test/add?id=103&email=5484075190@qq.com&last_name=刘备

  addAllList(id: number, email: string, lastName: string): Observable<UserBean> {
   
    let formData = new FormData();
    formData.append('id', id.toString());
    formData.append('email', email);
    formData.append('last_name', lastName);
    return this.http.post("http://192.168.101.227:5000/test/add", formData).pipe(
      map((response: any) => response as UserBean),
      catchError((e) => {
   
        console.log(e.error);
        return throwError(e);
      })
    );
  }

}

step2: 类型引用类 D:\vue\nghttpdemo\src\app\interfaces\api.model.ts

export enum ApiEndpoint{
   
  // Auth
  AuthRegister = "/Auth/Register",
  AuthLogin = "/Auth/Login",
  AuthSendOtp = "/Auth/SendOtp",
  AuthVerifyOtp = "/Auth/VerifyOtp",
  AuthResetPwd = "/Auth/ResetPwd",
  AuthForgetPwd = "/Auth/ForgetPwd",
  AuthUserInfo = "/Auth/UserInfo",
  AuthUpdateUser = "/Auth/UpdateUser",

  // File
  FileCarUpload = "/File/CarUpload",
  FileAvatarUpload = "/File/AvatarUpload",

  // Car
  CarCreate = "/Car/Create",
  CarList = "/Car/List",
}

export