Rate this post

Trong Express.js, view là một thành phần quan trọng của mô hình MVC (Model-View-Controller). Nó là một phần của ứng dụng mà xử lý việc hiển thị dữ liệu cho người dùng. Các view thường được viết bằng HTML, CSS và JavaScript. Trong Express.js, chúng ta có thể sử dụng các thư viện template như Pug, EJS, Handlebars để tạo và hiển thị các view. Mỗi view sẽ tương ứng với một route và sẽ được gọi bởi một controller.

Tóm tắt nội dung

View trong express js là gì ?

Trong Express.js, view là một cách để tạo ra các file HTML động dựa trên dữ liệu được trả về từ server. View thường được sử dụng để hiển thị các dữ liệu được trả về từ server dưới dạng HTML để người dùng có thể xem và tương tác. View trong Express.js sử dụng các đoạn mã HTML, CSS và JavaScript để tạo ra giao diện người dùng và hiển thị dữ liệu từ server. Express.js hỗ trợ nhiều công cụ view khác nhau như EJS, Pug, Handlebars, Mustache, và nhiều hơn nữa. Các view có thể chứa biểu mẫu đăng nhập, trang chủ, trang sản phẩm, và nhiều loại giao diện khác.

Xem thêm Cài đặt Express

Tại sao phải sự dụng View trong express js

View trong ExpressJS được sử dụng để hiển thị các dữ liệu được lấy từ server lên giao diện người dùng. Khi nhận được yêu cầu từ client, server sẽ xử lý các tác vụ cần thiết và trả về dữ liệu cho client. Nhưng dữ liệu đó chỉ là dạng dữ liệu thuần túy, chưa được biểu diễn và hiển thị trên giao diện người dùng.

Do đó, ta cần sử dụng view để chuyển đổi dữ liệu đó thành các đối tượng HTML, CSS và JavaScript, để có thể hiển thị trên giao diện người dùng. Khi đó, người dùng sẽ dễ dàng hình dung và sử dụng được các thông tin đó.

Ngoài ra, sử dụng View trong ExpressJS còn giúp tách rời logic xử lý và giao diện người dùng, giúp cho code trở nên dễ dàng quản lý hơn, giảm thiểu khả năng xảy ra lỗi và tăng tính bảo mật cho ứng dụng.

Một số định dạng view được hỗ trợ cho ExpressJS

ExpressJS là một framework phát triển ứng dụng web trong Node.js. Nó cung cấp nhiều cách để định dạng và hiển thị dữ liệu trên trang web. Dưới đây là một số định dạng view được hỗ trợ trong ExpressJS:

Pug (trước đây là Jade): Pug là một ngôn ngữ mẫu dựa trên indentation. Nó rất tiện lợi để tạo ra các mẫu HTML. Đây là một ví dụ cơ bản sử dụng Pug:

code// index.pug
html
  head
    title My Express App
  body
    h1 Welcome to Express!
    p Hello, #{name}!

EJS (Embedded JavaScript): EJS cho phép nhúng mã JavaScript vào trong mẫu HTML. Đây là một ví dụ cơ bản sử dụng EJS:

<!-- index.ejs -->
<html>
  <head>
    <title>My Express App</title>
  </head>
  <body>
    <h1>Welcome to Express!</h1>
    <p>Hello, <%= name %>!</p>
  </body>
</html>

Handlebars: Handlebars cung cấp cú pháp đơn giản để tạo các mẫu dựa trên JavaScript. Đây là một ví dụ cơ bản sử dụng Handlebars:

<!-- index.handlebars -->
<html>
  <head>
    <title>My Express App</title>
  </head>
  <body>
    <h1>Welcome to Express!</h1>
    <p>Hello, {{name}}!</p>
  </body>
</html>

Mustache: Mustache là một ngôn ngữ mẫu độc lập. Nó cung cấp cú pháp đơn giản và có thể được sử dụng với nhiều ngôn ngữ lập trình khác nhau. Đây là một ví dụ cơ bản sử dụng Mustache:

<!-- index.mustache -->
<html>
  <head>
    <title>My Express App</title>
  </head>
  <body>
    <h1>Welcome to Express!</h1>
    <p>Hello, {{name}}!</p>
  </body>
</html>

Đây chỉ là một số định dạng view phổ biến được hỗ trợ trong ExpressJS. Ngoài ra, bạn cũng có thể sử dụng các định dạng view khác hoặc tùy chỉnh theo nhu cầu của bạn bằng cách sử dụng các thư viện và middleware phù hợp.

Xem thêm Hướng dẫn về Constraint Layout

Cách cài đặt các module cần thiết cho định dạng view trong Express.js

Để cài đặt các module cần thiết cho định dạng view trong Express.js, bạn có thể thực hiện các bước sau:

Khởi tạo một dự án Express.js mới: Đầu tiên, hãy tạo một dự án Express.js mới bằng cách chạy lệnh sau trong thư mục gốc của dự án:

$ npm init

Lệnh trên sẽ tạo một file package.json để quản lý các phụ thuộc và cấu hình của dự án.

Cài đặt Express.js: Tiếp theo, cài đặt Express.js bằng lệnh sau:

$ npm install express

Cài đặt module định dạng view: Bạn cần cài đặt module định dạng view cụ thể mà bạn muốn sử dụng, như Pug, EJS, Handlebars hoặc Mustache. Dưới đây là các lệnh cài đặt cho từng module:

Pug:

$ npm install pug

EJS:

$ npm install ejs

Handlebars:

$ npm install express-handlebars

Mustache:

$ npm install mustache-express

Cấu hình Express.js để sử dụng module định dạng view: Để sử dụng module định dạng view trong Express.js, bạn cần thực hiện các bước cấu hình tương ứng cho từng module. Dưới đây là ví dụ cấu hình cho một số module phổ biến:

Pug:

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

app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));

// Routes và các cấu hình khác...

EJS:

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

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Routes và các cấu hình khác...

Handlebars:

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, 'views'));

// Routes và các cấu hình khác...

Mustache:

const express = require('express');
const mustacheExpress = require('mustache-express');
const app = express();

app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');
app.set('views', path.join(__dirname, 'views'));

// Routes và các cấu hình khác...

Lưu ý rằng bạn cần đảm bảo rằng các module cần thiết đã được cài đặt và các đoạn mã cấu hình tương ứng đã được thêm vào tệp tin JavaScript

Xem thêm Node.js Package Manager

Ví dụ View trong Express.js

Một ví dụ của một view trong Express.js có thể như sau:

//views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to my website</title>
  </head>
  <body>
    <h1>Welcome to my website, <%= userName %></h1>
    <p>Here is a list of recent articles:</p>
    <ul>
      <% for (var i = 0; i < articles.length; i++) { %>
        <li><%= articles[i].title %></li>
      <% } %>
    </ul>
  </body>
</html>

Trong ví dụ trên, chúng ta sử dụng thư viện template EJS để tạo ra một view có tên là “index.ejs”. Trong view này, chúng ta sử dụng cú pháp EJS để hiển thị dữ liệu truyền vào từ controller. Ví dụ, biến “userName” và “articles” được truyền vào từ controller và sẽ được hiển thị trong view này.

Trong controller, chúng ta có thể gọi view này như sau:

app.get('/', function(req, res) {
    res.render('index', { userName: 'mr.doraemon0101@gmail.com', articles: [{ title: 'Article 1' }, { title: 'Article 2' }] });
});

Trong đó, hàm render sẽ gọi view index.ejs và truyền vào các tham số userName và articles

Một ví dụ đơn giản về view trong Express.js có thể là hiển thị thông tin của người dùng sau khi đăng nhập.

Ưu và nhược điểm của View trong express js

Ưu điểm:

Giúp tách biệt logic xử lý nghiệp vụ và giao diện hiển thị. Việc này giúp cho mã nguồn trở nên dễ bảo trì và dễ mở rộng.
Hỗ trợ đa dạng các định dạng view, cho phép lựa chọn định dạng phù hợp với yêu cầu của ứng dụng.
Cung cấp các công cụ hỗ trợ để đơn giản hóa quá trình thiết kế giao diện như truyền dữ liệu sang View, kết nối với CSDL, …
Tích hợp với các công cụ hiển thị giao diện (template engine) nổi tiếng như Pug, Handlebars, EJS, … giúp cho việc hiển thị dữ liệu trở nên đơn giản hơn.

Nhược điểm:

Tốn thời gian để học và làm quen với các công cụ template engine.
Khi sử dụng các công cụ template engine phức tạp, có thể ảnh hưởng đến hiệu suất của ứng dụng.
Khi ứng dụng quá phức tạp với nhiều loại dữ liệu, nhiều mẫu giao diện, việc quản lý mã nguồn có thể trở nên phức tạp và khó khăn.

Tổng kết

View trong Express.js là một thành phần quan trọng giúp cho việc hiển thị dữ liệu trên trình duyệt trở nên dễ dàng hơn. Nó cung cấp khả năng kết hợp dữ liệu với các định dạng tài liệu để tạo ra nội dung web tĩnh hoặc động. Express.js hỗ trợ nhiều định dạng view như Pug, EJS, Handlebars, … Tuy nhiên, việc sử dụng View cũng có những hạn chế như tốc độ load trang có thể chậm hơn so với sử dụng các công nghệ frontend như React hoặc Angular.

Nodejs

View trong Express.js