Create Author Form

Wie bei dem Genre-Formular, müssen wir, um express-validator zu verwenden, die benötigten Funktionen _require_n.

Öffnen Sie /controllers/authorController.js und fügen Sie die folgende Zeile am Anfang der Datei (oberhalb der Routenfunktionen) hinzu:

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

Finden Sie die exportierte author_create_get() Controller-Methode und ersetzen Sie sie mit dem folgenden Code. Dieser rendert die author_form.pug View und übergibt eine title-Variable.

// Display Author create form on GET.
exports.author_create_get = (req, res, next) => {
  res.render("author_form", { title: "Create Author" });
};

Finden Sie die exportierte author_create_post() Controller-Methode und ersetzen Sie sie mit dem folgenden Code.

// Handle Author create on POST.
exports.author_create_post = [
  // Validate and sanitize fields.
  body("first_name")
    .trim()
    .isLength({ min: 1 })
    .escape()
    .withMessage("First name must be specified.")
    .isAlphanumeric()
    .withMessage("First name has non-alphanumeric characters."),
  body("family_name")
    .trim()
    .isLength({ min: 1 })
    .escape()
    .withMessage("Family name must be specified.")
    .isAlphanumeric()
    .withMessage("Family name has non-alphanumeric characters."),
  body("date_of_birth", "Invalid date of birth")
    .optional({ values: "falsy" })
    .isISO8601()
    .toDate(),
  body("date_of_death", "Invalid date of death")
    .optional({ values: "falsy" })
    .isISO8601()
    .toDate(),

  // Process request after validation and sanitization.
  asyncHandler(async (req, res, next) => {
    // Extract the validation errors from a request.
    const errors = validationResult(req);

    // Create Author object with escaped and trimmed data
    const author = new Author({
      first_name: req.body.first_name,
      family_name: req.body.family_name,
      date_of_birth: req.body.date_of_birth,
      date_of_death: req.body.date_of_death,
    });

    if (!errors.isEmpty()) {
      // There are errors. Render form again with sanitized values/errors messages.
      res.render("author_form", {
        title: "Create Author",
        author: author,
        errors: errors.array(),
      });
      return;
    } else {
      // Data from form is valid.

      // Save author.
      await author.save();
      // Redirect to new author record.
      res.redirect(author.url);
    }
  }),
];

Die Struktur und das Verhalten dieses Codes sind fast identisch mit denen zur Erstellung eines Genre-Objekts. Zuerst validieren und bereinigen wir die Daten. Wenn die Daten ungültig sind, zeigen wir das Formular zusammen mit den ursprünglich vom Benutzer eingegebenen Daten und einer Liste von Fehlermeldungen erneut an. Wenn die Daten gültig sind, speichern wir den neuen Autoren-Datensatz und leiten den Benutzer zur Detailseite des Autors um.

Im Gegensatz zum Genre-Post-Handler überprüfen wir nicht, ob das Author-Objekt bereits existiert, bevor wir es speichern. Man könnte argumentieren, dass wir sollten, auch wenn wir so derzeit mehrere Autoren mit dem gleichen Namen haben können.

Der Validierungscode zeigt einige neue Funktionen:

• Wir können Validatoren verkettet verwenden und mit withMessage() die Fehlermeldung angeben, die angezeigt werden soll, wenn die vorherige Validierungsmethode fehlschlägt. Dies macht es sehr einfach, spezifische Fehlermeldungen ohne viel Code-Duplikation bereitzustellen.

  js

  [
    // Validate and sanitize fields.
    body("first_name")
      .trim()
      .isLength({ min: 1 })
      .escape()
      .withMessage("First name must be specified.")
      .isAlphanumeric()
      .withMessage("First name has non-alphanumeric characters."),
    // …
  ];
  

• Mit der Funktion optional() können wir eine nachfolgende Validierung nur dann ausführen, wenn ein Feld ausgefüllt wurde (dies erlaubt uns die Validierung optionaler Felder). Zum Beispiel überprüfen wir unten, ob das optionale Geburtsdatum ein ISO8601-konformes Datum ist (das übergebene Objekt { values: "falsy" } bedeutet, dass wir entweder einen leeren String oder null als leeren Wert akzeptieren).

  js

  [
    body("date_of_birth", "Invalid date of birth")
      .optional({ values: "falsy" })
      .isISO8601()
      .toDate(),
  ];
  

• Parameter werden als Strings von der Anfrage empfangen. Wir können toDate() (oder toBoolean()) verwenden, um diese in die korrekten JavaScript-Typen zu konvertieren (wie am Ende der Validatorenkette oben gezeigt).

Erstellen Sie /views/author_form.pug und kopieren Sie den folgenden Text hinein.

extends layout

block content
  h1=title

  form(method='POST')
    div.form-group
      label(for='first_name') First Name:
      input#first_name.form-control(type='text', placeholder='First name (Christian)' name='first_name' required value=(undefined===author ? '' : author.first_name) )
      label(for='family_name') Family Name:
      input#family_name.form-control(type='text', placeholder='Family name (Surname)' name='family_name' required value=(undefined===author ? '' : author.family_name))
    div.form-group
      label(for='date_of_birth') Date of birth:
      input#date_of_birth.form-control(type='date' name='date_of_birth' value=(undefined===author ? '' : author.date_of_birth) )
    button.btn.btn-primary(type='submit') Submit

  if errors
    ul
      for error in errors
        li!= error.msg

Die Struktur und das Verhalten dieser Ansicht sind genau die gleichen wie für die genre_form.pug Vorlage, also werden wir sie nicht erneut beschreiben.

Das obige Template fehlt ein Feld für die Eingabe des date_of_death. Erstellen Sie das Feld nach dem gleichen Muster wie die Geburtsdatums-Formulargruppe!

Führen Sie die Anwendung aus, öffnen Sie Ihren Browser unter http://localhost:3000/ und wählen Sie den Link Create new author. Wenn alles korrekt eingerichtet ist, sollte Ihre Seite etwa so aussehen wie in folgendem Screenshot. Nachdem Sie einen Wert eingegeben haben, sollte er gespeichert werden und Sie werden zur Autordetailseite weitergeleitet.

• Kehren Sie zurück zum Express Tutorial Teil 6: Arbeiten mit Formularen.
• Fahren Sie mit dem nächsten Unterartikel von Teil 6 fort: Create Book Form.