Hướng dẫn how do i write html code in node? - làm cách nào để viết mã html trong nút?

Node.js không chạy trong trình duyệt, do đó bạn sẽ không có sẵn đối tượng

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

0. Trên thực tế, bạn thậm chí sẽ không có một cây Dom nào cả. Nếu bạn hơi bối rối vào thời điểm này, tôi khuyến khích bạn đọc thêm về nó trước khi đi xa hơn.

Có một vài phương pháp bạn có thể chọn để làm những gì bạn muốn.

---

Phương pháp 1: Phục vụ tệp trực tiếp qua HTTP

Bởi vì bạn đã viết về việc mở tệp trong trình duyệt, tại sao bạn không sử dụng khung sẽ phục vụ tệp trực tiếp dưới dạng dịch vụ HTTP, thay vì có quy trình hai bước? Bằng cách này, mã của bạn sẽ năng động hơn và dễ dàng duy trì (không đề cập đến HTML của bạn luôn cập nhật).

Có rất nhiều khuôn khổ ngoài kia cho điều đó:

• HTTP (API gốc nút)
• Liên kết
• Koa
• Express (sử dụng kết nối)
• Sails (xây dựng trên Express)
• Thiên thạch
• Tiếp theo
• Astro
• etc.

Cách cơ bản nhất bạn có thể làm những gì bạn muốn là:

var http = require('http');

http.createServer(function (req, res) {
  var html = buildHtml(req);

  res.writeHead(200, {
    'Content-Type': 'text/html',
    'Content-Length': html.length,
    'Expires': new Date().toUTCString()
  });
  res.end(html);
}).listen(8080);

function buildHtml(req) {
  var header = '';
  var body = '';

  // concatenate header string
  // concatenate body string

  return ''
       + '' + header + '' + body + '';
};

Và truy cập HTML này với

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

1 từ trình duyệt của bạn.

(Chỉnh sửa: Bạn cũng có thể phục vụ họ với một máy chủ HTTP nhỏ.)Edit: you could also serve them with a small HTTP server.)

---

Phương pháp 2: Chỉ tạo tệp

Nếu những gì bạn đang cố gắng làm chỉ đơn giản là tạo ra một số tệp HTML, thì hãy đơn giản. Để thực hiện truy cập IO trên hệ thống tệp, Node có API cho điều đó, được ghi lại ở đây.

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

Lưu ý: Hàm

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

2 giống hệt như trong Phương pháp 1. The

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

2 function is exactly the same as in Method 1.

---

Phương pháp 3: Việc đổ tệp trực tiếp vào var fs = require('fs'); var fileName = 'path/to/file'; var stream = fs.createWriteStream(fileName); stream.once('open', function(fd) { var html = buildHtml(); stream.end(html); }); 3

Đây là triển khai Node.js cơ bản nhất và yêu cầu ứng dụng gọi để xử lý đầu ra. Để xuất một cái gì đó trong nút (tức là stdout), cách tốt nhất là sử dụng

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

4 trong đó

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

5 là bất kỳ chuỗi, hoặc đối tượng, v.v.

var html = buildHtml();

console.log(html);

Lưu ý: Hàm

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

2 giống hệt như trong Phương pháp 1 (một lần nữa) The

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

2 function is exactly the same as in Method 1 (again)

Nếu tập lệnh của bạn được gọi là

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

7 (ví dụ), trong hệ thống dựa trên Linux/Unix, chỉ cần làm

$ node html-generator.js > path/to/file

---

Sự kết luận

Vì nút là một hệ thống mô -đun, bạn thậm chí có thể đặt hàm

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

2 bên trong mô -đun riêng của nó và chỉ cần viết bộ điều hợp để xử lý HTML theo cách bạn muốn. Cái gì đó như

var htmlBuilder = require('path/to/html-builder-module');

var html = htmlBuilder(options);
...

Bạn phải nghĩ rằng "phía máy chủ" chứ không phải "phía máy khách" khi viết javascript cho node.js; Bạn không ở trong trình duyệt và/hoặc giới hạn trong hộp cát, ngoài động cơ V8.

Đọc thêm, tìm hiểu về NPM. Hi vọng điêu nay co ich.

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.

Tệp

var fs = require('fs');

var fileName = 'path/to/file';
var stream = fs.createWriteStream(fileName);

stream.once('open', function(fd) {
  var html = buildHtml();

  stream.end(html);
});

9 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 Createserver () thực sự chấp nhận một lập luận của

var html = buildHtml();

console.log(html);

0. Đ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

var html = buildHtml();

console.log(html);

0. 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

var html = buildHtml();

console.log(html);

1 và

var html = buildHtml();

console.log(html);

2 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

var html = buildHtml();

console.log(html);

3 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

var html = buildHtml();

console.log(html);

3 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

var html = buildHtml();

console.log(html);

4 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.

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.

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ờ.

index.html

    



    
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

var html = buildHtml();

console.log(html);

5 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!

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!

---

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.

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

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

Làm cách nào để bắt đầu nút trong HTML?

Làm cách nào để bắt đầu mã hóa trong nút?