Không thể lấy trang HTML

Khi phát triển các ứng dụng web, bạn có thể cần kết xuất các thành phần HTML bên trong máy chủ của mình. Điều này sẽ giúp tạo các trang tương tác ở phía máy khách sau khi yêu cầu truy cập các trang này được thực hiện

Ví dụ, có nhiều cách khác nhau để lưu trữ các trang HTML (trang web) của bạn

• Tự kết xuất phía máy khách của bạn bằng cách sử dụng các khung như React hoặc,
• Kết xuất các trang trực tiếp từ máy chủ. Khi trình duyệt truy cập vào một tuyến được chỉ định trong máy chủ của bạn, máy chủ sẽ tải các trang HTML này theo yêu cầu của người dùng

Hướng dẫn này giải thích cách hiển thị các phần tử HTML và trang HTML trên máy chủ của bạn bằng Node. js

điều kiện tiên quyết

Kiến thức cơ bản về sử dụng Node. js và Express. js sẽ rất hữu ích để theo dõi

Những gì chúng tôi sẽ bao gồm

• điều kiện tiên quyết
• Những gì chúng tôi sẽ bao gồm
• Đang cài đặt
• Hiển thị các phần tử Html nội tuyến dưới dạng phản hồi HTTP
• Kết xuất các trang web HTML dưới dạng phản hồi của máy chủ
• Phân tích cú pháp dữ liệu biểu mẫu đến máy chủ bằng biểu mẫu HTML
• Phần kết luận

Đang cài đặt

• Tải xuống nút. js và cài đặt nó. Chạy

  $ npm -v
  7.6.3 ## installed npm version
  

  3 để kiểm tra xem cài đặt có thành công không

$ node -v
v12.18.3 ## installed Node.js version

• Khi nút. js được cài đặt thành công, NPM sẽ được cài đặt cùng. Chạy

  $ npm -v
  7.6.3 ## installed npm version
  

  4 để xác nhận xem có thực sự đã cài đặt NPM hay không

$ npm -v
7.6.3 ## installed npm version

Kiểm tra hướng dẫn này để tìm hiểu thêm về cách sử dụng NPM

• Tạo một nút. js và khởi tạo dự án trong thư mục này. Sử dụng

  $ npm -v
  7.6.3 ## installed npm version
  

  5 để tự động khởi tạo Node này. dự án js
• Cài đặt Express. khung js sử dụng

  $ npm -v
  7.6.3 ## installed npm version
  

  6. Kiểm tra hướng dẫn này để tìm hiểu thêm về Express. js
• Chúng tôi sẽ tạo một máy chủ bằng Express. js. Điều quan trọng là kết nối máy chủ với Nodemon. Nodemon là một gói tùy chọn (được cài đặt trên toàn cầu) tự động khởi động lại máy chủ sau khi lưu các thay đổi mã phía máy chủ. Hãy tiếp tục và cài đặt Nodemon bằng cách sử dụng

  $ npm -v
  7.6.3 ## installed npm version
  

  7. Kiểm tra hướng dẫn này để tìm hiểu thêm về Nodemon

Hiển thị các phần tử HTML nội tuyến dưới dạng phản hồi HTTP

Dưới đây là một máy chủ HTTP hello world đơn giản (

$ npm -v
7.6.3 ## installed npm version

tên tệp. ứng dụng. js

________số 8

Chạy

$ npm -v
7.6.3 ## installed npm version

9 để khởi động máy chủ

Bất cứ khi nào máy chủ đang chạy và truy cập vào tuyến đường

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Chúng ta có thể sử dụng cùng một máy chủ để hiển thị các phần tử HTML dưới dạng phản hồi của máy chủ thay vì gửi văn bản thuần túy

Dưới đây là danh sách một số phần tử HTML. Chúng tôi có thể hiển thị chúng trực tiếp vào máy chủ của mình bằng cách chỉ định phản hồi sẽ gửi khi tuyến mặc định được truy cập

$ node -v
v12.18.3 ## installed Node.js version

Khởi động lại máy chủ và mở tuyến đường

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Kết xuất các trang web HTML dưới dạng phản hồi của máy chủ

Phương pháp trên có thể rất mệt mỏi và có thể không phải là loại mã bạn muốn viết bên trong máy chủ của mình. Trong một trang web bình thường, các phần tử HTML được viết trong tệp

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Điều này giúp bạn dễ dàng viết tất cả các phần tử HTML của mình, bao gồm cả kiểu dáng CSS, để bố trí các phần tử này. Do đó, tách các tệp máy chủ và các thành phần HTML, tạo ra một thiết lập mã sạch

Để hiển thị tệp HTML vào máy chủ bằng Express. js, chúng tôi sử dụng

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Thao tác này sẽ chuyển tệp tới trình duyệt theo yêu cầu GET tới máy chủ. Máy chủ gửi trạng thái phản hồi với nội dung web được hiển thị HTML dưới dạng nội dung thư

Đây là cú pháp

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

$ node -v
v12.18.3 ## installed Node.js version

Đường dẫn chỉ định vị trí của tệp HTML. Nó nhận một mảng tên tệp chẳng hạn như

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Khi máy chủ trực tuyến, bạn có thể không biết vị trí tệp HTML của mình.

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Hãy chứng minh cách thức hoạt động của

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

$ node -v
v12.18.3 ## installed Node.js version

$ npm -v
7.6.3 ## installed npm version

Mở route

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Như bạn có thể thấy, nó in đường dẫn chính xác để đến vị trí máy chủ của bạn

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

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Để bắt đầu, hãy tạo một biểu mẫu HTML (

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

$ node -v
v12.18.3 ## installed Node.js version

tên tệp. mục lục. html

$ npm -v
7.6.3 ## installed npm version

tên tệp. ứng dụng. css

$ npm -v
7.6.3 ## installed npm version

Hãy kết xuất tệp vào máy chủ

$ npm -v
7.6.3 ## installed npm version

Tuy nhiên, điều này không tải kiểu dáng CSS.

$ node -v
v12.18.3 ## installed Node.js version

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

$ node -v
v12.18.3 ## installed Node.js version

$ npm -v
7.6.3 ## installed npm version

Lưu tệp và mở

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Phân tích cú pháp dữ liệu biểu mẫu đến máy chủ bằng biểu mẫu HTML

Máy chủ đang chạy. Nó hiện đang trả về dạng HTML dưới dạng phản hồi cho ứng dụng khách (trình duyệt). Bất cứ khi nào tuyến đường của máy chủ này được truy cập, yêu cầu

$ node -v
v12.18.3 ## installed Node.js version

Hãy thử điều đó. Điều này xuất ra kết quả bên dưới, một lỗi do máy chủ trả về

Tải lại trang lần nữa. Mở công cụ kiểm tra trình duyệt và đi tới tab Mạng. Điền dữ liệu biểu mẫu và nhấp vào nút đăng ký. Điều này sẽ trả về mã trạng thái 404. Điều này có nghĩa là máy khách không thể gửi/

$ node -v
v12.18.3 ## installed Node.js version

Biểu mẫu HTML chúng tôi đã tạo có phương thức

$ node -v
v12.18.3 ## installed Node.js version

$ node -v
v12.18.3 ## installed Node.js version

Máy chủ của chúng tôi không có cách xử lý bất kỳ yêu cầu

$ node -v
v12.18.3 ## installed Node.js version

$ node -v
v12.18.3 ## installed Node.js version

Chúng ta có thể khắc phục điều này bằng cách thêm phương thức

$ node -v
v12.18.3 ## installed Node.js version

$ node -v
v12.18.3 ## installed Node.js version

$ npm -v
7.6.3 ## installed npm version

Khi bạn nhấp vào nút đăng ký, thông báo

$ npm -v
7.6.3 ## installed npm version

$ node -v
v12.18.3 ## installed Node.js version

$ node -v
v12.18.3 ## installed Node.js version

Mọi thứ đang hoạt động tuyệt vời. Tuy nhiên, chúng tôi cần máy chủ lấy dữ liệu biểu mẫu và gửi kết quả có liên quan đến trình duyệt thay vì gửi một số văn bản thuần túy tương đối, chẳng hạn như

$ npm -v
7.6.3 ## installed npm version

Để tương tác với dữ liệu biểu mẫu, chúng ta cần gói body-parser. Hãy tiếp tục và cài đặt gói này bằng cách sử dụng

$ npm -v
7.6.3 ## installed npm version

Nhập gói bằng chức năng

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

Body-parser có một vài chế độ như

• $ npm -v
  7.6.3 ## installed npm version
  

  57 - chuyển tất cả các yêu cầu thành văn bản

• $ npm -v
  7.6.3 ## installed npm version
  

  58 - phân tích dữ liệu thành định dạng JSON

• $ npm -v
  7.6.3 ## installed npm version
  

  59 - thường được sử dụng khi nhận dữ liệu được đăng từ biểu mẫu HTML

Trong ví dụ này, chúng tôi sẽ sử dụng định dạng

$ npm -v
7.6.3 ## installed npm version

Trình phân tích cú pháp nội dung đi vào bất kỳ tuyến đường nào của bạn bằng cách sử dụng

$ npm -v
7.6.3 ## installed npm version

Với body-parser, chúng ta có thể truy cập dữ liệu biểu mẫu này và tương tác với nó. Hãy thử đăng nhập bảng điều khiển

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

Mở

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Dữ liệu biểu mẫu này có sẵn và bây giờ chúng tôi có thể hướng dẫn máy chủ phải làm gì với nó

$ npm -v
7.6.3 ## installed npm version

Điền vào các đầu vào mẫu và nhấp vào nút đăng ký

GHI CHÚ. Thông tin được lưu trữ trong các biến

$ npm -v
7.6.3 ## installed npm version

14 và

$ npm -v
7.6.3 ## installed npm version

15 tương ứng với

$ npm -v
7.6.3 ## installed npm version

16 và

$ npm -v
7.6.3 ## installed npm version

17 tương ứng. Việc đặt tên

$ npm -v
7.6.3 ## installed npm version

16 và

$ npm -v
7.6.3 ## installed npm version

16 xuất phát từ

$ npm -v
7.6.3 ## installed npm version

20 của đầu vào biểu mẫu HTML của bạn. Bằng cách này, bạn có thể sử dụng dữ liệu biểu mẫu và quyết định điều gì sẽ xảy ra với từng đầu vào như thể chúng chỉ là thuộc tính của phần thân đối tượng

Phần kết luận

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu cách hiển thị dữ liệu HTML vào máy chủ của mình bằng Express. js

Các công cụ mẫu như pug và ejs cũng có thể được sử dụng để hiển thị dữ liệu HTML động vào máy chủ. Cả hai đều biên dịch HTML bằng các công nghệ được hỗ trợ như Express. js