Hướng dẫn render html nodejs
Ở bài trước, các bạn đã có thể dùng hàm send() để trả về một mã HTML khi client gửi request
Bây giờ, ta xét một ví dụ mới như sau: Khi user truy cập vào địa chỉ có dạng: '/users', ta sẽ hiển thị danh sách các users hiện có trên hệ thống ra trình duyệt
Và đây là thành quả khi truy cập vào localhost:8080/users Như vậy, yêu cầu của bài toán được giải đáp. Tuy nhiên, ta có thể thấy, trong hàm send() , ta phải truyền vào toàn bộ code HTML. Nhược điểm của nó, chính là nếu code HTML quá dài, việc làm như thế sẽ làm cho code lẫn lộn giữa JavaScript và HTML. Khi gặp lỗi hay muốn nâng cấp sẽ cực kỳ khó khăn Do đó, giải pháp được đặt ra, là ta sẽ tạo một file HTML riêng, và render file này
Tại sao phải dùng pug??? ta vẫn có thể viết HTML bình thường, tuy nhiên, để render file này, ta sẽ dùng phương thức sendFile() trên đối tượng res. Đối số của nó là một đường dẫn tuyệt đối đến file HTML. Đây lại là một nhược điểm cực lớn nữa khi quản lý mã nguồn, sửa lỗi và nâng cấp. Pug là một module giúp ta viết mã HTML một cách cực kì đơn giản. Bạn có thể tham khảo cú pháp ở đây, học sẽ rất nhanh các cú pháp chính Bạn nào chưa quen với cú pháp này, có thể sử dụng Convert HTML to Pug để chuyển mã HTML sang Pug nhé. Giờ ta sẽ sử dụng pug cho project của mình
Thêm một file có tên là index.pug vào thư mục users, chuyển mã HTML dạng pug vào file này
Restart lại server và truy cập vào localhost:8080/users bạn sẽ thấy kết quả vẫn như dùng hàm send() . Tuy nhiên, code của chúng ta đã gọn, dễ hiểu, dễ quản lý, sửa chữa, nâng cấp hơn rất nhiều Hãy làm cho web của chúng ta trở nên dynamic hơn một chút. Mình sẽ có một array object lưu thông tin về các user như sau:
Như vậy, hàm render sẽ nhận thêm 1 tham số nữa. Đây được gọi là các local variable, các biến được khai báo trong tham số này có thể sử dụng ở view. Ở đây mình định nghĩa 1 biến có tên là users và giá trị của nó là array object users mình khai báo ở trên
Ta thấy vòng lặp each user in users được sử dụng, đây là cú pháp của pug, các bạn có thể tìm hiểu thêm nhé. Trong pug, để hiển thị một giá trị, ta sử dụng dấu "=" sau tên thẻ, theo sau đó là giá trị chúng ta muốn hiển thị Xem kết quả nào Kết quả vẫn hiển thị như mong muốn Thông qua bài này, ta đã biết thêm về render HTML trong NodeJS Express, cũng như sử dụng plugin pug để viết mã HTML. Hãy nhớ học về pug để thuận tiện cho các bài học sau nhé... Hẹn gặp lại các bạn!!! |