Buchdetailseite
Die Buchdetailseite muss die Informationen für ein spezifisches Book
(identifiziert durch den automatisch generierten _id
Feldwert) anzeigen, zusammen mit Informationen über jede zugehörige Kopie in der Bibliothek (BookInstance
). Wo immer wir einen Autor, ein Genre oder eine Buchinstanz anzeigen, sollten diese mit der zugehörigen Detailseite für diesen Gegenstand verlinkt sein.
Controller
Öffnen Sie /controllers/bookController.js. Finden Sie die exportierte book_detail()
Controller-Methode und ersetzen Sie sie mit dem folgenden Code.
// Display detail page for a specific book.
exports.book_detail = asyncHandler(async (req, res, next) => {
// Get details of books, book instances for specific book
const [book, bookInstances] = await Promise.all([
Book.findById(req.params.id).populate("author").populate("genre").exec(),
BookInstance.find({ book: req.params.id }).exec(),
]);
if (book === null) {
// No results.
const err = new Error("Book not found");
err.status = 404;
return next(err);
}
res.render("book_detail", {
title: book.title,
book: book,
book_instances: bookInstances,
});
});
Hinweis: Wir müssen in diesem Schritt keine zusätzlichen Module anfordern, da wir die Abhängigkeiten bereits beim Implementieren des Home-Page-Controllers importiert haben.
Der Ansatz ist genau derselbe wie im Genre-Detailseite beschrieben.
Die Routen-Controller-Funktion verwendet Promise.all()
, um das spezifizierte Book
und seine zugehörigen Kopien (BookInstance
) parallel abzufragen.
Wenn kein passendes Buch gefunden wird, wird ein Error-Objekt mit einem "404: Not Found"-Fehler zurückgegeben.
Wird das Buch gefunden, werden die abgerufenen Daten aus der Datenbank mithilfe des "book_detail"-Templates gerendert.
Da der Schlüssel 'title' verwendet wird, um der Webseite (wie im Header in 'layout.pug' definiert) einen Namen zu geben, übergeben wir diesmal results.book.title
beim Rendern der Webseite.
Ansicht
Erstellen Sie /views/book_detail.pug und fügen Sie den untenstehenden Text hinzu.
extends layout
block content
h1 Title: #{book.title}
p #[strong Author: ]
a(href=book.author.url) #{book.author.name}
p #[strong Summary:] #{book.summary}
p #[strong ISBN:] #{book.isbn}
p #[strong Genre: ]
each val, index in book.genre
a(href=val.url) #{val.name}
if index < book.genre.length - 1
|,
div(style='margin-left:20px;margin-top:20px')
h2(style='font-size: 1.5rem;') Copies
each val in book_instances
hr
if val.status=='Available'
p.text-success #{val.status}
else if val.status=='Maintenance'
p.text-danger #{val.status}
else
p.text-warning #{val.status}
p #[strong Imprint:] #{val.imprint}
if val.status!='Available'
p #[strong Due back:] #{val.due_back}
p #[strong Id: ]
a(href=val.url) #{val._id}
else
p There are no copies of this book in the library.
Fast alles in diesem Template wurde in den vorherigen Abschnitten demonstriert.
Hinweis: Die Liste der mit dem Buch assoziierten Genres wird im Template wie folgt implementiert. Dies fügt ein Komma und ein geschütztes Leerzeichen nach jedem mit dem Buch assoziierten Genre, außer dem letzten, hinzu.
p #[strong Genre: ]
each val, index in book.genre
a(href=val.url) #{val.name}
if index < book.genre.length - 1
|,
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ücher, dann wählen Sie eines der Bücher. Wenn alles korrekt eingerichtet ist, sollte Ihre Seite ungefähr wie der folgende Screenshot aussehen.
Nächste Schritte
- Zurück zu Express Tutorial Teil 5: Bibliotheksdaten anzeigen.
- Fahren Sie mit dem nächsten Unterartikel von Teil 5 fort: Autoren-Detailseite.