Hướng dẫn how do i link a node js form in html? - làm cách nào để liên kết biểu mẫu nút js trong 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 các biểu mẫu HTML bằng cách sử dụng PUG. Cụ thể, chúng tôi sẽ thảo luận về cách viết các 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. Tổng quanBiể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 đến máy chủ. Các biểu mẫu là một cơ chế linh hoạt để thu thập đầu vào của người dùng vì có các đầu vào hình thức phù hợp có sẵn để 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, người chọn ngày, v.v. , vì chúng cho phép chúng tôi gửi dữ liệu trong các yêu cầu Làm việc với các hình thức có thể phức tạp! Các nhà phát triển cần viết HTML cho biểu mẫu, xác thực và vệ sinh đúng dữ liệu đã nhập trên máy chủ (và cũng có thể trong trình duyệt), đăng lại biểu mẫu bằng các thông báo lỗi để thông báo cho người dùng về bất kỳ trường hợp lệ nào, hãy xử lý dữ liệu khi nó đã được gửi thành công và cuối cùng trả lời người dùng theo một cách nào đó để chỉ ra thành công. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách các hoạt động trên có thể được thực hiện trong Express. Trên đường đi, chúng tôi sẽ mở rộng trang web locall Library để 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. Lưu ý: Chúng tôi chưa xem xét cách hạn chế các tuyến đường cụ thể cho 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ể thay đổi cơ sở dữ liệu. We haven't looked at how to restrict particular routes to authenticated or authorized users, so at this point, any user will be able to make changes to the database. Hình thức HTMLĐầu tiên một tổng quan ngắn gọn về các hình thức 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 liên quan 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ẻ 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 các yếu tố đầu vào khác và các 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 được hiển thị lần đầu tiên. Nhãn nhóm phù hợp được chỉ định bằng thẻ 6 (xem "Nhập tên" ở trên), với trường 7 chứa giá trị 4 của ____10 được liên kết.Đầu vào 0 sẽ được hiển thị dưới dạng nút (theo mặc định), điều này có thể được người dùng nhấn để tải dữ liệu chứa các phần tử đầ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):
Hình thức quá trình xử lýXử lý biểu mẫu Sử dụng tất cả các kỹ thuật giống nhau mà 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 bộ điều khiển thực hiện bất kỳ hành động cơ sở dữ liệu nào cần thiết, bao gồm đọc dữ liệu từ các mô hình, sau đó tạo và trả về trang HTML. Điều làm cho 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à tái hiện lại biểu mẫu với thông tin lỗi nếu có bất kỳ vấn đề nào. Một sơ đồ quy trình cho các yêu cầu biểu mẫu xử lý được hiển thị bên dưới, bắt đầu bằng một yêu cầu cho một trang chứa một biểu mẫu (hiển thị màu xanh lá cây):
Như thể hiện trong sơ đồ ở trên, những điều chính hình thành mã xử lý 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ày.Bả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 nhận/vệ sinh các giá trị của chúng.Xác nhận và vệ sinhTrướ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à vệ sinh:
Đối với hướng dẫn này, chúng tôi sẽ sử dụng mô-đun Validator phổ biến để thực hiện cả xác thực và vệ sinh 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 gốc của dự án.
Sử dụng Express-ValidatorLưu ý: Hướng dẫn xác nhận rõ ràng trên GitHub cung cấp một cái nhìn tổng quan tốt về API. Chúng tôi khuyên bạn nên đọc rằng để có được ý tưởng về tất cả các khả năng của nó (bao gồm sử dụng xác thực lược đồ và tạo trình xác nhận tùy chỉnh). Dưới đây chúng tôi chỉ bao gồm một tập hợp con hữu ích cho locall Library. The express-validator guide on GitHub provides a good overview of the API. We recommend you read that to get an idea of all its capabilities (including using schema validation and creating custom validators). Below we cover just a subset that is useful for the LocalLibrary. Để sử dụng trình xác nhận trong các 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 Validator Express, 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à vệ sinh dữ liệu từ các tham số yêu cầu, cơ thể, 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 (theo yêu cầu "ở trên).Các chức năng được định nghĩa như dưới đây:
Các chuỗi xác nhận và vệ sinh là phần mềm trung gian nên được chuyển đến trình xử lý tuyến đường nhanh (chúng tôi thực hiện gián tiếp này, 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ẽ bao gồm một số ví dụ thực tế khi chúng tôi thực hiện các biểu mẫu locall Library bên dưới. Thiết kế hình thứcNhiều mô hình trong thư viện có liên quan/phụ thuộc vào ví dụ, 8 yêu cầu 9 và cũng có thể có một hoặc nhiều 0. Điều này đặt ra câu hỏi làm thế nào chúng ta nên xử lý trường hợp người dùng mong muốn:
Đối với dự án này, chúng tôi sẽ đơn giản hóa việc thực hiện bằng cách nói rằng một biểu mẫu chỉ có thể:
Lưu ý: Một triển khai "mạnh mẽ" hơn có thể cho phép bạn tạo các đối tượng phụ thuộc khi tạo một đối tượng mới và xóa bất kỳ đối tượng nào bất cứ lúc nào (ví dụ: xóa các đối tượng phụ thuộc hoặc bằng cách xóa các tham chiếu đến đối tượng đã xóa khỏi cơ sở dữ liệu) . A more "robust" implementation might allow you to create the dependent objects when creating a new object, and delete any object at any time (for example, by deleting dependent objects, or by removing references to the deleted object from the database). Tuyến đườngĐể thực hiện mã xử lý biểu mẫu của chúng tôi, chúng tôi sẽ cần hai tuyến có cùng mẫu URL. Tuyến đường ( 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 phát lại biểu mẫu với 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 (theo hướng dẫn trước). Ví dụ: các tuyến đường thể loại được hiển thị dưới đây:/routes/catalog.js (in a previous tutorial). For example, the genre routes are shown below:
Biểu hiện hình thức subarticlesCác bài viết phụ sau đây sẽ đưa chúng tôi qua quá trình thêm các biểu mẫu cần thiết vào ứng dụng ví dụ của chúng tôi. Bạn cần đọc và làm việc lần lượt từng người, trước khi chuyển sang cái tiếp theo.
Thử thách bản thânTriển khai 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 liên quan theo cách tương tự như trang Xóa tác giả của chúng tôi. Các trang nên tuân theo phương pháp thiết kế tương tự:
IT tiên boa:
Triển khai 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 theo cách tương tự như trang cập nhật sách của chúng tôi.IT tiên boa:
Triển khai các trang cập nhật cho các mô hình [ // … body("name") .trim() .isLength({ min: 1 }) .withMessage("Name empty.") .isAlpha() .withMessage("Name must be alphabet letters."), // … ]; 7, [ // … body("age", "Invalid age") .optional({ checkFalsy: true }) .isISO8601() .toDate(), // … ]; 9 và [ // … body("name") .trim() .isLength({ min: 1 }) .withMessage("Name empty.") .isAlpha() .withMessage("Name must be alphabet letters."), // … ]; 1, liên kết chúng từ các trang chi tiết liên quan theo cách tương tự như trang cập nhật sách của chúng tôi.Trang cập nhật sách chúng tôi vừa triển khai là khó nhất! Các mẫu tương tự có thể được sử dụng cho các trang cập nhật cho các đối tượng khác. Ngày tử vong và ngày sinh của các trường khai sinh và trường 7 do_date là định dạng sai để nhập vào trường đầu vào ngày trên biểu mẫu (nó yêu cầu dữ liệu ở dạng "Yyyy-MM-DD"). Cách dễ nhất để đi xung quanh điều này là xác định một thuộc tính ảo mới cho các ngày định dạng ngày một cách thích hợp, và sau đó sử dụng trường này trong các mẫu xem liên quan.Nếu bạn bị mắc kẹt, có những ví dụ về các trang cập nhật trong ví dụ ở đây.Bản tóm tắtLàm thế nào gửi dữ liệu từ nút JS đến HTML?JS đến tệp HTML của tôi.ứng dụng.get ('/main', function (req, res) {var name = 'hello'; res. Render (__ dirname + "/xem/bố cục/main ... NPM Cài đặt - -Save Pug -Để thêm nó vào dự án và gói.Tệp JSON .. ứng dụng..... Tạo thư mục ./views và thêm đơn giản .. Nodejs có thể được sử dụng với HTML không?Chạy Nodemon để khởi động máy chủ.Bất cứ khi nào máy chủ đang chạy và truy cập tuyến http: // localhost: 3000/, nó sẽ xuất ra văn bản đơn giản Hello World!.Chúng ta có thể sử dụng cùng một máy chủ để hiển thị các phần tử HTML làm phản hồi của máy chủ thay vì gửi văn bản thuần túy.Dưới đây là danh sách một số yếu tố HTML.We can use the same server to render HTML elements as the server response instead of sending plain text. Here is a list of some HTML elements.
Node JS xử lý dữ liệu biểu mẫu như thế nào?Để bắt đầu với các biểu mẫu, trước tiên chúng tôi sẽ cài đặt trình phân tích cú pháp cơ thể (để phân tích dữ liệu được mã hóa JSON và URL) và phần mềm trung gian multer (để phân tích dữ liệu đa dạng/hình thức).var express = yêu cầu ('express');var bodyparser = yêu cầu ('body-parlinger');var multer = yêu cầu ('multer');var tải lên = multer ();var app = express ();ứng dụng.install the body-parser(for parsing JSON and url-encoded data) and multer(for parsing multipart/form data) middleware. var express = require('express'); var bodyParser = require('body-parser'); var multer = require('multer'); var upload = multer(); var app = express(); app. |