如何使用Node.js + express 建立一個網站

若提到使用Node.js來架設網站，基本上都會聯想到 Express 模組，以下即是簡單地說明如何使用Node.js + Express 在十分鐘內架設一個網站。

檔案架構:

node_modules
view
--layout.ejs
--login.ejs
--index.ejs
server.js
package.json

Step 1.

建立 package.json

npm init

Step 2.

安裝相關的node modules，列如: 提供整個web框架的express，以及作為 view 元件引擎 的 ejs (全名: Embedded Javascript)，還有一些middleware，像是用來render partial view的express-partials，以及解析post請求資料的 body-parser，和能夠輸出HTTP請求日誌的mogan。

npm install express --save
npm install express-partials --save
npm install body-parser --save
npm install morgan --save
npm install ejs --save

Step 3. 建立view元件

layout.ejs

    <title>Simple Express Example</title>

    <a href="/">Home</a> |
    <a href="/login">Log In</a>

index.ejs作為首頁。

<h2>Welcome! Please log in.</h2>

login.ejs提供讓使用者登陸的 form，並且在按下 submit 的按鈕後將資料 post 回後端。

<form action="/login" method="post">  
    Account:<br></br>
    <input id="account" name="account" type="text"></input><br></br>
    Password:<br></br>
    <input id="Password" name="Password" type="password"></input>
    <input type="submit" value="Submit"></input>
</form>

Step 4. 建立 server.js 處理 GET、POST請求。

// server.js

// BASE SETUP
// =============================================================================

// call the packages we need
var express = require('express');        // call express
var app = express();                 // define our app using express
var bodyParser = require('body-parser');
var partials = require('express-partials');
var logger = require('morgan');

// configure Express
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
// configure app to use bodyParser()
// this will let us get the data from a POST
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(partials());
app.use(logger('dev'));
app.use(express.static(__dirname + '/public'));

var port = process.env.PORT || 8080;        // set our port

app.route('/login')
    .get(function (req, res) {
        res.render('login.ejs');
    })
    .post(function (req, res) {
        console.log(req.body.account);
        res.send(`hello ${req.body.account}`);
    });

app.get('/', function (req, res) {
    res.render('index');
});

// START THE SERVER
// =============================================================================
app.listen(port);
console.log('Start on port ' + port);

完整程式碼: simple-website-with-nodejs

Reference: 使用Node.js + express 十分鐘內建立一個網站