前端也能輕鬆上手！用 Node.js + Prisma 快速打造簡單 CRUD API

Image Source: Node.js

前言 作為一名前端工程師，後端開發可能看起來複雜且困難，但實際上如果掌握一些簡單的工具和基礎概念，就能輕鬆實現自己的後端服務。在這篇文章中，我將帶您從零開始，使用 Node.js 快速構建一個基本的 CRUD API，並搭配 Prisma 來操作 Postgresql 資料庫。Prisma 的直觀設計能大幅降低操作資料庫的門檻，讓沒有後端經驗的前端工程師也能輕鬆完成資料的新增、查詢、更新與刪除。希望透過這篇分享，您能建立自己的後端基礎，並為未來的全端開發旅程打下堅實的基礎！

建立 Nodejs 環境

什麼是 Express？

Express 是一個基於 Node.js 的輕量級且靈活的 Web 應用框架，用於構建伺服器端應用程式。它提供了一組簡單而強大的功能，幫助開發者快速建立 Web API 或完整的 Web 應用。

為什麼本地啟動需要 nodemon？

**nodemon** 是一個用於開發環境的工具，可以幫助開發者在程式碼改變時，自動重啟伺服器。

以下本篇使用 Typescript 實作

安裝

npm install prisma typescript ts-node @types/node --save-dev

npm install express cors dotenv

啟動命令

{
  "scripts": {
    "start": "npx nodemon --legacy-watch -e ts --exec ts-node ./index.ts",
  },
}

初始化範例

import express, { Request, Response } from "express";
import cors from "cors";
import * as dotenv from "dotenv";
dotenv.config();

const app = express();
const port = process.env.PORT || 3000;

// 使用 cors 套件，允許來自第三方請求
app.use(
  cors({
    origin: process.env.CORS_ORIGIN, // 允許前端的 URL
  })
);

// 啟用 JSON 解析
app.use(express.json());

// 測試端點
app.get("/", (_req: Request, res: Response) => {
  res.json({ message: "Hello, World!" });
});

npm run start

成功後頁面顯示

可以依照自訂義路由測試

建立資料庫

因為本人後端知識及經費有限，本篇分享採用 Xata 免費版本託管 Postgresql 資料庫

疊甲聲明

這個流程好處是可以快速構建最小可行產品，並使用熟悉的工具（如 REST 或 GraphQL），縮短開發週期。但以下缺點還是必須重視：

挑戰與難處

1. 資料庫設計：前端工程師可能缺乏資料庫正規化知識，容易導致結構設計不當或未充分考慮擴展性。
2. 性能優化：記憶體使用、查詢性能和索引設置等問題，需要一定的後端專業知識。
3. 安全性：身為前端開發者，可能不熟悉後端安全防護技術，例如防範 SQL 注入、設置 API 權限等。
4. 錯誤處理與監控：沒有內建後端工具支持（如 APM 或集中化日誌系統），可能導致問題排查困難。

本人還是希望想往全端發展的朋友們可以多向認識的後端請教主流環境建置及開發，謝謝。

為何選擇 Xata ?

Xata 是一個結合 SQL 和 NoSQL 優勢的託管資料庫平台，提供簡單的操作界面和強大的 API 支援，特別適合中小型專案或需要快速部署的應用。它內建了 Postgresql 的底層技術，同時增強了即時搜索、視覺化資料表管理等功能，讓使用者能夠專注於業務邏輯，而不用擔心伺服器配置與維護。

**前往官網 點選新增資料庫**

選項設置

下方有是否開啟 direct access to Postgres 選項

以上選項如直接使用 Xata 操作方式則不要開啟，如使用 ORM（如 Prisma、TypeORM）或頻繁執行複雜查詢則推薦啟用。

安全性建議

如果你選擇啟用，請務必採取以下措施：

1. 限制訪問權限：僅允許後端服務器連接，避免直接在前端暴露連接資訊。
2. 使用環境變數儲存敏感資料：將資料庫的連接資訊（如主機、用戶、密碼）存放在 .env 文件中，並在程式中透過環境變數讀取。
3. 啟用 IP 白名單（如果支持）：限制只有特定 IP 可以訪問資料庫。

新增完成後進入資料表頁面

點選程式片段

滑到最下方可以選擇技術及操作方式(e.g. ORM)

再滑到上方就有安裝流程及初始化方式，就可依資料將 DATABASE_URL

加入 .env。(<YOUR_API_KEY> 需替換)

完整金鑰範例

DATABASE_URL=postgresql://pqcogg:<YOUR_API_KEY>@<YOUR_REGION>.sql.xata.sh/postgres:main?sslmode=require

如沒有金鑰或錯過複製時機可至官網帳號管理中新增或重新產生。

初始化範例

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

// node 節點測試
app.get("/test-db-connection", async (_req: Request, res: Response) => {
  try {
    // 試圖進行簡單的查詢操作來測試資料庫連接
    const testConnection = await prisma.$queryRaw`SELECT 1`;
    if (testConnection) {
      res.json({ message: "Database connection successful!" });
    } else {
      res.status(500).json({ message: "Failed to connect to the database" });
    }
  } catch (error) {
    console.error("Error connecting to database:", error);
    res.status(500).json({ message: "Internal Server Error", error });
  }
});

成功連接顯示

接下來請閱讀 Nodejs 的 留言板 demo Part2