Show EJS là gì? EJS đơn giản là viết tắt của Embedded JavaScript . Nó là một trong những công cụ xem mẫu phổ biến nhất cho Node.js và Express.js. Bạn đang xem: Ejs là gì Lưu ý: Công cụ mẫu là một công cụ cho phép chúng tôi viết đánh dấu HTML , được xếp cùng với các thẻ hoặc cú pháp được xác định của nó, sẽ chèn các biến vào đầu ra cuối cùng của mẫu hoặc chạy một số logic lập trình tại thời điểm chạy trước khi gửi HTML cuối cùng tới trình duyệt để hiển thị. Tại sao EJS? EJS chủ yếu hữu ích bất cứ khi nào bạn phải xuất HTML với nhiều JavaScript. Nếu bạn đang xử lý việc tạo nội dung động hoặc cung cấp một cái gì đó liên quan đến cập nhật thời gian thực thì nó có thể giảm tải một lượng lớn mã. $ npm install ejs or$ yarn add ejs : Thẻ Scriptlet , thẻ này được sử dụng để nhúng mã js cho luồng điều khiển, điều kiện, không có đầu ra. Ví dụ: đoạn mã dưới đây sẽ sử dụng thẻ để thực thi vòng lặp for  2 .: Xuất giá trị vào mẫu, thoát khỏi HTML. Nó được sử dụng để nhúng mã javascript sẽ xuất ra kết quả của biểu thức có bên trong thẻ. ví dụ. Đoạn mã dưới đây sử dụng thẻ. Ở đây nó xuất ra giá trị của biểu thức (i + 1). 3 .: Kết xuất mà không thoát giá trị HTML vào mẫu. Trong khi sử dụng tiệc tùng. thoát HTML đi vào bộ đệm, trong khi không làm điều đó. hãy kết xuất mã HTML. 4 .: Thẻ bình luận để thêm bình luận vào tệp của bạn. Nội dung của thẻ sẽ tự động bị bỏ qua trong khi chạy tập lệnh. Các thẻ khác là ( Thẻ Scriptlet " Whitespace Slurping " , nó loại bỏ tất cả các khoảng trắng ở đầu) và (Kết quả là một chữ ). EJS giải pháp thay thế tốt hơn và dễ dàng hơn cho JADE!Jade được coi là công cụ xem mặc định cho Express nhưng đôi khi cú pháp của Jade có thể khó hiểu. EJS là một trong những giải pháp thay thế dễ dàng. Thiết lập máy chủ cơ bản với express.js và EJS: app.set("view engine", ‘ejs") giúp đặt EJS làm công cụ xem. Xem thêm: " Lăn Tăn " Là Gì? Nghĩa Của Từ Lăn Tăn Trong Tiếng Việt Nghĩa Của Từ Lăn Tăn Ngoài ra, hãy tạo một thư mục có tên các khung nhìn sẽ lưu trữ tất cả các tệp ejs sẽ hiển thị các bố cục riêng biệt được thực hiện với các phần tử khác nhau dựa trên các tuyến đường khác nhau. Bây giờ, hãy tạo một tệp có tên là index.ejs bên trong thư mục xem . Điều này sẽ hoạt động như điểm bắt đầu của ứng dụng. SỬ DỤNG CÁC PHẦN:Phần tuyệt vời của EJS là chúng ta có thể tạo các khung nhìn từng phần bằng cách sử dụng EJS. Điều này rất hữu ích khi tạo các trang web lớn, vì nó giúp việc duy trì phát triển dễ dàng hơn bằng cách xác định gói mã có thể sử dụng lại trong một tệp và đưa nó vào bất cứ khi nào cần thiết. Các phần có ích khi bạn muốn sử dụng lại cùng một HTML trên nhiều chế độ xem (trang). Các phần có thể được coi là các chức năng, chúng giúp các trang web lớn dễ bảo trì hơn vì bạn không phải đi và thay đổi một đoạn mã mỗi trang mà nó xuất hiện. Thay vào đó, bạn xác định gói mã có thể tái sử dụng đó trong một tệp và đưa vào bất cứ nơi nào bạn cần. Sử dụng để nhúng một phần EJS vào tệp. Hãy nhớ rằng đường dẫn được đề cập phải liên quan đến tệp mà bạn muốn nhúng. Ví dụ, bạn có thể có một đầu trang, chân trang, điều hướng chung cho tất cả các trang. Trong index.ejs, tiêu đề và tên sẽ được chuyển từ server.js. Trong đoạn mã trên, các dòng 6 và 8 sử dụng các phân đoạn EJS. SỬ DỤNG BÁO CÁO ĐIỀU KIỆN:Với việc sử dụng chúng ta có thể dễ dàng đặt một số điều kiện trong HTML thông thường của chúng ta. Đây là một ví dụ đơn giản: SỬ DỤNG LOOPS:Vòng lặp là một phần rất quan trọng của bất kỳ ngôn ngữ lập trình nào. Nó làm giảm sự phức tạp của các nhiệm vụ lặp đi lặp lại. Trong EJS, các vòng lặp có thể được sử dụng theo cách viết dưới đây CÁC BẢNG ĐỌC HIỂU SỬ DỤNG EJS: một bảng trong EJS được hiển thị giống như được thực hiện trong HTML với sự trợ giúp của thẻ bảng . Sự khác biệt ở đây là trong khi hiển thị dữ liệu động, chúng ta phải sử dụng thẻ Scriptlet và bằng cách này, chúng ta có thể hiển thị một bảng có nội dung động. Trong đoạn mã trên, bảng được điền với dữ liệu được truyền từ nguồn bên ngoài (trình kết xuất tức là server.js) dưới dạng một mảng. Và bằng cách sử dụng phương thức trình lặp mảng javascript ( forEach()), mảng được duyệt và nội dung được hiển thị dưới dạng giá trị của các thẻ td riêng biệt . Dưới đây là tệp server.js được cập nhật NHẬN MÃ ĐẦY ĐỦ TẠI ĐÂY: Đó là nó cho bài đăng này. Cảm ơn vì đã đọc đến cuối cùng! ✌ Tôi sẽ rất vui khi nhận được phản hồi và đề xuất của bạn. |
