2015年1月31日 星期六

使用Node.JS與Express產生一個頁面

當安裝完Node.JS和Express之後,選擇一個熟悉的文字編輯器或IDE便可開始撰寫第一個App了。第一個程式不免俗還是Hello World。

開啟專案底下的app.js檔案(就像c/c++的main)。
有幾個地方需要注意一下:


-----------------------app.js-----------------------
//將一些相關的packages、dependencies、functionality、routes加入
var express      = require('express');
var path         = require('path');
var favicon      = require('serve-favicon');
var logger       = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser   = require('body-parser');
//最上層的controller對應到 '/routes/index.js'
var routes       = require('./routes/index');
var users        = require('./routes/users');

var app = express();

//設定app的views資訊
app.set('views', path.join(__dirname, 'views'));
//使用Jade(node template engine)產生view
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//'/'對應index.js
app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

當我們了解"http://localhost:3000/"對應的是index.js controller。
來看看index controller如何找到對應的view,當ip位置後接'/'時,會自動從index.jade產生對應的view,並給他一個參數title = 'Express'。

-----------------------index.js-----------------------
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;


那index.jade又在哪裡呢?
還記得剛剛在app.js中有設定
app.set('views', path.join(__dirname, 'views'));
所以index.jade就在testWebApp/views資料夾中。

-----------------------index.jade-----------------------
extends layout

block content
  h1= title
  p Welcome to #{title}


到目前為止是範例程式自動產生的首頁範例。http://localhost:3000/會導到Welcome to express的頁面。但如果我們想要自己加一頁,輸入http://localhost:3000/helloworld時,會出現Hello, World! Welcome to Hello, World!要怎麼做? 非常簡單,只要在index.js中加入以下程式碼。


/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
    res.render('helloworld', { title: 'Hello, World!' })
});

接下來再產生一個名稱為helloworld的jade檔案,


extends layout

block content
  h1= title
  p Hello, World! Welcome to #{title}

這樣就完成了。http://localhost:3000/helloworld會出現以下畫面



參考來源:http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/

0 意見:

張貼留言