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
- Gửi tác vụ đến hệ thống tệp của máy tính
- Đợi trong khi hệ thống tệp mở và đọc tệp
- Trả lại nội dung cho khách hàng
- 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
- Gửi tác vụ đến hệ thống tệp của máy tính
- Sẵn sàng xử lý yêu cầu tiếp theo
- 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
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,
- 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
- 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
- Ứ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,
Trong tuyến gốc, chúng tôi đang gửi phản hồi JSON,
Code language: JSON / JSON with Comments [json]
{ "status": "server running" }
Bây giờ để gửi phản hồi HTML thay vì phản hồi JSON, thay vì sử dụng hàm
3, chúng ta sẽ sử dụng hàmCode language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
4. Bên trong hàmCode language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
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 ứngCode language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
Hãy thử trả lời bằng một số chuỗi HTML đơn giản,
Code language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
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,
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,
6 được cập nhật,Code language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
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
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ệpCode language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
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àmCode language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
9Code language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
Hãy tạo một
0 với một số nội dung soạn sẵn trên đó,Code language: JavaScript [javascript]
// 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: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
Chúng tôi sẽ sử dụng chức năng
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ô-đunCode language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
2 tích hợp sẵn của js,Code language: JavaScript [javascript]
// 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]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
Hàm
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.Code language: JavaScript [javascript]
// 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}
`;
4 trả về đường dẫn đến mô-đun hiện tạiCode language: JavaScript [javascript]
// 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}
`;
Bây giờ chúng tôi có thể gửi tệp HTML bằng cách sử dụng mô-đun
2 dưới dạngCode language: JavaScript [javascript]
// 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]
const filePath = path.resolve[__dirname, 'index.html']; res.sendFile[filePath];
Bây giờ, tệp HTML hoàn chỉnh sẽ được gửi và hiển thị bởi trình duyệt,
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
// 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}
`;
Để yêu cầu express sử dụng EJS làm
6 mặc định, chúng tôi sẽ viết,Code language: JavaScript [javascript]
// 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]
app.set['view engine', 'ejs'];
Đ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
8 bên trong thư mục gốc của dự án của chúng tôi. Bên trong thư mụcCode language: JavaScript [javascript]
// 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}
`;
8, tạo một thư mục khác có tên làCode language: JavaScript [javascript]
// 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}
`;
0Code language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
Cấu trúc dự án sẽ trông như thế này,
Thư mục
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ệpCode language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
2 bên trong thư mụcCode language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
3 và viết một số HTML bên trong nó,Code language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
Code language: HTML, XML [xml]
Hi User, Welcome to Codedamn
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
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,Code language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
Code language: JavaScript [javascript]
res.render['pages/index'];
Ở đây,
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,Code language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
Truyền dữ liệu vào mẫu
Chúng ta có thể truyền đối số thứ hai trong hàm
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àmCode language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
4,Code language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
0Code language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
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
8. Nó sẽ xuất raCode language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
9 củaCode language: HTML, XML [xml]
Document Codedamn playgrounds is awesome!
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,
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
Code language: JavaScript [javascript]
1Code language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
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,
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
1, trong đóCode language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
2 là nơi bạn viết JavaScriptCode language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
Chúng ta có thể sử dụng
3,Code language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
4,Code language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
5,Code language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
6, v.v. các vòng lặp và các câu lệnhCode language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
7 bên trong mẫu của chúng tôiCode language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
Để xuất bất kỳ giá trị nào, chúng tôi sử dụng ký hiệu
8 sau ký hiệuCode language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
9 đầu tiên.Code language: JavaScript [javascript]
const path = require['path']; const filePath = path.resolve[__dirname, 'index.html'];
0Code language: JavaScript [javascript]
const filePath = path.resolve[__dirname, 'index.html']; res.sendFile[filePath];
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,
2Code language: JavaScript [javascript]
app.get['/', [req, res] => { res.send['
Hey, it works!
'] }]
Bây giờ, nếu chúng ta xác định khóa
1 trên đối tượngCode language: JavaScript [javascript]
const filePath = path.resolve[__dirname, 'index.html']; res.sendFile[filePath];
2, chúng ta sẽ thấy,Code language: JavaScript [javascript]
const filePath = path.resolve[__dirname, 'index.html']; res.sendFile[filePath];
Nếu không, chúng ta sẽ thấy,
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
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