Rate this post

Trong bài viết này này, chúng ta sẽ tập trung vào việc tìm hiểu và sử dụng EJS để tạo giao diện cho website cá nhân đơn giản. Mục tiêu của Sub-Series ExpressJS là thực hiện xử lý các route. Tuy nhiên, trước khi bắt đầu, hãy để chúng tôi giới thiệu lại EJS một cách chi tiết hơn, đặc biệt nếu bạn đang sử dụng một Template Engine khác.

Tóm tắt nội dung

Giới thiệu về EJS

EJS, viết tắt của “Embedded JavaScript,” là một ngôn ngữ mẫu (template language) được sử dụng trong phát triển ứng dụng web. Nó giúp phát triển các trang web động bằng cách cho phép tạo ra các mẫu HTML được kết hợp với mã JavaScript. EJS thường được sử dụng cùng với Node.js và các framework web như Express để tạo giao diện người dùng động dựa trên dữ liệu từ máy chủ.

Dưới đây là một số điểm quan trọng về EJS:

Tích hợp dễ dàng: EJS tích hợp dễ dàng vào các dự án Node.js thông qua npm (Node Package Manager). Bạn có thể cài đặt EJS bằng lệnh npm install ejs và sau đó sử dụng nó trong ứng dụng của mình.
Cú pháp gần gũi với HTML: Mã EJS được nhúng trực tiếp vào các tệp HTML, làm cho cú pháp rất gần gũi và dễ đọc. Điều này giúp người phát triển dễ dàng thao tác với mã HTML cùng với mã JavaScript.
Hiển thị dữ liệu động: Với EJS, bạn có thể hiển thị dữ liệu động từ máy chủ trên trang web. Bằng cách sử dụng các biến và mã JavaScript, bạn có thể hiển thị danh sách, dữ liệu cơ sở dữ liệu, và thông tin động khác trên trang web.
Cấu trúc kiến thức: EJS hỗ trợ cấu trúc kiến thức như vòng lặp, câu điều kiện, và các hàm tạo mẫu. Điều này cho phép bạn tạo các trang web phức tạp và linh hoạt.
Thay thế biến môi trường: Bạn có thể sử dụng biến môi trường trong EJS để truyền các giá trị môi trường như đường dẫn tới tệp tin, ngôn ngữ, và cài đặt khác vào các mẫu.
Phát triển web đa ngôn ngữ: EJS hỗ trợ phát triển các ứng dụng web đa ngôn ngữ bằng cách cho phép bạn thay đổi các văn bản trong mẫu dựa trên ngôn ngữ được chọn.
Tương thích với nhiều trình duyệt: Mã EJS được tạo ra dưới dạng mã HTML chuẩn, do đó nó tương thích với hầu hết các trình duyệt web phổ biến.

EJS là một công cụ mạnh mẽ cho việc phát triển giao diện người dùng động trong ứng dụng web và thường được sử dụng trong cộng đồng phát triển web của Node.js và Express.

Tích hợp EJS vào dự án web

Để tích hợp EJS vào dự án web của bạn, bạn cần thực hiện một số bước cơ bản sau đây. Dưới đây là hướng dẫn tổng quan:

Cài đặt EJS:

Sử dụng npm (Node Package Manager) để cài đặt EJS vào dự án của bạn. Mở terminal và chạy lệnh sau:

npm install ejs --save

Cấu hình ứng dụng Express:

Nếu bạn đang sử dụng Express.js, hãy cấu hình ứng dụng của bạn để sử dụng EJS làm trình tạo mẫu (template engine). Điều này thường được thực hiện trong tệp cấu hình của ứng dụng (ví dụ: app.js hoặc server.js).

const express = require('express');
const app = express();

// Cấu hình sử dụng EJS làm template engine
app.set('view engine', 'ejs');

Tạo thư mục cho mẫu (Views):

Tạo một thư mục trong dự án của bạn để lưu trữ các tệp mẫu EJS. Thông thường, thư mục này có tên là “views.” Đảm bảo rằng các tệp mẫu của bạn có phần mở rộng “.ejs” (ví dụ: index.ejs, profile.ejs,…).

Render mẫu trong route:

Trong các route của ứng dụng Express, bạn có thể sử dụng phương thức res.render() để hiển thị một tệp mẫu EJS và truyền dữ liệu vào mẫu nếu cần. Ví dụ:

app.get('/profile', (req, res) => {
  const userData = {
    username: 'john_doe',
    email: 'john@example.com'
  };
  res.render('profile', { user: userData });
});

Tạo và chỉnh sửa các tệp mẫu EJS:

Bây giờ bạn có thể tạo và chỉnh sửa các tệp mẫu EJS trong thư mục “views” của bạn. Sử dụng cú pháp EJS để hiển thị dữ liệu động và tạo giao diện người dùng.

Kết nối CSS và JavaScript:

Đảm bảo rằng bạn đã kết nối các tệp CSS và JavaScript của mình với tệp mẫu EJS. Điều này giúp định dạng và tương tác với giao diện người dùng.

Chạy ứng dụng:

Cuối cùng, khởi động ứng dụng của bạn và kiểm tra trang web của bạn để đảm bảo rằng mẫu EJS hoạt động như mong đợi.

Với các bước trên, bạn đã tích hợp thành công EJS vào dự án web của mình và có thể sử dụng nó để tạo giao diện người dùng động dựa trên dữ liệu từ máy chủ.

Cú pháp cơ bản của EJS

Cú pháp cơ bản của EJS rất gần gũi với HTML, nhưng nó cho phép bạn nhúng mã JavaScript vào mẫu để hiển thị dữ liệu động. Dưới đây là một số cú pháp cơ bản của EJS:

In giá trị biến:

Để in giá trị của một biến trong mẫu EJS, bạn sử dụng cặp ký tự <%= %>.

Ví dụ: Nếu bạn có biến username, bạn có thể in giá trị của nó như sau:

<p>Username: <%= username %></p>

Sử dụng câu lệnh điều kiện:

Bạn có thể sử dụng các câu lệnh điều kiện để kiểm tra và hiển thị nội dung dựa trên điều kiện. Sử dụng cặp ký tự <% %>.

Ví dụ: Kiểm tra nếu biến isAdmin bằng true thì hiển thị thông báo “Admin”:

<% if (isAdmin) { %>
  <p>Admin</p>
<% } %>

Sử dụng vòng lặp:

Bạn có thể sử dụng vòng lặp để lặp qua danh sách và hiển thị nhiều phần tử. Sử dụng cặp ký tự <% %>.

Ví dụ: Lặp qua danh sách users và hiển thị tên của mỗi người dùng:

<ul>
  <% for (let user of users) { %>
    <li><%= user.name %></li>
  <% } %>
</ul>

Sử dụng layout và include:

Bạn có thể sử dụng layout để tái sử dụng các phần mẫu chung và sử dụng include để chèn các mẫu con vào mẫu cha. Điều này giúp tạo cấu trúc gọn gàng và tái sử dụng mã.

Ví dụ: Layout và include trong EJS:

<!-- layout.ejs -->
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <header>
    <h1><%= title %></h1>
  </header>
  <main>
    <%= include('content') %>
  </main>
</body>
</html>

<!-- content.ejs -->
<p>This is the content of the page.</p>

Nhớ rằng EJS cho phép bạn tích hợp mã JavaScript vào mẫu, do đó bạn có khả năng tạo các biểu thức phức tạp và thực hiện các tính toán trong mẫu của mình.

Truyền dữ liệu và biến trong EJS

Trong EJS, bạn có thể truyền dữ liệu và biến từ máy chủ vào mẫu để hiển thị dữ liệu động. Dưới đây là cách bạn có thể truyền dữ liệu và biến trong EJS:

Truyền biến từ máy chủ vào mẫu:

Để truyền biến từ máy chủ vào mẫu EJS, bạn sử dụng phương thức res.render() trong route của bạn. Ví dụ:

app.get('/profile', (req, res) => {
  const userData = {
    username: 'john_doe',
    email: 'john@example.com'
  };
  res.render('profile', { user: userData });
});

Trong ví dụ này, user là tên biến bạn muốn truyền vào mẫu. Bạn có thể sử dụng user trong mẫu EJS để hiển thị giá trị username và email.

Sử dụng biến trong mẫu EJS:

Để sử dụng biến được truyền từ máy chủ trong mẫu EJS, bạn sử dụng cặp ký tự <%= %> và đặt tên biến bên trong chúng. Ví dụ:

<p>Username: <%= user.username %></p>
<p>Email: <%= user.email %></p>

Trong ví dụ này, user.username và user.email là các biến được truyền từ máy chủ và được sử dụng để hiển thị thông tin người dùng trong mẫu EJS.

Sử dụng biểu thức JavaScript:

Bạn cũng có thể sử dụng biểu thức JavaScript trong mẫu EJS để thực hiện tính toán hoặc kiểm tra điều kiện. Sử dụng cặp ký tự <% %> để bao quanh mã JavaScript. Ví dụ:

<p>
  <% if (user.isAdmin) { %>
    This user is an admin.
  <% } else { %>
    This user is not an admin.
  <% } %>
</p>

Trong ví dụ này, chúng ta kiểm tra biến isAdmin trong đoạn mã JavaScript và hiển thị thông báo tương ứng trong mẫu.

Như vậy, bạn có thể truyền dữ liệu và biến từ máy chủ vào mẫu EJS và sử dụng chúng để hiển thị nội dung động trong trang web của bạn.

Ví dụ minh họa

Dưới đây là một ví dụ minh họa cụ thể về cách sử dụng EJS để hiển thị dữ liệu động trong một trang web. Trong ví dụ này, chúng ta sẽ hiển thị danh sách người dùng và kiểm tra xem liệu mỗi người dùng có phải là admin hay không.

Đầu tiên, cài đặt EJS vào dự án của bạn bằng lệnh npm install ejs --save.
Tạo tệp mẫu EJS có tên “users.ejs” trong thư mục “views” của bạn:

Tạo một ứng dụng Express và cấu hình EJS làm trình tạo mẫu:

const express = require('express'); const app = express(); // Cấu hình EJS làm trình tạo mẫu 
app.set('view engine', 'ejs'); 
// Dữ liệu người dùng giả định 
const users = [ { name: 'John', isAdmin: true }, { name: 'Alice', isAdmin: false }, { name: 'Bob', isAdmin: true }, ]; // Route để hiển thị trang danh sách người dùng 
app.get('/users', (req, res) => { 
  res.render('users', { users: users }); }); 
app.listen(3000, () => { console.log('Server is running on port 3000'); });

Khởi động máy chủ bằng lệnh node app.js và truy cập trang web tại http://localhost:3000/users.

Kết quả là bạn sẽ thấy danh sách người dùng được hiển thị trên trang web với các người dùng được đánh dấu là “Admin” hoặc “Regular User” dựa trên giá trị của biến isAdmin.

JavaScript, Nodejs

EJS là gì? Hướng dẫn sử dụng EJS trong phát triển web

Giới thiệu về EJS

Tích hợp EJS vào dự án web

Cú pháp cơ bản của EJS

Truyền dữ liệu và biến trong EJS

Ví dụ minh họa

Trả lời Hủy