作者細節頁面,需要呈現指定作者 Author 的信息,使用 _id 欄位的值(自動產生)識別,接著是這個作者 Author 的所有書本物件 Book 的列表。

Controller 控制器

打開 /controllers/authorController.js.

在檔案最上方,加入底下幾行,引入 asyncBook 模組(作者細節頁面需要它們)。

var async = require('async');
var Book = require('../models/book');

找到 exported author_detail() 控制器方法,並用底下代碼置換。

// Display detail page for a specific Author.
exports.author_detail = function(req, res, next) {

    async.parallel({
        author: function(callback) {
            Author.findById(req.params.id)
              .exec(callback)
        },
        authors_books: function(callback) {
          Book.find({ 'author': req.params.id },'title summary')
          .exec(callback)
        },
    }, function(err, results) {
        if (err) { return next(err); } // Error in API usage.
        if (results.author==null) { // No results.
            var err = new Error('Author not found');
            err.status = 404;
            return next(err);
        }
        // Successful, so render.
        res.render('author_detail', { title: 'Author Detail', author: results.author, author_books: results.authors_books } );
    });

};

此處的控制器方法使用 async.parallel(),用平行的方式,查詢作者 Author和相應的書本實例,並附加上繪製本頁面的回調,如果 2 個要求都成功完成,就運行回調。這個方式,就跟前面的種類細節頁面所說明的完全相同。

View 視圖

創建 /views/author_detail.pug ,並複制貼上底下的文字。

extends layout

block content

  h1 Author: #{author.name}
  p #{author.date_of_birth} - #{author.date_of_death}
  
  div(style='margin-left:20px;margin-top:20px')

    h4 Books
    
    dl
      each book in author_books
        dt 
          a(href=book.url) #{book.title}
        dd #{book.summary}

      else
        p This author has no books.

本模板裡的所有事物,都在先前的章節演示過了。

它看起來像是?

運行本應用,並打開瀏覽器訪問 http://localhost:3000/。選擇 All Authors 連結,然後選擇一個作者。如果每個東西都設定正確了,你的網站看起來應該會像底下的截圖。

Author Detail Page - Express Local Library site

注意:  作者的出生與死亡日期的外觀很醜!我們將在本文最後的自我挑戰處理它。

下一步

文件標籤與貢獻者

此頁面的貢獻者: edgar-chen
最近更新: edgar-chen,