Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

Hãy để xem cách tạo một máy chủ và hiển thị một số HTML trong Node.js. Đầu tiên, chúng tôi sẽ tạo một tệp mới có tên Server.js trong root dự án của chúng tôi. Chúng tôi đang viết máy chủ đầu tiên của chúng tôi trong Node.js! Có vẻ kỳ lạ nếu bạn đến từ nền PHP để nói về việc tạo máy chủ đầu tiên của chúng tôi trong tệp JavaScript, nhưng thực tế đó là những gì chúng tôi sắp làm. Điều này là do chúng tôi đã quen với một máy chủ như NGINX hoặc APACHE được thiết lập để giải thích mã PHP. Quá trình nginx hoặc Apache sau đó phục vụ các tệp HTML cho người dùng. Trong trường hợp này, chúng tôi đang viết máy chủ của riêng mình. Hãy cùng xem cách hoàn thành nhiệm vụ này.server.js in our project root. We are writing our first server in Node.js! It might seem odd if you’re coming from a PHP background to talk about creating our first server in a JavaScript file, but that is in fact what we are about to do. This is because we are used to having a server like Nginx or Apache which are set up to interpret PHP code. The Nginx or Apache process then serves the HTML files to the user. In this case we are writing our own server. Let’s see how to complete this task.


Tạo một máy chủ web trong node.js

Node.js cung cấp khả năng tạo chức năng máy chủ và bỏ qua ý tưởng truyền thống của một máy chủ web độc lập. Ví dụ: trong Node.js, chúng ta có thể chỉ định một cổng để liên lạc, tên miền nào sẽ sử dụng và bây giờ để xử lý các yêu cầu HTTP. Tệp mới này sẽ có hướng dẫn để nghe các yêu cầu HTTP và thực hiện một cái gì đó với các yêu cầu này.

Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

Tệp server.js này là tệp mà Node.js sẽ thực thi và sẽ thiết lập một loại vòng lặp. Node sẽ tiếp tục lắng nghe các yêu cầu miễn là chúng tôi cho phép chương trình chạy. Hãy để thêm một chút mã vào tệp của chúng tôi.


server.js

let http = require('http');

let handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    response.write('Hi There!');
    response.end();
};

http.createServer(handleRequest).listen(8000);

Vậy tập tin này làm gì? Chà, chúng ta có thể thấy rằng chúng ta sử dụng yêu cầu () như chúng ta đã tìm hiểu trước đây để sử dụng mô -đun HTTP trong tệp này. Khi mô -đun HTTP được nhập, chúng tôi có quyền truy cập vào phương thức createServer (). Dù bạn có tin hay không, một phương thức đó tạo ra toàn bộ máy chủ web cho bạn! Lưu ý rằng chúng tôi cũng chuỗi trên phương thức Nghe () chỉ định cổng nào để nghe các yêu cầu HTTP. Bây giờ, chúng ta thấy rằng createderver () thực sự chấp nhận một lập luận của handleRequest. Điều này được yêu cầu bởi vì trong chức năng này, chúng tôi thiết lập logic để xử lý bất kỳ yêu cầu HTTP nào mà máy chủ nhận được. Chúng tôi tự tạo chức năng này, và sau đó chuyển tham chiếu đến chức năng đó.require() like we’ve learned about before to make use of the http module in this file. Once the http module is imported, we have access to the createServer() method. Believe it or not, that one method creates an entire web server for you! Notice that we also chain on the listen() method which specifies which port to listen for http requests on. Now, we see that createServer() is actually accepting an argument of handleRequest. This is required because it is in this function that we set up the logic to handle any http requests the server gets. We created this function ourselves, and then pass in a reference to that function.

Vậy chức năng HandLereQuest () này đang làm gì? Vâng, chúng ta có thể thấy rằng nó chấp nhận một requestresponse là hai đối số. Các đối số này được tự động truyền vào chức năng này bởi Node.js. Vì vậy, trong chức năng này, chúng tôi không thực sự sẽ làm bất cứ điều gì với yêu cầu, nhưng chúng tôi cần phải thiết lập những gì máy chủ sẽ làm với phản hồi. Trước tiên chúng tôi sử dụng phương thức writehead () để đặt tiêu đề của phản hồi. Đối số đầu tiên cho hàm đó là mã trạng thái chúng tôi muốn gửi. A 200 có nghĩa là mọi thứ diễn ra tốt đẹp. Đối số tiếp theo được thông qua là một đối tượng JavaScript chỉ định loại nội dung chúng tôi đang gửi lại. Sau đó, chúng tôi gọi hàm write (), để chúng tôi có thể hiển thị một số văn bản cho màn hình. Cuối cùng, chúng tôi gọi phương thức End () để cho biết rằng chúng tôi đã xử lý yêu cầu và phản hồi có thể được gửi cho người dùng đã thực hiện yêu cầu HTTP.writeHead() method to set the header of the response. The first argument to that function is the status code we would like to send. A 200 means everything went well. The next argument that gets passed is a JavaScript object which specifies the content type we are sending back. After that we call the write() function, so that we can just render some text to the screen. Lastly, we call the end() method to indicate that we are done handling the request and the response can be sent to the user who made the http request.

Hãy để thử nó, chúng tôi có thể chạy chương trình của mình bằng cách nhập





    Hello, world!



    

Hello, world!

0 vào dòng lệnh và nhận thấy rằng có vẻ như chương trình chỉ bị treo. Chà, về cơ bản nó đang chạy trong một vòng lặp để nó có thể trả lời bất cứ khi nào một yêu cầu đến.
Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

Bây giờ, chúng ta có thể tải lên http: // localhost: 8000/trong trình duyệt và xem điều gì sẽ xảy ra.

Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

Mát mẻ! Chúng tôi chỉ cần thiết lập một máy chủ web hoạt động đầy đủ trong Node.js trong khoảng 10 dòng mã! Dưới đây là các phương pháp quan trọng chúng tôi đã sử dụng.

  • http.createServer()
  • .listen()
  • response.writeHead()
  • response.write();
  • response.end()

Phục vụ các tệp HTML với Node.js

Bây giờ chúng tôi đã có một máy chủ lên và chạy, hãy để xem cách hiển thị HTML với Node.js. Để làm điều này, tất nhiên chúng tôi cần một tệp HTML để phục vụ để chúng tôi có thể tạo và điền vào tệp index.html ngay bây giờ.

Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

index.html





    Hello, world!



    

Hello, world!

Vì vậy, trong phần trên, chúng tôi chỉ cần gửi một số văn bản đến trình duyệt để đáp ứng yêu cầu HTTP đến. Bây giờ, chúng tôi không còn muốn gửi văn bản đơn giản, mà là một tệp HTML thực tế. Làm thế nào chúng ta có thể làm điều này? Tệp index.html hiện đang có trên máy chủ của chúng tôi. Chúng tôi sẽ cần bằng cách nào đó lấy tệp và đính kèm nó vào một phản hồi, và sau đó gửi phản hồi đó lại cho người dùng đã thực hiện yêu cầu HTTP. Do đó, chúng tôi cần một cách để sử dụng hệ thống tệp để lấy tệp và sau đó gửi cho người dùng.


Tìm nạp tệp HTML trên hệ thống tệp của chúng tôi

Trong đoạn trích bên dưới, bổ sung đầu tiên chúng tôi sẽ thực hiện cho tập lệnh Server.js của chúng tôi là yêu cầu mô -đun hệ thống tệp trong Node.js. Bạn có thể là một chuyên gia tại đó bây giờ! Sau đó, trong phương thức Phản hồi gốc.Writehead (), lưu ý rằng chúng tôi thay đổi loại nội dung từ ‘văn bản/trơn sang‘ văn bản/html. Điều này thay đổi tiêu đề được gửi đến trình duyệt và thông báo cho trình duyệt rằng hiện tại nó đang xử lý một tệp HTML thực tế và để phân tích nó như vậy. Khi đó, chúng tôi sử dụng mô -đun hệ thống tệp để thực hiện cuộc gọi đến fs.readfile () và chúng tôi đọc trong tệp index.html sống trên máy chủ của chúng tôi. Chúng tôi chỉ định tệp chúng tôi muốn đọc với đối số đầu tiên. Chúng tôi không cần đối số thứ hai trong trường hợp này vì vậy chúng tôi đặt nó thành NULL, nhưng chúng tôi cần đối số thứ ba là hàm gọi lại. Hàm này được thực thi khi Node.js đã đọc xong trong tệp index.html. Nói cách khác, đó là một cách để nói cho Node.js phải làm gì tiếp theo để nói.


Đính kèm tệp vào phản hồi và gửi nó đến trình duyệt

Những gì chúng tôi sử dụng chức năng gọi lại này là kiểm tra để đảm bảo không có lỗi, nhưng nếu có lỗi - chúng tôi sẽ gửi lại tin nhắn không tìm thấy 404 cho trình duyệt. Tuy nhiên, nếu hoạt động thành công, chúng tôi sẽ gửi phản hồi trở lại trình duyệt và chúng tôi đang đính kèm tệp vào phản hồi đó bằng cách chuyển nó như một đối số. Dữ liệu này là tệp chỉ mục thực tế của chúng tôi.html của chúng tôi. Cuối cùng, chúng tôi thực hiện một cuộc gọi để phản hồi.end ().

let http = require('http');
let fs = require('fs');

let handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    fs.readFile('./index.html', null, function (error, data) {
        if (error) {
            response.writeHead(404);
            respone.write('Whoops! File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
};

http.createServer(handleRequest).listen(8000);

Trong thời gian chờ đợi, hãy đảm bảo rằng máy chủ của bạn đang chạy với Nodemon bằng cách nhập





    Hello, world!



    

Hello, world!

1 tại dấu nhắc lệnh. Chúng ta có thể thấy cách máy chủ tự động khởi động lại khi chúng tôi chỉnh sửa và cập nhật mã JavaScript của chúng tôi.

c:node>nodemon server.js
[nodemon] 1.17.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
[nodemon] restarting due to changes...
[nodemon] starting `node server.js`
[nodemon] restarting due to changes...
[nodemon] starting `node server.js`
[nodemon] restarting due to changes...
[nodemon] starting `node server.js`

Tải lên trình duyệt tại http: // localhost: 8000/cho chúng tôi biết rằng bây giờ, chúng tôi đang nhận được một bản hiển thị HTML vinh quang của tệp index.html của chúng tôi!

Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?

Chỉ để cười, hãy để Lôi xem những gì xảy ra nếu chúng ta không thay đổi loại nội dung.

let http = require('http');
let fs = require('fs');

let handleRequest = (request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    fs.readFile('./index.html', null, function (error, data) {
        if (error) {
            response.writeHead(404);
            respone.write('file not found');
        } else {
            response.write(data);
        }
        response.end();
    });
};

http.createServer(handleRequest).listen(8000);

Tải trang bây giờ cho chúng tôi một kết quả rất khác. Bây giờ chúng ta thấy tầm quan trọng của việc đặt tiêu đề phản hồi một cách chính xác!

Hướng dẫn how do i display html code in node js? - làm cách nào để hiển thị mã html trong nút js?


Kết xuất HTML trong Tóm tắt Node.js

Trong hướng dẫn này, chúng tôi đã thấy cách xuất các tệp HTML vào trình duyệt với Node.js. Thật tuyệt khi thấy cách chúng tôi có thể tạo máy chủ web của riêng mình chỉ với một lượng mã JavaScript rất tối thiểu. Chúng tôi cũng đã thấy cách đọc trong một tệp từ hệ thống tệp, đính kèm nó vào phản hồi và gửi lại cho người dùng. Tất nhiên, chúng tôi sẽ xem xét cách đơn giản hóa tất cả những điều này bằng cách sử dụng một số khung Node.js phổ biến, nhưng bây giờ, thật tuyệt khi thấy mọi thứ xảy ra bằng cách sử dụng JavaScript thô và thời gian chạy của Node.js.

Bạn có thể sử dụng HTML trong Node JS không?

Trong nút.Các ứng dụng JS và Express, Res.SendFile () có thể được sử dụng để cung cấp các tệp.Việc cung cấp các tệp HTML bằng cách sử dụng Express có thể hữu ích khi bạn cần một giải pháp để phục vụ các trang tĩnh.res. sendFile() can be used to deliver files. Delivering HTML files using Express can be useful when you need a solution for serving static pages.

Phương pháp nào được sử dụng để hiển thị đầu ra trong trình duyệt trong nút JS?

Đầu ra cơ bản bằng cách sử dụng mô -đun bảng điều khiển, về cơ bản giống như đối tượng bảng điều khiển bạn tìm thấy trong trình duyệt.Phương pháp cơ bản và được sử dụng nhiều nhất là bảng điều khiển.log (), in chuỗi bạn chuyển đến nó vào bảng điều khiển.console. log() , which prints the string you pass to it to the console.

Làm thế nào chúng ta có thể tìm nạp dữ liệu từ cơ sở dữ liệu trong Node JS và hiển thị trong HTML?

Node JS MySQL kết xuất và hiển thị các bản ghi từ cơ sở dữ liệu trong ví dụ HTML..
Bước 1: xây dựng dự án nút ..
Bước 2: Cài đặt phụ thuộc NPM ..
Bước 3: Tạo bảng SQL ..
Bước 4: Tạo kết nối cơ sở dữ liệu MySQL ..
Bước 5: Hiển thị hồ sơ trong HTML ..
Bước 6: Xây dựng tuyến đường tốc hành ..
Bước 7: Xây dựng tệp máy chủ ..
Bước 8: Phục vụ ứng dụng nút ..