Tạo khuôn trong NestJS bằng HandleBars

Khi một ứng dụng phát triển phức tạp, nhu cầu của nó cũng vậy. Tại một số thời điểm, việc cung cấp các tệp HTML tĩnh có thể cản trở tiến trình hoặc cản trở chức năng của ứng dụng. Thay vào đó, bạn sẽ muốn phân phát nội dung động, một nhiệm vụ mà các công cụ tạo khuôn mẫu như Handlebars có thể thực hiện được.

Handlebars là một công cụ tạo khuôn mẫu tối thiểu, ít logic cho NodeJS. Đó là một phần mở rộng của công cụ mẫu ria mép. Vì nó là một công cụ không có logic, bạn có thể sử dụng nó để tách biệt bản trình bày khỏi mã cơ bản.

Handlebars được hỗ trợ đắc lực như một công cụ tạo khuôn mẫu từ khung NestJS.

Công cụ tạo khuôn là gì?

Công cụ tạo khuôn mẫu là một công cụ kết hợp các thẻ HTML và một ngôn ngữ lập trình để tạo ra một mẫu HTML với mã tối thiểu.

Công cụ mẫu trong thời gian chạy sẽ đưa dữ liệu vào mẫu HTML để hiển thị chế độ xem cuối cùng trong trình duyệt.

Bạn có thể thấy phức tạp khi thiết lập một công cụ tạo khuôn mẫu như Handlebars, vì nó bao gồm nhiều bước. Tuy nhiên, khung máy chủ Express mà NestJS sử dụng theo mặc định có hỗ trợ tuyệt vời cho Handlebars.

Bước 1: Tạo ứng dụng NestJS

Chạy lệnh sau để tạo một Ứng dụng Nest mới:

nest new <name of your app>

Bước 2: Cài đặt Handlebars

Chạy lệnh sau để cài đặt Handlebars bằng trình quản lý gói npm:

npm install express-handlebars@^5.3.0 @types/express-handlebars@^5.3.0

Bước 3: Định cấu hình Express Instance

Điều hướng đến của bạn main.ts tập tin và nhập khẩu NestExpressApplication từ @ nestjs / platform-express.

Chỉ định NestExpressApplication làm loại chung cho tạo ra phương pháp.

Như vậy:

const app = await NestFactory.create<NestExpressApplication>(AppModule)

Chuyển NestExpressApplication đến ứng dụng đối tượng cung cấp cho nó quyền truy cập vào các phương thức dành riêng cho ExpressJS. Bạn sẽ cần các phương pháp đó để định cấu hình các thuộc tính Handlebars cụ thể.

Bước 4: Định cấu hình Handlebars

Trước tiên, bạn sẽ cần chỉ định các vị trí mà ứng dụng của bạn sẽ tìm thấy HTML và các tệp tĩnh khác (bảng định kiểu, hình ảnh, v.v.). Bạn có thể lưu trữ các tệp HTML của mình trong một “lượt xemThư mục ”và các tệp tĩnh khác trong“công cộng”, Tương ứng.

Để chỉ định các vị trí, hãy bắt đầu bằng cách nhập tham gia từ đường dẫn. Sau đó, bên trong bootstrap chức năng, đặt vị trí cho các kiểu.

Như vậy:

app.useStaticAssets(join(__dirname, '..', 'public'))

Hàm nối nhận một số tùy ý sợi dây nối chúng và chuẩn hóa đường dẫn kết quả. __dirname trả về đường dẫn của thư mục nơi main.ts tập tin cư trú.

Tiếp theo, đặt vị trí cho các tệp HTML của bạn, như sau:

app.setBaseViewsDir(join(__dirname, '..', 'views'));

Tiếp theo, nhập Handlebars vào main.ts tập tin:

import * as hbs from 'express-handlebars';

Bạn sẽ cần hbs nhập để định cấu hình các thuộc tính Handlebars như tên tiện ích mở rộng, v.v.

Tên phần mở rộng tệp mặc định cho Handlebars là .handlebars.

Tên tiện ích mở rộng này dài, nhưng bạn có thể định cấu hình nó bằng ứng dụng động cơ cuộc gọi. ứng dụng động cơ là một hàm bao bọc gốc xung quanh express.engine phương pháp. Nó có hai đối số: máy lẻ và một chức năng gọi lại. Xem tài liệu Express trên ứng dụng động cơ để tìm hiểu thêm về nó.

Cuộc gọi ứng dụng động cơ()và như một đối số đầu tiên, hãy chuyển chuỗi ‘hbs’. Sau đó, như một đối số thứ hai, hãy gọi hàm hbs và truyền vào một đối tượng cấu hình với một thuộc tính extname đặt thành ‘hbs’. Cài đặt này thay đổi tên tiện ích mở rộng từ .handlebars thành .hbs.

app.engine('hbs', hbs({ extname: 'hbs' }));

Cuối cùng, đặt chế độ xem thành Handlebars như sau:

app.setViewEngine('hbs');

Bước 5: Tạo thư mục

Trong thư mục gốc của dự án của bạn, hãy tạo hai thư mục mới. Bạn sẽ sử dụng cái đầu tiên, công cộng, để lưu trữ các bảng định kiểu cho ứng dụng của bạn. Trong lượt xembạn sẽ lưu trữ tất cả các tệp HTML của mình.

Điều này kết thúc việc thiết lập môi trường phát triển của bạn. Trong phần tiếp theo, bạn sẽ có cái nhìn tổng quan về cú pháp Handlebars và cách sử dụng nó trong ứng dụng NestJS.

Cú pháp cần điều khiển

Phần này sẽ trình bày phần lớn cú pháp của thanh điều khiển mà bạn cần để phân phát động các tệp của mình.

Người trợ giúp

Helpers là các hàm biến đổi đầu ra, lặp qua dữ liệu và kết xuất đầu ra có điều kiện.

Handlebars cung cấp hai loại trình trợ giúp (Khối và Tích hợp) và bạn có thể tạo trình trợ giúp tùy chỉnh cho phù hợp với nhu cầu của mình.

Bạn biểu thị một người trợ giúp bằng cách đặt nó trong dấu ngoặc nhọn kép. Đặt tiền tố tên của nó bằng một hàm băm (#) cho thẻ trợ giúp mở và dấu gạch chéo (/) cho thẻ đóng.

Ví dụ:

{{!-- if the value is true, the div will be rendered else, it won't --}}
{{
<div>The value has been rendered</div>  
{{/if}}

Nếu bạn tạo một trình trợ giúp tùy chỉnh, bạn phải đăng ký nó trong hbs đối tượng cấu hình trong của bạn main.ts trước khi bạn có thể sử dụng nó trong ứng dụng của mình.

import { customHelper } from './helpers/hbs.helpers';

app.engine('hbs', hbs({ extname: 'hbs', helpers: { customHelper } }));

Biểu thức

Biểu thức là đơn vị của mẫu ghi đông. Việc sử dụng các biểu thức của bạn khác nhau tùy thuộc vào mức độ phức tạp của nhiệm vụ. Bạn có thể sử dụng chúng một mình trong một mẫu, chuyển chúng làm đầu vào cho trình trợ giúp và hơn thế nữa.

Biểu thị các biểu thức có dấu ngoặc nhọn kép, ví dụ:

<h1>{{message}}</h1>

Các phần

Một phần đề cập đến một đoạn HTML được lưu trước vì nó xuất hiện trên một số tệp HTML. Ví dụ: thanh điều hướng và chân trang. Bạn có thể lưu trữ nội dung đó trong một tệp và đưa vào khi cần thiết.

Giống như với các tệp tĩnh và HTML, bạn cũng sẽ phải đặt một thư mục partials trong ứng dụng động cơ đối tượng cấu hình.

Đăng ký thư mục partials của bạn bằng cách thêm mã sau vào đối tượng cấu hình của bạn:

partialsDir: join(__dirname, '..', 'views/partials'),

Bạn có thể truy cập một phần bằng cách sử dụng cú pháp gọi một phần. Trong dấu ngoặc nhọn kép, hãy nhập một ký hiệu lớn hơn (>) theo sau là tên của bộ phận.

Ví dụ:

{{> nameOfPartial}} 

Bố cục

Bố cục Handlebars là một trang HTML được sử dụng để đặt siêu dữ liệu cơ bản hoặc cấu trúc chung cho các trang HTML khác trong ứng dụng. Nó hoạt động như một vùng chứa với một trình giữ chỗ mà bạn có thể đưa dữ liệu động vào.

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Templating in NestJS with Handlebars</title>
</head>
<body>
<header>
{{!-- Navbar Partial --}}
{{>navbar}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{body}}}
</div>
{{!-- Footer Partial --}}
{{>footer}}
</body>
</html>

Khi bạn chạy mã của mình, Handlebars sẽ lấy nội dung của .hbs tệp bạn muốn hiển thị và đưa chúng vào thân hình trình giữ chỗ. Sau đó, nó hiển thị kết quả dưới dạng trang HTML cuối cùng.

Bạn sẽ cần đăng ký thư mục bố cục của mình trong ứng dụng động cơ đối tượng cấu hình và đặt tệp bố trí mặc định. Tệp bố cục mặc định là tệp bố cục mà Handlebars sử dụng nếu bạn không xác định bố cục cụ thể.

Thêm mã sau vào đối tượng cấu hình của bạn để khai báo một bố cục mặc định và đăng ký một thư mục bố cục:

defaultLayout: 'Name of the layout file',
layoutsDir: join(__dirname, '..', 'views/layouts'),

Hiển thị tệp .hbs

Trong tệp bộ điều khiển của bạn, hãy nhập Res trang trí từ @ nestjs / common và Phản ứng từ bày tỏ.

Sau đó, trong trình xử lý tuyến đường của bạn, hãy chuyển một đối số, res. Chỉ định một loại Phản hồi cho res và chú thích nó bằng Trình trang trí Res. Trình trang trí Res hiển thị các phương pháp xử lý phản hồi gốc của Express ‘và vô hiệu hóa cách tiếp cận tiêu chuẩn của NestJS.

Tiếp theo, gọi phương thức kết xuất trên res và chuyển tên của tệp bạn muốn kết xuất làm đối số đầu tiên. Đối với đối số thứ hai, truyền một đối tượng có chứa tên của bố cục và giá trị thay thế cho một biểu thức.

Ghi-đông sẽ sử dụng bố cục mặc định được đặt trong ứng dụng động cơ đối tượng cấu hình nếu bạn không cung cấp bố cục.

@Get()
getHello(@Res() res: Response){
return res.render('Name of file', { layout: 'name of layout', message: 'Hello World' });
}

Các lựa chọn thay thế cho Ghi đông

Handlebars là một công cụ tạo khuôn mẫu tuyệt vời với nhiều tính năng tiện dụng như trợ giúp và bố cục. Tuy nhiên, tùy thuộc vào nhu cầu của bạn, bạn có thể chọn một giải pháp thay thế như EJS (JavaScript nhúng), Pug hoặc Mustache.