Chuyển đổi HTML sang EJS

HTML (Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để thiết kế cấu trúc của một trang web và nội dung của nó. HTML thực sự không phải là ngôn ngữ lập trình kỹ thuật như C++, JAVA hay python. Nó là một ngôn ngữ đánh dấu và cuối cùng nó đưa ra các hướng dẫn khai báo cho trình duyệt. Khi một trang web được tải, trước tiên trình duyệt sẽ đọc HTML và xây dựng cây DOM (Mô hình đối tượng tài liệu) từ đó. HTML bao gồm một loạt các yếu tố

Công cụ mẫu là gì?

Công cụ mẫu là một công cụ cho phép các nhà phát triển viết đánh dấu HTML bằng cách sử dụng JavaScript đơn giản. Công cụ mẫu có cú pháp hoặc thẻ được xác định riêng sẽ chèn các biến hoặc chạy một số logic lập trình trong thời gian chạy và tạo HTML cuối cùng trước khi gửi nó tới trình duyệt để hiển thị.  

 

EJS là gì?

EJS chỉ đơn giản là viết tắt của Embedded JavaScript. Nó là một ngôn ngữ hoặc công cụ mẫu đơn giản. EJS có cú pháp và thẻ được xác định riêng. Nó cung cấp một cách dễ dàng hơn để tạo HTML động

Mối quan hệ giữa HTML và EJS

Chúng tôi thực sự xác định HTML theo cú pháp EJS và chỉ định cách thức và vị trí các dữ liệu khác nhau sẽ xuất hiện trên trang. Sau đó, công cụ mẫu kết hợp những dữ liệu này và chạy logic lập trình để tạo trang HTML cuối cùng. Vì vậy, nhiệm vụ của EJS là lấy dữ liệu của bạn và chèn nó vào trang web theo cách bạn đã xác định mẫu và tạo HTML cuối cùng.  

Ví dụ: bạn có thể có một bảng dữ liệu động từ cơ sở dữ liệu và bạn muốn EJS tạo bảng dữ liệu theo quy tắc hiển thị của bạn

Khi nào thì sử dụng HTML/EJS?

Nó thay đổi tùy theo ứng dụng của bạn. Nếu bạn muốn hiển thị trang tĩnh thì hãy chọn tệp HTML và nếu bạn muốn hiển thị trang động nơi dữ liệu của bạn đến từ nhiều nguồn khác nhau thì bạn phải chọn tệp EJS

Sự khác biệt giữa chỉ mục. ejs và chỉ mục. html

Tệp HTML Tệp EJSTốt cho trang web tĩnh. Tốt cho trang web động. Ngôn ngữ đánh dấu HTML được sử dụng để viết tệp HTML. JavaScript được sử dụng để viết các tệp EJS. Được viết bằng ngôn ngữ HTML. Đánh dấu HTML tạo động bằng JavaScript. Nó không thể liên kết dữ liệu động trước khi gửi nó tới trình duyệt. Dữ liệu động sẽ liên kết với mẫu sau đó đầu ra cuối cùng sẽ gửi tới trình duyệt. Phần mở rộng của tệp HTML là. htmlPhần mở rộng của tệp EJS là. ejs

Ví dụ. Giả sử bạn có một trang web để hiển thị mức lương của nhân viên. Nếu bạn tạo một tệp HTML tĩnh thì bạn cần phải viết lại nó mỗi khi có thêm nhân viên mới hoặc thay đổi lương. Tuy nhiên, với EJS, việc chèn dữ liệu động vào nó trở nên quá dễ dàng.  

Mã phiên bản HTML

mục lục. html




<html>

 

<head>

    <1_______1_______21_______4_______

    <7_______4_______

9<0

<1<2

<1<4

<1<6

<1_______2_______8

<1____3_______0

9html2

html3

9html5

9html7

<1html9

<1>1

9html2

html3

9>6

<1_______4_______8

9html2

     2_______1_______7>

 2_______7_______>

 

<<0_______4_______

    <<4>

9<<8>

<1<___head2head3head2>

<1<___head2head9head2>

9 2<8>

9<<8>

<1<___    2    3    2>

<1<___    2_______9_______9    2>

9 2<8>

9<<8>

<1<___    213    2>

<1<___    219    2>

9 2<8>

9<<8>

<1<___    233    2>

<1<___    239    2>

9 2<8>

9<<8>

<1<___    253    2>

<1<___    259    2>

9 2<8>

     2_______2_______4>

 2_______2_______0>

 

 2_______3_______>

đầu ra

Chuyển đổi HTML sang EJS

Mã phiên bản EJS

Bước 1. Đầu tiên, tạo một ứng dụng NodeJS và cài đặt các mô-đun cần thiết như express. mô-đun js và ejs

Ghi chú. Tham khảo https. //www. chuyên viên máy tính. org/how-to-use-ejs-in-javascript/ để bắt đầu với EJS

Bước 2. Tạo một chỉ mục. js là máy chủ cơ bản của chúng tôi với đoạn mã sau

mục lục. js




77 787980

77 82

 

84

8586878880

 

91

92

    94

9969787

9<00

    <02

    94

996<0787

9<10

    <02

    94

996<1787

9<20

    <02

    94

996<2787

9<30

    html2

<33

 

<35<36<37

 

    <40

    <42

    <44

    <46

    <48_______2_______49_______2_______50

<51

 

<53

<54<55 <56

    <58_______2_______5980

<61

Bước 3. Tạo một chỉ mục. ejs và đặt nó vào thư mục lượt xem với đoạn mã sau

mục lục. ejs




<html>

<head>

<69<___121>

<69<7>

    <0

    <2

    <4

    <6

    <8

    html0

<69html2

 

<69<95

    html9

    >1

<69html2

html02

<69>6

html02______4_______8

<69html2

<69 27>

 2_______7_______>

<<0_______4_______

    <<4>

html23<<8>

html27_______2__________head2head3head2>

html33<___head2head9_______7_______2>

html23 2<8>

 

html23_______3_______45

html46_______2_______<8>

html50<    2html53

html50_______2__________    2html57

html46_______5_______2<8>

html23_______3_______63

 

html65 2_______2_______4>

 2_______2_______0>

 2_______3_______>

Bước 4. Chạy máy chủ bằng lệnh sau

node index.js

đầu ra. Bây giờ hãy mở trình duyệt của bạn và truy cập http. //máy chủ cục bộ. 3000/nhân viên/lương, bạn sẽ thấy đầu ra sau

Làm cách nào để đưa tệp HTML vào ejs?

Bắt đầu .
Cài đặt. Thật dễ dàng để cài đặt EJS với NPM. $ npm cài đặt ejs
Sử dụng. Truyền cho EJS một chuỗi mẫu và một số dữ liệu. BÙM, bạn đã có một số HTML. .
CLI. Cung cấp cho nó tệp mẫu và tệp dữ liệu và chỉ định tệp đầu ra. ejs. /.
hỗ trợ trình duyệt. Tải xuống bản dựng trình duyệt từ bản phát hành mới nhất và sử dụng nó trong thẻ tập lệnh

EJS khác với HTML như thế nào?

Giới thiệu EJS . Nó giữ lại cú pháp của HTML trong khi cho phép nội suy dữ liệu, không giống như Pug (một công cụ tạo mẫu khác) sử dụng một cú pháp khác với thụt đầu dòng và khoảng trắng . Các tệp EJS được lưu với. phần mở rộng tệp ejs.

EJS có phải chỉ là HTML không?

EJS là thư viện mẫu JavaScript mã nguồn mở trong khi HTML là mẫu tĩnh đơn giản . Nếu bạn viết mã ejs bằng html thì nó sẽ không hoạt động vì đây không phải là mã được nhận dạng và sẽ không hiển thị chính xác trong trình duyệt. EJS giúp bạn viết mã trong js, sau đó tuân thủ và chuyển đổi mã để trình duyệt hiển thị chính xác.

ejs có còn được sử dụng không?

Ngày nay, hầu hết các trang web động đều sử dụng kết xuất phía máy khách bằng các thư viện/khung như React, Vue, Angular, v.v. Chúng tôi sử dụng EJS để hiển thị email HTML và HTML cho báo cáo PDF . Nếu bạn muốn tạo chế độ xem hiển thị phía máy chủ, bạn cũng có thể sử dụng tiếp theo. js là khung sử dụng React làm ngôn ngữ tạo khuôn mẫu.