第三方金流串接 – 產品功能Controller

更新於 發佈於 閱讀時間約 15 分鐘

※ 建立一個管理控制的資料夾,負責建立不同的控制 — controller:

raw-image

※ 在controller資料夾中,建立productController.ts:

raw-image

※ ProductController:

1.建立 ProductController 的類別來管理產品數據模型。

//專門控制model
export class ProductController {
private productModel: IProductModel;
constructor({ productModel }: { productModel: IProductModel }) {
this.productModel = productModel;
}
}

程式碼解說:

  • export class ProductController
    • 定義並導出了一個名為 ProductController 的類別。其他模組可以導入並使用這個類別。
  • 私有屬性 productModel
    • 這個類別有一個私有屬性 productModel,其類型為 IProductModel。這表示這個屬性只能在類別內部使用,外部無法直接訪問。
  • 構造函數:
    • constructor({ productModel }: { productModel: IProductModel }):
      • 構造函數在建立 ProductController 類別實例時被調用。它接受一個物件作為參數,該物件有一個 productModel 屬性,其類型為 IProductModel。在構造函數內,將傳入的 productModel 賦值給類別內的私有屬性 productModel。


2.使用findAll方法在IProductController控制器中處理尋找和返回所有產品數據的請求

export interface IProductController {
//使用express.js的router API
findAll(req: Request<any, any, any, any>,
res: Response,
_next: NextFunction): void;
}

程式碼解說:

  • 使用 export 導出這個介面,使其可以在其他模組中使用。
  • 定義了 findAll 方法 ,這個方法接受Express的三個參數,用於處理 API 請求:
    • req:類型為 Request<any, any, any, any>,表示 HTTP 請求對象。
    • res:類型為 Response,表示 HTTP 回應對象。
    • _next:類型為 NextFunction,表示中介軟體中的下一個函數。
  • 方法的返回類型為 void,表示這個方法不會有返回值。

3.實現接口,處理並返回所有產品數據的請求

export class ProductController {
private productModel: IProductModel;

constructor({ productModel }: { productModel: IProductModel }) {
this.productModel = productModel;
}

//傳到前端
findAll: IProductController["findAll"] = async (_req, res, _next) => {
const result = await this.productModel.findAll();
res.json(result);
}
}

程式碼解說:

findAll: IProductController["findAll"] = async (_req, res, _next) => {
//你的函數邏輯在這裡
}
  • findAll: IProductController["findAll"] 是一種函數類型宣告的設定方式。表示findAllIProductController 接口中 findAll 方法的實現
  • 使用箭頭函數和 async 關鍵字,使其成為一個非同步函數。
  • _req、res 和 _next 分別是請求對象、響應對象和下一個中間件函數。
const result = await this.productModel.findAll();
res.json(result);
  • this.productModel.findAll() 是一個非同步操作,用於從數據模型中獲取所有產品數據。
  • await 關鍵字等待非同步操作完成,並將結果存儲在 result 變數中。
  • res.json(result) 將結果以 JSON 格式發送回前端客戶端。

※ 補充說明:

_req:

這樣的命名通常表示這個參數在方法中沒有被使用。這是開發者的一種慣例,用 _ 作為前綴來表明這個參數在函數或方法中是未使用的,但依然需要保留它作為函數簽名的一部分。

※ 在Manager資料夾中,建立controllerManager.ts:集中管理和協調多個控制器

raw-image

建立自動創建 Product 的控制器,確保傳遞的資料正確無誤:

1.定義 ProductControllerProp 介面

interface ProductControllerProp {
productModel: IProductModel;
}

程式碼解說:

  • 定義一個介面 ProductControllerProp,包含一個屬性 productModel,類型為 IProductModel。
  • "Prop" 是 "Property" 的縮寫,表示物件的屬性或屬性定義。在 ProductControllerProp 中,它代表了傳遞給 ProductController 的屬性集合。

2.靜態方法 createConstructor:

public static createConstructor({ productModel }: ProductControllerProp) {
return new ProductController({ productModel });
}

程式碼解說:

  • 這是一個靜態方法,名為 createConstructor。
  • 方法接受一個 ProductControllerProp 類型的物件作為參數。
  • 返回一個新的 ProductController 實例,並將 productModel 傳遞給建構函數進行初始化。




※ controllerManager:用來管理和初始化所有控制器的工具或函數:manager -->controllerManager.ts

export const controllerManager ({ modelCtx }: {

  modelCtx: ModelContext:

})

ModelContext定義哪裡來:

raw-image
import { ModelContext } from './modelManager'
export const controllerManager = ({ modelCtx }: {
modelCtx: ModelContext;
}) => {

}

程式碼解說:

1.引入 ModelContext 模組:

./modelManager 模組中引入了 ModelContext,用於定義 modelCtx 的結構或功能。

2.定義 controllerManager 函數:

定義了一個名為 controllerManager 的常數函數。它接受一個具名參數 { modelCtx },其型別是 ModelContext

productModel 內容創建出來的productController控制器:

import { ProductController } from '@/controller/productController'
export const controllerManager = ({ modelCtx }: {
modelCtx: ModelContext
}) => {
const productController = ProductController.createConstructor({
productModel: modelCtx.productModel,
});

}

程式碼解說:

1.定義 productController 常數:

const productController = ProductController.createConstructor({
productModel: modelCtx.productModel,
});

宣告了一個名為 productController 的常數,並將其初始化為 ProductController.createConstructor 的返回值。

2.呼叫 createConstructor 方法:

ProductController.createConstructor({
productModel: modelCtx.productModel,
});

呼叫了 ProductController 類別中的 createConstructor 方法,並傳遞了一個包含屬性 productModel的參數物件,其值為 modelCtx.productModel

productController 的結構和功能:

export interface ControllerContext {
productController: IProductController
}
export const controllerManager = ({ modelCtx }: {
modelCtx: ModelContext
}): ControllerContext => {
const productController = ProductController.createConstructor({
productModel: modelCtx.productModel,
});
return {
productController,
}
}

程式碼解說:

1.定義接口 ControllerContext

export interface ControllerContext {
productController: IProductController;
}

定義了 ControllerContext介面,其中包含一個名為 productController 的屬性。這個屬性的型別是 IProductController

2.返回物件 { productController }

return {
productController,
}

該函數返回一個名為 productController 屬性的物件,其值是事先定義或創建的 productController 變數。

※ 將 ProductController 和 controllerManager 加入 app.ts 為的是將這些控制器註冊到應用程式中,確保它們能夠處理來自客戶端的請求:src -->app.ts

raw-image
import { ControllerContext } from './manager/controllerManager';//新增

class App {
controllerCtx: ControllerContext;//新增

constructor() {

this.controllerCtx = controllerManger({ modelCtx: this.modelCtx })//新增

}

程式碼解說:

1.匯入模組

import { ControllerContext } from './manager/controllerManager';
  • 定義控制器上下文的結構。確保你可以在程式中一致地使用控制器,並享受型別檢查帶來的安全性。

2.定義 App 類別

class App {
controllerCtx: ControllerContext;
  • controllerCtx 必須包含並符合 ControllerContext 介面中所定義的所有屬性和型別。

3.建構函數

constructor() {
this.controllerCtx = controllerManger({ modelCtx: this.modelCtx });
}
  • 這個物件(this)中,初始化了一個名為 controllerCtx 的屬性。controllerCtx 的值由 controllerManager 函數返回,而 controllerManager 函數接受一個參數物件,其中包括了前一步初始化的 modelCtx。

結論:controllerManager 函數接收 modelCtx 作為參數,並返回一個符合 ControllerContext 介面的 controllerCtx,其中包含必要的控制器productController

全端網頁開發專業知識分享
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
※ 認識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
※ 開發第三方金流串接使用工具: Typescript。 MySQL。 ※ 開發第三方金流串接使用技術: 基礎的docker使用方式。 用Typescript開發Node.JS的金流服務伺服器。 前端框架VueJs。 ※ 常見第三方金流平台介紹: PayPal: 特色: 全球最大
※ 認識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
※ 開發第三方金流串接使用工具: Typescript。 MySQL。 ※ 開發第三方金流串接使用技術: 基礎的docker使用方式。 用Typescript開發Node.JS的金流服務伺服器。 前端框架VueJs。 ※ 常見第三方金流平台介紹: PayPal: 特色: 全球最大
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
※ 生產者和消費者模式 定義: 生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。 共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
MVVMC(Model View ViewModel Coordinator),特點是Coordinator。 Model 負責儲存應用程式的資料。 View 負責顯示資料。 ViewModel 負責處理View和Model之間的狀態關係。 Coordinator 負
MVVM(Model View ViewModel),特點是View跟ViewModel之間做資料綁定。 Model 負責儲存應用程式的資料。 View 負責顯示資料。 ViewModel 負責處理View和Model之間的狀態關係。
Thumbnail
工具功能 (1) 彈性任意查詢檔案,如對來源目錄設定,檔案修改日期 設定,檔名特定字串或副檔名設定後,自動查出明細,並可展開至各階子目錄處理     (2) 依查詢後結果,可產出 LIST ,提供查詢結果之確認,再依此對檔案作複 (3) 可對檔案作移動,複製至別處,刪除處理,使電腦可騰出硬碟空間
Thumbnail
到存放虛擬機的磁碟處\點選想要註冊的機器\註冊機器(登錄虛擬機器)
Thumbnail
這是為了搭建自己想要的工作流而開始的研究工作。
Thumbnail
第一份正職工作 在iot公司擔任後端工程師,一上工就使用先前沒用過的php/laravel,也馬上負責公司產品的架構規劃,先前資料庫只有簡單記載使用者跟使用者的一些設定,很多地方有資料不一致的問題,產品內容還有很多實體的關係沒有被定義進資料庫都是這次改版我要做的事情。 改版納入公司、機器
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
※ 生產者和消費者模式 定義: 生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。 共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
MVVMC(Model View ViewModel Coordinator),特點是Coordinator。 Model 負責儲存應用程式的資料。 View 負責顯示資料。 ViewModel 負責處理View和Model之間的狀態關係。 Coordinator 負
MVVM(Model View ViewModel),特點是View跟ViewModel之間做資料綁定。 Model 負責儲存應用程式的資料。 View 負責顯示資料。 ViewModel 負責處理View和Model之間的狀態關係。
Thumbnail
工具功能 (1) 彈性任意查詢檔案,如對來源目錄設定,檔案修改日期 設定,檔名特定字串或副檔名設定後,自動查出明細,並可展開至各階子目錄處理     (2) 依查詢後結果,可產出 LIST ,提供查詢結果之確認,再依此對檔案作複 (3) 可對檔案作移動,複製至別處,刪除處理,使電腦可騰出硬碟空間
Thumbnail
到存放虛擬機的磁碟處\點選想要註冊的機器\註冊機器(登錄虛擬機器)
Thumbnail
這是為了搭建自己想要的工作流而開始的研究工作。
Thumbnail
第一份正職工作 在iot公司擔任後端工程師,一上工就使用先前沒用過的php/laravel,也馬上負責公司產品的架構規劃,先前資料庫只有簡單記載使用者跟使用者的一些設定,很多地方有資料不一致的問題,產品內容還有很多實體的關係沒有被定義進資料庫都是這次改版我要做的事情。 改版納入公司、機器