フロントエンド AP サーバー接続

[gurezo]

メモ作成画面での dummyData(DUMMY_DATA) の削除 4aaaa04

• ダミーデータ dummyData, DUMMY_DATA の削除

diff --git a/frontend/src/app/todo/todo.component.ts b/frontend/src/app/todo/todo.component.ts
index 0a54a70..f5b73ab 100644
--- a/frontend/src/app/todo/todo.component.ts
+++ b/frontend/src/app/todo/todo.component.ts
@@ -9,7 +9,6 @@ import {
 } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { ActivatedRoute, Router } from '@angular/router';
// ダミーデータ dummyData, DUMMY_DATA の削除
-import { DUMMY_DATA } from '../dummy-data';
 import { Memo } from '../shared/models';
 import { TodoService } from './todo.service';

@@ -27,7 +26,6 @@ export default class TodoComponent implements OnInit {

   mode: string = 'new';
   memoId = 0;
// ダミーデータ dummyData, DUMMY_DATA の削除
-  dummyData = DUMMY_DATA;

   todoForm = new FormGroup({
     id: new FormControl<number | null>(null),

AP サーバー接続用にコード修正 891be22

proxy.conf.json（転送用設定ファイル）の作成

Note

Angular での proxy.conf.json の役割は、バックエンドサーバーにプロキシ（転送）する役割を担います。
※今回の場合、さくら VPS サーバーに構築した Rust の AP サーバーを指します。
参照：バックエンドサーバーへのプロキシ

➜  ~ cd work/dev-ops-sample
➜  dev-ops-sample git:(main) ✗ cd frontend
➜  frontend git:(main) ✗ vi proxy.conf.json

// insert mode

{
  "/api/": {
    "target": "http:/サーバー名vs.sakura.ne.jp/",
    "secure": false,
    "changeOrigin": true
  }
}

// escape
// wq 書き込み保存

ダミー API URL => さくら VPS のAP サーバーの URL へ変更

Note

• REST API については、さくらのVPSを使ってシステム開発に必要な知識を学ぶ 〜第12回〜のREST API解説を御覧ください

• HttpHeaders を追加します。
• HttpClient を DI （依存性の注入）：Dependency injection します。
• REST API の URL を apiUrl として、一箇所に定義
• 各 REST API 毎の リクエストパラメータを追記

diff --git a/frontend/src/app/shared/service/api.service.ts b/frontend/src/app/shared/service/api.service.ts
index d8993e9..fe5a229 100644
--- a/frontend/src/app/shared/service/api.service.ts
+++ b/frontend/src/app/shared/service/api.service.ts
@@ -1,4 +1,4 @@
// HttpHeaders を追加します。
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Memo } from '../models';
@@ -10,40 +10,30 @@ export class ApiService {
// HttpClient を DI （[依存性の注入]
   http = inject(HttpClient);

   apiUrl = 'サーバーアドレス/api/memos';
// HttpHeaders を追加します。
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    }),
+  };

   getAll(): Observable<Array<Memo>> {
-    // ダミーで、./assets/json 配下の json をレスポンスとして取得
-    this.apiUrl = './assets/json/memo-list.json';
-    return this.http.get<Array<Memo>>(this.apiUrl);
+    return this.http.get<Array<Memo>>(this.apiUrl, this.httpOptions);
   }

   get(id: string): Observable<Memo> {
-    // ダミーで、./assets/json 配下の json をレスポンスとして取得
-    this.apiUrl = './assets/json/memo.json';
-
-    // 暫定で下記実装にしている。正しいエンドポイントには、`/${id}` が含まれる
-    return this.http.get<Memo>(this.apiUrl);
-    // return this.http.get<Memo>(this.apiUrl + `/${id}`);
+    return this.http.get<Memo>(this.apiUrl + `/${id}`, this.httpOptions);
   }

   create(body: Memo) {
-    // ダミーで、./assets/json 配下の json をレスポンスとして取得
-    this.apiUrl = './assets/json/post.json';
-    return this.http.post(this.apiUrl, body);
+    return this.http.post(this.apiUrl, body, this.httpOptions);
   }

   update(body: Memo) {
-    // ダミーで、./assets/json 配下の json をレスポンスとして取得
-    this.apiUrl = './assets/json/update.json';
-    return this.http.patch(this.apiUrl, body);
+    return this.http.patch(this.apiUrl, body, this.httpOptions);
   }

   delete(id: string) {
-    // ダミーで、./assets/json 配下の json をレスポンスとして取得
-    this.apiUrl = './assets/json/delete.json';
-
-    // 暫定で下記実装にしている。正しいエンドポイントには、`/${id}` が含まれる
-    return this.http.delete(this.apiUrl);
-    // return this.http.delete(this.apiUrl + `/${id}`);
+    return this.http.delete(this.apiUrl + `/${id}`, this.httpOptions);
   }
 }

まとめ

• 上記手順がこのプルリクエストの作業になります。