2025 年還有前端不會 Nodejs ？

大家好，我是雙越。前百度 滴滴 資深前端工程師，慕課網金牌講師，PMP。我的代表作有：

• wangEditor 開源 web 富文本編輯器，GitHub 18k star，npm 周下載量 20k
• 划水AI Node 全棧 AIGC 知識庫，包括 AI 寫作、多人成行編輯。複雜業務，真實上線。
• 前端面試派 系統專業的面試導航，刷題，寫簡歷，看面試技巧，內推工作。開源免費。

近期我準備開發一個 AI Agent 智能體項目 智語zhitalk AI 智能面試官，可以優化簡歷、模擬面試。很多同學想加入項目學習，但是自己是前端不會 Nodejs，於是我就先寫一篇 Nodejs 的入門資料，幫他們初步了解 Nodejs 以便能快速跟上項目進度。如有問題可留言或私信。

開始

Nodejs 於 2009 年發佈，現在 2025 年 8 月已經更新到 v24 版本，現在幾乎所有的開放平台、雲服務、Serverless 等都支持 Nodejs。它早已成為最熱門的開發語言之一，而且隨著國外對於 SSR 全棧的推廣，還在繼續擴展它的影響範圍。

還有，如果你作為前端人員想接觸 AI 開發，最便捷的方式就是使用 Nodejs 作為開發語言，學習成本最低。

接下來我試圖用一篇文章，用最簡單的方式，幫助各位前端開發人員入門 Nodejs，其他它很簡單。你先不要看 Nodejs 文檔，你先按照我的學習方式來。

學習要求：

• 熟悉 JS 語法，熟悉 npm 使用
• 熟悉 HTTP 協議，做過 ajax 請求

JS runtime 執行時

一段 JS 代碼或其他編程代碼，本質上就是一段字符串，就跟我們隨便寫一句話、一段話一樣，都是字符串。

console.log('hello world')

一段字符串能幹嘛？能看，能讀，能寫，能複製，能粘貼。如果是富文本能設置一下顏色字體大小等...

它能被執行嗎？

如果我們拷貝一段 JS 代碼，穿越到 JS 語言發明之前的 90 年代（那會兒 PC 技術已經很發達了，蓋茨早就世界首富了），你如何執行它？不能。

最開始 JS 代碼（字符串）是在瀏覽器中執行的。瀏覽器中內置了 JS 解釋器，然後你在 html 代碼中通過特定的語法 <script> 標籤內嵌 JS 代碼，瀏覽器識別以後執行這段 JS 代碼。

一個語言的執行環境，我們就稱為 runtime “運行時”，沒有 runtime 代碼就無法被執行，就是一堆字符串，任何語言都需要 runtime。

Nodejs 就是繼瀏覽器以後第二個 JS 代碼的 runtime 運行時。從此以後，JS 代碼不只能運行在瀏覽器了，它還可以運行在 Nodejs 環境。而 Nodejs 可以被安裝在任何操作系統中（windows mac linux 等），也就是說 JS 代碼可以在任何電腦上運行，即便沒有瀏覽器也可以運行。

現在的 JS 運行時除了瀏覽器、Nodejs 之外還有 Deno Bun，這倆用途都和 Nodejs 類似，而且目前尚未全面流行，你可以先保持觀察，不用深入。

安裝 Nodejs 並寫 demo

現代前端開發都是用 npm 管理插件，用 nodejs 支持打包工具，所以你應該是安裝了 nodejs 的。

如果沒有安裝，就下載安裝一下，安裝完以後打開控制台輸入一下命令，可以看到 Nodejs 的版本。

node --version
npm --version

然後在控制台輸入 node 即可進入 nodejs 環境，可輸入任何 JS 代碼，按 ctrl+c 退出。

你可以創建一個 .js 文件，然後使用 node 命令來執行它。例如我在當前的 src 目錄下創建了 test.js 文件。

// src/test.js
function fn() {
  console.log('this is a test file')
}

fn()

然後使用 node 命令執行它，即可打印預期的結果。

不能使用瀏覽器 API

Nodejs 運行時可以執行 JS 代碼，但你不能使用瀏覽器 API，因為這裡根本沒有瀏覽器。

例如我在 Nodejs 環境執行 alert('hello') 就報錯了 alert is not defined 即 alert 沒有定義，Nodejs 中沒有 alert，只有瀏覽器中才有 alert。

所以，JS 語法和瀏覽器 API 要分開來看，他倆也壓根不是一個東西，只是初學者一塊學習就容易混在一塊。

常見的瀏覽器 API 還有：

• DOM 操作，如 document getElementById createElement appendChild 等
• DOM 事件，如 addEventListener
• BOM 操作，如 window navigation sreen 等
• XMLHTTPRequest ，但 fetch 是可以在 Nodejs 中使用的

Nodejs 內置的 API

Nodejs 不能使用瀏覽器 API，這個好理解，因為不是瀏覽器環境。

但如果 Nodejs 只能執行 JS 語法，沒有其他 API 這也不行啊。因為光有 JS 語法，寫個函數、做個計算、打印個字符串等，解決不了具體的問題呀。

所以，Nodejs 也需要提供（內置）其他 API 讓我們能開發具體的功能。

Nodejs 是作為一個軟件安裝在操作系統上的，所以 Nodejs 提供了關於操作系統的 API。

新建一個文件 os.js 寫入如下代碼。

// src/os.js

const os = require('os') // 和 import 語法類似

function getSystemInfo() {
  return {
    platform: os.platform(),
    type: os.type(),
    architecture: os.arch(),
    cpuCount: os.cpus().length,
    cpuModel: os.cpus()[0].model,
    totalMemoryGB: Math.round(os.totalmem() / 1024 / 1024 / 1024),
    hostname: os.hostname(),
  }
}

const systemInfo = getSystemInfo()
console.log(systemInfo)

然後在控制台使用 node 命令執行這個文件，即可打印我當前的系統信息。

至此就能開始體現 Nodejs 和瀏覽器 JS 的區別了。你一定要注意去觀察和思考這種區別，以及兩者不同的用途，這個很重要。

像以上這些 OS 的信息，瀏覽器能獲取嗎？當然不能。瀏覽器是客戶端，如果能輕鬆獲取 OS 信息，那就是安全漏洞。而 Nodejs 是伺服器或本機，我自己獲取我自己的 OS 信息，這肯定是沒問題的。

獲取 OS 信息這個功能不常用，這也只是一個簡單的例子，接下來我們才正式開始寫一些實際的功能。

文件 API

Nodejs 是作為一個軟件安裝在操作系統上的，文件是操作系統的數據組織方式，所以 Nodejs 作為伺服器語言要能操作文件，如創建文件、讀取文件、修改文件、刪除文件、複製文件等操作。

新建一個 js 文件 src/file.js 寫入如下代碼。

首先，引入 fs path 兩個模塊。其中 fs 就是 file system 文件系統，用於操作文件，path 用於操作文件路徑。

const fs = require('fs')
const path = require('path')

然後定義文件路徑，我們計劃在 file 目錄下創建 data.txt 文件。

// 定義文件路徑
const fileDir = path.join(__dirname, '../file')
const filePath = path.join(fileDir, 'data.txt')

然後創建文件。

// 功能1: 在 /file 目錄下創建 data.txt 文件並寫入內容
function createAndWriteFile() {
  // 確保文件目錄存在，否則先目錄和文件
  if (!fs.existsSync(fileDir)) {
    fs.mkdirSync(fileDir, { recursive: true }) // 創建目錄和文件
    console.log('創建目錄:', fileDir)
  }

  // 寫入文件內容
  fs.writeFileSync(filePath, content, 'utf8') // 寫入內容
  console.log('文件創建成功:', filePath)
  console.log('寫入內容:', content)
}

createAndWriteFile()

在控制台執行 node src/file.js 可以看到 data.txt 文件被創建出來了。

然後繼續寫代碼，讀取文件內容。

// 功能2: 讀取文件內容
function readFile() {
  try {
    const data = fs.readFileSync(filePath, 'utf8') // 讀取文件內容
    console.log('讀取的文件內容:', data)
    return data
  } catch (error) {
    console.error('讀取文件失敗:', error.message)
    return null
  }
}

readFile()

在控制台執行 node src/file.js 可以看到讀取了正確的文件內容。

Nodejs 還有更多文件操作的 API，你可以諮詢 AI 或讓 AI 給你寫出 demo。

HTTP 服務

Nodejs 對前端人員最大的賦能就是：可以開發伺服器端，可以前後端都做，可以做全棧開發。

前端主要開發 HTML CSS JS，通過 ajax 訪問伺服器端 API 接口獲取 JSON 數據，然後渲染到頁面上。

伺服器端開發，最主要的就是 API 接口，接收前端 ajax 請求，獲取數據，最後返回數據給前端。

新建一個 js 文件 src/http.js 寫入如下內容。

• 引入 Nodejs 內置的 http 模塊，用於啟動 HTTP 服務
• 通過 createServer 創建一個 HTTP 服務，函數內的兩個參數分別代表 Request 和 Response，這兩個是 HTTP 協議的基礎知識 —— 你寫前端 ajax 也用得著，預設你已經熟知
• 函數內，通過 res.setHeader 設置 HTTP header（前端 ajax 也需要設置 header），返回格式為 JSON
• 函數內，通過 res.end 返回本次請求的內容，要返回字符串格式
• 通過 server.listen 監聽 3000 端口

const http = require('http')

// 創建 HTTP 伺服器
const server = http.createServer((req, res) => {
  // 設置響應頭為 JSON 格式
  res.setHeader('Content-Type', 'application/json')

  // 創建要返回的 JSON 數據
  const response = {
    message: 'Hello World!',
    time: new Date().toLocaleString(),
    status: 'success',
  }

  // 返回 JSON 響應
  res.end(JSON.stringify(response, null, 2))
})

// 監聽 300 端口
server.listen(3000, () => {
  console.log('HTTP 伺服器已啟動，監聽端口: 3000')
  console.log('訪問地址: http://localhost:3000')
})

在控制台運行 node src/http.js 可啟動本地的 HTTP 服務，並監聽 3000 端口。

使用瀏覽器訪問 localhost:3000 可以看到伺服器端返回的 JSON 內容，說明 API 接口成功了。

以上最簡單的 get 請求，而且沒有判斷路由，下面再來一個稍微複雜一點的例子。

新建一個 JS 文件 src/http-post.js 代碼如下，模擬一個創建用戶的 API 接口。

• 使用 req.method 可以獲得前端 ajax 請求的 method，這裡規定必須是 POST
• 使用 req.url 可以獲得前端 ajax 請求的路由，這裡規定必須是 /api/user
• 使用 req.on('data', (chunk) => { }) 可以接收到客戶端傳遞過來的 request body 數據

const http = require('http')

// 創建 HTTP 伺服器
const server = http.createServer((req, res) => {
  // 設置響應頭為 JSON 格式
  res.setHeader('Content-Type', 'application/json')

  // 檢查是否為 POST 請求且路由為 /api/user
  if (req.method === 'POST' && req.url === '/api/user') {
    let body = ''

    // 接收數據
    req.on('data', (chunk) => {
      body += chunk.toString()
    })

    // 數據接收完成
    req.on('end', () => {
      try {
        // 解析 JSON 數據
        const userData = JSON.parse(body)

        // 打印接收到的數據
        console.log('接收到的用戶數據:', userData)
        console.log('userId:', userData.userId)
        console.log('name:', userData.name)
        console.log('email:', userData.email)

        // TODO...

        // 返回成功響應
        const response = {
          status: 'success',
        }

        res.statusCode = 200
        res.end(JSON.stringify(response))
      } catch (error) {
        // 如果 JSON 解析失敗，返回錯誤
        const response = {
          status: 'error',
          message: '無效的 JSON 數據',
        }

        res.statusCode = 400
        res.end(JSON.stringify(response))
      }
    })
  } else {
    // 其他請求返回簡單提示
    const response = {
      message: '請發送 POST 請求到 /api/user',
    }

    res.end(JSON.stringify(response))
  }
})

// 監聽 3000 端口
server.listen(3000, () => {
  console.log('HTTP 伺服器已啟動，監聽端口: 3000')
  console.log('POST 請求地址: http://localhost:3000/api/user')
})

控制台運行 node src/http-post.js 啟動服務並監聽 3000 端口。

但 POST 請求我們不能直接使用瀏覽器訪問測試，因為瀏覽器訪問是 GET 請求。

測試 POST 請求一般有兩種方式，如果你控制台支持 curl 命令，可以使用它來測試，在控制台運行。

curl -X POST http://localhost:3000/api/user \
  -H "Content-Type: application/json" \
  -d '{"userId": 123, "name": "張三", "email": "[email protected]"}'

或者，你安裝 Postman 然後選擇 POST 輸入 url 和 body 信息，點擊 Send 按鈕，即可得到返回結果。

至此 HTTP 服務端的基礎知識其實都已經包含了。

• 啟動 HTTP 服務，監聽端口
• Request Response
• method
• url
• 獲取 Request body
• 返回數據

通過這些知識搞一個基礎的 HTTP 服務端是完全沒有問題的，都在這個範圍之內。例如你想要獲取 JWT token 或者設置 cookie 都可以通過操作 HTTP header 來搞定，具體可以諮詢 AI，不看文檔方便。

另，以上代碼中的 // TODO... 位置，可以把 user 數據插入到數據庫，這一點後面再說。

Koa 框架

在 Nodejs 剛開始流行的時候，早就有人總結了 Nodejs 作為伺服器端的通用能力，並且開發了框架，可以讓我們更加便捷的開發 Nodejs 伺服器端，其中最出名的就是 express 和 koa。

兩者設計思路和使用方式都一樣，而且很多年都沒變，早已穩定了，我們以後者 koa 為例。

新建一個目錄，執行 npm init -y 創建一個 package.json 文件，和做前端開發一樣。

然後安裝 koa 和 nodemon，後者用於啟動服務，和代碼邏輯沒關係，可暫時不用管。

npm i koa
npm i nodemon -D

然後創建一個目錄 src 再在裡面創建一個文件 index.js 寫入如下代碼。

// src/index.js

const Koa = require('koa')
const app = new Koa()

app.use(async (ctx) => {
  ctx.body = 'Hello World'
})

app.listen(3000)

然後在 package.json 文件加入一個命令 "dev": "nodemon src/index.js"。

再執行 npm run dev 就可以啟動 nodejs 服務，用瀏覽器訪問 localhost:3000 就可以看到訪問結果。

如果你想返回一段 JSON 怎麼辦？直接給 ctx.body 赋值一段 JSON 即可，不用考慮轉換為字符串格式。

如果想要支持 POST PUT 的 HTTP 請求方法，可如下修改代碼。

• 先安裝 npm i koa-body 它可用於獲取 request body 數據
• 使用 ctx.method 判斷 Method，其他就很簡單了。

const Koa = require('koa')
const { koaBody } = require('koa-body')
const app = new Koa()

app.use(koaBody())
app.use(async (ctx) => {
  if (ctx.method === 'POST') {
    const { user, email } = ctx.request.body || {}
    console.log('user and email ', user, email)

    // 其他處理，如 await insertUserToDatabase(user, email)

    ctx.body = {
      status: 'success',
      user,
      email,
    }
  }
})

app.listen(3000)

啟動 nodejs 伺服器以後，我們使用 Postman 測試如下，而且伺服器也打印了正確的結果。

如果想使用路由，那就再安裝 koa router。

npm install @koa/router

代碼如下：

• 通過 router.post 即可定義method 和路由 path
• 還可以繼續擴展其他路由

const Koa = require('koa')
const koaBody = require('koa-body')
const Router = require('@koa/router')

const app = new Koa()
const router = new Router()

app.use(koaBody())

router.post('/api/user', (ctx) => {
  const { user, email } = ctx.request.body || {}
  console.log('user and email ', user, email)

  // 其他處理，如 await insertUserToDatabase(user, email)

  ctx.body = {
    status: 'success',
    user,
    email,
  }
})

// 繼續擴展其他路由...

app.use(router.routes())
app.use(router.allowedMethods())

app.listen(3000)

至此，你已經看到 koa 是如何啟動 nodejs 伺服器並且處理基礎的請求，其他更多的 API 你可以參考文檔，也可以直接諮詢 AI 更方便。

只要你熟悉前端 ajax 請求和 HTTP 協議，那這些知識點基本都難不倒你。

操作數據庫

數據庫最常見的操作就是增刪改查 CRUD，你可能之前聽說過操作數據庫需要專門的 SQL 語言，挺麻煩的。

其實現在做常見的 web 應用開發，基本都不會使用 SQL 語句了，最常見的就是 ORM 工具，例如 Prisma。

你一開始看它的文檔肯定是看不懂的，而且也不需要你立刻看懂所有的，你只需要知道它是如何增刪改查的就可以入門了。

下面這段代碼能看懂嗎？不要管它如何執行，你能看懂語意就可以，僅語意。

• 數據庫裡有一個 user 表（就像一個 excel 表），這一點代碼中沒寫
• 在 user 表中創建一行數據，兩列 name 和 email
• 查詢這個表中的所有數據，並打印

async function main() {
  await prisma.user.create({
    data: {
      name: 'Alice',
      email: '[email protected]',
    },
  })

  const allUsers = await prisma.user.findMany()
  console.dir(allUsers, { depth: null })
}

我想大部分人應該都能看懂這幾行代碼的語意，其實代 ORM 工具操作數據庫就是使用 create find update delete 等這些函數進行增刪改查的操作，并不是 SQL 語句。

再來個複雜一點的例子，這個不要求看懂，當然能看懂最好。

• 數據庫中有三個表 user profile posts

• 在 user 表中創建一行，兩列 name email ，同時：

  • 在 posts 表中插入一行，一列 title
  • 在 profile 表中插入一行，一列 bio

• 查詢所有 user 表中的數據，同時查詢出 posts 和 profile 兩個表的相關數據

async function main() {
  await prisma.user.create({
    data: {
      name: 'Alice',
      email: '[email protected]',
      posts: {
        create: { title: 'Hello World' },
      },
      profile: {
        create: { bio: 'I like turtles' },
      },
    },
  })

  const allUsers = await prisma.user.findMany({
    include: {
      posts: true,
      profile: true,
    },
  })
  console.dir(allUsers, { depth: null })
}

把數據庫的增刪改查結合到上面 nodejs 伺服器端代碼中，就可以開發一個基礎的數據服務 API。

調用第三方服務

第三方服務一般都是 API 的形式，一般有兩種調用方式，以 deepseek API 為例。

第一種方式，直接發送 http 請求調用，deepseek API 文檔是使用 curl 工具舉例的。

curl https://api.deepseek.com/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <DeepSeek API Key>" \
  -d '{
        "model": "deepseek-chat",
        "messages": [
          {"role": "system", "content": "You are a helpful assistant."},
          {"role": "user", "content": "Hello!"}
        ],
        "stream": false
      }'

其實我們可以轉換為 nodejs 內置的 fetch 方法去請求，這是我用 AI 生成的代碼。

await fetch('https://api.deepseek.com/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer <DeepSeek API Key>' // 請替換為你的實際 API Key
  },
  body: JSON.stringify({
    model: "deepseek-chat",
    messages: [
      { role: "system", content: "You are a helpful assistant." },
      { role: "user", content: "Hello!" }
    ],
    stream: false
  })
});

第二種方式，有的第三方開放平台會開發一個 npm 插件，讓你直接安裝並調用它的方法。例如調用 deepseek API 可以安裝 openai。

npm i openai

然後直接引入並調用它的方法即可。其實它背後也是發送 HTTP 請求，不過它封裝了。

// Please install OpenAI SDK first: `npm install openai`

import OpenAI from "openai";

const openai = new OpenAI({
        baseURL: 'https://api.deepseek.com',
        apiKey: '<DeepSeek API Key>',
});

async function main() {
  const completion = await openai.chat.completions.create({
    messages: [{ role: "system", content: "You are a helpful assistant." }],
    model: "deepseek-chat",
  });

  console.log(completion.choices[0].message.content);
}

main();

把調用 deepseek API 結合到上面 nodejs 伺服器端代碼中，就可以開發一個自己的 AI 接口服務。

最後

如果你能看懂大部分內容，說明你可以快速入門 Nodejs 並進行 AI 開發。有興趣的可以關注我的 智語zhitalk AI Agent 項目。

原文出處：https://juejin.cn/post/7550148929364361225