Cách gửi dữ liệu biểu mẫu từ Angular đến NodeJS
|
Xin chào thế giới, chào mừng đến với blog. Trong blog này, chúng ta 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 thao tác 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 các 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à Giới hạn tốc độ nhanh Show
Bạn cũng có thể tìm thấy toàn bộ dự án trong kho lưu trữ GitHub của tôi — souvik-pl/crudApp_htmlBiểu mẫuNó là một ứng dụng máy chủ được phát triển bằng Node. js sẽ đọc dữ liệu từ biểu mẫu HTML và sẽ thực hiện các thao tác cơ bản…github. com Phác thảo 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 -
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 đi sâu vào Bước 1. Trước hết, hãy mở terminal và tạo một thư mục dành riêng cho dự án của chúng ta. Điều hướng vào thư mục đó và chạy Lưu ý- mũ bảo hiểm là một Nút. js giúp bảo mật các ứng dụng 'nhanh' 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 chéo trang, chứng chỉ SSL cấp sai, v.v. Mô-đun giới hạn tốc độ nhanh là phần mềm trung gian dành cho Express, được sử dụng để hạn chế các yêu cầu lặp lại đối với các API và/hoặc điểm cuối công khai, chẳng hạn như đặt lại mật khẩu. Bằng cách giới hạn số lượng yêu cầu đến 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à kiểu tấn công trong đó máy chủ tràn ngập các yêu cầu lặp đi lặp lại khiến nó không khả dụng cho người dùng dự định và cuối cùng làm tắt nó 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 mình trong một thư mục có tên 'công khai', thư mục này có trong thư mục dự án của chúng tôi. Trong tệp HTML, trước tiên chúng tôi sẽ xác định phần đầu Sau đó, chúng tôi sẽ viết phần cơ thể. Đoạn mã sau 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 Đoạn mã dưới đây 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ọ Hai đoạn mã sau dùng để cập nhật và xóa nhân viên khỏi cơ sở dữ liệu 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 ta sẽ viết mã CSS để tạo kiểu cho trang web của bạn Bước 4. Vì, chúng tôi đã thiết kế giao diện người dùng của mình, bây giờ chúng tôi sẽ xây dựng ứng dụng máy chủ phụ trợ của mình trong Node. js. Chúng tôi sẽ tạo một tệp có tên 'ứng dụng. 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 Lưu ý rằng chế độ thực thi được đặt thành dài dòng để tạo dấu vết ngăn xếp dài Trong đoạn mã trên, chúng tôi đã tạo một phiên bản express, có tên là 'ứ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ó 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ớ max là số lượng kết nối tối đa trong mỗi mili giây của windowM trước khi gửi phản hồi 429 bodyParser. urlencoded() trả về phần mềm trung gian chỉ phân tích cú pháp nội dung của bày tỏ. static() được sử dụng để phục vụ các tệp tĩnh trong '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à 'name' bằng mã sau - Đoạn mã trên sẽ đảm bảo rằng bảng 'emp' sẽ không được tạo đi tạo lại bất cứ khi nào chúng ta 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 Khi người dùng nhập 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à đoạn mã sau sẽ xử lý yêu cầu POST này - Trong đoạn mã trên, phương thức serialize() đặt chế độ thực thi thành chế độ tuần tự hóa. Nó có nghĩa là chỉ có một câu lệnh có thể thực hiện tại một thời điểm. Các câu lệnh khác sẽ đợi trong hàng đợi cho đến khi tất cả các câu lệnh 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 vào phần này của biểu mẫu Đoạn mã sau sẽ xử lý yêu cầu POST này Trong đoạn mã trên, phương thức each() thực thi một truy vấn SQL với các tham số được chỉ định và gọi một hàm 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 POST này sẽ được xử lý bởi đoạn 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 POST này sẽ được xử lý bằng mã sau- Bước 4. Bây giờ, chúng ta sẽ viết mã để đóng kết nối cơ sở dữ liệu Đoạn mã trên sẽ hoạt động khi người dùng nhập Bước 5. Bây giờ, chúng ta 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 đưa ra, điều này sẽ đạt được bằng lệnh sau- 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 thiết bị đầu cuối để chạy mã này bằng lệnh Vì vậy, bây giờ máy chủ của chúng tôi đã hoạt động. Chúng ta sẽ mở trình duyệt và nhập vào Bước 7. Sau đó, mở tab Mạng bằng cách nhấp vào Kiểm tra phần tử. Nhấp vào localhost và bạn sẽ 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 Tóm lược 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 các thao tác chèn, xem, cập nhật và xóa Làm cách nào để gửi dữ liệu từ Angular đến NodeJS?const express=require('express'); . post('/api/book', function(req, res, next){ var data = req. cơ thể. thông số; .
Làm thế nào để Angular 12 gửi dữ liệu biểu mẫu?Biểu mẫu dựa trên mô hình . Nhập ReactiveFormsModule từ @angular/Forms và thêm nó vào mảng nhập cho biểu mẫu định hướng mô hình Dưới đây là ứng dụng. . trong ứng dụng. . Biến formdata được khởi tạo tại thời điểm tạo lớp. . Sử dụng formdata để giới thiệu các giá trị biểu mẫu và sử dụng lại chúng trong ứng dụng giao diện người dùng biểu mẫu Nút js xử lý dữ liệu biểu mẫu như thế nào?Để bắt đầu với biểu mẫu, trước tiên chúng ta sẽ cài đặt trình phân tích cú pháp nội dung (để phân tích cú pháp JSON và dữ liệu được mã hóa url) và phần mềm trung gian multer (để phân tích cú pháp dữ liệu nhiều phần/dữ liệu biểu mẫu)< . var express = require('express'); . . var express = require('express'); var bodyParser = require('body-parser'); var multer = require('multer'); var upload = multer(); var app = express(); app.
Bạn có thể sử dụng nút và Góc cùng nhau không? |
