nodejs-logo

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

expressjs_handlebar_simplepage_1

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 :))

expressjs_handlebar_simplepage_2

 

Tạo website đầu tiên với ExpressJS

Category: NodeJSPrograming
0
7186 views

Join the discussion

Your email address will not be published. Required fields are marked *