第三方金流串接 – 產品API顯示畫面

※ 路由設定：

在routes資料夾中，建立product.ts：

※ 設置產品相關的路由：

1.匯入模組：

import express from 'express';
import { ControllerContext } from '@/manager/controllerManager';

程式碼解說：

• 匯入 express 模組建立路由器，使用 Express 框架來建立路由和處理 HTTP 請求。
• 從 controllerManager 模組中匯入 ControllerContext 介面，用於定義控制器上下文的結構。

2.函數定義：

export const mountProductRouter = 
({ controllerCtx }: { controllerCtx: ControllerContext }) => {}

程式碼解說：

• 定義並導出 mountProductRouter 函數，作用是將產品相關的路由掛載到 Express 應用程式中，使其可以處理特定的 API 請求。 "mount" 的意思是「掛載」或「設置」。
• 這個函數接受一個參數 controllerCtx，指定了函數參數的型別為 ControllerContext，確保 controllerCtx 符合 ControllerContext 介面。

3.設置路由：

let router = express.Router();
router.get('/list', controllerCtx.productController.findAll);

程式碼解說：

• 創建一個新的 express 路由器實例 router，用來管理路由。
• 設置一個 GET 路由，當收到 /list 路徑的 GET 請求時，調用 controllerCtx.productController.findAll 方法來處理請求。
• 這個方法會從 productController 中取得產品資料，並將結果返回給客戶端。
• 路徑名稱 /list 只是用來表示產品清單的 URL。可以根據需求改成其他名字，例如 /products、/all-products 或者任何符合你應用程式設計的名稱。

※ 將產品相關的路由掛載到 app.ts的 /products 路徑下：

this.app.use('/products', mountProductRouter({ controllerCtx: this.controllerCtx }))

程式碼解說：

• this.app.use 用於註冊中介軟體或路由處理器，將 mountProductRouter 返回的路由器掛載到 /products 路徑。
• mountProductRouter 函數調用後，會返回一個配置好的路由器，用來處理 /products 路徑下的所有請求。
• 如果 mountProductRouter 返回的路由器中有一個 GET 路由 '/list'，那麼完整的路徑就會是 /products/list，並由 productController.findAll 方法來處理。

※ 將畫面顯示在前端：

在views資料夾中，index.ejs檔案裡引入外部的 JavaScript 文件：

<script src="/javascripts/index.js"></script>

程式碼解說：

• <script> 標籤：用來包含或引入 JavaScript 程式碼。
• src="/javascripts/index.js"：指定要引入的外部 JavaScript 文件的路徑。在這個例子中，是位於 /javascripts/ 資料夾中的 index.js 文件。

在javascripts資料夾中​的 index.js 檔案中編寫產品資料庫路由，處理 API 請求：

• 確認database是否抓到內容：

• 輸入：http://localhost:30000/

• F12：打開主控台

• 確認成功：出現「dsdsds」字樣。

※ 處理前端邏輯：

在javascripts資料夾中的編寫 index.js 檔案內容：

程式碼解說：

1.serverDomain：

用來存儲伺服器地址的變數，目的是定義伺服器的域名和端口號，方便在應用程式中統一使用。

const serverDomain = 'http://localhost:30000';

2.導入 Vue：

使用 const { createApp } = Vue; 是因為 Vue 3 將功能分成多個模組，符合現代 JavaScript 的模組化標準。

const { createApp } = Vue;

3.創建應用程式：

createApp({
  data() {
    return {
      products: []
    }
  },
  async mounted() {
    try {
      this.products = await fetch(`${serverDomain}/products/list`)
        .then(res => res.json());
      console.log("~ file: index.js ~ line 14 ~ mounted ~this.products", this.products);
    } catch (error) {
      console.error('Error fetching products:', error);
    }
  }
}).mount('#app');

• createApp：創建一個應用程式實例。
• data 方法：定義應用程式的數據，這裡初始化了一個空的 products 陣列。
• mounted 鉤子：在組件掛載到 DOM 之後自動調用，用來發起 HTTP 請求。
• • fetch 請求：向伺服器發送請求以獲取產品資料，並將結果賦值給 products。
  • 錯誤處理：在請求過程中如果出現錯誤，會在控制台輸出錯誤信息。
• .mount('#app')：將應用程式實例掛載到 HTML 中 id 為 app 的元素上。

※ 渲染 HTML 模板：

在views資料夾中的 index.js 檔案中使用 Vue：

Vue官網：https://zh-hk.vuejs.org/guide/quick-start.html

在views資料夾中的 index.js 檔案中修改body：

1.HTML 結構：

程式碼解說：

• <div id="app">：Vue 的應用範圍將被掛載到這個 div 元素內。
• <table v-bind:style="{width:'100%', textAlign: 'center'}">：設置表格樣式，寬度為100%，文字居中對齊。
• <thead> 和 <tr> 內的 <th> 元素：定義表格的標題行。
• <tbody>：
• • v-for="product in products"：使用 Vue 的 v-for（for迴圈） 指令來遍歷 products 陣列，為每個 product 生成一行 <tr>。
  • {{ product.id }}、{{ product.name }}、{{ product.amount }}、{{ product.price }}、{{ product.description }}：顯示每個產品的對應屬性。
  • <td><input type="number" min="0" max="100" step="1"></td>：在每行末尾添加一個數字輸入框，用於設置產品數量。

※ 渲染結果：