前端服務資料存取

主要透過Angular Http client進行前端資料存取

HttpClient

Angular HttpClient 是一個用於發送 HTTP 請求的模組。它提供了一個強大且簡潔的方式來與後端服務進行數據交互。使用 Angular HttpClient，你可以輕鬆地發起 GET、POST、PUT、DELETE 等不同類型的請求，並處理響應數據。

使用 Angular HttpClient，你可以進行以下操作：

• 發送 GET 請求，獲取後端數據
• 發送 POST 請求，提交表單數據
• 發送 PUT 請求，更新後端資源
• 發送 DELETE 請求，刪除後端資源

使用 Angular HttpClient，你還可以處理請求的錯誤，設置請求的 Headers，以及處理後端返回的響應數據。

使用者model

export class User {
  id?: number;
  name?: string;
  description?: string;
}

建立使用者服務

export class UserService {
  GetUrl = "http://localhost:3000/User/{id}";
  SaveUrl = "http://localhost:3000/UserSave";
  deleteUrl  = "http://localhost:3000/UserDelete/{name}";
  constructor(private http:HttpClient) { }

  getUser(id:number) :Observable<User> {
    return this.http.get<User>(this.GetUrl
      .replace('{id}',id.toString()));
  }

  saveUser(user:User) :any {
    return this.http.post<User>(this.SaveUrl, user);
  }

  deleteUser(name:string) :any {
    return this.http.delete<User>(this.deleteUrl.replace('{name}',name));
  }
}

建立NeDB存取服務

export class neDBService {
  GetUrl = "http://localhost:3000/findJsonDB";
  SaveUrl = "http://localhost:3000/insertJsonDB";
  deleteUrl  = "http://localhost:3000/UserDelete/removeJsonDB/:name";
  constructor(private http:HttpClient) { }

  getJsonDB(name:string) :any {
    const data = { name: name };
    return this.http.post<User>(this.SaveUrl, data);
  }

  saveJsonDB(name:string,description:string) :any {
    const data = { name: name , description: description };
    return this.http.post<User>(this.SaveUrl, data);
  }

  deleteJsonDB(name:string) :any {
    return this.http.delete<User>(this.deleteUrl.replace('{name}',name));
  }
}

小結

本日在Angular簡單建立服務功能，確認資料存取，後續建立ＵＩ確認資料可於ＵＩ上進行顯示．