Hướng dẫn how do i link html pages to node js? - làm cách nào để liên kết các trang html với nút js?

Khi phát triển các ứng dụng web, bạn có thể cần hiển thị các thành phần HTML bên trong máy chủ của bạn. Đ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.

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

• Tự hiển thị phía khách hàng của bạn bằng cách sử dụng các khung như React hoặc,
• REND các trang trực tiếp từ máy chủ. Khi trình duyệt truy cập một tuyến đường đượ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à các 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ề việc sử dụng Node.js và Express.js sẽ 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
• Kết xuất các yếu 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 máy chủ
• Phân tích dữ liệu biểu mẫu cho máy chủ bằng các biểu mẫu HTML
• Sự kết luận

Đang cài đặt

• Kết xuất các yếu tố HTML nội tuyến dưới dạng phản hồi HTTP

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

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

$ npm -v
7.6.3 ## installed npm version

Phân tích dữ liệu biểu mẫu cho máy chủ bằng các biểu mẫu HTML

• Sự kết luận
• Tải xuống Node.js và cài đặt nó. Chạy

  $ npm -v
  7.6.3 ## installed npm version
  

  3 để kiểm tra nếu cài đặt thành công.
• Khi Node.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 nếu thực sự một NPM đã cài đặt.

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

Tạo một thư mục dự án Node.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

Cài đặt khung Express.js bằng cách sử dụng

$ npm -v
7.6.3 ## installed npm 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!");
});

Chúng tôi sẽ tạo một máy chủ bằng Express.js. Điều quan trọng là móc 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ủ. Đi trước và cài đặt Nodemon bằ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.

Kết xuất các yếu 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: App.js

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(" server Response
 This page was render direcly from the server 
Hello there welcome to my website
");
});

Chạy

$ npm -v
7.6.3 ## installed npm version

Bất cứ khi nào máy chủ đang chạy và truy cập 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!");
});

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

Phân tích dữ liệu biểu mẫu cho máy chủ bằng các biểu mẫu HTML

Sự kết luận

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

$ npm -v
7.6.3 ## installed npm version

Khi Node.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

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

res.sendFile(path [, options] [, fn])

Tạo một thư mục dự án Node.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

Cài đặt khung Express.js bằng cách sử dụng

$ npm -v
7.6.3 ## installed npm version

Chúng tôi sẽ tạo một máy chủ bằng Express.js. Điều quan trọng là móc 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ủ. Đi trước và cài đặt Nodemon bằng

$ npm -v
7.6.3 ## installed npm version

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

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

app.get("/", (req, res) => {
  console.log(__dirname)
});

Kết xuất các yếu 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: App.js

Chạy

$ npm -v
7.6.3 ## installed npm version

Bất cứ khi nào máy chủ đang chạy và truy cập 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!");
});

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

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

.subscribe-container {
    max-width: 800px;
    margin: 60px auto;
    background-color: rgba(130, 184, 219, 0.5);
    border: 5px solid rgb(98, 143, 228);
}
.subscribe-container form {
    display: flex;
    flex-wrap: wrap;
}
.subscribe-container form input {
    margin: 15px;
    border: 1px solid rgb(98, 143, 228);
    padding: 0.4rem;
}
.subscribe-container form input {
    flex: 1 1 200px;
}

.subscribe-container form input[type="submit"] {
    border-radius: 3px;
    background-color: rgba(17, 228, 10, 0.5);
color: rgb(98, 143, 228);
}

.subscribe-container form input[type="email"] {
    flex: 1 1 250px;
}

Dưới đây là danh sách một số yếu tố HTML. Chúng tôi có thể hiển thị chúng trực tiếp vào máy chủ của chúng tôi bằng cách chỉ định phản hồi để gửi khi tuyến đường mặc định được truy cậ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.sendFile(__dirname + "/index.html");
});

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

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");
});

// serve your css as static
app.use(express.static(__dirname));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.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!");
});

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 dữ liệu biểu mẫu cho máy chủ bằng các biểu mẫu HTML

Máy chủ đang chạy. Bây giờ nó đang trả về biểu mẫu HTML như một phản hồi cho máy khách (trình duyệt). Bất cứ khi nào tuyến máy chủ này được truy cập, yêu cầu

res.sendFile(path [, options] [, fn])

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

Tải lại trang một lần nữa. Mở công cụ Thanh tra Trình duyệt và hướng đến tab Mạng. Điền vào 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/________ 43 dữ liệu đến máy chủ.

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

res.sendFile(path [, options] [, fn])

res.sendFile(path [, options] [, fn])

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

res.sendFile(path [, options] [, fn])

res.sendFile(path [, options] [, fn])

Chúng ta có thể sửa lỗi này bằng cách thêm phương thức

res.sendFile(path [, options] [, fn])

res.sendFile(path [, options] [, fn])

$ npm -v
7.6.3 ## installed npm version

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

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

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

app.get("/", (req, res) => {
  console.log(__dirname)
});

res.sendFile(path [, options] [, fn])

res.sendFile(path [, options] [, fn])

Mọi thứ đang hoạt động rất tốt. 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 đơn giản tương đối như

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

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

app.get("/", (req, res) => {
  console.log(__dirname)
});

Để tương tác với dữ liệu biểu mẫu, chúng tôi cần một gói phân tích cơ thể. Đi trước và cài đặt gói này bằng

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

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

app.get("/", (req, res) => {
  console.log(__dirname)
});

Nhập gói bằng hàm

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

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

app.get("/", (req, res) => {
  console.log(__dirname)
});

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

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

app.get("/", (req, res) => {
  console.log(__dirname)
});

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

• const express = require("express");
  const app = express();
  
  app.listen(3000, () => {
    console.log("Application started and Listening on port 3000");
  });
  
  app.get("/", (req, res) => {
    console.log(__dirname)
  });
  

  7 - Chuyển tất cả các yêu cầu vào văn bản.

• const express = require("express");
  const app = express();
  
  app.listen(3000, () => {
    console.log("Application started and Listening on port 3000");
  });
  
  app.get("/", (req, res) => {
    console.log(__dirname)
  });
  

  8 - phân tích dữ liệu vào định dạng JSON.

• const express = require("express");
  const app = express();
  
  app.listen(3000, () => {
    console.log("Application started and Listening on port 3000");
  });
  
  app.get("/", (req, res) => {
    console.log(__dirname)
  });
  

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

Trong ví dụ này, chúng tôi sẽ sử dụng định 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) => {
  console.log(__dirname)
});

Body-Parser đi vào bất kỳ tuyến đường nào của bạn bằng cách sử dụng

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

Với trình phân tích cú pháp cơ thể, 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 cố gắng để bảng điều khiển nhật ký

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

$ 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 đầu vào biểu mẫu và nhấp vào nút Đăng ký.

Lưu ý: Thông tin được lưu trữ trong các biến

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

4 và

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

5 tương ứng với

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

6 và

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

7.

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

6 và

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet"
  href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
  <title>html formtitle>
head>
<body>
<div class="subscribe-container">
  <form method="POST">
    <input type="email" name="youremail" placeholder="Email Address" required>
    <input type="text" name="yourname" placeholder="Name" required>
    <input class="subscribe-button" type="submit" value="Subscribe">
  form>
div>
body>
html>

6 đặt tên đến từ

.subscribe-container {
    max-width: 800px;
    margin: 60px auto;
    background-color: rgba(130, 184, 219, 0.5);
    border: 5px solid rgb(98, 143, 228);
}
.subscribe-container form {
    display: flex;
    flex-wrap: wrap;
}
.subscribe-container form input {
    margin: 15px;
    border: 1px solid rgb(98, 143, 228);
    padding: 0.4rem;
}
.subscribe-container form input {
    flex: 1 1 200px;
}

.subscribe-container form input[type="submit"] {
    border-radius: 3px;
    background-color: rgba(17, 228, 10, 0.5);
color: rgb(98, 143, 228);
}

.subscribe-container form input[type="email"] {
    flex: 1 1 250px;
}

0 của các đầu vào 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ì xảy ra với từng đầu vào như thể chúng chỉ là thuộc tính của thân đối tượng.

Sự 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 bạn bằng Express.js.

Các công cụ mẫu như PUG và EJ 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ách sử dụng các công nghệ được hỗ trợ như Express.js.

Mã hóa hạnh phúc.

Đóng góp đánh giá ngang hàng của: Lalithnarayan C

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

Làm thế nào yêu cầu tệp HTML trong Node JS?