Cách gửi dữ liệu từ tệp nút js sang tệp html?
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách làm việc với Biểu mẫu HTML trong Express bằng Pug. Cụ thể, chúng ta sẽ thảo luận cách viết biểu mẫu để tạo, cập nhật và xóa tài liệu khỏi cơ sở dữ liệu của trang web Show Biểu mẫu HTML là một nhóm gồm một hoặc nhiều trường/tiện ích trên trang web có thể được sử dụng để thu thập thông tin từ người dùng để gửi tới máy chủ. Biểu mẫu là một cơ chế linh hoạt để thu thập thông tin đầu vào của người dùng vì có sẵn các đầu vào biểu mẫu phù hợp để nhập nhiều loại dữ liệu khác nhau—hộp văn bản, hộp kiểm, nút radio, bộ chọn ngày, v.v. Biểu mẫu cũng là một cách tương đối an toàn để chia sẻ dữ liệu với máy chủ, vì chúng cho phép chúng tôi gửi dữ liệu theo yêu cầu Làm việc với các biểu mẫu có thể phức tạp. Nhà phát triển cần viết HTML cho biểu mẫu, xác thực và làm sạch đúng cách dữ liệu đã nhập trên máy chủ (và có thể cả trong trình duyệt), đăng lại biểu mẫu có thông báo lỗi để thông báo cho người dùng về bất kỳ trường không hợp lệ nào, xử lý dữ liệu khi đã gửi thành công Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thực hiện các thao tác trên trong Express. Đồng thời, chúng tôi sẽ mở rộng trang web LocalLibrary để cho phép người dùng tạo, chỉnh sửa và xóa các mục khỏi thư viện Ghi chú. Chúng tôi chưa xem xét cách hạn chế các tuyến cụ thể đối với người dùng được xác thực hoặc được ủy quyền, vì vậy tại thời điểm này, bất kỳ người dùng nào cũng có thể thực hiện thay đổi đối với cơ sở dữ liệu Đầu tiên là tổng quan ngắn gọn về Biểu mẫu HTML. Hãy xem xét một biểu mẫu HTML đơn giản, với một trường văn bản duy nhất để nhập tên của một số "nhóm" và nhãn được liên kết của nó Biểu mẫu được định nghĩa trong HTML là một tập hợp các phần tử bên trong các thẻ 0 của 1
Mặc dù ở đây chúng tôi chỉ bao gồm một trường (văn bản) để nhập tên nhóm, một biểu mẫu có thể chứa bất kỳ số lượng thành phần đầu vào nào khác và nhãn liên quan của chúng. Thuộc tính 2 của trường xác định loại tiện ích nào sẽ được hiển thị. 3 và 4 của trường được sử dụng để xác định trường trong JavaScript/CSS/HTML, trong khi 5 xác định giá trị ban đầu cho trường khi nó được hiển thị lần đầu. Nhãn nhóm phù hợp được chỉ định bằng cách sử dụng thẻ 6 (xem "Nhập tên" ở trên), với trường 7 chứa giá trị 4 của 0 được liên kếtDữ liệu đầu vào 0 sẽ được hiển thị dưới dạng một nút (theo mặc định)—người dùng có thể nhấn nút này để tải dữ liệu chứa trong các thành phần đầu vào khác lên máy chủ (trong trường hợp này, chỉ là 1). Các thuộc tính biểu mẫu xác định HTTP 2 được sử dụng để gửi dữ liệu và đích của dữ liệu trên máy chủ ( 3)
Xử lý biểu mẫu sử dụng tất cả các kỹ thuật giống như chúng tôi đã học để hiển thị thông tin về các mô hình của chúng tôi. tuyến đường gửi yêu cầu của chúng tôi đến chức năng điều khiển thực hiện bất kỳ hành động cơ sở dữ liệu nào được yêu cầu, bao gồm đọc dữ liệu từ các mô hình, sau đó tạo và trả về trang HTML. Điều khiến mọi thứ trở nên phức tạp hơn là máy chủ cũng cần có khả năng xử lý dữ liệu do người dùng cung cấp và hiển thị lại biểu mẫu với thông tin lỗi nếu có bất kỳ sự cố nào Sơ đồ quy trình để xử lý yêu cầu biểu mẫu được hiển thị bên dưới, bắt đầu bằng yêu cầu cho trang chứa biểu mẫu (hiển thị bằng màu xanh lá cây) Như thể hiện trong sơ đồ trên, những điều chính mà mã xử lý biểu mẫu cần làm là
Thông thường, mã xử lý biểu mẫu được triển khai bằng cách sử dụng tuyến đường 7 để hiển thị ban đầu của biểu mẫu và tuyến đường POST đến cùng một đường dẫn để xử lý xác thực và xử lý dữ liệu biểu mẫu. Đây là cách tiếp cận sẽ được sử dụng trong hướng dẫn nàyBản thân Express không cung cấp bất kỳ hỗ trợ cụ thể nào cho các hoạt động xử lý biểu mẫu, nhưng nó có thể sử dụng phần mềm trung gian để xử lý các tham số 7 từ biểu mẫu và để xác thực/khử trùng các giá trị của chúngTrước khi dữ liệu từ một biểu mẫu được lưu trữ, nó phải được xác thực và làm sạch
Đối với hướng dẫn này, chúng tôi sẽ sử dụng mô-đun trình xác thực nhanh phổ biến để thực hiện cả xác thực và làm sạch dữ liệu biểu mẫu của chúng tôi Cài đặtCài đặt mô-đun bằng cách chạy lệnh sau trong thư mục gốc của dự án
Sử dụng trình xác thực nhanhGhi chú. Hướng dẫn trên GitHub cung cấp tổng quan tốt về API. Chúng tôi khuyên bạn nên đọc nó để có ý tưởng về tất cả các khả năng của nó (bao gồm cả việc sử dụng xác thực lược đồ và tạo trình xác thực tùy chỉnh). Dưới đây chúng tôi chỉ đề cập đến một tập hợp con hữu ích cho LocalLibrary Để sử dụng trình xác thực trong bộ điều khiển của chúng tôi, chúng tôi chỉ định các chức năng cụ thể mà chúng tôi muốn nhập từ mô-đun trình xác thực nhanh, như được hiển thị bên dưới
Có nhiều chức năng có sẵn, cho phép bạn kiểm tra và làm sạch dữ liệu từ các tham số yêu cầu, nội dung, tiêu đề, cookie, v.v. , hoặc tất cả chúng cùng một lúc. Đối với hướng dẫn này, chúng tôi sẽ chủ yếu sử dụng 5 và 6 (như "bắt buộc" ở trên)Các chức năng được định nghĩa như dưới đây
Chuỗi xác thực và vệ sinh là phần mềm trung gian sẽ được chuyển đến trình xử lý tuyến Express (chúng tôi thực hiện việc này một cách gián tiếp, thông qua bộ điều khiển). Khi phần mềm trung gian chạy, mỗi trình xác nhận/khử trùng được chạy theo thứ tự được chỉ định Chúng tôi sẽ đề cập đến một số ví dụ thực tế khi chúng tôi triển khai các biểu mẫu Thư viện cục bộ bên dưới Nhiều mô hình trong thư viện có liên quan/phụ thuộc—ví dụ: một 8 yêu cầu một 9 và cũng có thể có một hoặc nhiều 0. Điều này đặt ra câu hỏi về cách chúng ta nên xử lý trường hợp người dùng muốn
Đối với dự án này, chúng tôi sẽ đơn giản hóa việc triển khai bằng cách nêu rõ rằng một biểu mẫu chỉ có thể
Ghi chú. Việc triển khai "mạnh mẽ" hơn có thể cho phép bạn tạo đối tượng phụ thuộc khi tạo đối tượng mới và xóa bất kỳ đối tượng nào vào bất kỳ lúc nào (ví dụ: bằng cách xóa đối tượng phụ thuộc hoặc xóa tham chiếu đến đối tượng đã xóa khỏi cơ sở dữ liệu) Để triển khai mã xử lý biểu mẫu của chúng tôi, chúng tôi sẽ cần hai tuyến đường có cùng mẫu URL. Lộ trình ( 7) đầu tiên được sử dụng để hiển thị một biểu mẫu trống mới để tạo đối tượng. Tuyến thứ hai (POST ) được sử dụng để xác thực dữ liệu do người dùng nhập, sau đó lưu thông tin và chuyển hướng đến trang chi tiết (nếu dữ liệu hợp lệ) hoặc hiển thị lại biểu mẫu có lỗi (nếu dữ liệu không hợp lệ)Chúng tôi đã tạo các tuyến đường cho tất cả các trang tạo mô hình của chúng tôi trong /routes/catalog. js (trong hướng dẫn trước). Ví dụ: các tuyến thể loại được hiển thị bên dưới
Các bài viết phụ sau đây sẽ đưa chúng ta qua quá trình thêm các biểu mẫu cần thiết vào ứng dụng mẫu của chúng ta. Bạn cần đọc và làm việc lần lượt qua từng cái trước khi chuyển sang cái tiếp theo
Thực hiện các trang xóa cho các mô hình 8, 7 và 1, liên kết chúng từ các trang chi tiết được liên kết theo cách tương tự như trang xóa Tác giả của chúng tôi. Các trang phải tuân theo cùng một phương pháp thiết kế
IT tiên boa
Thực hiện các trang cập nhật cho các mô hình 7, 9 và 1, liên kết chúng từ các trang chi tiết liên quan giống như cách trang cập nhật Sách của chúng tôiIT tiên boa
Các gói Express, nút và bên thứ ba trên npm cung cấp mọi thứ bạn cần để thêm biểu mẫu vào trang web của mình. Trong bài viết này, bạn đã học cách tạo biểu mẫu bằng Pug, xác thực và làm sạch đầu vào bằng trình xác thực nhanh cũng như thêm, xóa và sửa đổi các bản ghi trong cơ sở dữ liệu Làm cách nào để chuyển dữ liệu từ nút js sang tệp HTML?Kết xuất tệp HTML trong Nút. . Bước 1. Cài đặt nhanh. Tạo một thư mục mới và khởi tạo một dự án Node 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ách sử dụng công cụ tạo khuôn mẫu Làm cách nào để gửi dữ liệu từ tệp js sang tệp HTML?js. var express = require('express'); . được mã hóa url ({ đã mở rộng. sai }) ứng dụng. sử dụng (urlencodedParser);
Làm cách nào để gửi dữ liệu từ máy chủ sang HTML?Để đăng dữ liệu biểu mẫu HTML lên máy chủ ở định dạng được mã hóa URL, bạn cần phải thực hiện yêu cầu HTTP POST tới máy chủ và cung cấp dữ liệu biểu mẫu HTML trong phần thân của . Bạn cũng cần chỉ định loại dữ liệu bằng cách sử dụng Content-Type. tiêu đề yêu cầu ứng dụng/x-www-form-urlencoded. . You also need to specify the data type using the Content-Type: application/x-www-form-urlencoded request header.
Bạn có thể sử dụng nút js trong tệp HTML không?Ngoài tệp html, Máy chủ web nút cũng có thể cung cấp mã JavaScript . |