Bạn sẽ cần viết mã JavaScript giao diện người dùng để thực hiện yêu cầu ajax thay vì yêu cầu hành động biểu mẫu gửi yêu cầu. JavaScript sẽ nhận được phản hồi và có thể cập nhật giá trị trên HTML

app.post('/', (req, res) => {
    let equation = req.body.equation;
    console.log(equation);
    let result = eval(equation);
    res.status(200).json({ value: `Result is ${result}` });
    
});

Nút. js là thời gian chạy JavaScript phổ biến do Ryan Dahl phát hành vào ngày 27 tháng 5 năm 2009 dưới dạng phần mềm mã nguồn mở. Nó được sử dụng chủ yếu để phát triển các ứng dụng web và API phía máy chủ

Mặc dù bạn có thể tìm thấy nhiều API bằng Node. js, bạn có biết bạn cũng có thể sử dụng nó để hiển thị HTML trên máy chủ không?

Trực tiếp Giảm giá cuối năm. Trở thành Nhà phát triển Full-Stack giỏi nhất 🚀

Nhận quyền truy cập vào hàng trăm nút thực hành. js, phòng thí nghiệm và trở thành nhà phát triển web toàn diện có thể tuyển dụng

• Đảm bảo hoàn lại tiền miễn phí
• Truy cập không giới hạn vào tất cả các khóa học nền tảng
• Bao gồm 100 dự án thực hành
• Trợ giúp AI tức thì dựa trên GPT-3
• nút có cấu trúc. js Full-Stack Lộ trình để có được một công việc
• Cộng đồng độc quyền cho các sự kiện, hội thảo

Go Pro Now (Giảm giá 50% trong thời gian có hạn)

Mục lục

• Kết xuất phía máy chủ là gì?
• Kết xuất HTML bằng nút. js và Express. js
• Kết xuất các tệp HTML bằng Node. js và Express. js
• Công cụ tạo khuôn mẫu là gì?
• Kết xuất HTML bằng EJS (Tạo khuôn mẫu JavaScript nhúng)
  • Cài đặt EJS
  • Thiết lập EJS làm công cụ xem của chúng tôi trong Express. js
  • Thiết lập chế độ xem
  • Kết xuất mẫu
• Truyền dữ liệu vào mẫu
• Làm thế nào để được giúp đỡ?
• Phần kết luận

Kết xuất phía máy chủ là gì?

Nếu bạn đã quen thuộc với React. js, bạn có thể biết rằng bất cứ khi nào trình duyệt của bạn gửi yêu cầu trang web của bạn đến máy chủ, máy chủ sẽ phản hồi bằng tệp HTML đơn giản, Bảng định kiểu (CSS) và tệp JavaScript. Các tệp HTML chỉ chứa một mẫu soạn sẵn và không có gì khác. Nhiệm vụ của JavaScript là hiển thị mọi thứ trên DOM. Kỹ thuật này được gọi là Client Side Rendering

Cách tiếp cận này hoạt động tốt nhưng đồng thời có một số nhược điểm,

1. Thường rất khó để tối ưu hóa các ứng dụng hiển thị phía máy khách cho các công cụ tìm kiếm
2. Các thiết bị chậm hơn có thể gặp thời gian tải cao hơn dẫn đến trải nghiệm người dùng kém
3. Ứng dụng có thể sử dụng API để tìm nạp một số dữ liệu, dẫn đến yêu cầu máy chủ bổ sung được thực hiện, gây thêm thời gian tải

Chúng tôi sử dụng Kết xuất phía máy chủ (SSR) để giải quyết các vấn đề này. Kết xuất phía máy chủ (SSR) là một kỹ thuật trong đó máy chủ kết xuất tất cả nội dung cần thiết cho trang web trước khi gửi tới trình duyệt. Trang HTML được tạo được gửi tới trình duyệt giúp cải thiện thời gian tải và SEO của trang web

Kết xuất HTML bằng nút. js và Express. js

Trong một Express. js, chúng tôi có thể gửi các chuỗi hoặc tệp HTML của máy khách theo cách tương tự như cách chúng tôi gửi phản hồi API

Ở đây chúng tôi có một Express đơn giản. ứng dụng js,

Tốc hành cơ bản. ứng dụng js

Trong tuyến đường gốc, chúng tôi đang gửi phản hồi JSON,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

Bây giờ để gửi phản hồi HTML thay vì phản hồi JSON, thay vì sử dụng hàm

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

3, chúng tôi sẽ sử dụng hàm

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

4. Bên trong hàm

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

4, chúng ta có thể cung cấp một chuỗi văn bản đơn giản hoặc một chuỗi HTML làm đối số. Sau khi nhận được phản hồi của máy chủ, trình duyệt sẽ hiển thị phản hồi tương ứng

Hãy thử trả lời bằng một số chuỗi HTML đơn giản,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

Sau khi khởi động lại máy chủ của chúng tôi, chúng tôi có thể thấy rằng chuỗi HTML được hiển thị chính xác trên trình duyệt,

Kết xuất một chuỗi HTML

Giả sử chúng ta muốn hiển thị một số nội dung HTML động;

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

Bây giờ mỗi khi chúng tôi tải lại trang,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

6 được cập nhật,

Kết xuất dữ liệu động bằng phép nội suy chuỗi HTML

Kết xuất các tệp HTML bằng Node. js và Express. js

Viết tất cả nội dung HTML dưới dạng một chuỗi và sau đó gửi nó qua

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})



Code language: JavaScript (javascript)

4 không phải là một ý kiến ​​hay. Sẽ tốt hơn nếu viết HTML của chúng tôi trong tệp

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

8 và sau đó gửi toàn bộ tệp dưới dạng phản hồi. Chúng ta có thể làm như vậy bằng cách sử dụng hàm

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

9

Hãy tạo một

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

0 với một số nội dung soạn sẵn trên đó,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

2

Chúng tôi sẽ sử dụng chức năng

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

9 để gửi tệp dưới dạng phản hồi. Hàm lấy đường dẫn tệp làm đối số. Đường dẫn tệp phải tuyệt đối hoặc một gốc cụ thể. Để đạt được điều này, chúng tôi sẽ sử dụng Node. mô-đun

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

2 tích hợp sẵn của js,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

5

Hàm

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

3 trả về một đường dẫn tuyệt đối từ một loạt các đường dẫn hoặc đoạn.

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

4 trả về đường dẫn đến mô-đun hiện tại

Bây giờ chúng tôi có thể gửi tệp HTML bằng cách sử dụng mô-đun

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

2 dưới dạng

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

9

Bây giờ, tệp HTML hoàn chỉnh sẽ được gửi và hiển thị bởi trình duyệt,

Kết xuất tệp HTML

Công cụ tạo khuôn mẫu là gì?

Mặc dù việc gửi một tệp HTML có chứa tất cả nội dung là thuận tiện, nhưng đồng thời, việc hiển thị nội dung động trở nên khó khăn. Trong trường hợp này, chúng tôi sẽ cần JavaScript để tìm nạp nội dung từ API. Mặc dù các chuỗi HTML có thể hiển thị nội dung động, nhưng kích thước tệp cuối cùng sẽ trở nên khổng lồ do số lượng lớn các chuỗi HTML được sử dụng

Điều gì sẽ xảy ra nếu có thứ gì đó kết hợp tính chất động của các chuỗi HTML và sự tiện lợi của các tệp HTML?

Sử dụng các công cụ tạo khuôn mẫu, chúng tôi viết một số HTML theo cú pháp được xác định trước (cú pháp có thể thay đổi với công cụ tạo khuôn mẫu mà chúng tôi đang sử dụng). Công cụ tạo khuôn mẫu lấy mẫu và một số dữ liệu, kết hợp chúng và trả về một trang HTML hoàn chỉnh mà chúng tôi có thể gửi cho khách hàng

Nhiều công cụ tạo khuôn mẫu, như EJS, Pug, Mustache, v.v. , có thể tạo các trang HTML ở phía máy chủ. Chúng tôi sẽ xem xét EJS vì đây là ứng dụng được sử dụng rộng rãi nhất

Kết xuất HTML bằng EJS (Tạo khuôn mẫu JavaScript nhúng)

Embedded JavaScript Templating (EJS) là một công cụ tạo mẫu được xếp hạng hàng đầu cho JavaScript. Nó nhúng mã JavaScript vào ngôn ngữ mẫu tạo HTML

Chúng tôi phải làm theo một số bước bổ sung để định cấu hình EJS đúng cách trong Express của chúng tôi. ứng dụng js

Cài đặt EJS

Chúng tôi có thể tải xuống gói EJS bằng trình quản lý gói NPM bằng lệnh,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

0

Thiết lập EJS làm // Get the current timestamp const timestamp = Date.now(); // Generate a dynamic string using string concatenation const string1 = '

Current TimeStamp: ' + timestamp + '

'; // Generate a dynamic string using string template literals const string2 = `

Current TimeStamp: ${timestamp}

`;Code language: JavaScript (javascript)6 của chúng tôi trong Express. js

Để yêu cầu express sử dụng EJS làm

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;



Code language: JavaScript (javascript)

6 mặc định, chúng tôi sẽ viết,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

3

Đoạn mã trên nói với Express. js rằng bất cứ khi nào chúng tôi cố gắng kết xuất một mẫu với một số dữ liệu, nó nên sử dụng EJS làm công cụ tạo khuôn mẫu

Thiết lập chế độ xem

Tạo một thư mục có tên

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

8 bên trong thư mục gốc của dự án của chúng tôi. Bên trong thư mục

// Get the current timestamp
const timestamp = Date.now();

// Generate a dynamic string using string concatenation
const string1 = '
Current TimeStamp: ' + timestamp + '
';

// Generate a dynamic string using string template literals
const string2 = `
Current TimeStamp: ${timestamp}
`;
Code language: JavaScript (javascript)

8, tạo một thư mục khác có tên là

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

20

Cấu trúc dự án sẽ trông như thế này,

Cấu trúc thư mục EJS

Thư mục

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

20 sẽ chứa các mẫu HTML. Hãy tạo mẫu EJS đầu tiên của chúng tôi. Tạo một tệp

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

22 bên trong thư mục

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

23 và viết một số HTML bên trong nó,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

0

Bây giờ chúng ta có thể sử dụng mẫu trên để tạo HTML

Kết xuất mẫu

Chúng tôi sẽ sử dụng hàm

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

24 để hiển thị mẫu. Chúng tôi có thể kết xuất mẫu mà chúng tôi vừa tạo bằng cách sử dụng,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

2

Ở đây,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

25 là mẫu chúng tôi muốn kết xuất. Công cụ EJS sẽ phân tích cú pháp mẫu và tạo HTML, mã này sẽ được gửi tới máy khách bằng Express. máy chủ js,

Hiển thị HTML bằng mẫu EJS

Truyền dữ liệu vào mẫu

Chúng ta có thể truyền đối số thứ hai trong hàm

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

24 chứa dữ liệu mà chúng ta muốn cung cấp cho mẫu. Hãy cung cấp một số dữ liệu làm đối số thứ hai cho hàm

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

24,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

0

Bây giờ chúng ta có thể sử dụng dữ liệu bên trong mẫu của mình bằng cú pháp

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

28. Nó sẽ xuất ra

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

29 của

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

50 tại vị trí đó bên trong mẫu. Vì vậy, bây giờ, hãy cập nhật mẫu của chúng tôi,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

1

Khởi động lại máy chủ và tải lại trang, chúng ta có thể thấy rằng HTML được tạo đã nhúng tên người dùng,

Hiển thị nội dung động bằng mẫu EJS

Như tên gọi của nó, EJS là Khuôn mẫu JavaScript được nhúng, có nghĩa là chúng ta có thể sử dụng bất kỳ JavaScript hợp lệ nào bên trong mẫu EJS bằng cú pháp

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

51, trong đó

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

52 là nơi bạn viết JavaScript

Chúng ta có thể sử dụng

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

53,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

54,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

55,

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

56, v.v. vòng lặp và câu lệnh

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

57 bên trong mẫu của chúng tôi

Để xuất bất kỳ giá trị nào, chúng tôi sử dụng ký hiệu

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

58 sau ký hiệu

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

59 đầu tiên.

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

90

Chẳng hạn, chúng ta có thể kiểm tra xem tên người dùng có tồn tại hay không. Nếu nó tồn tại, chào mừng người dùng. Nếu không, yêu cầu người dùng đăng nhập. Chúng ta có thể làm điều này bằng cách viết,

app.get('/', (req, res) => {
    res.send('
Hey, it works!
')
})
Code language: JavaScript (javascript)

2

Bây giờ, nếu chúng ta định nghĩa khóa

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

91 trên đối tượng

{
	"status": "server running"
}
Code language: JSON / JSON with Comments (json)

92, chúng ta sẽ thấy,

Khi tên người dùng được cung cấp

Nếu không, chúng ta sẽ thấy,

Khi tên người dùng không được cung cấp

Làm thế nào để được giúp đỡ?

Để tìm hiểu về một số khái niệm nâng cao và các trường hợp sử dụng phức tạp của EJS, bạn có thể truy cập tài liệu chính thức của EJS

Phần kết luận

Bài viết này đã khám phá nhiều cách khác nhau để hiển thị nội dung HTML từ Node. js và Express. máy chủ js. Hơn nữa, chúng tôi đã xem xét cách Công cụ tạo khuôn mẫu có thể kết hợp phép nội suy chuỗi động với các tệp HTML để tạo ra một giải pháp tích hợp. Như một phần thưởng, chúng tôi đã thấy cách chúng tôi có thể tích hợp công cụ tạo khuôn mẫu EJS vào Express. js và sử dụng nó để hiển thị một số nội dung động

Trực tiếp Giảm giá cuối năm. Trở thành Nhà phát triển Full-Stack giỏi nhất 🚀

Nhận quyền truy cập vào hàng trăm nút thực hành. js, phòng thí nghiệm và trở thành nhà phát triển web toàn diện có thể tuyển dụng

• Đảm bảo hoàn lại tiền miễn phí
• Truy cập không giới hạn vào tất cả các khóa học nền tảng
• Bao gồm 100 dự án thực hành
• Trợ giúp AI tức thì dựa trên GPT-3
• nút có cấu trúc. js Full-Stack Lộ trình để có được một công việc
• Cộng đồng độc quyền cho các sự kiện, hội thảo

Go Pro Now (Giảm giá 50% trong thời gian có hạn)

Học lập trình trên codedamn

Codedamn là một nền tảng mã hóa tương tác với rất nhiều khóa học lập trình hấp dẫn có thể giúp bạn có được công việc viết mã đầu tiên của mình. Đây là cách

• Bước 1 - Tạo một tài khoản miễn phí
• Bước 2 - Duyệt qua các lộ trình có cấu trúc (đường dẫn học tập) hoặc xem tất cả các khóa học
• Bước 3 - Thực hành viết mã miễn phí trên các sân chơi lập trình
• Bước 4 - Nâng cấp lên tài khoản thành viên Pro để mở khóa tất cả các khóa học và nền tảng

Lập trình là một trong những công việc có nhu cầu cao nhất hiện nay. Học lập trình có thể thay đổi tương lai của bạn. Tất cả tốt nhất

Làm cách nào để hiển thị HTML trong HTML?

RES trong HTML là gì?

Res JSON() có gửi không?

Làm cách nào để hiển thị tệp HTML?