1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: 本の詳細ページ
slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page
translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page
---
<p>The <em>Book detail page</em> needs to display the information for a specific <code>Book</code>, identified using its (automatically generated) <code>_id</code> field value, along with information about each associated copy in the libary (<code>BookInstance</code>). Wherever we display an author, genre, or book instance, these should be linked to the associated detail page for that item.</p>
<h2 id="Controller">Controller</h2>
<p>Open <strong>/controllers/bookController.js</strong>. Find the exported <code>book_detail()</code> controller method and replace it with the following code.</p>
<pre class="brush: js">// Display detail page for a specific book.
exports.book_detail = function(req, res, next) {
<strong> async.parallel({
book: function(callback) {
Book.findById(req.params.id)
.populate('author')
.populate('genre')
.exec(callback);
},
book_instance: function(callback) {
BookInstance.find({ 'book': req.params.id })
.exec(callback);
},
}, function(err, results) {
if (err) { return next(err); }
if (results.book==null) { // No results.
var err = new Error('Book not found');
err.status = 404;
return next(err);
}
// Successful, so render.
res.render('book_detail', { title: 'Title', book: results.book, book_instances: results.book_instance } );
});</strong>
};
</pre>
<div class="note">
<p><strong>Note:</strong> We don't need to require <em>async</em> and <em>BookInstance</em>, as we already imported those modules when we implemented the home page controller.</p>
</div>
<p>The method uses <code>async.parallel()</code> to find the <code>Book</code> and its associated copies (<code>BookInstances</code>) in parallel. The approach is exactly the same as described for the <em>Genre detail page</em> above.</p>
<h2 id="View">View</h2>
<p>Create <strong>/views/book_detail.pug</strong> and add the text below.</p>
<pre class="brush: js">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:]&nbsp;
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')
h4 Copies
each val in book_instances
hr
if val.status=='Available'
<strong>p.text-success</strong> #{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:]&nbsp;
a(href=val.url) #{val._id}
else
p There are no copies of this book in the library.
</pre>
<p>Almost everything in this template has been demonstrated in previous sections.</p>
<div class="note">
<p><strong>Note:</strong> The list of genres associated with the book is implemented in the template as below. This adds a comma after every genre associated with the book except for the last one.</p>
<pre> p #[strong Genre:]
each val, index in book.genre
a(href=val.url) #{val.name}
if index < book.genre.length - 1
|, </pre>
</div>
<h2 id="What_does_it_look_like">What does it look like?</h2>
<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All books</em> link, then select one of the books. If everything is set up correctly, your page should look something like the following screenshot.</p>
<p><img alt="Book Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14470/LocalLibary_Express_Book_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 616px; margin: 0px auto; width: 1200px;"></p>
<h2 id="Next_steps">Next steps</h2>
<ul>
<li>Return to <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
<li>Proceed to the next subarticle of part 5: <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li>
</ul>
|
