今天我們要進入一個新的挑戰——後端開發！不管是前端還是後端，專案越大，壓力越大。尤其是對於初學者來說，後端開發常常像是在黑暗裡摸索，覺得困難重重。但其實，只要掌握正確的方法和心態，一步步來，後端開發也可以變得越來越順利，並結合 AI 工具像是 ChatGPT 的幫助，後端開發其實沒那麼困難。今天，我們就來帶你建立後端環境，讓你輕鬆掌握後端技術！

文章大綱：

1. 面對技術限制的心理調適
2. 後端的資料夾結構
3. 更進階的資料夾結構設計
4. 透過 ChatGPT 學習 Express Generator 的 app.js 和 www
5. 開發後端就是破關！

1. 面對技術限制的心理調適

相較於前端，後端開發讓人覺得更難理解，因為前端開發能看到即時的畫面，而後端開發就像冰山下的部分，你無法直接「看到」發生了什麼，只能依靠回應和結果判斷，這也加劇了學習的難度。很多新手可能會覺得：「後端開發太難了，我根本不懂！」這種挫折感其實很常見，但透過正確的心理調適，你會發現後端並沒有那麼可怕。

心理調適小技巧：

• 分段完成：不要一次想搞定整個後端系統，先專注於核心功能，像是我們這次先從建立資料夾結構開始，再完成 Express 環境。
• 使用 AI 輔助，讓後端不再神秘：在學習後端的過程中，很多新手常常會卡在一些複雜的概念和技術細節，這時候 AI 工具就派上用場了。

2. 後端的資料夾結構

當你開始搭建後端時，資料夾的結構會對專案的維護和開發效率產生巨大影響。為了避免程式碼過於混亂，我們需要建立有條理的資料夾結構，讓每個功能模塊都有各自的歸屬。

使用 Express Generator 建立初步資料夾結構

我們可以利用 Express 官方 的工具 Express Generator 來幫助我們快速建立基本的後端資料夾結構。這個工具能夠自動幫你建立初步的 Express 框架，省去手動配置的繁瑣過程。

步驟 1：使用 Express Generator 建立專案

首先，我們會使用 npx 命令來快速生成一個 Express 專案。

npx express-generator backend-project
cd backend-project
npm install

這樣就會建立好初步的專案結構，並自動安裝必要的依賴包。

Express Generator 幫我們生成了以下基本結構：

backend-project/
│
├── bin/               # 啟動伺服器的相關程式碼
├── public/            # 靜態資源
├── routes/            # 路由設定
├── views/             # 預設的視圖
├── app.js             # 主應用程式
└── package.json       # 專案設定與依賴

這個初步的架構已經足夠讓你開始簡單的後端開發，例如設計 API 路由和處理 HTTP 請求。

查看指令選項：

你可以使用 -h 或 --help 來查看 Express Generator 的所有選項：

$ express -h

這會列出所有可用的指令選項：

Usage: express [options] [dir]

Options:

  -h, --help                  # 顯示幫助資訊
      --version               # 顯示 express-generator 版本號
  -e, --ejs                   # 加入 EJS 模板引擎
      --hbs                   # 加入 Handlebars 模板引擎
      --pug                   # 加入 Pug 模板引擎
  -H, --hogan                 # 加入 Hogan.js 模板引擎
      --no-view               # 不使用模板引擎
  -v, --view <engine>         # 加入指定模板引擎，如 EJS、Pug、Handlebars 等
  -c, --css <engine>          # 指定樣式表的預處理引擎，如 Less、Stylus、Sass
      --git                   # 自動加入 .gitignore 檔案
  -f, --force                 # 覆寫非空目錄

3. 更進階的資料夾結構設計

Express Generator 雖然能幫你快速建立基礎結構，但隨著專案的複雜度提升，你會發現它有些不足之處，尤其在專案規模變大時，可能需要自己調整和擴展資料夾結構。

常見的進階資料夾結構

當你開始擴展後端專案時，可以考慮加一些自訂的資料夾，例如 controllers、models、middlewares、services 等等，這樣能讓程式碼更具可讀性和可維護性。

各資料夾的作用：

• controllers：負責處理來自前端的請求，並與 models 和 services 互動，處理商業邏輯。
• models：管理與資料庫的互動，定義資料表和數據操作的邏輯。
• middlewares：放置處理請求前的檢查邏輯，例如身份驗證、權限驗證等。
• services：將複雜的商業邏輯抽離出 controller，保持 controller 簡潔。
• migrations 和 seeders：負責資料庫的結構（migrations）和初始假資料（seeders）。

進階範例結構：

project-root/
│
├── controllers/
│   └── userController.js
├── models/
│   └── userModel.js
├── routes/
│   └── userRoutes.js
├── middlewares/
│   └── authMiddleware.js
├── services/
│   └── userService.js
├── migrations/
│   └── 20230930-create-user-table.js
├── seeders/
│   └── 20230930-seed-users.js
└── app.js

這樣的分層設計可以讓專案保持條理清晰，未來即使功能越來越多，也不容易陷入混亂。

4. 透過 ChatGPT 學習 Express Generator 的 app.js 和 www

如果你剛接觸後端開發，看到 Express Generator 生成的 app.js 和 bin/www 這些檔案，可能會覺得有點摸不著頭緒，不過別擔心！我們可以透過 ChatGPT 來幫你一步步解釋這些檔案的作用，讓你更容易理解 Express 的運作方式。

4-1. 透過 ChatGPT 學習 app.js

app.js 是整個應用程式的大腦，它負責處理中介層（middlewares）、路由（routes）、錯誤處理，還有模板引擎的設定。這個檔案基本上就是你應用的核心邏輯。如果你對某些程式碼不太熟悉，像是 app.use(express.json()) 這些用法，可以把它直接貼到 ChatGPT 問：

"這行 app.use(express.json()) 是什麼意思？它在應用程式裡的作用是什麼？"

這樣你就能得到詳細解釋，像是：express.json() 這個中介層用來處理傳入的 JSON 格式資料，讓伺服器可以輕鬆讀取 JSON 格式的請求。

• 中介層設定：這裡載入了 Express 的一些中介層，包括請求日誌記錄（morgan）、解析 JSON（express.json）、處理靜態資源（express.static）等。
• 路由設定：app.js 定義了路由模組的使用方式，例如 / 路徑使用 indexRouter，/users 路徑使用 usersRouter。
• 錯誤處理：最後的錯誤處理段落，用來處理 404 找不到的錯誤或其他應用程式中的錯誤。

範例程式碼：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// 設定視圖引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 使用中介層
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 路由設定
app.use('/', indexRouter);
app.use('/users', usersRouter);

// 處理 404 錯誤
app.use(function(req, res, next) {
  next(createError(404));
});

// 錯誤處理
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

app.js 定義了整個 Express 應用的邏輯與配置，但它並不負責啟動伺服器，這是 bin/www 檔案的工作。ChatGPT 可以幫助你解釋這些設定背後的作用，讓你理解每個部分的功能。

4-2. 透過 ChatGPT 學習 bin/www 檔案

再來看一下 bin/www 這個檔案，這個其實是啟動伺服器的腳本，負責監聽伺服器的端口，並讓應用開始運行。如果你不知道 server.listen(port) 是在做什麼，可以問 ChatGPT：

"這個 server.listen(port) 在伺服器裡是什麼意思？它的作用是什麼？"

ChatGPT 會告訴你這行程式碼是讓伺服器開始監聽某個特定的端口，準備接收請求。

• 伺服器啟動：www 檔案從 app.js 載入應用程式。
• 監聽端口：它會將應用程式綁定到指定的端口，預設是 3000。

範例程式碼：

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('backend-project:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

這個檔案就是用來建立一個 HTTP 伺服器，並將你的 Express 應用綁定到 3000 port。

4-3. 如何確認 Express 後端環境是否成功建立

接下來，我們來確認伺服器是否成功啟動。步驟如下：

1. 在終端輸入以下指令來啟動伺服器：

   npm start
   

2. 打開瀏覽器並輸入 http://localhost:3000/，你應該會看到 Express 的預設頁面，這就代表你的後端環境已經成功建立！

   

這樣你就完成了 Express 的後端環境設置！

5. 開發後端就是破關！

把後端開發想成一個破關遊戲，每完成一個功能就像過了一個小關卡。剛開始你可能覺得路途遙遠，但每一步的進展都會讓你對後端的理解更加深入。現在的你可能只是學會建立伺服器，未來的你會熟練地設計複雜的 API 架構、優化資料庫查詢效能，甚至搭建大型系統。

所以，別害怕，後端開發其實沒那麼恐怖，只要你願意多花點時間和心思，最終你一定能成為一個全能的全端開發者！