- vừa được xem lúc

Blog#33: Sử dụng Template Engines trong Nodejs Express - [Express Tutorial - Part 5/10] 😊 (Series: Bí kíp Javascript - PHẦN 27)

0 0 13

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo 😉. Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😊.

Using Template Engines with Express

Template engine cho phép bạn sử dụng các tệp Template tĩnh trong ứng dụng của mình. Trong lúc ứng dụng chạy, Template engine thay thế các biến trong tệp Template bằng các value thực tế và chuyển Template thành tệp HTML được gửi đến Client. Cách tiếp cận này giúp thiết kế một trang HTML dễ dàng hơn.

Một số Template engine phổ biến hoạt động với ExpressPug, MustacheEJS. Express application generator sử dụng Jade làm mặc định, nhưng nó cũng hỗ trợ một số ứng dụng khác.

Xem Template Engines list (Express wiki) để biết danh sách các Template engine mà bạn có thể sử dụng với Express. Xem thêm So sánh các Template Engines JavaScript: Jade, Mustache, Dust và hơn thế nữa....

Lưu ý : Jade đã được đổi tên thành Pug. Bạn có thể tiếp tục sử dụng Jade trong ứng dụng của mình và nó sẽ hoạt động tốt. Tuy nhiên, nếu bạn muốn có bản cập nhật mới nhất cho Template engine, bạn phải thay thế Jade bằng Pug.

Để hiển thị tệp Template, hãy đặt các Application Setting Properties sau, đặt trong ứng dụng mặc định app.js được tạo bởi trình tạo:

  • views, thư mục chứa các tệp Template. Vd: app.set('views', './views'). Điều này mặc định là thư mục views trong thư mục gốc của ứng dụng.
  • view engine, Template engine để sử dụng. Ví dụ: app.set('view engine', 'pug') để sử dụng Template engine Pug.

Sau đó cài đặt gói npm Template engine tương ứng; ví dụ để cài đặt Pug:

$ npm install pug --save

Các Template engine tuân thủ nhanh như JadePug xuất một hàm được đặt tên __express(filePath, options, callback), hàm này được gọi bằng hàm res.render() để hiển thị Template.

Một số Template engine không tuân theo quy ước này. Thư viện Consolidate.js tuân theo quy ước này bằng cách mapping tất cả các Template engine Node.js phổ biến và do đó hoạt động liền mạch trong Express.

Sau khi công cụ view engine được đặt, bạn không phải chỉ định công cụ hoặc load mô-đun Template engine trong ứng dụng của mình; Express load nội bộ mô-đun, như được hiển thị bên dưới (cho ví dụ trên).

app.set('view engine', 'pug')

Tạo tệp Template Pug có tên index.pug trong thư mục views, với nội dung sau:

html head title= title body h1= message

Sau đó, tạo một Route để hiển thị tệp index.pug. Nếu thuộc tính view engine không được đặt, bạn phải chỉ định phần mở rộng của tệp view. Nếu không, bạn có thể bỏ qua nó.

app.get('/', (req, res) => { res.render('index', { title: 'Hey', message: 'Hello there!' })
})

Khi bạn request tới '/', tệp index.pug sẽ được hiển thị dưới dạng HTML.

Lưu ý: Bộ đệm ẩn của view engine không lưu vào bộ đệm nội dung của output của Template, chỉ bản thân Template bên dưới. Chế độ xem vẫn được hiển thị lại với mọi request ngay cả khi bộ nhớ cache được bật.

Để tìm hiểu thêm về cách Template engine hoạt động trong Express, hãy xem: “Developing template engines for Express”.

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.😉

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Áp dụng kiến trúc 3 Layer Architecture vào project NodeJS

The problem encountered. Các framework nodejs phổ biết như Express cho phép chúng ta dễ dàng tạo ra Resful API xử lí các request từ phía client một cách nhanh chóng và linh hoạt.

0 0 61

- vừa được xem lúc

Tìm hiểu về NestJS (Phần 2)

Trong bài viết trước, mình đã giới thiệu về NestJS và các thành phần cơ bản của framework này cũng như xây dựng demo một api bằng NestJS. Như mình đã giới thiệu, NestJS có một hệ sinh thái hỗ trợ cho chúng ta trong quá trình phát triển mà các framework khác như Express, Fastify,... phải tự build hoặ

0 0 153

- vừa được xem lúc

Xây dựng một REST API Skeleton với Node.js

Node.js đang dần trở nên phổ biến với những ứng dụng dạng microservice hay REST Api bới hiệu năng cực nhanh và tính bất đồng bộ của chúng.

0 0 35

- vừa được xem lúc

Xây dựng Restful Api bằng Nodejs

Mở đầu. Thực ra là không có mở đầu gì đâu mà hay làm ngay bước tiếp theo ! .

0 0 34

- vừa được xem lúc

CORS là gì? CORS với Nodejs

CORS (hay Cross-origin resource sharing) là gì . . Lỗi cors trên trình duyệt:. .

0 0 56

- vừa được xem lúc

[K8S] Phần 15 - Triển khai ứng dụng NodeJS lên K8S

Giới thiệu. Trong các phần trước mình đã giới thiệu về cách dựng một hệ thống Kubernetes Cluster với khá đầy đủ các thành phần cần thiết như:.

0 0 29