Hướng dẫn how to connect html to node js - cách kết nối html với nút js

Tôi mới sử dụng Node.js và tôi đang cố gắng tạo một cách dễ dàng để người dùng nhập dữ liệu vào biểu mẫu HTML, sau đó khi nhấp vào gửi dữ liệu được chuyển đến tập lệnh Node.js. Tập lệnh Node.js là một tập lệnh bài đăng lấy dữ liệu được nhập của người dùng và sau đó tạo một bài đăng lên API và nhận được trả lại trong JSON từ API. Tôi đang cố gắng để JSON trả lại để được in lại trên trang HTML. Làm thế nào để bạn làm điều này một cách sạch sẽ và dễ dàng?

  
    
    
      
      

  

  

      


      

  

     
Manual Query
    Mode
    
      Driving
           Walking
           Cycling
      
    Latitude Origin
    
    Longitude Origin
    
    Latitude Destination
    
    Longitude Destination
    
    Run
  
  

    
Multi-Query (.tsv)
    Upload
    
    Run
  
  

    
Result
      
  

Tập lệnh bài đăng Node.js của tôi:

var request = require("request");

var options = { method: 'POST',
  url: 'http://blah:8000/blah/blah/blah/blah/[latitude_origin]/[longitude_origin]/',
  headers:
   { 'postman-token': 'blah',
     'cache-control': 'no-cache' },
  body: '{"query1":[latitude_dest,longitude_dest]}' };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

Hôm nay, nhiệm vụ của tôi là giải thích về việc tạo máy chủ trong Node JS và lưu trữ các trang HTML trên máy chủ này và truy cập nó từ trình duyệt web. Để hiểu về việc tạo một máy chủ, chúng tôi đã lấy một ví dụ, vì vậy hãy làm theo các bước dưới đây.

1. Để tạo máy chủ trên Node JS, chúng tôi đã sử dụng mô -đun HTTP. Để sử dụng bất kỳ mô -đun nào trong nút JS, chúng tôi phải sử dụng mô -đun yêu cầu của Google. & NBSP; & nbsp; Vì vậy, chúng tôi nhập mô -đun HTTP của HTTP.
   
   1. var http=require("http");   http=require("http");  

1. Bây giờ chúng tôi đang tạo một máy chủ. Để tạo máy chủ, chúng tôi phải sử dụng phương thức 'createServer' của mô -đun HTTP và phương thức này lấy 2 tham số [Yêu cầu và Phản hồi] như hiển thị bên dưới.var & NBSP; Server & NBSP; = & NBSP; ; {}); & nbsp; & nbsp;
   
   1. var server = http.createServer(function(request, response) {});  

1. Sau đó, chúng tôi phải đặt loại nội dung làm văn bản đơn giản để gửi phản hồi cho máy khách. Như đã hiển thị invar & nbsp; server & nbsp; = & nbsp; http.createserver (function (request, & nbsp; respons) & nbsp; {& nbsp; & nbsp;
   
   1. var server = http.createServer(function(request, response) {  
   2.     response.writeHead(200, {  
   3.         'Content-Type': 'text/plain'  'Content-Type': 'text/plain'  
   4.     });  
   5. });  
   Here you can set any response type like plain text or html etc.

1. Bây giờ để gửi phản hồi cho khách hàng, chúng tôi phải sử dụng Phương thức Phản hồi.Write (). Và cuối cùng bạn phải gọi Phản hồi.end () phương thức để kết thúc phản hồi.Var & nbsp; server & nbsp; = & nbsp; http.createserver (function (request, & nbsp; respends) & nbsp; {& nbsp; & nbsp;
   
   1. var server = http.createServer(function(request, response) {  
   2.     response.writeHead(200, {  
   3.         'Content-Type': 'text/plain'  'Content-Type': 'text/plain'  
   4.     });  
   5.     response.write("This is Test Message.");  "This is Test Message.");  
   6.     response.end();  
   7. });  

1. Bây giờ chúng ta phải bắt đầu nghe máy chủ này; Trên bất kỳ bài đăng HTTP nào, bạn có thể sử dụng bất kỳ cổng nào có sẵn (không được sử dụng bởi bất kỳ ứng dụng nào khác trong máy tính của bạn.) Ở đây tôi đã lấy cổng 8082.

   máy chủ.listen (8082);

Dưới đây tôi đã đưa ra một ví dụ đầy đủ.

serverExample.Js

1. var http = require("http");   http = require("http");  
2. var server = http.createServer(function(request, response) {   server = http.createServer(function(request, response) {  
3.     response.writeHead(200, {  
4.         'Content-Type': 'text/plain'  'Content-Type': 'text/plain'  
5.     });  
6.     response.write("This is Test Message.");  "This is Test Message.");  
7.     response.end();  
8. });  
9. server.listen(8082);  

Bây giờ lưu tệp này và chạy nó. Và kiểm tra đầu ra.

Bây giờ hãy mở bất kỳ trình duyệt nào và gõ LOCAL LOCALHOST: 8082, nó sẽ hiển thị kết quả như dưới đây.

Như bạn thấy trong hình ảnh trên, nó & nbsp; Hiển thị một thông báo tĩnh trên trang web. Bây giờ chúng tôi phải lưu trữ trang HTML trên máy chủ Node JS như dưới đây. Vì vậy, chúng tôi đã sử dụng chương trình trên và thêm một số điều khác vào nó. Đối với trang HTML, chúng tôi phải sử dụng URL, vì vậy, trong nút JS & NBSP; mô -đun URL URL đã được sử dụng để chúng tôi phải thêm mô -đun này trong tệp chương trình của chúng tôi. Và sau đó chúng ta có thể nhận được đường dẫn của URL yêu cầu như hình dưới đây.

1. var url=require("url");   url=require("url");  
2. var path=url.parse(request.url).pathname;   path=url.parse(request.url).pathname;  

Bây giờ chúng tôi có 2 trang HTML như hình dưới đây.

HtmlPage1.html

1.   
2.   
3.   
4.     HTML-1  
5.   
6.   
7.   
8.      This is HTML Page - 1   
9.   
10.   
11.   

HtmlPage2.html

1.   
2.   
3.   
4.     HTML-2  
5.   
6.   
7.   
8.      This is HTML Page - 2   
9.   
10.   
11.   

Bây giờ chúng tôi lần đầu tiên kiểm tra yêu cầu trang nào sẽ đến. Và sau khi nhận được đường dẫn trang yêu cầu Bây giờ chúng tôi đang sử dụng tên đường dẫn yêu cầu này và chúng tôi phải hiển thị trang HTML liên quan của nó. Vì vậy, trước tiên chúng tôi phải xác định vị trí tệp HTML này và đọc chúng và gửi nội dung HTML của họ để trả lời người yêu cầu. Để đọc tệp HTML, chúng tôi phải thêm một mô -đun khác FS FS như được hiển thị bên dưới. Và trong tham số phản hồi, bạn phải đặt loại nội dung thành văn bản/html ”

1. case '/HtmlPage1.html':   '/HtmlPage1.html':  
2.     fs.readFile(__dirname + path, function(data) {  function(data) {  
3.         response.writeHead(200, {  
4.             'Content-Type': 'text/html'  'Content-Type': 'text/html'  
5.         });  
6.         response.write(data);  
7.         response.end();  
8.     });  

Ở đây chúng tôi cũng đã xử lý lỗi trong chức năng như trong bên dưới. Nếu có bất kỳ lỗi xảy ra thì chúng tôi phải hiển thị nó ở phía máy khách trong trình duyệt.

1. case '/HtmlPage1.html':   '/HtmlPage1.html':  
2.     fs.readFile(__dirname + path, function(error, data) {  function(error, data) {  
3.         if (error) {  if (error) {  
4.             response.writeHead(404);  
5.             response.write(error);  
6.             response.end();  
7.         } else {  else {  
8.             response.writeHead(200, {  
9.                 'Content-Type': 'text/html'  'Content-Type': 'text/html'  
10.             });  
11.             response.write(data);  
12.             response.end();  
13.         }  
14.     }); 

Bây giờ mã đầy đủ là như dưới đây.

ServerExample.js

1. var http = require('http');   http = require('http');  
2. var url = require('url');   url = require('url');  
3. var fs = require('fs');   fs = require('fs');  
4. var server = http.createServer(function(request, response) {   server = http.createServer(function(request, response) {  
5.     var path = url.parse(request.url).pathname;  var path = url.parse(request.url).pathname;  
6.     switch (path) {  switch (path) {  
7.         case '/':  case '/':  
8.             response.writeHead(200, {  
9.                 'Content-Type': 'text/plain'  'Content-Type': 'text/plain'  
10.             });  
11.             response.write("This is Test Message.");  "This is Test Message.");  
12.             response.end();  
13.             break;  break;  
14.         case '/HtmlPage1.html':  case '/HtmlPage1.html':  
15.             fs.readFile(__dirname + path, function(error, data) {  function(error, data) {  
16.                 if (error) {  if (error) {  
17.                     response.writeHead(404);  
18.                     response.write(error);  
19.                     response.end();  
20.                 } else {  else {  
21.                     response.writeHead(200, {  
22.                         'Content-Type': 'text/html'  'Content-Type': 'text/html'  
23.                     });  
24.                     response.write(data);  
25.                     response.end();  
26.                 }  
27.             });  
28.             break;  break;  
29.         case '/HtmlPage2.html':  case '/HtmlPage2.html':  
30.             fs.readFile(__dirname + path, function(error, data) {  function(error, data) {  
31.                 if (error) {  if (error) {  
32.                     response.writeHead(404);  
33.                     response.write(error);  
34.                     response.end();  
35.                 } else {  else {  
36.                     response.writeHead(200, {  
37.                         'Content-Type': 'text/html'  'Content-Type': 'text/html'  
38.                     });  
39.                     response.write(data);  
40.                     response.end();  
41.                 }  
42.             });  
43.             break;  break;  
44.         default:  default:  
45.             response.writeHead(404);  
46.             response.write("opps this doesn't exist - 404");  "opps this doesn't exist - 404");  
47.             response.end();  
48.             break;  break;  
49.     }  
50. });  
51. server.listen(8082);  

Bây giờ hãy chạy serverExample.js này và hiển thị đầu ra như bên dưới

Nhập urlhttp: // localhost: 8082/htmlpage1.html

http://localhost:8082/HtmlPage1.html

Nhập URL http: // localhost: 8082/htmlpage2.htmlhttp://localhost:8082/HtmlPage2.html

Trong bài viết này, bạn thấy cách máy chủ Node JS được tạo và cách chúng tôi có thể truy cập trang web bởi máy chủ này.

Nếu bạn có bất kỳ truy vấn nào liên quan đến hướng dẫn này, vui lòng hỏi tôi trong hộp bình luận.

Chúng ta có thể kết nối Node.js với HTML không?

Làm thế nào truyền dữ liệu từ nút sang HTML?