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

Ứng dụng NodeJS của tôi rất đơn giản, nhưng tôi gặp khó khăn trong việc liên kết tệp JavaScript của mình với nó. Thông thường, bạn sẽ chỉ đặt kịch bản vào tiêu đề. Điều đó không hoạt động với Node, rõ ràng, đã cố gắng liên kết nó thông qua SendFile và một số phương pháp khác, nhưng không có phương pháp nào hoạt động.

JavaScript của tôi chỉ đơn giản là:

var express = require('express');
var app = express();


app.get('/',function(req, res) {
    res.sendFile(__dirname + '/index.html');
    res.send()
});
app.listen(8888)

HTML của tôi cũng đơn giản:

    
    
    
    


    

    Add series
    

Những gì tôi muốn làm là liên kết một tệp khác,

    
    
    
    


    

    Add series
    

Mô-đun URL tích hợp

Mô -đun URL chia một địa chỉ web thành các phần có thể đọc được.

Để bao gồm mô -đun URL, hãy sử dụng phương thức

    
    
    
    


    

    Add series
    

var url = yêu cầu ('url');

Phân tích một địa chỉ với phương thức

    
    
    
    


    

    Add series
    

Thí dụ

Chia một địa chỉ web thành các phần có thể đọc được:

var url = yêu cầu ('url'); var adr = 'http: // localhost: 8080/default.htm? Năm = 2017 & tháng = tháng 2'; var q = url.parse (adr, true);
var adr = 'http://localhost:8080/default.htm?year=2017&month=february';
var q = url.parse(adr, true);

Console.log (q.host); // trả về 'localhost: 8080' console.log (q.pathname); // trả về '/default.htm'console.log(q.Search); // Trả về '? Năm = 2017 & tháng = tháng 2'
console.log(q.pathname); //returns '/default.htm'
console.log(q.search); //returns '?year=2017&month=february'

var qdata = q.Query; // trả về một đối tượng: {năm: 2017, tháng: 'tháng 2'} console.log (qdata.month); // trả lại 'tháng hai'
console.log(qdata.month); //returns 'february'

Chạy ví dụ »

Máy chủ tệp Node.js

Bây giờ chúng ta biết cách phân tích cú pháp chuỗi truy vấn và trong chương trước, chúng ta đã học cách làm cho Node.js hoạt động như một máy chủ tệp. Hãy để chúng tôi kết hợp cả hai và phục vụ tệp được khách hàng yêu cầu.

Tạo hai tệp HTML và lưu chúng trong cùng một thư mục với các tệp Node.js của bạn.

summer.html

Summeri yêu mặt trời!

Summer

I love the sun!

winter.html

Winteri yêu tuyết!

Winter

I love the snow!

Tạo tệp Node.js mở tệp được yêu cầu và trả về nội dung cho máy khách. Nếu có bất cứ điều gì sai, hãy ném lỗi 404:

demo_fileserver.js:

var http = yêu cầu ('http'); var url = yêu cầu ('url'); var fs = yêu cầu ('fs');
var url = require('url');
var fs = require('fs');

http.createserver (function (req, res) {& nbsp; var q = url.parse (req.url, true); & nbsp; var filename = "." err, dữ liệu) {& nbsp; & nbsp; & nbsp; if (err) {& nbsp; & nbsp; & nbsp; ; & nbsp; & nbsp; & nbsp; return res.end ("404 không tìm thấy"); html '}); & nbsp; & nbsp; & nbsp; res.write (dữ liệu);
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    } 
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

Hãy nhớ bắt đầu tệp:

Bắt đầu demo_fileserver.js:

C: \ Users \ Your Name> Node demo_fileserver.js

Nếu bạn đã làm theo cùng các bước trên máy tính của mình, bạn sẽ thấy hai kết quả khác nhau khi mở hai địa chỉ sau:

http://localhost:8080/summer.html

Sẽ tạo ra kết quả này:

http://localhost:8080/winter.html

Sẽ tạo ra kết quả này:

Giới thiệu

Trong Node.js và Ứng dụng Express,

    
    
    
    


    

    Add series
    

Lưu ý: Trước khi Express 4.8.0,

    
    
    
    


    

    Add series
    

    
    
    
    


    

    Add series
    

    
    
    
    


    

    Add series
    

    
    
    
    


    

    Add series
    

Trong bài viết này, bạn sẽ học cách sử dụng

    
    
    
    


    

    Add series
    

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

Để hoàn thành hướng dẫn này, bạn sẽ cần:

• Node.js được cài đặt cục bộ, bạn có thể làm bằng cách theo cách cài đặt Node.js và tạo môi trường phát triển cục bộ.

Hướng dẫn này đã được xác minh bằng nút v16.0.0,

    
    
    
    


    

    Add series
    

    
    
    
    


    

    Add series
    

Bước 1 - Thiết lập dự án

Đầu tiên, hãy mở cửa sổ thiết bị đầu cuối của bạn và tạo một thư mục dự án mới:

mkdir express-sendfile-example

Sau đó, điều hướng đến thư mục mới được tạo:

cd express-sendfile-example

Tại thời điểm này, bạn có thể khởi tạo một dự án NPM mới:

npm init -y

Tiếp theo, bạn sẽ cần cài đặt gói

    
    
    
    


    

    Add series
    

npm install 

Tại thời điểm này, bạn có một dự án mới sẵn sàng sử dụng Express.

Tạo tệp

mkdir express-sendfile-example

server.js

const express = require('express');

const app = express();
const port = process.env.PORT || 8080;

// sendFile will go here

app.listen(port);
console.log('Server started at http://localhost:' + port);

Xem lại cửa sổ thiết bị đầu cuối của bạn và chạy ứng dụng của bạn:

node server.js

Sau khi xác minh dự án của bạn đang hoạt động như mong đợi, bạn có thể sử dụng

    
    
    
    


    

    Add series
    

Bước 2 - Sử dụng

Add series 4

Xem lại

mkdir express-sendfile-example

mkdir express-sendfile-example

mkdir express-sendfile-example

    
    
    
    


    

    Add series
    

server.js

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 8080;

// sendFile will go here
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(port);
console.log('Server started at http://localhost:' + port);

Khi một yêu cầu được thực hiện cho máy chủ, một tệp

mkdir express-sendfile-example

Tạo tệp

mkdir express-sendfile-example

index.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample Sitetitle>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    body { padding-top: 50px; }
  style>
head>
<body>

  <div class="container">
    <div class="jumbotron">
      <h2>res.sendFile() Works!h2>
    div>
  div>
    
body>
html>

Mã này sẽ hiển thị thông báo:

cd express-sendfile-example

Lưu ý: Hướng dẫn này sử dụng bootstrapcdn để tạo kiểu, nhưng nó không bắt buộc. This tutorial makes use of BootstrapCDN for styling, but it is not required.

Lưu các thay đổi của bạn. Sau đó, mở cửa sổ đầu cuối của bạn và chạy lại máy chủ.

node server.js

Với máy chủ đang chạy, hãy truy cập

cd express-sendfile-example

Ứng dụng của bạn hiện sử dụng

    
    
    
    


    

    Add series
    

Sự kết luận

Trong bài viết này, bạn đã học cách sử dụng

    
    
    
    


    

    Add series
    

Tiếp tục học tập của bạn với học cách sử dụng bộ định tuyến Express 4.0 và cách truy xuất URL và đăng các tham số với Express.

Làm thế nào để bạn liên kết nút JS với HTML?

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

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

Làm cách nào để viết mã HTML trong nút JS?