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

※ 產品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)

  return router;

程式碼解說：

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

※ 將不同的路由器（router）掛載到Express應用程式中 ：app.ts -->routerSetup

private routerSetup() {
    this.app.use('/products',
      mountProductRouter({ controllerCtx: this.controllerCtx })
    );//將mountProductRouter的router傳出來
  }

程式碼解說：

• this.app.use 用於註冊中介軟體或路由處理器，將 mountProductRouter 返回的路由器掛載到 /products 路徑。
• 任何請求到/products的URL（例如http://你的域名/products）都將由mountProductRouter返回的路由器來處理。

※ 將畫面顯示在前端：

在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

創建 Vue 實例：

程式碼解說：

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() {
    this.products = await fetch(`${serverDomain}/products/list`)
    .then((res) => res.json());
    console.log("~ file:index.js ~line 14 ~ mounted ~ this.products", this.products);
  }
}).mount("#app")

• createApp({ ... })：使用 createApp 函數創建一個新的 Vue 應用實例，並傳入一個配置對象。
• data() { return { products: [] } }：在配置對象中定義一個 data 函數，返回應用實例的初始數據。這裡定義了一個 products 陣列，初始值為空。
• mounted 鉤子：在組件掛載到 DOM 之後自動調用，用來發起 HTTP 請求。
• this.products = await fetch()：使用 fetch() 函數發起非同步請求來獲取數據，並將返回的數據賦值給 products 屬性。
• 這行代碼使用 fetch 函數發起一個 GET 請求，請求的 URL 是 ${serverDomain}/products/list。
• ${serverDomain} 是一個變數，用來動態替換為實際的伺服器域名。
• (res) => res.json() 是一個箭頭函數，用來將響應對象（res）轉換為 JSON 格式的數據。
• this.products = ...：將解析後的 JSON 數據賦值給 this.products 屬性。
• console.log("~ file:index.js ~line 14 ~ mounted ~ this.products", this.products);：這行代碼用來列印 this.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>：在每行末尾添加一個數字輸入框，用於設置產品數量。

※ 渲染結果：