※ 路由設定:
在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 請求:
- 輸入:http://localhost:30000/
※ 處理前端邏輯:
在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:
在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>:在每行末尾添加一個數字輸入框,用於設置產品數量。
※ 渲染結果: