Hãy cùng chúng tôi khám phá cách sử dụng EJS làm Template Engine trong Express để tạo ra những ứng dụng web đẹp mắt và linh hoạt. Trên hết, chúng tôi sẽ hướng dẫn bạn từng bước một, giúp bạn hiểu rõ về cách cài đặt và tích hợp EJS vào dự án của mình.
Tạo một project Express với express-generator
Để tiết kiệm thời gian và nhanh chóng tạo ra một project ExpressJS, chúng ta có thể sử dụng express-generator
. Để cài đặt express-generator
từ command line hoặc terminal, bạn chỉ cần gõ lệnh sau:
Bạn đang xem: Node.js Tutorial: Sử dụng EJS làm Template Engine trong Express
npm install -g express-generator
Nếu bạn đang sử dụng Linux, hãy đảm bảo thêm từ khóa “sudo” ở đầu dòng lệnh trên và sử dụng tham số “-g” để cài đặt toàn cục. Sau khi cài đặt xong, hãy di chuyển đến thư mục mà bạn muốn tạo project và chạy lệnh sau để khởi tạo project:
express
Cuối cùng, chúng ta cần cài đặt các module NodeJS cần thiết cho project bằng lệnh:
npm install
Tích hợp EJS làm Template Engine
Mặc định, khi chúng ta tạo project ExpressJS bằng express-generator
, nó sẽ tự động sử dụng jade
làm template engine. Tuy nhiên, để sử dụng EJS làm template engine thay cho jade
, bạn cần mở file app.js
và sửa dòng app.set('view engine', 'jade');
thành app.set('view engine', 'ejs');
. Sau đó, bạn cần xóa các file .jade
không cần thiết trong thư mục views
. Nếu bạn muốn gỡ bỏ hoàn toàn jade
khỏi project, hãy sử dụng lệnh:
npm uninstall jade -save
Tiếp theo, chúng ta cần tạo các file .ejs
cần thiết trong thư mục views
. Ví dụ, chúng ta có thể tạo file index.ejs
với nội dung đơn giản như sau:
<h2>Hello Word</h2>
Bây giờ, hãy truy cập vào project của bạn tại địa chỉ http://localhost:3000
để kiểm tra kết quả.
Xây dựng partials common layout với EJS
Xem thêm : Cơ Sở Nuôi Cấy Ngọc Trai Phú Quốc: Chất Lượng Và Nổi Tiếng
Giống như các ứng dụng khác, chúng ta cũng có thể sử dụng EJS để xây dựng các layout dùng chung cho ứng dụng như header, footer, sidebar, và nhiều hơn nữa.
Ví dụ, ta có thể tạo các file header.ejs
, footer.ejs
, sidebar.ejs
trong thư mục views
như sau:
File header.ejs
:
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Framgia</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav><!--/.navbar -->
File footer.ejs
:
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
File sidebar.ejs
:
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
Sử dụng EJS partials common layout
Để sử dụng EJS partials, chúng ta sử dụng cú pháp <% include FILENAME%>
. Ví dụ, sau khi đã tạo các file header.ejs
, footer.ejs
, sidebar.ejs
như ở trên, hãy mở file index.ejs
lên và sửa nội dung như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ExpressJS</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/offcanvas/offcanvas.css" rel="stylesheet">
</head>
<body>
<% include header%>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
</div>
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<% include sidebar%>
</div>
</div>
<% include footer%>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
Ok, bây giờ hãy truy cập địa chỉ http://localhost:3000
và xem thành quả nhé:
Passing data to views trong EJS
Bây giờ, hãy mở file /route/index.js
mà express-generator
đã tự tạo ra và sửa nội dung như sau:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
var links = [
{ href: 'http://recruit.framgia.vn/', text: 'Framgia Việt Nam Tuyển Dụng' },
{ href: 'https://www.facebook.com/FramgiaVietnam/', text: 'Framgia Việt Nam Facebook' },
{ href: 'https://viblo.asia/', text: 'Viblo by Framgia' },
{ href: '/', text: 'Text Link 1' },
{ href: '/', text: 'Text Link 2' },
{ href: '/', text: 'Text Link 3' },
{ href: '/', text: 'Text Link 4' },
];
var headline = 'Framgia Viet Nam';
var tagline = "IT là lĩnh vực công bình và không giới hạn, nơi mỗi cá nhân được chia sẻ cơ hội và nhìn nhận thông qua nỗ lực thực sự. Tận dụng những lợi thế của IT mang lại, chúng tôi không ngừng hoàn thiện, trở thành nền tảng cho sự phát triển dịch vụ toàn cầu.";
res.render('index', { links: links, headline: headline, tagline: tagline });
});
module.exports = router;
Tiếp theo, mở file /views/index.ejs
và sửa nội dung như sau:
<div class="jumbotron">
<h1><%= headline %></h1>
<p><%= tagline %></p>
</div>
Mở file /views/sidebar.ejs
và sửa nội dung như sau:
<div class="list-group">
<% links.forEach(function(link) { %>
<a href="<%= link.href %>" class="list-group-item active"><%= link.text %></a>
<% }); %>
</div>
Cuối cùng, hãy chạy ứng dụng của bạn và xem thành quả:
Sử dụng EJS làm template engine trong Express rất đơn giản, phải không các bạn? Nếu bạn còn thắc mắc gì, hãy comment xuống bên dưới và chúng tôi sẽ cố gắng trả lời trong thời gian sớm nhất.
Tham khảo:
Nguồn: Giaidapviet.com
Danh mục: Khám Phá