Hướng dẫn các bạn xây dựng 1 website đơn giản với ExpressJS và Handlebars View Engine
gọi lệnh: npm install express (để cài module ExpressJS), npm install express3-handlebars (để cài module HandleBars view engine: đây là view engine đơn giản, dễ xài với cấu trúc tương tự Mustache)
Sau khi cài xong, các bạn tao thêm các thư mực để có cấu trúc như hình bên dưới (không cần file HelloWorld.js), node_modules là do chạy npm được tạo mặc định
Các đuôi file *.handlebars là đuôi file được sử dụng với view engine handlebars (tương tự như ASP.NET MVC có Razor view engine cũng có đuôi *.cshtml), nội dung của view các bạn có thể thêm đại là <h1>Hello</h1> hay gì đó, không c ần thẻ body (vì nó nằm trong layout hết rồi) để test.
Riêng file main.handlebars là file layout thì nội dung như sau
<!doctype html>
<html>
<head>
<title>Trần Ký Phát Web</title>
</head>
<body>
<center><img style="height:400px;" src="/images/girl.jpg" alt="Beautiful Girl"></center>
{{{body}}}
</body>
</html>
Chú ý thẻ {{{body}}} là nơi sẽ chèn các view khác vào
Cuối cùng ở file trankyphatsite.js các bạn chèn code như sau, mình chú thích ý nghĩa rõ ở mỗi dòng code rồ
var express = require('express');
var app = express();
app.disable('x-powered-by');
//Set folder chứ file tĩnh là public, khi gọi bên view thì không cần nhập "/public", xem lại file layout nhé chỉ cần "/images/girl.jpg"
app.use(express.static(__dirname + "/public"));
app.set('port', process.env.PORT || 3000);
// thiệt lập sử dụng handlebars view engine, lưu ý chỗ defaultLayout là main, không cần extension
var handlebars = require('express3-handlebars')
.create({ defaultLayout:'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
//Lần lượt tạo các route tương ứng với view
app.get('/', function(req, res) {
res.render('home');
});
app.get('/about', function(req, res) {
res.render('about');
});
// Khi gặp lỗi 404
app.use(function(req, res, next){
res.status(404);
res.render('404');
});
// Khi gặp lỗi 500
app.use(function(err, req, res, next){
console.error(err.stack);
res.status(500);
res.render('500');
});
app.listen(app.get('port'), function(){
console.log( 'Express started on http://localhost:' +
app.get('port') + '; press Ctrl-C to terminate.' );
});
Gọi lệnh node trankyphatsite.js
Kết quả đây: 1 tấm ảnh khá hot :))
