PGM->Node.js/Express/Jadeテンプレートによる画面表示 - プログラミングの勉強をしよう@Wiki

Top > PGM->Node.js > Express > Jadeテンプレートによる画面表示

Jadeテンプレートによる画面表示

概要

Jadeテンプレートを使用してレンダリングを行い、表示する

サンプル

app.js

/**
 * Module dependencies.
 */
 
var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , test = require('./routes/test')
  , param4 = require('./routes/tmp_test')		// 追加
  , http = require('http')
  , path = require('path');
 
var app = express();
 
app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});
 
app.configure('development', function(){
  app.use(express.errorHandler());
});
 
// ルーティングメソッド設定
app.get('/', routes.index);
app.get('/users', user.list);
 
app.get('/param4', param4.index);		// 追加
 
http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});
 
 

routes/tmp_test.js

/*
 * テスト
 */
 
exports.index = function(req, res){
 
	// パラメータ設定
	var title = "テンプレートテスト";
	var p1 = "Hello World１";
	var p2 = "Hello World２";
	var p3 = "Hello World３";
 
	// テンプレートにレンダリング
	res.render('test', 
			{	
				title: title,
				param1: p1,
				param2: p2,
				param3: p3,
			}
	);
};
 
 
 
 

views/test.jade

doctype 5
html
  head
    meta(charset="utf-8")
    title= title
  body
    div
      span=param1
    div
      p=param2
    div
      div=param3
 
 
 

結果

「http://localhost:3000/param4」

---