第三方金流串接 – 產品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
    查看全部
    發表第一個留言支持創作者!
    ※ 建立一個管理者的資料夾,負責建立不同的管理 — 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
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    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
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    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(