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><em>書本細節頁面</em>需要呈現一本指定書本(<code>Book</code>)的信息, 使用它的 <code>_id</code> 字段值(自動產生)做為識別，接著是圖書館中書本實例(<code>BookInstance</code>)的信息。無論我們在哪裡呈現一個作者、種類、或書本實例，都應該連結到它的細節頁面。</p>
<h2 id="Controller_控制器">Controller 控制器</h2>
<p>打開 <strong>/controllers/bookController.js.</strong> ，找到 exported <code>book_detail()</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>注意:</strong> 我們不需要用 require 導入 <em>async</em> 和 <em>BookInstance</em>，當我們實作主頁面控制器的時候，我們就已經引入這些模組。</p>
</div>
<p>此處的控制器方法使用 <code>async.parallel()</code>，用平行的方式找到 <code>Book</code> 以及它的相應複本 (<code>BookInstances</code>) 。這樣的處理方式，就跟上面的 <em>種類細節頁面</em> 所說明的完全相同。</p>
<h2 id="View_視圖">View 視圖</h2>
<p>創建 <strong>/views/book_detail.pug </strong>並加入底下文字。</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>在這個模板裡，幾乎每個東西都在先前的章節演示過了。</p>
<div class="note">
<p><strong>注意:</strong> 與該書相關的種類列表，在模板中的實作，如以下代碼。除了最後一本書之外，在與本書相關的每個種類之後，都會添加一個逗號。</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="它看起來像是">它看起來像是?</h2>
<p>運行本應用，並打開瀏覽器訪問 <a href="http://localhost:3000/">http://localhost:3000/</a>。選擇 <em>All books</em> 連結，然後選擇其中一本書。如果每個東西都設定正確了，你的頁面看起來應該像是底下的截圖。</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="下一步">下一步</h2>
<ul>
<li>回到 <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express 教學 5: 呈現圖書館資料</a></li>
<li>繼續教學 5 下一個部分: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">作者詳情頁面</a></li>
</ul>
|
