BookInstance-Detailseite und Herausforderung

Controller

Öffnen Sie /controllers/bookinstanceController.js. Finden Sie die exportierte bookinstance_detail()-Controllermethode und ersetzen Sie sie durch den folgenden Code.

// Display detail page for a specific BookInstance.
exports.bookinstance_detail = async (req, res, next) => {
  const bookInstance = await BookInstance.findById(req.params.id)
    .populate("book")
    .exec();

  if (bookInstance === null) {
    // No results.
    const err = new Error("Book copy not found");
    err.status = 404;
    return next(err);
  }

  res.render("bookinstance_detail", {
    title: "Book:",
    bookinstance: bookInstance,
  });
};

Die Implementierung ist sehr ähnlich zu der, die für die anderen Modelldetailseiten verwendet wird. Die Routen-Controller-Funktion ruft BookInstance.findById() mit der ID einer spezifischen Buchinstanz auf, die aus der URL extrahiert wird (mittels der Route) und im Controller über die Anforderungsparameter req.params.id zugegriffen wird. Anschließend wird populate() aufgerufen, um die Details des zugehörigen Book zu erhalten. Wenn keine übereinstimmende BookInstance gefunden wird, wird ein Fehler an die Express-Middleware gesendet. Andernfalls werden die zurückgegebenen Daten mit der bookinstance_detail.pug-Ansicht gerendert.

Ansicht

Erstellen Sie /views/bookinstance_detail.pug und kopieren Sie den unten stehenden Inhalt hinein.

extends layout

block content

  h1 ID: #{bookinstance._id}

  p #[strong Title: ]
    a(href=bookinstance.book.url) #{bookinstance.book.title}
  p #[strong Imprint:] #{bookinstance.imprint}

  p #[strong Status: ]
    if bookinstance.status=='Available'
      span.text-success #{bookinstance.status}
    else if bookinstance.status=='Maintenance'
      span.text-danger #{bookinstance.status}
    else
      span.text-warning #{bookinstance.status}

  if bookinstance.status!='Available'
    p #[strong Due back:] #{bookinstance.due_back}

Alles in dieser Vorlage wurde in vorherigen Abschnitten demonstriert.

Wie sieht es aus?

Führen Sie die Anwendung aus und öffnen Sie Ihren Browser unter http://localhost:3000/. Wählen Sie den Link Alle Buchinstanzen, und wählen Sie dann einen der Einträge aus. Wenn alles richtig eingerichtet ist, sollte Ihre Seite ungefähr wie der folgende Screenshot aussehen.

Herausforderung

Derzeit verwenden die meisten auf der Website angezeigten Daten das Standardformat von JavaScript (z. B. Tue Oct 06 2020 15:49:58 GMT+1100 (AUS Eastern Daylight Time)). Die Herausforderung für diesen Artikel besteht darin, das Erscheinungsbild der Datumsanzeige für die Lebensspanne eines Author (Geburts- und Sterbedatum) und für BookInstance-Detailseiten zu verbessern, um das Format zu verwenden: Oct 6th, 2016.

Um diese Herausforderung abzuschließen, müssen Sie:

1. Ersetzen Sie die Variable due_back durch due_back_formatted auf der BookInstance-Detailseite.
2. Aktualisieren Sie das Author-Modell, um eine virtuelle Lebenserwartungs-Eigenschaft hinzuzufügen. Die Lebensspanne sollte folgendermaßen aussehen: date_of_birth - date_of_death, wobei beide Werte dasselbe Datumsformat wie BookInstance.due_back_formatted haben.
3. Verwenden Sie Author.lifespan in allen Ansichten, in denen Sie derzeit explizit date_of_birth und date_of_death verwenden.

Nächste Schritte

• Zurückkehren zu Express Tutorial Teil 5: Anzeigen von Bibliotheksdaten.