Nút js hiển thị html động

Question

JavaScript nhúng (EJS) là một công cụ tạo khuôn mẫu JavaScript cho phép bạn tạo các thẻ JavaScript và EJS HTML đơn giản động

Nội dung chính Show

Thiết lập môi trường phát triển của bạn
Phát lại phiên mã nguồn mở
Cú pháp EJS
một phần
Vòng lặp và Kết xuất có điều kiện với EJS
vòng lặp
điều kiện
Thêm tệp tĩnh vào mẫu của bạn
Phần kết luận
Làm cách nào để hiển thị HTML động trong nút JS?
Nút JS CÓ THỂ kết xuất HTML không?
Nút JS CÓ THỂ tạo nội dung trang động không?
Làm cách nào để tạo một trang web động bằng nút js?

Không giống như một số công cụ tạo khuôn mẫu, cú pháp của nó rất giống với HTML, giúp dễ học. Nó cũng nhanh hơn nhiều công cụ tạo khuôn mẫu, làm cho nó trở nên hoàn hảo cho một số kết xuất chuyên sâu về hiệu suất

Ngoài ra, công cụ tạo khuôn mẫu này có hệ thống xử lý lỗi thông minh sẵn có giúp việc phát triển dễ dàng hơn

Bài viết này sẽ hướng dẫn bạn cách sử dụng EJS để phục vụ các tệp HTML động trong các ứng dụng của bạn

Thiết lập môi trường phát triển của bạn

Trước khi sử dụng nó, bạn phải thiết lập một máy chủ cơ bản mà ứng dụng của bạn sẽ yêu cầu và nhận phản hồi từ

Bắt đầu bằng cách tạo một thư mục dự án và

npm init -y

9 vào đó

mkdir ejs-tutorial
cd ejs-tutorial

Tiếp theo, bạn sẽ khởi tạo

npm install ejs express

0 trong thư mục gốc của dự án

npm init -y

Cờ

npm install ejs express

1 sẽ khởi tạo

npm install ejs express

0 với tất cả các giá trị mặc định của nó

Tiếp theo, bạn sẽ cần cài đặt EJS và Express. Express là một khung công tác NodeJS giúp tạo back-end cho ứng dụng của chúng tôi dễ dàng hơn

npm install ejs express

Tiếp theo, tạo tệp

npm install ejs express

3 và thêm đoạn mã sau vào tệp của bạn

________số 8_______

Khối mã ở trên tạo một máy chủ Express cơ bản

Tiếp theo, bạn sẽ phải chỉ định công cụ xem mà bạn muốn ứng dụng của mình sử dụng. Tại đây, bạn sẽ đặt nó thành EJS

Thêm đoạn mã sau vào tệp

npm install ejs express

3 của bạn

//index.js
app.set("view engine", "ejs");

Tất cả các tệp xem của bạn sẽ có phần mở rộng tệp

npm install ejs express

5, ví dụ:

npm install ejs express

6

Tiếp theo, bạn có thể tùy chọn đặt thư mục nơi bạn sẽ lưu trữ tệp

npm install ejs express

5 của mình. Theo mặc định, mô-đun này tìm trong thư mục “lượt xem” cho các tệp

npm install ejs express

5 để hiển thị

Bạn có thể ghi đè hành vi này bằng cú pháp bên dưới và lưu các mẫu của mình vào một thư mục khác

app.set("views", "name of your preferred directory")

Ngoài ra, bạn có thể tải xuống bản dựng trình duyệt của phiên bản EJS mới nhất (tải xuống tệp

npm install ejs express

9 hoặc

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

0) và sử dụng nó trong thẻ tập lệnh

như vậy

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>EJStitle>
    
    <script src="ejs.js">script>
head>
<body>
    
body>
html>
<script>
    // EJS code
script>

Tiếp theo, tạo một “lượt xem” (Nếu bạn đã thay đổi cài đặt mặc định, hãy tạo một thư mục có tên mới mà bạn đã chỉ định) trong thư mục gốc của dự án của bạn. Thư mục này sẽ là nơi bạn lưu trữ tất cả các tệp

npm install ejs express

5 của mình

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

Cú pháp EJS

Cú pháp EJS tương tự như HTML theo nhiều cách, nhưng nó vẫn giới thiệu rất nhiều cú pháp mới như thẻ

Thẻ EJS

Để làm theo phần này, hãy thêm đoạn mã sau vào tệp

npm install ejs express

3 của bạn

//index.js
const person = {
  name: "Kevin",
  age: 17,
  canCook: true,
};

//route handler
app.get("/home", (req, res) => {
  res.render("home", {
    person,
  });
});

Trong khối mã ở trên, bạn đã xác định đối tượng

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

3 và trình xử lý tuyến đường

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

4 cho tuyến đường

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

5. Phương thức

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

6 có ba đối số. dạng xem, đối tượng thông tin và chức năng gọi lại tùy chọn. Đối tượng

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

3 được truyền vào phương thức

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

6 là nơi EJS sẽ lấy dữ liệu động của nó từ

Thông tin trong khối mã ở trên sẽ được sử dụng để chứng minh mỗi thẻ có thể làm gì và cách bạn có thể sử dụng thẻ đó trong mẫu của mình

Thẻ tập lệnh (

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

9). Thẻ scriptlet là thẻ EJS được sử dụng cho luồng điều khiển. Nói cách khác, nó được sử dụng để chứa mã JavaScript trong mẫu

Ví dụ

<body>
    <% if (person.age >= 18 ) { %>
    <p>Hey, you can drivep>
    <% } else {%>
    <p>Sorry, you need to be at least 18 to drivep>
    <% } %>
  body>

Thẻ scriptlet trong khối mã ở trên sẽ yêu cầu EJS đánh giá mã JavaScript được đính kèm trong đó. Trong trường hợp này, thuộc tính

//index.js
app.set("view engine", "ejs");

0 trên đối tượng

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

3 nhỏ hơn 18. Do đó, thẻ

//index.js
app.set("view engine", "ejs");

2 thứ hai sẽ được hiển thị trong trình duyệt

Ghi chú. Lưu ý rằng thẻ scriptlet (mở và đóng) xuất hiện trên mọi dòng mã không phải HTML. Nếu bạn bỏ lỡ bất kỳ dòng nào, trình duyệt sẽ báo lỗi và chế độ xem của bạn sẽ không được hiển thị

Thẻ đầu ra (

//index.js
app.set("view engine", "ejs");

3,

//index.js
app.set("view engine", "ejs");

4). Các thẻ đầu ra, không giống như thẻ scriptlet, đánh giá một giá trị và hiển thị kết quả trong trình duyệt. EJS có hai thẻ đầu ra,

//index.js
app.set("view engine", "ejs");

5 và

//index.js
app.set("view engine", "ejs");

6.

//index.js
app.set("view engine", "ejs");

5 xuất giá trị thoát HTML vào mẫu, trong khi

//index.js
app.set("view engine", "ejs");

6 xuất giá trị không thoát vào mẫu

Ví dụ

<p>I am <%= person.age %> years oldp>

Điều này sẽ xuất ra “Tôi 17 tuổi” cho trình duyệt

Thẻ bình luận (

//index.js
app.set("view engine", "ejs");

9). Thẻ nhận xét cung cấp thông tin giải thích về mã nguồn của bạn. Do đó, mã được bọc trong thẻ nhận xét sẽ không được thực thi

Ví dụ

npm init -y

0

EJS sẽ bỏ qua khối mã ở trên trong quá trình chèn mẫu

một phần

Một phần là một đoạn mã HTML có thể tái sử dụng có thể được đưa vào các chế độ xem khác. Sử dụng các phần trong mẫu của bạn giúp mã của bạn sạch hơn và duy trì bằng cách cho phép bạn sử dụng cùng một đoạn mã trên nhiều mẫu mà không cần viết nhiều lần

Để sử dụng partials trong EJS, bạn phải tạo thư mục “partials” trong thư mục “views” của bạn

Sau đó, tạo mẫu bạn muốn sử dụng lại, chẳng hạn như đầu trang hoặc chân trang

Cuối cùng, thêm một phần vào mẫu của bạn bằng cách đặt từ khóa

app.set("views", "name of your preferred directory")

0 bên trong thẻ đầu ra

//index.js
app.set("view engine", "ejs");

6 và chuyển đường dẫn tệp tương đối đến một phần làm đối số cho từ khóa

app.set("views", "name of your preferred directory")

0

Ví dụ

npm init -y

1

Điều này sẽ hiển thị nội dung trong một phần tiêu đề trong mẫu

app.set("views", "name of your preferred directory")

3

Bố cục

Bố cục là một trang HTML được sử dụng làm vùng chứa với các trình giữ chỗ nơi dữ liệu động được đưa vào khi chạy

EJS không hỗ trợ bố cục ngay lập tức, nhưng chúng có thể được triển khai bằng cách tạo các phần cho từng mẫu và đưa chúng vào tệp "bố cục" được cho là của bạn

Ví dụ

npm init -y

2

EJS sẽ chèn các phần trong thời gian chạy và hiển thị HTML cuối cùng

Vòng lặp và Kết xuất có điều kiện với EJS

Nhớ lại rằng tập lệnh có thể chứa bất kỳ mã JavaScript hợp lệ nào. Tính năng này có thể được sử dụng để thực hiện các vòng lặp và điều kiện, trong số những thứ khác

vòng lặp

Vòng lặp là một chuỗi các lệnh được lập trình lặp đi lặp lại khi nó thỏa mãn một điều kiện

Hãy nhớ rằng bạn có thể chứa mã JavaScript bên trong tập lệnh. Điều này áp dụng cho tất cả mã JavaScript hợp lệ

Giả sử bạn có một mảng dữ liệu, bạn cần lặp lại và hiển thị nó trong trình duyệt của mình. Bạn có thể sử dụng tập lệnh và bất kỳ phương thức lặp JavaScript hợp lệ nào

Ví dụ: cập nhật đối tượng

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

3 vào mảng bên dưới

npm init -y

3

Vòng lặp trên mảng

npm init -y

4

Điều này sẽ được hiển thị trong trình duyệt của bạn

Như bạn có thể thấy, mảng đã được lặp đi lặp lại và mỗi phần tử của mảng được hiển thị theo cách riêng của nó

app.set("views", "name of your preferred directory")

5

điều kiện

Điều kiện là một đoạn mã được thực thi nếu một điều kiện cụ thể được thỏa mãn. Một lần nữa sử dụng tập lệnh, bạn có thể kết xuất một khối mã HTML theo điều kiện

Ví dụ

npm init -y

5

Khối mã ở trên sẽ hiển thị thẻ

//index.js
app.set("view engine", "ejs");

2, tùy thuộc vào điều kiện có đúng hay không

Bạn có thể chuyển giá trị của

app.set("views", "name of your preferred directory")

7 vào đối tượng thông tin

//index.js
const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("App running on port 3000");
});

6

Ví dụ

npm init -y

6

Điều này sẽ được hiển thị trong trình duyệt của bạn

Thay đổi

app.set("views", "name of your preferred directory")

7 thành

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>EJStitle>
    
    <script src="ejs.js">script>
head>
<body>
    
body>
html>
<script>
    // EJS code
script>

0 sẽ hiển thị thẻ

//index.js
app.set("view engine", "ejs");

2 thứ hai

Thêm tệp tĩnh vào mẫu của bạn

Bạn cũng có thể thêm các tệp tĩnh (CSS, hình ảnh, tệp JavaScript) vào mẫu của mình để cải thiện giao diện người dùng của ứng dụng

Để thêm các tệp tĩnh vào mẫu của bạn, hãy mở tệp

npm install ejs express

3 của bạn và thêm đoạn mã sau

npm init -y

7

Phương thức

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>EJStitle>
    
    <script src="ejs.js">script>
head>
<body>
    
body>
html>
<script>
    // EJS code
script>

3 có hai đối số. Thư mục gốc nơi các tệp tĩnh của bạn sẽ được lưu trữ (thông thường là thư mục “công khai”) và một đối tượng tùy chọn tùy chọn

Phần mềm trung gian tích hợp này cho phép express phục vụ các tệp tĩnh

Sau đó, tạo một thư mục “công khai” và bên trong đó, tạo một tệp

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>EJStitle>
    
    <script src="ejs.js">script>
head>
<body>
    
body>
html>
<script>
    // EJS code
script>

4

Cuối cùng, liên kết biểu định kiểu với mẫu hoặc tiêu đề một phần của bạn (nếu bạn sử dụng một phần)

như vậy

npm init -y

8

Phần kết luận

Bây giờ bạn đã có hiểu biết cơ bản về công cụ tạo khuôn mẫu JavaScript nhúng (EJS) và cách sử dụng nó trong các ứng dụng của bạn. Giờ đây, bạn có thể phục vụ HTML động một cách hiệu quả trong các ứng dụng của mình

MẸO TỪ NGƯỜI BIÊN TẬP. Để biết thêm về cách sử dụng tạo khuôn mẫu, hãy xem phần Tích hợp các mẫu trang Bootstrap vào bài viết trang web React của chúng tôi

Làm cách nào để hiển thị HTML động trong nút JS?

Hiển thị nội dung động trong Nodejs bằng các mẫu .

Cài đặt ejs và express npm cài đặt ejs npm cài đặt express

Viết mã cơ sở cho lần đầu tiên. js, thường được đặt tên là chỉ mục. js const express = require("express"); . nghe (3000, () => { bảng điều khiển. log("máy chủ bắt đầu trên cổng 3000");

Nút JS CÓ THỂ kết xuất HTML không?

Độ phân giải. sendFile() phương thức của express. mô-đun js được sử dụng để hiển thị một tệp HTML cụ thể có trong máy cục bộ .

Nút JS CÓ THỂ tạo nội dung trang động không?

Chúng tôi có thể xây dựng toàn bộ giao diện người dùng chỉ bằng cách tạo khuôn mẫu trong Node. js mà không cần sử dụng thư viện front-end. Chúng tôi có thể tạo html động và lưu nội dung được tạo động vào một tệp .

Làm cách nào để tạo một trang web động bằng nút js?

Chuyển đổi một trang web tĩnh thành một nút động. .

Cài đặt nút. js. .

Kiểm tra cài đặt. .

Tạo máy chủ đầu tiên của bạn. .

Bước tiếp theo. .

Khái niệm cơ bản về khuôn mẫu. .

Chuyển đổi các trang tĩnh thành tệp EJS. .

Sử dụng lại mã - Tạo một phần EJS đầu tiên của bạn. .

Kết xuất các trang EJS

programming html

Nút js hiển thị html động

Thiết lập môi trường phát triển của bạn

Phát lại phiên mã nguồn mở

Cú pháp EJS

Thẻ EJS

một phần

Bố cục

Vòng lặp và Kết xuất có điều kiện với EJS

vòng lặp

điều kiện

Thêm tệp tĩnh vào mẫu của bạn

Phần kết luận

Làm cách nào để hiển thị HTML động trong nút JS?

Nút JS CÓ THỂ kết xuất HTML không?

Nút JS CÓ THỂ tạo nội dung trang động không?

Làm cách nào để tạo một trang web động bằng nút js?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội