Hướng dẫn can we connect html with node js? - chúng ta có thể kết nối html với nút js không?

Question

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?

Nội dung chính Show

Tôi có thể sử dụng HTML với NodeJS không?
Làm cách nào để liên kết nút JS với HTML?
Làm cách nào để viết mã HTML trong nút JS?
Làm cách nào để nhập tệp HTML vào Node JS?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Commute | Ad-hoc</title>
      <link rel="stylesheet" href="css/style.css">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

  </head>

  <body>

      <div class="container cf">

      <div class="container cf">
  <div>
     <h2>Manual Query</h2>
    <label>Mode</label>
    <select id="modes">
      <option value="driving">Driving</option>
           <option value="walking">Walking</option>
           <option value="cycling">Cycling</option>
      </select>
    <label>Latitude Origin</label>
    <input type="text" name="latitude_origin" id="latitude_origin" value="37.791871">
    <label>Longitude Origin</label>
    <input type="text" name="longitude_origin" id="longitude_origin" value = "-122.396742">
    <label>Latitude Destination</label>
    <input type="text" name="latitude_dest" id="latitude_dest" value = "37.782461">
    <label>Longitude Destination</label>
    <input type="text" name="longitude_dest" id="longitude_dest" value = "-122.454807">
    <button id="singleQuery" class="singleQuery" input type="default small">Run</button>
  </div>
  <div>
    <h2>Multi-Query (.tsv)</h2>
    <label>Upload</label>
    <input type="file" name="pic" id="laserPrinters">
    <button id="testLaser" class="default small" input type="default small">Run</button>
  </div>
  <div>
    <h2>Result</h2>
    <textarea rows="4" cols="50">  </textarea>
  </body>
</html>


<script type="text/javascript">

var mode = $("#modes").val();
var latitude_origin = $("#latitude_origin").val();
var longitude_origin = $("#longitude_origin").val();
var latitude_dest = $("#latitude_dest").val();
var longitude_dest = $("#longitude_dest").val();

</script>

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

Đăng bởi: Mahesh Sabnis, vào ngày 4/4/2016, trong danh mục Node.js Mahesh Sabnis , on 4/4/2016, in Category Node.js

Tóm tắt: Đọc tệp HTML trong Node.js bằng cách sử dụng các hoạt động IO tệp đơn giản và gửi phản hồi HTML trở lại cho khách hàng. Read HTML file in Node.js using simple File IO operations and send a HTML response back to client.

Trong các ứng dụng web truyền thống, một máy chủ web (ví dụ: IIS) chứa cấu trúc thư mục để quản lý các trang web (HTML, ASP, ASPX, v.v.). Khi nhận được yêu cầu cho trang, máy chủ web sẽ thực hiện xử lý yêu cầu dựa trên cấu hình phía máy chủ và trả về phản hồi HTML phù hợp. Cấu hình này chứa thông tin cho phần mở rộng trang và thời gian chạy được liên kết của nó. Điều này là do môi trường lưu trữ cần thông tin đầy đủ về trang từ URL, và sau đó nó phát hiện ra trang trên máy chủ.

Trong Node.js, chúng tôi có thể thực hiện các hoạt động này bằng mô -đun tệp (FS) và mô -đun HTTP.fs) and the http module.

Node.js quét URL dựa trên đó nó đọc tệp HTML tương ứng và trả lời thông báo yêu cầu. Trong bài viết này, chúng tôi sẽ tạo một dự án Node.js với tệp HTML trong đó. Mã của chúng tôi sau đó sẽ đọc URL yêu cầu và dựa trên nó, phản hồi sẽ được gửi lại.

Điều kiện tiên quyết cho việc thực hiện.

Để thực hiện các bước sau, chúng tôi cần các tài nguyên như được liệt kê dưới đây:

Visual Studio Code hoặc Visual Studio 2013/2015 or Visual Studio 2013/2015

Công cụ nút cho Visual Studio

Thực hiện

Việc triển khai ở đây sử dụng mã Visual Studio. Đây là một IDE miễn phí để xây dựng và gỡ lỗi các ứng dụng web và đám mây hiện đại trên nền tảng Windows, Mac OSX và Linux.Visual Studio Code. This a free IDE for building and debugging modern web and cloud applications on the Windows, Mac OSX and Linux platform.

Bước 1: Tạo một thư mục trên ổ đĩa (ví dụ: e: \) của tên vscoderesponentHTML. Trong thư mục này thêm một thư mục mới của tập lệnh tên. Chúng tôi sẽ sử dụng điều này để lưu trữ các tệp ứng dụng của chúng tôi. Mở mã Visual Studio. Mở thư mục vScoderespordsHTML bằng Tệp> Tùy chọn thư mục mở. Khi thư mục được mở, tùy chọn tạo tệp mới sẽ được hiển thị bên phải, như trong hình ảnh sau. Chọn thư mục tập lệnh và nhấp vào biểu tượng tệp mới như được hiển thị trong hình ảnh sau. Điều này sẽ cung cấp một hộp văn bản trống nơi bạn tạo tên tệp mới dưới dạng app.js.Create a folder on the drive (e.g. E:\) of name VSCoderespondHtml. In this folder add a new folder of the name Scripts. We will be using this to store our application files. Open Visual Studio Code. Open the VSCoderespondHtml folder using File > Open Folder Option. Once the folder is opened, the option for creating a new file will be displayed to the right, as shown in the following image. Select the Script folder and click on the new file icon as shown in the following image. This will provide a blank textbox where you create a new file name as app.js.

Bước 2: Trong thư mục vScoderespordsHTML, thêm một thư mục tên apppages. Trong thư mục này, thêm một tệp HTML mới của tên myPage.html. Thêm đánh dấu sau trong đó:In the VSCoderespondHtml folder, add a folder of name AppPages. In this folder add a new HTML file of name MyPage.html. Add the following markup in it:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>The Page Returned by Making Http Call to Node.js</title>
    <style type="text/css">
        table, td {
          border:double;
        }
    </style>
</head>
<body>
    <h2>Product Information Page</h2>
    <table>
        <tr>
            <td>Product Id:</td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>Product Name:</td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button"  value="Save"/>
            </td>
        </tr>
    </table>


</body>
</html>

Đây là một tệp HTML đơn giản sẽ được gửi với yêu cầu.

Bước 3: Mở App.js và thêm mã sau trong đóOpen app.js and add the following code in it

//1.
var http = require('http');
var fs = require('fs');
//2.
var server = http.createServer(function (req, resp) {
    //3.
    if (req.url === "/create") {
        fs.readFile("AppPages/MyPage.html", function (error, pgResp) {
            if (error) {
                resp.writeHead(404);
                resp.write('Contents you are looking are Not Found');
            } else {
                resp.writeHead(200, { 'Content-Type': 'text/html' });
                resp.write(pgResp);
            }
            
            resp.end();
        });
    } else {
        //4.
        resp.writeHead(200, { 'Content-Type': 'text/html' });
        resp.write('<h2>Product Manaager</h2><br /><br />To create product please enter: ' + req.url);
        resp.end();
    }
});
//5.
server.listen(5050);

console.log('Server Started listening on 5050');

Mã trên thực hiện các hoạt động sau. (Lưu ý: Nhận xét trên mỗi dòng khớp với các số được sử dụng trong các điểm sau.)

1. Vì chúng tôi cần tạo máy chủ web cho tin nhắn HTTP, chúng tôi cần mô -đun HTTP. Chúng tôi sẽ đọc tệp HTML bằng Tệp IO, vì chúng tôi cần tải mô -đun FS.http module. We will be reading the html file using File IO, for that we need to load fs module.

2. Tạo một máy chủ HTTP với cuộc gọi lại để xử lý yêu cầu.

3. Nếu URL chứa giá trị ‘/Tạo giá trị trong đó, tệp MyPage.html sẽ được đọc. Nếu tệp không được đọc thành công, phản hồi với trạng thái HTTP không tìm thấy sẽ được gửi cho thông báo yêu cầu. Nếu tệp được đọc, thì phản hồi HTML sẽ được gửi lại.Not Found will be sent for the request message. If the file is read, then the html response will be sent back.

4. Nếu URL không khớp với ‘/Tạo, thì thông báo HTML mặc định sẽ được gửi lại cho yêu cầu.

5. Máy chủ sẽ bắt đầu nghe trên cổng 5050.

Bước 4: Nhấp chuột phải vào app.js và chọn Mở trong tùy chọn nhắc lệnh. Điều này sẽ hiển thị lời nhắc lệnh từ nơi chúng tôi có thể chạy ứng dụng.Right-Click on the app.js and select Open in Command Prompt option. This will show the command prompt from where we can run the application.

Trên lệnh này, nhập lệnh sau

Node app

Kết quả sau đây sẽ được hiển thị

Bước 5: Mở bất kỳ trình duyệt nào và nhập URL sauOpen any browser and enter the following URL

http://localhost:5050

Kết quả sau đây sẽ được hiển thị

Bước 5: Mở bất kỳ trình duyệt nào và nhập URL sau

http://localhost:5050/create

Đây là phản hồi mặc định mà chúng tôi đã nhận được. Nhưng chúng tôi cần phản hồi HTML, để nhận nó, thay đổi URL như sau

Bây giờ chúng tôi đã nhận được trang HTML thành công.With simple File IO operations we can read HTML file in Node.js and by using simple modules, we can send a HTML response back to client.

Kết luận: Với các hoạt động IO tệp đơn giản, chúng tôi có thể đọc tệp HTML trong Node.js và bằng cách sử dụng các mô -đun đơn giản, chúng tôi có thể gửi phản hồi HTML trở lại máy khách.

Bài viết này đã được biên tập bởi Suprotim Agarwal.

C# và .NET đã có từ rất lâu, nhưng sự tăng trưởng liên tục của họ có nghĩa là ở đó, luôn luôn có nhiều thứ để học.The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Chúng tôi tại DotNetCurry rất vui mừng thông báo cuốn sách hoàn toàn tuyệt vời trên C# và .NET. Đây là cuốn sách điện tử kỹ thuật 500 trang có sẵn trong PDF, EPUB (iPad) và Mobi (Kindle).C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Được tổ chức xung quanh các khái niệm, cuốn sách này nhằm mục đích cung cấp một nền tảng ngắn gọn nhưng chắc chắn trong C# và .NET, bao gồm C# 6.0, C# 7.0 và .NET Core, với các chương trên .NET Core 3.0 mới nhất, Tiêu chuẩn .NET và C# 8.0 (cuối cùng phát hành) quá. Sử dụng các khái niệm này để làm sâu sắc thêm kiến thức hiện tại của bạn về C# và .NET, để có được sự nắm bắt vững chắc về C# và .NET của bạn hoặc để phá vỡ cuộc phỏng vấn .NET tiếp theo của bạn.

Nhấn vào đây để khám phá bảng nội dung hoặc tải xuống các chương mẫu!

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

Bạn không thể "Chạy tệp HTML" với Node.js. Nút. JS là môi trường JavaScript để phát triển các ứng dụng web phía máy chủ. js. Node. js is a JavaScript environment for developing server-side Web applications.

Làm cách nào để liên kết nút JS với HTML?

Kết xuất tệp HTML trong nút ...

Bước 1: Cài đặt Express.Tạo một thư mục mới và khởi tạo một dự án nút mới bằng lệnh sau.....

Bước 2: Sử dụng hàm sendFile ().....

Bước 3: Kết xuất HTML trong Express.....

Bước 4: Kết xuất HTML động bằng công cụ tạo khuôn ..

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

Cách cơ bản nhất bạn có thể làm những gì bạn muốn là đây: var http = yêu cầu ('http');http.createserver (function (req, res) {var html = buildHtml (req); res.writehead (200, {'content-type': 'text/html', 'chiều dài nội dung': html.var http = require('http'); http. createServer(function (req, res) { var html = buildHtml(req); res. writeHead(200, { 'Content-Type': 'text/html', 'Content-Length': html.

Làm cách nào để nhập tệp HTML vào Node JS?

Ban đầu, bạn tìm nạp nội dung của tệp HTML (1). Sau đó, bạn chèn nó vào mã của một mô -đun JavaScript rất đơn giản kết thúc HTML vào mẫu Hogan (2).Mã được chuẩn bị theo cách này sau đó được biên dịch bằng mô -đun._Compile (3). Then you insert it into the code of a very simple JavaScript module that wraps HTML into a Hogan template (2). The code prepared in this way is then compiled using module. _compile (3).

programming html Nodejs get html