前言：
若提到使用Node .js來架設網站, 基本上都會聯想到 Express 模組, 以下即是簡單地說明如何使用 Node .js + Express 在十分鐘內架設一個網站
檔案架構如下:
node_modules
view
layout.ejs
login.ejs
index.ejs
server.js
package.json
|
Step 1. 建立 package.json
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
<!DOCTYPE html>
<html>
<head>
<title>Simple Express Example</title>
</head>
<body>
<p>
<a href="/">Home</a> |
<a href="/login">Log In</a>
</p>
<%-body -%>
</body>
</html>
|
index.ejs
作為首頁
<h2>Welcome! Please log in.</h2>
login.ejs
提供讓使用者登陸的 form, 並且在按下 submit 的按鈕後將資料 post 回後端
<form method="post" action="/login" >
Account:<br>
<input type="text" id="account" name="account"><br>
Password:<br>
<input type="password" id="Password" name="Password">
<input type="submit" value="Submit">
</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('Sart on port ' + port);
|
完整程式碼:
https://github.com/andy51002000/simple-website-with-nodejs
Reference:
[介紹 Morgan]https://yq.aliyun.com/articles/2983
留言
張貼留言