Detailseite der BookInstance und Herausforderung
Detailseite der BookInstance
Die Detailseite der BookInstance
muss die Informationen für jede BookInstance
anzeigen, identifiziert durch ihren (automatisch generierten) _id
Feldwert. Dies umfasst den Book
-Namen (als Link zur Buch-Detailseite) zusammen mit weiteren Informationen im Datensatz.
Controller
Öffnen Sie /controllers/bookinstanceController.js.
Finden Sie die exportierte Methode bookinstance_detail()
des Controllers und ersetzen Sie sie mit dem folgenden Code.
// Display detail page for a specific BookInstance.
exports.bookinstance_detail = asyncHandler(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 Modeldetalseiten verwendet wird. Die Routen-Controller-Funktion ruft BookInstance.findById()
mit der ID einer bestimmten Bücherinstanz auf, die aus der URL extrahiert wird (unter Verwendung der Route) und innerhalb des Controllers über die Anforderungsparameter zugänglich ist: req.params.id
.
Anschließend wird populate()
aufgerufen, um die Details des zugehörigen Book
zu erhalten.
Wenn keine entsprechende BookInstance
gefunden wird, wird ein Fehler an die Express-Middleware gesendet.
Andernfalls werden die zurückgegebenen Daten unter Verwendung der Ansicht bookinstance_detail.pug gerendert.
Ansicht
Erstellen Sie /views/bookinstance_detail.pug und kopieren Sie den Inhalt unten 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 früheren 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 Bücherinstanzen und dann einen der Einträge aus. Wenn alles korrekt eingerichtet ist, sollte Ihre Seite etwa wie der folgende Screenshot aussehen.
Herausforderung
Derzeit werden die meisten Daten, die auf der Website angezeigt werden, im Standard-JavaScript-Format dargestellt (z.B. Di Okt 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 Informationen zur Lebensdauer von Author
(Todes-/Geburtsdatum) und für _BookInstance-Detailseiten zu verbessern, um das Format: 6. Okt. 2016 zu verwenden.
Hinweis: Sie können denselben Ansatz verwenden, den wir für die Buchinstanzliste verwendet haben (indem Sie die virtuelle Eigenschaft für die Lebensspanne zum Author
-Modell hinzufügen und luxon verwenden, um die Datumszeichenfolgen zu formatieren).
Um diese Herausforderung abzuschließen, müssen Sie:
- Die Variable
due_back
auf der BookInstance-Detailseite durchdue_back_formatted
ersetzen. - Das
Author
-Modell aktualisieren, um eine virtuelle Eigenschaft für die Lebensspanne hinzuzufügen. Die Lebensspanne sollte wie folgt aussehen: date_of_birth - date_of_death, wobei beide Werte dasselbe Datumsformat wieBookInstance.due_back_formatted
haben. Author.lifespan
in allen Ansichten verwenden, in denen Sie derzeit explizitdate_of_birth
unddate_of_death
verwenden.
Nächste Schritte
- Zurückkehren zum Express Tutorial Teil 5: Anzeigen von Bibliotheksdaten.