全端勇士之路 Node.js 基礎學習-Express Route 模組化

前言

當我們 route 越來越多的時候,難不成都要通通塞在 app.js 中?這樣子不會很肥?哦,不,所以這邊要來講講該如何將 route 模組化

目前 app.js

目前我們的 app.js 是這樣子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var express = require('express');
var app = express();
var port = 8080;
var bodyParser = require('body-parser');

app.set('views', './views');
app.set('view engine', 'ejs');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

var login = function(req, res, next) {
console.log('驗證成功')
next();
}

app.get('/',login ,function(req, res) {
// req → request
// res → response
res.render('index',{
title: '這是一段話',
sayhi: 'HelloWorld Ray'
});
})

app.get('/user', function(req, res) {
// req → request
// res → response
res.send('Hello User!');
})

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

app.post('/login', function(req, res) {
// req → request
// res → response
var account = req.body.account;
var password = req.body.password;
console.log(account);
res.redirect('/admin');
})

app.use(function(req,res,next){
res.status(404);
res.send('404 畫面');
})

app.use(function(err,req,res,next) { // 這邊可以看到多了一個 err
res.status(500);
res.send('程式碼出現錯誤');
})

app.listen(port, function() {
console.log('已開啟 port: ' + port);
})

模組化

假設我們希望 admin 的 router 變成一個模組,所以這邊就來建立一個資料夾叫 route,並且新增一個檔案叫 admin.js

route

然後 admin.js 內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var express = require('express');
var router = require.Router();

router.get('/admin',login ,function(req, res) {
// req → request
// res → response
res.send('Hello Admin!');
})

// 我額外新增的
router.get('/admin/login',login ,function(req, res) {
// req → request
// res → response
res.send('Hello login!');
})

module.exports = router;

接下來 app.js 必須要接收這個模組,所以裡面內容要加入這些

1
2
var adminRoute = require('./route/admin');
app.use('/admin', adminRoute); // 第一個參數有點類似命名第一層的網址 /admin/XXXX

所以我們這邊必須再將 admin.js,做一次調整,因為我們已經透過 app.js 的 app.use 宣告路徑,所以只需要輸入子 route 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var express = require('express');
var router = require.Router();

router.get('/',function(req, res) {
// req → request
// res → response
res.send('Hello Admin!');
})

// 我額外新增的
router.get('/login' ,function(req, res) {
// req → request
// res → response
res.send('Hello login!');
})

module.exports = router;

這樣我們所有 admin 的東西都模組化放在 admin.js 底下哩

最後這邊補充 app.js 的完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var express = require('express');
var app = express();
var port = 8080;
var bodyParser = require('body-parser');
var adminRoute = require('./route/admin');

app.set('views', './views');
app.set('view engine', 'ejs');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

var login = function(req, res, next) {
console.log('驗證成功')
next();
}

app.use('/admin',login ,adminRoute);

app.get('/',login ,function(req, res) {
// req → request
// res → response
res.render('index',{
title: '這是一段話',
sayhi: 'HelloWorld Ray'
});
})

app.get('/user', function(req, res) {
// req → request
// res → response
res.send('Hello User!');
})

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

app.post('/login', function(req, res) {
// req → request
// res → response
var account = req.body.account;
var password = req.body.password;
console.log(account);
res.redirect('/admin');
})

app.use(function(req,res,next){
res.status(404);
res.send('404 畫面');
})

app.use(function(err,req,res,next) { // 這邊可以看到多了一個 err
res.status(500);
res.send('程式碼出現錯誤');
})

app.listen(port, function() {
console.log('已開啟 port: ' + port);
})

當然也可以試著進入 localhost:8080/admin/login 證明已成功~

login

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ