Hướng dẫn how do i get html data in node js? - làm cách nào để lấy dữ liệu html trong nút js?

Xin chào Thế giới, Chào mừng bạn đến với blog. Trong blog này, chúng tôi sẽ thảo luận về cách tạo ứng dụng máy chủ bằng Node.js sẽ đọc dữ liệu từ biểu mẫu HTML và sẽ thực hiện các hoạt động cơ bản như chèn, đọc, cập nhật và xóa trên cơ sở dữ liệu SQLite3 bằng cách sử dụng yêu cầu GET và POST. Chúng tôi cũng sẽ thêm các tính năng bảo mật bằng cách sử dụng các mô-đun như mũ bảo hiểm và tốc độ thể hiện.Helmet and Express-rate-limit.

Bạn cũng có thể tìm thấy toàn bộ dự án trong kho GitHub của tôi -

Đề cương cơ bản của dự án của chúng tôi và biểu mẫu HTML được hiển thị bên dưới -

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

1. Kiến thức về - HTML, CSS, Node.js và SQLite3
2. Node.js và SQLite3 nên được cài đặt trên máy cục bộ của bạn.

Vì vậy, bây giờ chúng tôi đã sẵn sàng để bắt đầu dự án của chúng tôi. Hãy để lặn trong.

Bước 1: Trước hết, hãy mở thiết bị đầu cuối và tạo một thư mục sẽ được dành riêng cho dự án của chúng tôi. Điều hướng vào thư mục đó và chạy npm init. Sau đó, bạn sẽ được yêu cầu nhập nhiều chi tiết khác nhau về ứng dụng của bạn, sẽ được lưu trữ dưới dạng tệp JSON có tên ‘Gói.json. Sau đó, bạn phải chạy các lệnh sau - First of all, open the terminal and create one directory which will be dedicated for our project. Navigate into that directory and run npm init . Then you will be asked to enter various details about your application, which will be stored as a json file named ‘Package.json’. Then you have to run following commands —

npm install express --save để cài đặt mô -đun ’Express,

npm install sqlite3 --save để cài đặt mô -đun SQLite3 và

npm install body-parser --save để cài đặt mô-đun ’người phân tích cơ thể

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

Mũ bảo hiểm lưu ý là mô-đun Node.js giúp đảm bảo các ứng dụng express Express bằng cách đặt các tiêu đề HTTP khác nhau. Nó giúp giảm thiểu các cuộc tấn công kịch bản trang web chéo, chứng chỉ SSL nhầm lẫn, v.v.- helmet is a Node.js module that helps in securing ‘express’ applications by setting various HTTP headers. It helps in mitigating cross-site scripting attacks, misissued SSL certificates etc.

Mô-đun giới hạn tốc độ tốc hành là phần mềm trung gian cho Express được sử dụng để giới hạn các yêu cầu lặp lại đối với API công khai và/hoặc điểm cuối như đặt lại mật khẩu. Bằng cách giới hạn số lượng yêu cầu đối với máy chủ, chúng tôi có thể ngăn chặn cuộc tấn công từ chối dịch vụ (DOS). Đây là loại tấn công trong đó máy chủ bị ngập trong các yêu cầu lặp đi lặp lại làm cho nó không có sẵn cho người dùng dự định của nó và cuối cùng tắt nó xuống.Denial-of-Service (DoS) attack. It is the type of attack in which the server is flooded with repeated requests making it unavailable to its intended users and ultimately shutting it down.

Bước 2: Bây giờ, hãy để bắt đầu viết mã HTML và CSS. Chúng tôi sẽ giữ các tệp HTML và CSS của chúng tôi trong một thư mục có tên ‘công khai, bản thân nó có trong thư mục dự án của chúng tôi. Trong tệp HTML, chúng tôi sẽ xác định phần đầu trước. Now let’s start writing HTML and CSS code. We will keep our HTML and CSS files in a directory named ‘public’, which is itself present in our project directory. In the HTML file, we’ll define the head section first.

Sau đó, chúng tôi sẽ viết phần cơ thể. Mã sau đây sẽ cho phép người dùng thêm một nhân viên mới vào cơ sở dữ liệu.

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

Mã bên dưới sẽ cho phép người dùng xem bất kỳ nhân viên nào dựa trên số ID của họ.

  

    
View an employee

    Employee ID
    
    


    Reset
    Submit
    



  

 

Hai đoạn mã sau đây là để cập nhật và xóa nhân viên khỏi cơ sở dữ liệu.

  

    
Update an employee

    Employee ID
    
    


    New Name
    
    


    Reset
    Submit
  

 

  

    
Delete an employee

    Employee ID
    
    


    Reset
    Submit
    



  

 

Cuối cùng, chúng tôi sẽ bao gồm một chân trang sẽ cho người dùng biết cách đóng kết nối cơ sở dữ liệu.

Bước 3: Bây giờ chúng tôi sẽ viết mã CSS để tạo kiểu cho trang web của chúng tôi. Now we’ll write the CSS codes for styling our webpage.

Bước 4: Kể từ đó, chúng tôi đã thiết kế mặt trước của mình, bây giờ chúng tôi sẽ xây dựng ứng dụng máy chủ back-end của chúng tôi trong node.js. Chúng tôi sẽ tạo một tệp có tên ‘App.js, trong thư mục dự án chính của chúng tôi và nhập tất cả các mô -đun cần thiết.Since, we have designed our front end, now we’ll build our back-end server application in Node.js. We’ll create a file called ‘app.js’ in our main project directory and import all the necessary modules.

Lưu ý rằng chế độ thực thi được đặt thành verbose để tạo ra dấu vết ngăn xếp dài.

Trong mã trên, chúng tôi đã tạo một thể hiện của Express, có tên ‘Ứng dụng và chúng tôi cũng đã tạo một cơ sở dữ liệu có tên‘ Nhân viên trong thư mục ‘Cơ sở dữ liệu có mặt trong thư mục hiện tại của chúng tôi.

WindowMS là khung thời gian mà các yêu cầu được kiểm tra/ghi nhớ. is the timeframe for which requests are checked/remembered.

Max là số lượng kết nối tối đa trong các mili giây của WindowMS trước khi gửi phản hồi 429. is the maximum number of connections during windowMs milliseconds before sending a 429 response.

bodyparser.urlencoded () trả về phần mềm trung gian chỉ phân tích các cơ thể

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

express.static () được sử dụng để phục vụ các tệp tĩnh trong express Express. is used to serve static files in ‘express’.

Sau đó, chúng tôi sẽ tạo một bảng có tên ‘EMP, trong cơ sở dữ liệu có hai cột-‘ ID, và ‘Tên bằng cách sử dụng mã sau -

Mã trên sẽ đảm bảo rằng bảng EMP EMP đã được tạo ra nhiều lần bất cứ khi nào chúng tôi chạy ứng dụng.

Bước 3: Bây giờ, đã đến lúc viết mã để nghe các yêu cầu GET và POST do trình duyệt thực hiện. Now, it is the time to write the codes for listening to the GET and POST requests made by the browser.

Khi người dùng nhập

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

CHÈN

Để chèn một nhân viên mới vào bảng ‘EMP, người dùng được yêu cầu điền vào phần này của biểu mẫu.

Và mã sau sẽ quan tâm đến yêu cầu bài đăng này -

Trong mã trên, phương thức serialize () đặt chế độ thực thi vào chế độ tuần tự hóa. Nó có nghĩa là chỉ có một câu có thể thực thi tại một thời điểm. Các tuyên bố khác sẽ đợi trong một hàng đợi cho đến khi tất cả các tuyên bố trước đó được thực thi.

ĐỌC

Để xem một nhân viên từ bảng ‘EMP, người dùng được yêu cầu nhập ID nhân viên trong phần này của biểu mẫu.

Mã sau đây sẽ quan tâm đến yêu cầu bài đăng này.

Trong mã trên, phương thức mỗi () thực thi truy vấn SQL với các tham số được chỉ định và gọi một cuộc gọi lại cho mỗi hàng trong tập kết quả.

CẬP NHẬT

Để cập nhật một nhân viên hiện có, người dùng được yêu cầu nhập ID nhân viên hiện có và tên mới.

Yêu cầu bài đăng này sẽ được xử lý bằng mã sau -

XÓA BỎ

Để xóa một nhân viên hiện có khỏi bảng ‘emp, người dùng được yêu cầu nhập ID nhân viên và yêu cầu bài đăng này sẽ được xử lý bằng mã sau-

Bước 4: Bây giờ, chúng tôi sẽ viết mã để đóng kết nối cơ sở dữ liệu.Now, we’ll write code for closing the database connection.

Mã trên sẽ hoạt động khi người dùng nhập

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

Bước 5: Bây giờ, chúng tôi cần làm cho ứng dụng máy chủ của mình lắng nghe tất cả các yêu cầu do trình duyệt thực hiện, sẽ đạt được bởi lệnh sau- Now, we need to make our server application listen to all the requests made by the browser, which will be achieved by the following command-

Bước 6: Bây giờ chúng tôi đã viết tất cả các mã cho ứng dụng máy chủ của mình, chúng tôi sẽ lưu nó và quay lại Terminal để chạy điều này bằng lệnh

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

Server listening on port: 3000

Vì vậy, bây giờ máy chủ của chúng tôi đang hoạt động. Chúng tôi sẽ mở trình duyệt và nhập

  

    
Employee Database

  

  

    

      
Add new employee

      Employee ID
      
      


      Name
      
      


      Reset
      Submit
    

  

Bước 7: Sau đó, hãy mở tab mạng bằng cách nhấp vào phần tử kiểm tra. Nhấp vào Localhost và bạn sẽ nhận thấy một số bộ tiêu đề bổ sung trong phản hồi, được đặt bởi mô -đun mũ bảo hiểm. Then, open the Network tab by clicking on Inspect Element. Click on localhost and you will notice some additional set of headers in the response, which are set by the helmet module.

Bản tóm tắt

Nếu bạn đã hoàn thành các bước trên, thì bạn đã tạo một ứng dụng máy chủ được bảo mật, có thể đọc dữ liệu từ biểu mẫu HTML và thực hiện chèn, xem, cập nhật và xóa các hoạt động.

References:

https://www.npmjs.com/package/express

Một tài liệu đầy đủ để sử dụng mô -đun Express.

https://www.npmjs.com/package/sqlite3

Một tài liệu đầy đủ để sử dụng mô -đun SQLite3.

https://www.npmjs.com/package/body-parser

Một tài liệu đầy đủ để sử dụng mô-đun phân tích cơ thể.

https://www.npmjs.com/package/express-rate-limit

Một tài liệu đầy đủ để sử dụng mô-đun giới hạn tốc độ rõ ràng.

https://www.npmjs.com/package/helmet

Một tài liệu đầy đủ để sử dụng mô -đun mũ bảo hiểm.

Làm cách nào để gửi nội dung HTML trong Node JS?

Làm cách nào để hiển thị trang HTML trong Node JS?

Làm thế nào để bạn tải html trong nút js?

Làm cách nào để lấy dữ liệu nút JS từ HTML?