Nhiệm vụ phổ biến của máy chủ web có thể là mở tệp trên máy chủ và trả lại nội dung cho máy khách

Đây là cách PHP hoặc ASP xử lý yêu cầu tệp

1. Gửi tác vụ đến hệ thống tệp của máy tính
2. Đợi trong khi hệ thống tệp mở và đọc tệp
3. Trả lại nội dung cho khách hàng
4. Sẵn sàng xử lý yêu cầu tiếp theo
   

Đây là cách nút. js xử lý yêu cầu tệp

1. Gửi tác vụ đến hệ thống tệp của máy tính
2. Sẵn sàng xử lý yêu cầu tiếp theo
3. Khi hệ thống tệp đã mở và đọc tệp, máy chủ sẽ trả lại nội dung cho máy khách

Nút. js loại bỏ sự chờ đợi và chỉ cần tiếp tục với yêu cầu tiếp theo

Nút. js chạy lập trình đơn luồng, không chặn, không đồng bộ, rất hiệu quả về bộ nhớ

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á Năm Mới. 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 ChatGPT
• 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ì?

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 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 ta 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 ý tưởng 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 đó,

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

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,

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

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

const filePath = path.resolve(__dirname, 'index.html');
res.sendFile(filePath);
Code language: JavaScript (javascript)

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,

npm install ejs



Code language: Bash (bash)

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.set('view engine', 'ejs');
Code language: JavaScript (javascript)

Đ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à

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

0

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

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

Thư mục

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

0 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

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

2 bên trong thư mục

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

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

<h1>Hi User, Welcome to Codedamnh1>
Code language: HTML, XML (xml)

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

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

4 để 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,

res.render('pages/index');
Code language: JavaScript (javascript)

Ở đây,

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

5 là mẫu chúng tôi muốn hiển thị. 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,

Kết xuất 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

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

4 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

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

4,

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

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

8. Nó sẽ xuất ra

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>Documenttitle>
head>
<body>
    <h1>Codedamn playgrounds is awesome!h1>
body>
html>
Code language: HTML, XML (xml)

9 của

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');



Code language: JavaScript (javascript)

0 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à Tạo khuôn mẫu JavaScript 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ột mẫu EJS bằng cách sử dụng cú pháp

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

1, trong đó

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

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

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

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

3,

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

4,

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

5,

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

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

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

7 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

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

8 sau ký hiệu

const path = require('path');

const filePath = path.resolve(__dirname, 'index.html');
Code language: JavaScript (javascript)

9 đầu tiên.

const filePath = path.resolve(__dirname, 'index.html');
res.sendFile(filePath);
Code language: JavaScript (javascript)

0

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 xác định khóa

const filePath = path.resolve(__dirname, 'index.html');
res.sendFile(filePath);
Code language: JavaScript (javascript)

1 trên đối tượng

const filePath = path.resolve(__dirname, 'index.html');
res.sendFile(filePath);
Code language: JavaScript (javascript)

2, 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 trang web 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á Năm Mới. 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 ChatGPT
• 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

Tôi có thể sử dụng nút JS với HTML không?

Tôi có thể sử dụng Nodejs với HTML và CSS không?

Làm cách nào để kết nối Nodejs với HTML?

Chúng tôi có thể hiển thị tệp HTML trong nút JS không?