Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

convert to markdown for learn/server-side/express_nodejs zh-TW #7314

Merged
merged 3 commits into from
Aug 3, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
521 changes: 0 additions & 521 deletions files/zh-tw/learn/server-side/express_nodejs/deployment/index.html

This file was deleted.

508 changes: 508 additions & 0 deletions files/zh-tw/learn/server-side/express_nodejs/deployment/index.md

Large diffs are not rendered by default.

This file was deleted.

Large diffs are not rendered by default.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
title: 作者詳情頁面
slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page
translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page
---
作者細節頁面,需要呈現指定作者 `Author `的信息,使用 `_id` 欄位的值(自動產生)識別,接著是這個作者 `Author `的所有書本物件 `Book `的列表。

## Controller 控制器

打開 **/controllers/authorController.js**.

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

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

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

```js
// 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** ,並複制貼上底下的文字。

```js
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](locallibary_express_author_detail.png)

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

## 下一步

- 回到 [Express 教學 5: 呈現圖書館資料](/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
- 繼續教學 5 的最後一個部分: [書本實例詳情頁面與自我挑戰](/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge)

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
title: Author list page and Genre list page challenge
slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
---
作者列表頁面,需要呈現數據庫中所有作者的列表,有每位作者的名字,並連結到作者詳細內容頁面。出生與死亡日期應該在名字後面,並且在同一列。

## Controller 控制器

作者列表控制器函數,需要獲取所有作者實例的列表,然後將這些實例傳遞給模板進行渲染。

打開 **/controllers/authorController.js**。在文件頂部附近,找到導出的 `author_list() `控制器方法,並將其替換為以下代碼(更改後的代碼以**粗體**顯示)。

```js
// Display list of all Authors.
exports.author_list = function(req, res, next) {

Author.find()
.sort([['family_name', 'ascending']])
.exec(function (err, list_authors) {
if (err) { return next(err); }
//Successful, so render
res.render('author_list', { title: 'Author List', author_list: list_authors });
});

};
```

The method uses the model's `find()`, `sort()` and `exec()` functions to return all `Author` objects sorted by `family_name` in alphabetic order. The callback passed to the `exec()` method is called with any errors (or `null`) as the first parameter, or a list of all authors on success. If there is an error it calls the next middleware function with the error value, and if not it renders the **author_list**(.pug) template, passing the page `title` and the list of authors (`author_list`).

## View

Create **/views/author_list.pug** and replace its content with the text below.

```js
extends layout

block content
h1= title

ul
each author in author_list
li
a(href=author.url) #{author.name}
| (#{author.date_of_birth} - #{author.date_of_death})

else
li There are no authors.
```

The view follows exactly the same pattern as our other templates.

## What does it look like?

Run the application and open your browser to <http://localhost:3000/>. Then select the _All authors_ link. If everything is set up correctly, the page should look something like the following screenshot.

![Author List Page - Express Local Library site](locallibary_express_author_list.png)

> **備註:** The appearance of the author _lifespan_ dates is ugly! You can improve this using the [same approach](/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting) as we used for the `BookInstance` list (adding the virtual property for the lifespan to the `Author` model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. `moment()` returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:
>
> `return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';`

## Genre list page—challenge\![Edit](/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!)

In this section you should implement your own genre list page. The page should display a list of all genres in the database, with each genre linked to its associated detail page. A screenshot of the expected result is shown below.

![Genre List - Express Local Library site](locallibary_express_genre_list.png)

The genre list controller function needs to get a list of all `Genre` instances, and then pass these to the template for rendering.

1. You will need to edit `genre_list()` in **/controllers/genreController.js**.
2. The implementation is almost exactly the same as the `author_list()` controller.

- Sort the results by name, in ascending order.

3. The template to be rendered should be named **genre_list.pug**.
4. The template to be rendered should be passed the variables `title` ('Genre List') and `genre_list` (the list of genres returned from your `Genre.find()` callback.
5. The view should match the screenshot/requirements above (this should have a very similar structure/format to the Author list view, except for the fact that genres do not have dates).

## Next steps

Return to [Express Tutorial Part 5: Displaying library data](/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data).

Proceed to the next subarticle of part 5: [Genre detail page](/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page).
Loading