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

閱讀時間約 9 分鐘

※ 路由設定:

在routes資料夾中,建立product.ts:

raw-image


※ 設置產品相關的路由:

raw-image


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 路徑下:

raw-image


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 文件:

raw-image
<script src="/javascripts/index.js"></script>

程式碼解說:

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

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

  • 確認database是否抓到內容
raw-image
  • 輸入:http://localhost:30000/
raw-image
  • F12:打開主控台
raw-image
  • 確認成功:出現「dsdsds」字樣。

※ 處理前端邏輯

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

raw-image

程式碼解說:

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:

raw-image

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

raw-image

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

1.HTML 結構

raw-image

程式碼解說:

  • <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>:在每行末尾添加一個數字輸入框,用於設置產品數量。


※ 渲染結果

raw-image




    全端網頁開發專業知識分享
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    ※ 建立一個管理者的資料夾,負責建立不同的管理 — manager: ※ 在manager資料夾中,建立modelManager.ts: ※ 設定資料庫模型的管理: 匯入模組: import { IProductModel, ProductModel } from "@/model/prod
    ※ 認識MVC架構: ※ 認識lodash: Lodash 是一個很實用的 JavaScript 函式庫。它提供了很多預設的實用函數,可以更容易地處理數據、操作物件和字串,並控制函數的執行。目的是為了簡化重複性的代碼,減少開發時間和錯誤。 Lodash 中常用的功能: 陣列處理:_.map
    ※ 認識Knex.js: Knex.js是一個專門串接資料庫的抽象化層,它支援多種關聯式資料庫,包括 PostgreSQL、MySQL、MariaDB、SQLite3、Oracle 和 Amazon Redshift 等。好處是連接以上的資料庫時,可以直接使用Knex.js的語法,就會自動創建出
    ※ 架構設計 ※ 資料庫規劃 id:流水號,唯一代替產品名稱的辨識代碼,AUTO_INCREMENT。 name:VARCHAR(255),NOT NULL。 amount:INTEGER(整數),UNSIGNED(不能是負數)。 description:TEXT,描述產品。 pre_
    ※ 下載Typescript 建立 TypeScript 和 Express 的基本目錄結構和必要配置。 npm install -g typescript-express-generator 建立模板引擎: ts-express --view=ejs server 安裝node_m
    ※ 必備開發環境: Node.Js環境。 Npm或yarn套件管理工具。 Docker倉庫套件:可以快速建立MySQL的資料庫。 下載 Docker Desktop:Docker Desktop for Windows。 ※ Docker快速建立MySQL資料庫,使用步驟: 準備Dock
    ※ 建立一個管理者的資料夾,負責建立不同的管理 — manager: ※ 在manager資料夾中,建立modelManager.ts: ※ 設定資料庫模型的管理: 匯入模組: import { IProductModel, ProductModel } from "@/model/prod
    ※ 認識MVC架構: ※ 認識lodash: Lodash 是一個很實用的 JavaScript 函式庫。它提供了很多預設的實用函數,可以更容易地處理數據、操作物件和字串,並控制函數的執行。目的是為了簡化重複性的代碼,減少開發時間和錯誤。 Lodash 中常用的功能: 陣列處理:_.map
    ※ 認識Knex.js: Knex.js是一個專門串接資料庫的抽象化層,它支援多種關聯式資料庫,包括 PostgreSQL、MySQL、MariaDB、SQLite3、Oracle 和 Amazon Redshift 等。好處是連接以上的資料庫時,可以直接使用Knex.js的語法,就會自動創建出
    ※ 架構設計 ※ 資料庫規劃 id:流水號,唯一代替產品名稱的辨識代碼,AUTO_INCREMENT。 name:VARCHAR(255),NOT NULL。 amount:INTEGER(整數),UNSIGNED(不能是負數)。 description:TEXT,描述產品。 pre_
    ※ 下載Typescript 建立 TypeScript 和 Express 的基本目錄結構和必要配置。 npm install -g typescript-express-generator 建立模板引擎: ts-express --view=ejs server 安裝node_m
    ※ 必備開發環境: Node.Js環境。 Npm或yarn套件管理工具。 Docker倉庫套件:可以快速建立MySQL的資料庫。 下載 Docker Desktop:Docker Desktop for Windows。 ※ Docker快速建立MySQL資料庫,使用步驟: 準備Dock
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    ※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
    Thumbnail
    ※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
    Thumbnail
    ※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
    Thumbnail
    前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
    Thumbnail
    此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
    ※ Express 專案步驟筆記清單 Node.js 環境建置核對 新增專案資料夾 設定 package.json npm init -y 設定程式入口為 app.js 安裝 Express:npm install express 設定主程式 app.js 建構應用程式伺服器 設定
    Thumbnail
    Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
    Thumbnail
    Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
    Thumbnail
    HTTP伺服器端 package main import ( "net/http" ) type Refer struct { handler http.Handler refer string } //實現中介軟體邏輯​ func (this *Refer) ServeHTTP(
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    ※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
    Thumbnail
    ※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
    Thumbnail
    ※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
    Thumbnail
    前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
    Thumbnail
    此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
    ※ Express 專案步驟筆記清單 Node.js 環境建置核對 新增專案資料夾 設定 package.json npm init -y 設定程式入口為 app.js 安裝 Express:npm install express 設定主程式 app.js 建構應用程式伺服器 設定
    Thumbnail
    Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
    Thumbnail
    Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
    Thumbnail
    HTTP伺服器端 package main import ( "net/http" ) type Refer struct { handler http.Handler refer string } //實現中介軟體邏輯​ func (this *Refer) ServeHTTP(