Mặc dù có thể hiển thị các trang web tĩnh từ máy chủ, nhưng có rất nhiều hạn chế với phương pháp này, bao gồm sao chép mã và thiếu tính linh hoạt — đặc biệt là khi đọc dữ liệu từ cơ sở dữ liệu. May mắn thay, Express. js cung cấp cho chúng tôi cách tạo các trang HTML động từ các ứng dụng phía máy chủ của chúng tôi thông qua một công cụ mẫu
Một công cụ mẫu hoạt động theo cách khá đơn giản. bạn tạo một mẫu và với cú pháp thích hợp, chuyển các biến vào đó. Sau đó, tại tuyến thích hợp để hiển thị mẫu, bạn gán giá trị cho các biến được khai báo trong tệp mẫu của mình. Chúng được biên dịch trong thời gian thực khi mẫu được hiển thị
Một tính năng thiết yếu của các công cụ mẫu là chúng cho phép chúng tôi tạo các thành phần có thể tái sử dụng được gọi là các phần, có thể được sử dụng lại trong các tệp khác. Điều này giúp ngăn chặn mã trùng lặp và thực hiện thay đổi dễ dàng hơn
Hiện nay có một số công cụ tạo mẫu và những công cụ phổ biến hơn bao gồm Pug [fka Jade], Tay lái, EJS, Bộ ria mép, Swig và các công cụ khác. Bài đăng này sẽ thảo luận về các công cụ mẫu sau cho Express
- chó pug
- EJS
- tay lái
Bắt đầu
Thiết lập dự án npm mới và cài đặt Express bằng cách nhập các lệnh sau vào thiết bị đầu cuối của bạn
npm init npm i express
Tạo một thư mục
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];1. Đây là nơi chúng tôi sẽ viết tất cả mã của chúng tôi cho dự án này. Trong thư mục, tạo một tệp có tên
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2 và một thư mục có tên
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];3 để giữ các chế độ xem mà chúng tôi sẽ hiển thị thông qua Express. Thêm thư mục con
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];4 vào thư mục
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];3 để giữ các phần. Cấu trúc thư mục của bạn sẽ trông như thế này
├──src ├───views ├───partials app.js
Thêm mã soạn sẵn Express này vào tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
Tích hợp các công cụ mẫu Express
Việc tích hợp một công cụ mẫu vào ứng dụng Express của bạn chỉ cần một vài dòng mã. Ngay sau khi gán chức năng Express [trước khi tạo tuyến đường của bạn], hãy thêm các cài đặt ứng dụng sau
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
3, thư mục chứa các tệp mẫu [e. g. ,const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
8]. Điều này mặc định cho thư mụcconst express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
3 trong thư mục gốc của ứng dụngconst express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
20, công cụ mẫu của bạn. Ví dụ: để sử dụng công cụ mẫu Pug.const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
21
chó pug
Pug có một cú pháp rất khác biệt, ưu tiên thụt đầu dòng và khoảng trắng hơn các dấu ngoặc nhọn truyền thống trong các thẻ HTML. Một trang điển hình với các phân đoạn đầu và thân trông như thế này
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2
Từ ví dụ trên, bạn có thể thấy không có thẻ mở hoặc thẻ đóng. Thay vào đó, thẻ kèm theo được khai báo và các thẻ con của nó được thụt vào ngay bên dưới, giống như trong Python. Nội dung của mỗi thẻ được khai báo bên cạnh thẻ, trong khi các thuộc tính được khai báo bên trong dấu ngoặc đơn. Các lớp được biểu thị bằng
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];22 và
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];23 bằng
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];24
Các biến có thể được định nghĩa theo hai cách
- Sử dụng dấu bằng [
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
25] – Điều này thường được sử dụng khi biến được khai báo là nội dung duy nhất của thẻ hoặc thuộc tính tương ứng, như đã thấy trong các thẻconst express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
26 vàconst express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
27 của chúng tôi - Sử dụng cú pháp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
28 – Phương pháp này có thể được sử dụng cả khi biến là nội dung duy nhất của thẻ/thuộc tính và khi nó là một phần của chuỗi dài hơn
Để kết xuất nội dung trên trong Express, trước tiên hãy cài đặt gói Pug từ npm
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2
Tiếp theo, sao chép mã ở trên vào tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];29 bên trong thư mục
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];3 và trong
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2, đăng ký Pug làm công cụ mẫu ưa thích
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];6
Trong cùng một tệp, hãy tạo một tuyến đường hiển thị tệp theo cách này
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];7
Phương thức kết xuất lấy tên của tệp [không có phần mở rộng] và sau đó là giá trị của các biến trong tệp mẫu
Sử dụng partials trong Pug
Hãy tạo một tệp điều hướng có thể tái sử dụng có tên là
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];22 trong thư mục con partials; . Điều này sẽ chứa menu điều hướng của chúng tôi với đoạn mã sau
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];0
Sau đó, chúng tôi có thể bao gồm một phần trong tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];29 của mình bằng cách sử dụng từ khóa
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];25 ngay bên trong thẻ
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];26
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];4
Truy cập
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];27 và bạn sẽ nhận được một cái gì đó như thế này
Đây là phần giới thiệu đơn giản về mẫu Pug. Bạn có thể tìm hiểu thêm từ trang web pug chính thức
EJS
EJS giống với HTML hơn nhiều so với Pug, vẫn giữ nguyên phương pháp mở và đóng thẻ thông thường cũng như chỉ định các thuộc tính. Các biến được khai báo bằng cách sử dụng dấu ngoặc nhọn và dấu phần trăm theo cách này.
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];28
Thẻ EJS có thể được sử dụng theo nhiều cách khác nhau
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
29 – Thoát khỏi giá trị được cung cấp và xuất giá trị đó sang mẫuconst express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
60 – Xuất giá trị được cung cấp mà không thoát. Bạn nên thoát khỏi tất cả các biến HTML trước khi kết xuất để ngăn chặn các cuộc tấn công kịch bản chéo trang [XSS]const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];
61 – Thực hiện các thao tác điều khiển như sử dụng điều kiện hoặc vòng lặp
Tích hợp EJS vào Express
Đầu tiên, cài đặt gói
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];62 từ npm
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];1
Tiếp theo, chuyển cài đặt ứng dụng
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];20 từ Pug sang EJS
├──src ├───views ├───partials app.js0
Bây giờ, để viết lại mã Pug của chúng tôi ở trên trong EJS, hãy tạo tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];64 trong thư mục
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];3 của bạn và thêm mã sau
├──src ├───views ├───partials app.js1
Sử dụng partials trong EJS
Bên trong thư mục con
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];4, tạo tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];67 và thêm mã này
├──src ├───views ├───partials app.js2
Bạn có thể thêm phần điều hướng vào tệp chỉ mục của mình bằng cách thêm đường dẫn tương đối của tệp partials vào từ khóa
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];25, sửa đổi dòng ngay bên dưới thẻ
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];26
├──src ├───views ├───partials app.js3
Thêm tuyến đường sau vào tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2
├──src ├───views ├───partials app.js4
Bây giờ, khi bạn khởi động máy chủ của mình và truy cập tuyến đường
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];71, trang sẽ được hiển thị với nội dung tương tự với mẫu Pug
tay lái
Tay lái, giống như EJS, cố gắng trung thành với phong cách HTML thông thường bằng cách chèn biến đơn giản bằng hai dấu ngoặc nhọn — e. g. ,
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];72 — hoặc ba dấu ngoặc nhọn cho các ký tự không thoát HTML. Nó được xây dựng trên công cụ tạo khuôn ria mép, vì vậy chúng có một số điểm tương đồng
Có một số gói npm có sẵn để biên dịch và hiển thị Tay lái trong Express, nhưng tôi sẽ sử dụng gói
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];73. Điều này được cài đặt thông qua lệnh
├──src ├───views ├───partials app.js5
Sau đó, chúng tôi đặt công cụ xem của mình thành
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];73 với
├──src ├───views ├───partials app.js6
Một bản viết lại
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];75 của các trang chỉ mục trước đây của chúng tôi sẽ trông như thế này
├──src ├───views ├───partials app.js7
Sử dụng partials trong Handlebars
Sử dụng cấu trúc tệp giống như trước đó, tạo tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];76 bên trong thư mục
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];4. Chúng tôi sẽ sử dụng cùng mã trong tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];67 ở trên vì đây là cú pháp HTML thông thường không có bất kỳ biến nào được xác định trong đó
Không giống như các công cụ mẫu khác, bạn phải đăng ký các bộ phận của mình trong Tay cầm trước khi có thể sử dụng chúng. Nhập mô-đun
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];73 vào tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2 của bạn và sử dụng phương pháp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];01
├──src ├───views ├───partials app.js8
Sau khi đăng ký, bạn chỉ cần sử dụng tên tệp của một phần thay vì đường dẫn tương đối khi đưa nó vào tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];73. Cú pháp để đưa một phần vào một tệp
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];73 khác là
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];04. Bạn có thể đưa phần điều hướng vào tệp chỉ mục của mình bằng cách thêm sửa đổi dòng ngay bên dưới thẻ mở đầu
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];26
├──src ├───views ├───partials app.js9
Thêm tuyến đường sau vào
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];2 để hiển thị tệp chỉ mục
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];0
Truy cập tuyến đường
const express = require['express']; const path = require['path']; const app = express[]; app.get['/', [request, response] => { return response.send['OK']; }]; app.listen[5000, [] => { console.log['App is listening on port 5000']; }];71 sẽ hiển thị một trang tương tự tuyến đường tương tự trong ứng dụng Pug
Phần kết luận
Các công cụ mẫu khá dễ cài đặt và yêu cầu ít hoặc không cần bản soạn sẵn, đồng thời bạn có thể tạo các ứng dụng lớn với chúng mà không phải mất quá nhiều thời gian để học cú pháp. Bạn có thể tìm hiểu thêm về họ bằng cách truy cập tài liệu của họ để bắt đầu tạo các trang web động được hiển thị từ máy chủ
Mã nguồn của ứng dụng này có trên GitHub với mỗi công cụ mẫu ở một nhánh khác, được đặt tên cùng tên
Chỉ dành cho 200 Theo dõi các yêu cầu mạng chậm và không thành công trong sản xuất
Triển khai trang web hoặc ứng dụng web dựa trên Node là phần dễ dàng. Đảm bảo phiên bản Node của bạn tiếp tục cung cấp tài nguyên cho ứng dụng của bạn là lúc mọi thứ trở nên khó khăn hơn. Nếu bạn quan tâm đến việc đảm bảo các yêu cầu đối với dịch vụ phụ trợ hoặc bên thứ ba thành công, hãy thử LogRocket. LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ diễn ra trong khi người dùng tương tác với ứng dụng của bạn theo đúng nghĩa đen. Thay vì đoán xem tại sao lại xảy ra sự cố, bạn có thể tổng hợp và báo cáo về các yêu cầu mạng có vấn đề để nhanh chóng hiểu nguyên nhân gốc rễ