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

前言

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

目前 app.js

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

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

然後 admin.js 內容如下

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 必須要接收這個模組，所以裡面內容要加入這些

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

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

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 的完整程式碼

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 證明已成功~