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?

  • Trước
  • Tổng quan: Express NodeJS
  • Tiếp theo

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.

Prerequisites:Hoàn thành tất cả các chủ đề hướng dẫn trước đó, bao gồm hướng dẫn Express Phần 5: Hiển thị dữ liệu thư viện
Objective:Để hiểu cách viết biểu mẫu để lấy dữ liệu từ người dùng và cập nhật cơ sở dữ liệu với dữ liệu này.

Tổng quan

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 đế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 POST với bảo vệ giả mạo yêu cầu chéo.

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ó:

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?

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ẻ

, chứa ít nhất một phần tử ____10 của
npm install express-validator
1.

<form action="/team_name_url/" method="post">
  <label for="team_name">Enter name: label>
  <input
    id="team_name"
    type="text"
    name="name_field"
    value="Default name for team." />
  <input type="submit" value="OK" />
form>

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

npm install express-validator
2 của trường xác định loại tiện ích nào sẽ được hiển thị.
npm install express-validator
3 và
npm install express-validator
4 của trường được sử dụng để xác định trường trong JavaScript/CSS/HTML, trong khi
npm install express-validator
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ẻ
npm install express-validator
6 (xem "Nhập tên" ở trên), với trường
npm install express-validator
7 chứa giá trị
npm install express-validator
4 của ____10 được liên kết.

Đầu vào

const { body, validationResult } = require("express-validator");
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à
const { body, validationResult } = require("express-validator");
1). Các thuộc tính biểu mẫu xác định HTTP
const { body, validationResult } = require("express-validator");
2 được sử dụng để gửi dữ liệu và đích của dữ liệu trên máy chủ (
const { body, validationResult } = require("express-validator");
3):

  • const { body, validationResult } = require("express-validator");
    
    3: Tài nguyên/URL nơi dữ liệu sẽ được gửi để xử lý khi biểu mẫu được gửi. Nếu điều này không được đặt (hoặc được đặt thành một chuỗi trống), thì biểu mẫu sẽ được gửi lại cho URL trang hiện tại.
  • const { body, validationResult } = require("express-validator");
    
    2: Phương thức HTTP được sử dụng để gửi dữ liệu: POST hoặc
    const { body, validationResult } = require("express-validator");
    
    7.
    • Phương pháp POST phải luôn luôn được sử dụng nếu dữ liệu sẽ dẫn đến thay đổi cơ sở dữ liệu của máy chủ, bởi vì điều này có thể được thực hiện chống lại các cuộc tấn công yêu cầu giả mạo chéo tại chỗ.
    • Phương thức
      const { body, validationResult } = require("express-validator");
      
      7 chỉ nên được sử dụng cho các biểu mẫu không thay đổi dữ liệu người dùng (ví dụ: biểu mẫu tìm kiếm). Nó được khuyến nghị khi bạn muốn có thể đánh dấu hoặc chia sẻ URL.

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):

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?

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à:

  1. Hiển thị biểu mẫu mặc định ngay lần đầu tiên được người dùng yêu cầu.
    • Biểu mẫu có thể chứa các trường trống (ví dụ: nếu bạn đang tạo bản ghi mới) hoặc nó có thể được sử dụng trước với các giá trị ban đầu (ví dụ: nếu bạn đang thay đổi bản ghi hoặc có các giá trị ban đầu mặc định hữu ích).
  2. Nhận dữ liệu được gửi bởi người dùng, thường là trong yêu cầu HTTP POST.
  3. Xác thực và vệ sinh dữ liệu.
  4. Nếu bất kỳ dữ liệu nào không hợp lệ, hãy hiển thị lại biểu mẫu, thời gian này với bất kỳ giá trị dân cư nào và thông báo lỗi cho các trường sự cố.
  5. Nếu tất cả dữ liệu là hợp lệ, thực hiện các hành động bắt buộc (ví dụ: lưu dữ liệu trong cơ sở dữ liệu, hãy gửi email thông báo, trả về kết quả tìm kiếm, tải lên tệp, v.v.)
  6. Khi tất cả các hành động hoàn tất, chuyển hướng người dùng đến một trang khác.

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

const { body, validationResult } = require("express-validator");
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ố POST

const { body, validationResult } = require("express-validator");
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ệ sinh

Trướ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:

  • Kiểm tra xác thực rằng các giá trị đã nhập là phù hợp cho từng trường (nằm trong phạm vi, định dạng, v.v.) và các giá trị đó đã được cung cấp cho tất cả các trường bắt buộc.
  • Vệ sinh loại bỏ/thay thế các ký tự trong dữ liệu có khả năng được sử dụng để gửi nội dung độc hại đến máy chủ.

Đố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 đặt

Cài đặt mô -đun bằng cách chạy lệnh sau trong gốc của dự án.

npm install express-validator

Sử dụng Express-Validator

Lư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:

const { body, validationResult } = require("express-validator");

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

[
  // …
  body("name", "Empty name").trim().isLength({ min: 1 }).escape(),
  // …
];
5 và
[
  // …
  body("name", "Empty name").trim().isLength({ min: 1 }).escape(),
  // …
];
6 (theo yêu cầu "ở trên).

Các chức năng được định nghĩa như dưới đây:

  • [
      // …
      body("name", "Empty name").trim().isLength({ min: 1 }).escape(),
      // …
    ];
    
    7: Chỉ định một tập hợp các trường trong thân yêu cầu (tham số POST) để xác thực và/hoặc vệ sinh cùng với thông báo lỗi tùy chọn có thể được hiển thị nếu nó không kiểm tra. Các tiêu chí xác nhận và vệ sinh là được xử lý bằng phương pháp
    [
      // …
      body("name", "Empty name").trim().isLength({ min: 1 }).escape(),
      // …
    ];
    
    9. Ví dụ: dòng bên dưới lần đầu tiên xác định rằng chúng tôi đang kiểm tra trường "Tên" và lỗi xác thực sẽ đặt thông báo lỗi "Tên trống". Sau đó, chúng tôi gọi phương pháp vệ sinh
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    0 để loại bỏ khoảng trắng từ đầu và cuối chuỗi, sau đó
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    1 để kiểm tra chuỗi kết quả không trống. Cuối cùng, chúng tôi gọi
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    2 để xóa các ký tự HTML khỏi biến có thể được sử dụng trong các cuộc tấn công kịch bản trang web chéo JavaScript.

    [
      // …
      body("name", "Empty name").trim().isLength({ min: 1 }).escape(),
      // …
    ];
    

    Kiểm tra này kiểm tra xem trường tuổi là ngày hợp lệ và sử dụng
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    3 để chỉ định rằng các chuỗi NULL và trống sẽ không xác nhận được.

    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    

    Bạn cũng có thể Daisy chuỗi xác thực khác nhau và thêm các tin nhắn được hiển thị nếu trình xác nhận trước đó là đúng.

    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    

  • [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    4: Chạy xác thực, lỗi có sẵn dưới dạng đối tượng kết quả
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    5. Điều này được gọi trong một cuộc gọi lại riêng biệt, như được hiển thị bên dưới:

    (req, res, next) => {
      // Extract the validation errors from a request.
      const errors = validationResult(req);
    
      if (!errors.isEmpty()) {
        // There are errors. Render form again with sanitized values/errors messages.
        // Error messages can be returned in an array using `errors.array()`.
      } else {
        // Data from form is valid.
      }
    };
    

    Chúng tôi sử dụng phương thức
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    6 của kết quả xác thực để kiểm tra xem có lỗi không và phương thức
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    7 của nó để nhận được tập hợp các thông báo lỗi. Xem API kết quả xác nhận để biết thêm thông tin.

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ức

Nhiều mô hình trong thư viện có liên quan/phụ thuộc vào ví dụ,

[
  // …
  body("age", "Invalid age")
    .optional({ checkFalsy: true })
    .isISO8601()
    .toDate(),
  // …
];
8 yêu cầu
[
  // …
  body("age", "Invalid age")
    .optional({ checkFalsy: true })
    .isISO8601()
    .toDate(),
  // …
];
9 và cũng có thể có một hoặc nhiều
[
  // …
  body("name")
    .trim()
    .isLength({ min: 1 })
    .withMessage("Name empty.")
    .isAlpha()
    .withMessage("Name must be alphabet letters."),
  // …
];
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:

  • Tạo một đối tượng khi các đối tượng liên quan của nó chưa tồn tại (ví dụ: một cuốn sách mà đối tượng tác giả chưa được xác định).
  • Xóa một đối tượng vẫn đang được sử dụng bởi một đối tượng khác (ví dụ, xóa
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    1 vẫn đang được sử dụng bởi
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8).

Đố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ể:

  • Tạo một đối tượng bằng cách sử dụng các đối tượng đã tồn tại (vì vậy người dùng sẽ phải tạo bất kỳ phiên bản
    [
      // …
      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 nào trước khi cố gắng tạo bất kỳ đối tượng
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8 nào).
  • Xóa một đối tượng nếu nó không được tham chiếu bởi các đối tượng khác (ví dụ, bạn sẽ không thể xóa
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8 cho đến khi tất cả các đối tượng
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    7 được liên kết đã bị xóa).

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 (

const { body, validationResult } = require("express-validator");
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:

// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
router.get("/genre/create", genre_controller.genre_create_get);

// POST request for creating Genre.
router.post("/genre/create", genre_controller.genre_create_post);

Biểu hiện hình thức subarticles

Cá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.

  1. Tạo biểu mẫu thể loại - Xác định một trang để tạo các đối tượng
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    1.
  2. Tạo biểu mẫu tác giả - Xác định một trang để tạo các đối tượng
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    9.
  3. Tạo biểu mẫu sách - Xác định một trang/biểu mẫu để tạo các đối tượng
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8.
  4. Tạo biểu mẫu BookInstance - Xác định một trang/biểu mẫu để tạo các đối tượng
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    7.
  5. Xóa biểu mẫu tác giả - Xác định một trang để xóa các đối tượng
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    9.
  6. Cập nhật mẫu sách - Xác định trang để cập nhật các đối tượng
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8.

Thử thách bản thân

Triển khai các trang xóa cho các mô hình

[
  // …
  body("age", "Invalid age")
    .optional({ checkFalsy: true })
    .isISO8601()
    .toDate(),
  // …
];
8,
[
  // …
  body("name")
    .trim()
    .isLength({ min: 1 })
    .withMessage("Name empty.")
    .isAlpha()
    .withMessage("Name must be alphabet letters."),
  // …
];
7 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 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ự:

  • Nếu có các tham chiếu đến đối tượng từ các đối tượng khác, thì các đối tượng khác này sẽ được hiển thị cùng với một lưu ý rằng bản ghi này không thể bị xóa cho đến khi các đối tượng được liệt kê đã bị xóa.
  • Nếu không có tài liệu tham khảo nào khác cho đối tượng thì chế độ xem sẽ nhắc xóa nó. Nếu người dùng nhấn nút Xóa, bản ghi sẽ bị xóa.Delete button, the record should then be deleted.

IT tiên boa:

  • Xóa
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    1 cũng giống như xóa
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    9 vì cả hai đối tượng đều là sự phụ thuộc của
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8 (vì vậy trong cả hai trường hợp, bạn chỉ có thể xóa đối tượng khi các cuốn sách liên quan bị xóa).
  • Xóa
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8 cũng tương tự nhau, nhưng bạn cần kiểm tra xem không có liên quan
    // GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
    router.get("/genre/create", genre_controller.genre_create_get);
    
    // POST request for creating Genre.
    router.post("/genre/create", genre_controller.genre_create_post);
    
    3.
  • Xóa
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    7 là dễ nhất trong tất cả vì không có đối tượng phụ thuộc. Trong trường hợp này, bạn chỉ có thể tìm thấy bản ghi liên quan và xóa nó.

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.

IT tiên boa:

  • Xóa
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    1 cũng giống như xóa
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    9 vì cả hai đối tượng đều là sự phụ thuộc của
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8 (vì vậy trong cả hai trường hợp, bạn chỉ có thể xóa đối tượng khi các cuốn sách liên quan bị xóa).
  • Xóa
    [
      // …
      body("age", "Invalid age")
        .optional({ checkFalsy: true })
        .isISO8601()
        .toDate(),
      // …
    ];
    
    8 cũng tương tự nhau, nhưng bạn cần kiểm tra xem không có liên quan
    // GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
    router.get("/genre/create", genre_controller.genre_create_get);
    
    // POST request for creating Genre.
    router.post("/genre/create", genre_controller.genre_create_post);
    
    3.
  • Xóa
    [
      // …
      body("name")
        .trim()
        .isLength({ min: 1 })
        .withMessage("Name empty.")
        .isAlpha()
        .withMessage("Name must be alphabet letters."),
      // …
    ];
    
    7 là dễ nhất trong tất cả vì không có đối tượng phụ thuộc. Trong trường hợp này, bạn chỉ có thể tìm thấy bản ghi liên quan và xóa nó.

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

[
  // …
  body("name")
    .trim()
    .isLength({ min: 1 })
    .withMessage("Name empty.")
    .isAlpha()
    .withMessage("Name must be alphabet letters."),
  // …
];
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ắt

Là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.