recursal/MDN huggingface dataset:
安裝基本軟體
======

* Overview: Getting started with the web
* 次頁

在本文中，你會知道有哪些 Web 開發的簡易工具，以及正確的安裝方式。

專家都用哪些工具？
---------

* **電腦**，這東西對某些人來說再合理不過了，但可能有人用自己的手機，或在圖書館電腦上讀這篇文章。若要真正著手開發 Web，最好還是弄一台桌電或筆電（Windows、Mac、Linux 都行）。
* **文字編輯器**，用來寫程式碼。可以是文字編輯器（如 Visual Studio Code、Notepad++、Sublime Text、Atom、GNU Emacs、VIM）、也可以是混合式編輯器（如 Dreamweaver 或 WebStorm）。辦公室軟體的文件編輯器並不適合，因為它們依賴許多會干擾瀏覽器排版引擎的隱藏元素。
* **Web 瀏覽器**，可測試寫好的程式碼。目前最常用的瀏覽器有 Firefox、Chrome、Opera、Safari、Internet Explorer 與 Micrososft Edge。你也可以測試自己網站在行動裝置上呈現的效果，若目標讀者分佈甚廣，你可能必須用舊版瀏覽器（如 IE 6–8）測試。
* **圖像編輯器**，如 GIMP、Paint.NET、Photoshop 都可用來為自己的網站添增圖案。
* **版本控制系統**，可讓團隊用以協作某個專案、分享程式碼與外部檔案，更可避免編輯作業發生衝突、還可以管理伺服器的檔案。目前 Git 是最常見的版本控制工具；GitHub 與 GitLab 則是最常用的程式碼分享服務。
* **FTP 程式**，可將網頁上傳至比較老的網路託管伺服器，以利使用者檢視 ── 前述的 Git 近年來漸漸取代了 FTP── 可用的 (S)FTP 程式有 Cyberduck、Fetch、FileZilla。
* \*\*自動化系統，\*\*如 Grunt 或 Gulp 可自動執行重複性的作業，例如縮減程式碼並執行測試作業。
* 範本、函式庫、框架......等等，都能加速寫出一般功能。
* 及其他更多工具！
我實際需要、立刻需要哪些工具？
---------------

上面一長串看起來好像很嚇人，但其實剛接觸 Web 開發時，不需了解所有的東西。我們先幫你設定最低限度的必要工具：文字編輯器和幾款主流瀏覽器。

### 安裝文字編輯器

你的電腦裡很可能已經提供基本的文字編輯器了。Windows 本身就有記事本；OS X 已提供文字編輯；Linux 各版本不太一樣：例如 Ubuntu 就有 gedit。

而針對 Web 開發，其實有著比 Notepad 或 TextEdit 好很多的工具。我們推薦使用 Visual Studio Code，因為這個自由編輯器有提供即時預覽、以及程式碼提示。

### 安裝常用瀏覽器

目前我們會安裝數款 Web 瀏覽器的桌面版，以利測試我們所寫的程式碼。先在下方找到自己所用的作業系統，再點擊你愛用的瀏覽器連結：

* Linux：Firefox、Chrome、Opera、Brave。
* Windows：Firefox、Chrome、Opera、Internet Explorer、Micrososft Edge、Brave。（Edge 是 Windows 10 的預設瀏覽器；如果你用的是 Windows 8 或之後版本，可以安裝 IE 10 或更高版本；否則應安裝其他瀏覽器替代）
* macOS：Firefox、Chrome、Opera、Safari、Brave。（Safari 是 iOS 與 OS X 的預設瀏覽器）

在著手開發之前，應先安裝至少兩款瀏覽器以利後續測試。

**備註：** Internet Explorer 與當今的 web 不相容，可能會讓專案跑不動。

### 安裝伺服器軟體

有些例子需要使用伺服器軟體。你可以在 How do you set up a local testing server? (en-US) 找到作法。

* Overview: Getting started with the web
* 次頁
跨瀏覽器測試
======

此模組專注於測試網路專案的跨瀏覽器領域。在此，我們會辨認你的目標閱聽者（例如你最該對什麼樣的用戶、瀏覽器、還有設備操心？）如何做測試、不同類型的程式碼會碰上的主要問題、如何解決/減輕這些問題、哪些工具最能幫你測試和修復問題、還有如何用自動化加速測試。

先決條件
----

在使用文章所述的工具前，你應該確實理解 HTML、CSS、JavaScript 核心語言的基本。

指引
--

跨瀏覽器測試介紹 (en-US)

這篇文章將透過給予跨瀏覽器測試概覽重點、回答諸如「何謂跨瀏覽器測試？」、「你最有可能碰上什麼問題？」、「測試、找出、並解決錯誤的主要方法有哪些？」的問題，以作為模組的開頭。

測試進行策略 (en-US)

接著，我們將針對測試執行深入研究、確定目標受眾（像是什麼瀏覽器、設備、或其他需要確認的地方）、低測試策略（low fi testing strategies，讓自己取得需要的設備、虛擬機、還有 adhoc 測試）、進階測試策略（自動化以及使用專用工具）、還有用戶群組間的測試。

處理常見的 HTML 與 CSS 問題 (en-US)

在這裡，我們將關注可能遇上的，常見跨瀏覽器 HTML 與 CSS 程式相關問題，還有能預防或修復淺在問題的工具。這裡面會有語法標示（linting code）、CSS 前輟處理、使用瀏覽器工具找出問題、使用 polyfill 支援瀏覽器、處理響應式網頁問題...等等。

處理常見的 JavaScript 問題

我們會開始觀察常見的跨瀏覽器 JavaScript 程式問題，以及修復的辦法。使用瀏覽器工具追蹤並解決問題、使用 Polyfill 與函式庫解決問題、在老舊瀏覽器實作新功能...等等。

處理常見的無障礙問題 (en-US)

我們要關注無障礙網頁，並提供常見問題的資訊、如何簡易測試、還有使用檢測/自動化工具，以排查無障礙問題。

功能檢測實做 (en-US)

功能檢測牽涉到確定瀏覽器是否支持某個程式碼，是否依賴他執行不同的程式碼，以便部分瀏覽器能提供可執行的體驗，而不是直接崩潰/錯誤。本文詳細介紹如何編寫自己的簡單功能檢測，如何使用函式庫來加速實現，以及用於功能檢測的本機功能，例如 `@supports`。

自動化測試介紹

每天在好幾個瀏覽器與設備上，運行手動測試數次，既乏味又浪費時間。要有效率的處理這種事，就要開始熟悉自動化工具。我們會在這篇文章看看有哪些可用的工具、如何使用它們、以及如何使用如 Sauce Labs 與 Browser Stack 的商業化瀏覽器測試程式之基本講述。

設定你的自動化測試環境 (en-US)

我們會在這篇文章教你如何安裝自己的自動化測試環境、並透過 Selenium/WebDriver 以及 Node 的測試函式庫如 selenium-webdriver 來跑你的測試。我們還會講測試環境如何與上篇文章所講述的商業軟體做整合。
Git and GitHub
==============

所有開發者都將使用到一些**版本控制系統** ( **V**ersion **C**ontrol **S**ystem, 簡稱 **VCS** ), 這種工具讓人們可以與其他開發者同公開發一個專案同時避免了不必要的重複與衝突，如果遇到什麼問題，也可以及時回退到之前的版本。當今最流行的**版本控制系統**（至少在網路開發者中是這樣的）是 **Git**，和與之關聯的程式社區網站 **GitHub**。這篇短文將帶你簡單地了解他們。

概述
--

版本控制系統在軟體開發過程中是不可或缺的：

* 我們很少獨自完成一個專案，而在分工合作的同時我們都會有與他人的工作相衝突的風險：尤其是當兩個人同時嘗試修改同一段程式碼的時候。所以我們需要有相應的機制用以避免這種情況。
* 不管是自己一人或與他人一起開發專案時，總希望能夠程式碼能夠及時保存，這樣就可以避免像電腦突然損壞而丟失程式碼的局面。
* 如果後期發現了問題，我們可能還會想要回到比較早的版本。有些人在做自己的專案時透過創建同一文件的不同版本，例如 `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js` 之類的文件用於保存歷史版本，但這個方法不可靠，且容易出錯。
* 不同的團隊成員也會需要創建他們自己的獨特的版本（在 Git 中叫做**branches**（分支）），他們在這裡添加一些新的功能特性，然後通過一些可控的方法（在 GitHub 中我們使用**pull request**（提取要求））將其合併到原來的主幹項目中。

版本控制系統提供了能夠滿足以上需求的工具。 Git 是版本控制系統的範例，而GitHub是一個為個人或團隊操作 Git 儲存庫( Git Repositories) 提供了 Git 伺服器和一系列非常實用的工具的網站+基礎設施。它提供了回報程式碼錯誤、檢查工具以及分配任務和任務狀態等項目管理工具等等。

**備註：** Git 實際上是一個*分散式*版本控制系統，這意味著包含程式碼庫的儲存庫的完整副本是在你的電腦上（以及其他所有人）上創建的。 你可以對自己的副本進行更改，然後將這些更改推送回伺服器，管理員將決定是否將你的更改與主副本合併到主幹上。

**嘗試成為一位前端網頁程式開發者?**

我們準備了一系列的課程當中包括核心的資訊，讓你往你的目標(成為一位前端網頁程式開發者)邁進。

**開始學習** (en-US)

事前準備
----

要使用 Git 和 GitHub，你需要:

* 一台有安裝 Git 的電腦 (請參考 Git 下載頁面)。
* 一個工具來使用 Git，取決於你喜歡用哪類型工具，你可以使用一個 Git GUI client（我們建議使用 GitHub Desktop, SourceTree or Git Kraken）或就使用 terminal window。即便你傾向使用 GUI，實際上使用 terminal window 可以幫助你學習一些 git 的基本指令。
* 一個 GitHub 帳號。如果你還沒有帳號，建議使用提供的連結去註冊一個帳號並開始用。

就事前必備知識而言，你無需了解所有有關 Web 開發，Git /GitHub 的知識即可開始使用此版本控制系統。 但是，建議你了解一些開發程式碼的知識，並嘗試把一些程式碼存儲在你的儲存庫中！

最好還具有一些基本的終端機知識，例如在目錄之間移動，創立文件以及修改系統的 `PATH`。

**備註：** Github 不是唯一網站/工具集讓你使用 Git。 你可以嘗試其它替代方法，例如 GitLab，也可以嘗試設置自己的 Git 伺服器並使用它來取代 GitHub。在本章節中，我們僅停留在 GitHub 使用教學上。

其它指南
----

請注意，下面的連結將你帶到外部站點上的資源。最終，我們的目標是開設自己的專屬 Git / GitHub 課程，但目前，這些課程將幫助你掌握相關主題。

Hello, World（來自 GitHub）

這是一個很好的起點-本實用指南可讓你直接使用 GitHub，學習 Git 的基礎知識，例如創建儲存庫和分支，進行提交以及合併提取要求。

Git 使用手冊（來自 GitHub）

這本 Git 手冊更深入地介紹了版本控制系统是什麼，儲存庫是什麼，基本 GitHub 模如何運行，Git 命令和範例等等。

Forking Projects 分叉專案（來自 GitHub）

當你想為別人的程式碼做貢獻時，Forking Projects 分叉專案是必不可少的。本指南說明了方法。

關於提取要求（來自 GitHub）

有用的指南，用於管理請求請求，將建議的程式碼更改傳遞給人們的儲存庫以供考慮。

掌握問題（來自 GitHub）

問題就像是 GitHub 項目的論壇，人們可以在其中提出問題和報告問題，還可以管理更新（例如，分配人員來解決問題，澄清問題，讓人們知道問題已解決）。本文將提供你有關問題的必備知識。


**備註：** 你還可以用 Git 跟 GitHub 來完成更多的事情，但我們認為，如果你想要有效地使用 Git，上面的這些知識是至少應該具備的。當你更深入地了解 Git 時，你將會意識到，當你開始使用更加複雜的指令時會更容易出錯。但不要擔心，即使是專業的網路工程師有時都會感到困惑，並通過網路檢索或Flight rules for Git和 Dangit, git! 這樣的網站來尋找答案。

也可以參考以下
-------

* 【理解 GitHub 流程】
* 【指令列表】
* 【掌握 Markdown 格式】（在網頁上、評論區常用的格式以及`.md` 文件所使用的格式，GitHub 中的介紹文件(readme.md)即用這種格式書寫）。
* 【入門 Github 頁面】（如何在 GitHub 上發布示例和網站）。
* 【學習 Git 的分支結構】
* 【Git 中的飛行法則】（ 在 Git 中實現特定功能的非常有用的方法介紹綱要，包括如何在出錯時糾錯等）。
* 【該死的 Git，Git !】（另一個十分有用的方法介紹綱要，特別是在出錯的時候進行糾正的方法）。
使用樣式點綴我們的 Angular 應用程式
======================

* 前頁
* Overview: Client-side JavaScript frameworks
* 次頁

現在，我們已經建立了基本的應用程式結構，並加入了內容，接著我們就要來對應用程式進行樣式的調整，透過本篇文章來學習如何使用樣式點綴我們的 Angular 應用程式。

|  |  |
| --- | --- |
| 預備知識： | 
 熟悉 HTML、CSS
 以及 JavaScript 的核心，了解
 終端機/命令列（terminal/command line） (en-US)相關知識。
  |
| 學習目標： | 學習如何使用樣式點綴 Angular 應用程式。 |

增加樣式到 Angular 中
---------------

Angular CLI 會產生兩種類型的樣式檔：

* 元件樣式：Angular CLI 提供了元件各自的樣式檔案。這些樣式檔只會套用在其所屬的元件。
* `styles.css`：在 `src` 目錄底下，除非你在元件層級指定樣式，否則這個檔案的樣式會套用到整個應用程式。

根據你是否使用 CSS 預處理器，CSS 檔案的副檔名也會有所變化，Angular 支援純 CSS、SCSS、Sass、Less、以及 Stylus。

在 `src/styles.css` 中，貼上以下樣式：


```css
body {
  font-family: Helvetica, Arial, sans-serif;
}

.btn-wrapper {
  /\* flexbox \*/
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.btn {
  color: #000;
  background-color: #fff;
  border: 2px solid #cecece;
  padding: 0.35rem 1rem 0.25rem 1rem;
  font-size: 1rem;
}

.btn:hover {
  background-color: #ecf2fd;
}

.btn:active {
  background-color: #d1e0fe;
}

.btn:focus {
  outline: none;
  border: black solid 2px;
}

.btn-primary {
  color: #fff;
  background-color: #000;
  width: 100%;
  padding: 0.75rem;
  font-size: 1.3rem;
  border: black solid 2px;
  margin: 1rem 0;
}

.btn-primary:hover {
  background-color: #444242;
}

.btn-primary:focus {
  color: #000;
  outline: none;
  border: #000 solid 2px;
  background-color: #d7ecff;
}

.btn-primary:active {
  background-color: #212020;
}
```


在 `src/styles.css` 中的 CSS 會應用在整個應用程式，但是這些樣式不會影響到頁面上所有內容。下一步將要新增專門讓 `AppComponent` 套用的樣式。

在 `app.component.css` 中，增加以下樣式：


```css
body {
  color: #4d4d4d;
  background-color: #f5f5f5;
  color: #4d4d4d;
}

.main {
  max-width: 500px;
  width: 85%;
  margin: 2rem auto;
  padding: 1rem;
  text-align: center;
  box-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.2),
    0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 600px) {
  .main {
    width: 70%;
  }
}

label {
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
  padding-bottom: 1rem;
}

.lg-text-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #000;
  display: block;
  box-sizing: border-box;
  font-size: 1rem;
}

.btn-wrapper {
  margin-bottom: 2rem;
}

.btn-menu {
  flex-basis: 32%;
}

.active {
  color: green;
}

ul {
  padding-inline-start: 0;
}

ul li {
  list-style: none;
}
```


最後，回到瀏覽器看看樣式更新之後的效果，現在看來比較有美感了。

結語
--

我們對 Angular 樣式的簡介也告一個段落了，接下來讓我們開始幫應用程式加上功能吧。在下一篇文章中，我們將建立一個適用於待辦事項的元件，並使其成為可以讓你標示完成、編輯以及刪除待辦事項。

* 前頁
* Overview: Client-side JavaScript frameworks
* 次頁
建構 Angular 應用程式與更多資源
====================

* 前頁
* Overview: Client-side JavaScript frameworks

這篇文章內容涵蓋，如何建立一個生產版本（production）的應用程式，以及提供後續的學習資源。

|  |  |
| --- | --- |
| 預備知識： | 
 熟悉 HTML、CSS
 和
 JavaScript 的主要概念，以及
 終端機／命令列 (en-US)
 的知識。
  |
| 學習目標： | 學會如何編譯你的 Angular 應用程式 |

建置最終版的應用程式
----------

 現在你已經完成開發你的應用程式，接著執行 Angular CLI `build` 的指令。
 當你在 `todo` 的目錄底下執行 `build` 的指令，應用程式會編譯並且輸出到 `dist/` 的目錄下。

在 `todo` 目錄底下，且在命令列執行以下的命令：


```bash
ng build -c production
```


命令列介面——CLI（Command Line Interface），會將應用程式編譯並且輸出到新的目錄 `dist` 底下。這個 `--configuration production`/`-c production` 尾隨在 `ng build` 的參數，會移除在正式產品版本上不需要的東西。

部署你的應用程式
--------

 為了部署你的應用程式，你可以複製 `dist/my-project-name` 資料夾底下的內容到你的伺服器上。
 因為這些都是靜態檔案，你可以將這些檔案放到任何能夠提供檔案的伺服器上，像是：

* Node.js
* Java
* .NET

你可以使用任何後端，像是 Firebase、Google Cloud 或 App Engine。

接著要做什麼
------

現在你已經建立了基本的應用程式，但是你的 Angular 學習旅程才剛開始，你可以探索 Angular 文件學習更多，像是：

* 英雄之旅(正體中文版)：一個深入的 Angular 重點課程，像是使用服務（service）、導覽（navigation）以及從伺服器取得資料。
* Angular 元件 指南：一系列的文章，主題包括生命週期、元件互動以及檢視封裝。
* 表單 指南：文章內容包含建立 Angular 的響應式表單、輸入驗證以及建立動態表單。
總結
--

以上。希望你喜歡 Angular！

* 前頁
* Overview: Client-side JavaScript frameworks
篩選我們的待辦事項項目
===========

* 前頁
* Overview: Client-side JavaScript frameworks
* 次頁

現在讓我們來增加功能，讓使用者篩選待辦事項，這樣他們就可以選擇查看進行中、已完成，或是全部的事項。

|  |  |
| --- | --- |
| 預備知識： | 
 熟悉基礎的 HTML ，
 CSS 與
 JavaScript 語言，以及終端機/命令列 (en-US)的知識。
  |
| 學習目標： | 替我們的應用程式增加篩選功能。 |

我們的篩選功能程式碼
----------

篩選項目的功能是建立於你先前加入在 `app.component.ts` 的 `filter` 屬性


```js
filter: 'all' | 'active' | 'done' = 'all';
```


filter 屬性的預設值為 `all`，但是它也可以被設置為 `active` 或是 `done`。

增加篩選的控制項
--------

 在 `app.component.html` 新增下列 HTML 並且放在 **Add** 按鈕與項目表單之間。
 在下列這個片段中，你的 HTML 中現有的部分是被註解起來的，這樣讓你可以更清楚地看到該把按鈕放在什麼位置。


```html
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
 -->

<!-- Buttons that show all, still to do, or done items on click -->
<div class="btn-wrapper">
  <button
 class="btn btn-menu"
 [class.active]="filter == 'all'"
 (click)="filter = 'all'">
    All
  </button>

  <button
 class="btn btn-menu"
 [class.active]="filter == 'active'"
 (click)="filter = 'active'">
    To Do
  </button>

  <button
 class="btn btn-menu"
 [class.active]="filter == 'done'"
 (click)="filter = 'done'">
    Done
  </button>
</div>

<!-- <h2>{{items.length}} item(s)</h2>
 <ul>... -->
```


點擊按鈕改變 `filter` 點擊按鈕改變 filter 的值，這將會決定哪些 `項目` 應該顯示，以及 Angular 套用於啟用狀態按鈕的樣式。

* 如果使用者點擊了 **All** 的按鈕，全部的項目都會顯示。
* 如果使用者點擊了 **To do** 的按鈕，只有 `done` 的值為 `false` 的項目會顯示。
* 如果使用者點擊了 **Done** 的按鈕，只有 `done` 的值為 `true` 的項目會顯示。

 class 屬性可以用使用方括號 `[]` 來綁定，控制按鍵上的文字顏色，
 當 `filter` 的值符合表達式的時候，類別綁定器 `[class.active]` 會套用 `active` class。
 例如：當使用者點擊了 **Done** 按鈕，將會把 `filter` 的值設為 `done` ，這時候 `filter == 'done'` 這個表達式將會成立，也就是為邏輯真值 `true`。
 當 `filter` 的值為 `done` ， Angular 就會套用 `active` class 到 **Done** 按鈕上，使得文字變為綠色。
 而當使用者點擊了其他的按鈕，使得 `filter` 的值不再是 `done` 時，就不會再套用綠色在文字上了。

結語
--

真是快！因為你已經有了 `filter` 的程式碼在 `app.component.ts` 中，你所需要做的就是編輯模板，以便於提供篩選項的控制項。我們的下一個，同時也是最後一個主題，探討了如何建立用於生產環境的 Angular 應用程式，並且提供了近一步的資源來帶領繼續你踏上學習之旅。

* 前頁
* Overview: Client-side JavaScript frameworks
* 次頁
Express web framework (Node.js/JavaScript)
==========================================

Express 是一個流行的 web 框架，使用 JavsScript 實現，執行在 node.js 環境上。本系列解釋 Express 的優點、如何設定開發環境、完成常見的 web 開發和佈署。

前置需求
----

在開始前你需要了解什麼是伺服器端 web 程式和什麼是 web 框架，推薦閱讀伺服器端網站開發第一步。建議了解基本的程式知識和JavaScript，但不需要知道核心概念。

**備註：** 本網站有許多學習 JavaScript 應用在客戶端開發的有用資源，如：JavaScript、JavaScript 指南、JavaScript 基礎、JavaScript (learning)。使用 Node.js 開發伺服器端使用的 JavaScript 語言與概念和客戶端是一樣的。Node.js 提供額外的 APIs以支援無瀏覽器環境，例如：建立 HTTP 服務和讀取檔案系統。但不支援 DOM 及瀏覽器相關的 JavaScript API。

這份指南將提供一些使用 Node.js 和 Express 的資訊以及數個優秀的學習資源。部分連結由 How do I get started with Node.js(StackOverflow) 與 What are the best resources for learning Node.js?(Quora) 提供。

指南
--

Express/Node 介紹

第一篇的系列文章中回答了「什麼是 Node」和「什麼是 Express？」並概略的說明為什麼 Express web 框架如此特別。此文章將重點放在主要的功能上，並展示一些 Express 應用常見的建構模塊（儘管此時你還沒有可供測試的開發環境）

設定 Node (Express) 開發環境

現在你已經了解 Express 的目的了，接下來繼續說明如何設定和測試 Windows、Linux (Ubuntu)和 Mac OS X 上的 Node/Express 開發環境。不管你用的是什麼作業系統，你都能在本文中找到開發 Express 應用的入門需知。

Express 教學(1): The Local Library website

在第一篇實務教學系列文章中將說明你將會學到什麼？以及提供範例網站 local library 的概覽，我們將在後續的文章中繼續改進它。

Express 教學(2): 建構網站骨架

本文章展示如何建構網站的骨架，接著你可以自己添加路由、模板/畫面和資料庫。

Express 教學(3): 使用資料庫(以 Mongoose 為例)

本文簡短的介紹 Node/Express 如何使用資料庫。接下來展示 LocalLibray 網站如何透過Mongoose進行資料庫的存取。說明物件綱要(object schema)和模型(models)如何宣告、the main field types 和基本驗證。同時簡單的展示幾個讀取資料的主要方法。

Express 教學(4): 路由和控制器

在本教學中，我們將為 LocalLibrary 網站中的所有資源終端設定「虛擬」處理函數的路由（URL 處理代碼）。 完成後，我們將為我們的路由處理程式提供模組化結構，以便我們可以在後續的教學中擴展真正的處理函數。 我們也將了解如何使用 Express 創建模組化路由。

Express 教學(5): 顯示圖書館的資料

現在已經準備好新增頁面來展示館藏和其他資料了。這些頁面包括一個展示我們有多少種 model 型態的首頁、所有 models 的列表和詳細資料頁面。透過本教學你可以得到從資料庫取得紀錄和使用模板的實務經驗。

Express 教學(6): 使用表單

本教學中展示如何使用 Express 的插件-Pug 來使用 HTML Forms，以及如何編寫表單來創造、更新和刪除資料庫的文件。

Express 教學(7): 網站佈署

現在你完成了很棒的*LocalLibrary* 網站，你希望圖書館的員工和會員可以透過網路讀取它。本教學概略說明如何找到主機來佈署你的網站以及為了使你的網站正式上線所需做的準備。

或許你也想看
------

在 PWS/Cloud Foundry 上安裝 LocalLibrary

本文展示如何在Pivotal Web Services PaaS cloud上安裝*LocalLibrary* ，PWS/Cloud Foundry 是一個完整且開源的 Heroku 替代品，可使用於教學(7)。如果你正在尋找 Heroku 或其他 PaaS 的替代品或只是想玩點不同的東西，那 PWS/Cloud Foundry 絕對值得一試。

新增其他教學
------

現在已經有了很多教學，但你可能會想寫其他有趣主題的模塊，包括：

* Using sessions
* 使用者認證
* 使用者授權與權限
* 測試 Express web 應用
* Express web 應用之安全性

當然，如果能作個評估模塊就更好了！
Django 網站框架 (Python)
====================

Django 使用 Python 語言編寫，是一個廣受歡迎、且功能完整的服務器端網站框架。本模塊將為你展示，為什麼 Django 能夠成為一個廣受歡迎的服務器端框架，如何設置開發環境，以及如何開始創建你自己的網絡應用。

先決條件
----

開始學習本模塊，並不需要任何 Django 知識. 但你要理解什麼是服務器端網絡編程、什麼是網絡框架，最好能夠閱讀我們的服務端網站編程的第一步模塊。

最好能有基本的編程概念、並了解 Python 語言，但並不是理解本教程的核心概念的必然條件。

**備註：** 對於初學者來說，Python 是最容易閱讀和理解的編程語言之一。也就是說，如果你想更好的理解本教程，網上有很多免費書籍及免費教程可供參考學習（建議初學者查看 Python 官網的 Python for Non Programmers )。

指引
--

Django 簡介

在第一篇關於 Django 的文章裡，我們會回答"什麼是 Django?"，並概述這個網絡框架的特殊之處。我們會列出主要的功能，包括一些高級的功能特性，這些高級特性我們在這部分教程裡沒有時間詳細說明。在你設置好 Django 應用、並開始把玩它之前，我們會展示 Django 應用的一些主要模塊，讓你明白 Django 應用能做什麼。

架設 Django 開發環境

現在你知道 Django 是做什麼的，我們會展示怎樣在 Windows、Linux(Ubuntu)、和 Mac OS X 上，創建和測試 Django 的開發環境—不管你是用什麼操作系統，這篇文章會教給你能夠開發 Django 應用所需要的開發環境。

Django 教學 1: 本地圖書館網站

我們實用教程系列的第一篇文章，會解釋你將學習到什麼，並提供 "本地圖書館" 網站這個例子的概述。我們會在接下來的文章裡，完成並不斷的改進這個網站。

Django 教學 2: 創建骨架網站

這篇文章會教你，怎樣創建一個網站的 "框架" 。以這個網站為基礎，你可以填充網站特定的 settings、urls、models、views 和 templates。

Django 教學 3: 使用模型

這篇文章會為 「本地圖書館網站」 定義數據模板—數據模板是我們為應用存儲的數據結構。並且允許 Django 在資料庫中存儲數據(以後可以修改)。此文章解釋了什麼是數據模板、怎樣聲明它、和一些主要的數據種類。文章還簡要的介紹了一些，你可以獲得數據模板的方法。

Django 教學 4: Django 管理員頁面

現在我們已經為本地圖書館網站，創建了模型，我們將使用 Django 管理員頁面添加一些『真實的』的圖書數據。首先，我們將向你介紹，如何使用管理員頁面註冊模型，然後我們介紹如何登錄和創建一些數據。最後我們展示一些，進一步改進管理員頁面呈現的方法。

Django 教學 5: 創建我們的首頁

我們現在可以添加代碼，來展示我們的第一個完整頁面—本地圖書館主頁，來顯示我們對每個模型類型有多少條記錄，並提供我們其他頁面的側邊欄導航鏈接。一路上，我們將獲得編寫基本 URL 地圖和視圖、從數據庫獲取記錄、以及使用模版的實踐經驗。.

Django 教學 6: 通用列表與詳細視圖

本教學課程擴展了我們的本地圖書館網站，添加書籍和作者和詳細頁面。在這裡，我們將了解基於類別的通用視圖，並展示如何減少常用代碼用例的代碼量。我們還將更詳細地深入理解 URL 處理，展示如何執行基本模式匹配。

Django 教學 7: 會話框架

本教學擴展本地圖書館網站，向首頁添加了一個基於會話的訪問計數器。這是個比較簡單的例子，但它顯示如何使用會話框架，為你自己的網站中的匿名用戶，提供一致的行為。

Django 教學 8: 使用者身份驗証和權限

本教程，我們將向你展示，如何允許使用者用自己的賬戶，登錄到你的網站，以及如何根據他們是否登錄、及其權限，來控制他們可以做什麼、和看到什麼。作為此次演示的一部分，我們將擴展本地圖書館網站，添加登錄和登出頁面，以及使用者和工作人員特定頁面，以查看已借用的書籍。

Django 教學 9: 使用表單

本教程，我們將向你展示如何使用 Django 中的 HTML Forms 表單，特別是編寫表單以創建、更新、和刪除模型實例的最簡單方法。作為此次演示的一部分，我們將擴展本地圖書館網站，以便圖書館員，可以使用我們自己的表單 (而不是使用管理應用程序) 來更新書籍，創建、更新、刪除作者。

Django 教學 10: 測試 Django 網頁應用 (en-US)

隨著網站的的發展，手工測試越來越難測試—不僅要測試更多，而且隨著組件之間的相互作用變得越來越複雜，一個領域的一個小的變化，可能需要許多額外的測試，來驗證其對其他領域的影響。減輕這些問題的一種方法，是編寫自動化測試，每次更改時，都可以輕鬆可靠地運行。本教程將介紹如何使用 Django 的測試框架，對你的網站進行單元測試自動化。

Django 教學 11: 部署 Django 到生產環境 (en-US)

現在，你已創建（並測試）一個很酷的 「本地圖書館網站」，你將要把它安裝在公共 Web 服務器上，以便圖書館員工和成員，可以通過 Internet 訪問。本文概述如何找到主機，來部署你的網站，以及你需要做什麼，才能使你的網站準備好投入生產環境。

Django 網頁應用安全 (en-US)

保護用戶數據，是任何網站設計的重要組成部分，我們以前解釋了 Web 安全文章中，一些更常見的安全威脅—本文提供了 Django 內置、如何保護處理這種危險的實際演示。

評估
--

以下評估，將測試你對如何使用 Django 創建網站的理解，如上述指南中所列出的項目。

Django 小部落格 DIY

在這個評估中，你將使用你從本單元中學到的一些知識，來創建自己的部落格。
伺服器端程式設計起步走
===========

在我們的伺服器端程式設計模組內，我們會回答一些關於伺服器端編程的問題 ──「那是什麼？」、「它和用戶端程式設計有何不同？」、還有「為什麼它有用？」。接著，我們會比較各大熱門框架、並佐以一些如何選擇最適合框架的指引。最後，我們還會提供關於伺服器安全的進階介紹性文章。

（譯者 iigmir 註：你可能常常聽到網路開發有前端與後端。在網路開發的脈落下，這裡講的伺服器端程式設計，就是俗稱的後端。）

先決條件
----

在開始本模組前，你不需要擁有任何與伺服器端、或其他種類的程式設計相關知識。

你必須知道「網路如何運作」。關於此，我們推薦以下主題：

* 何謂網路伺服器
* 我需要什麼軟體來建立網站？ (en-US)
* 如何把檔案上傳到網路伺服器？ (en-US)

有了基本理解後，你就可以透過本章節的模組來完成工作。

指引
--

伺服器端介紹

歡迎來到 MDN 初學者的伺服器端程式設計課程！在這首篇文章中，我們將以很高的角度回答諸如「這是什麼？」、「它和用戶端程式設計有何不同？」、還有「為什麼它有用？」之類的問題。讀完以後，你會明白很多關於伺服器端程式設計的知識。

用戶端概述 (en-US)

現在你知道了伺服器端程式設計的目標與益處，而我們現在要檢驗一些細節：當伺服器從瀏覽器那邊收到「動態請求」的時候，究竟發生了什麼事。因為大多數網站都用相近的方法處理請求與回應，所以這一點會幫助你理解自己在撰寫程式碼的時候要幹什麼。

伺服器端網路框架 (en-US)

最後一篇文章介紹了伺服器端網路程式，為了回應來自瀏覽器的請求，究竟需要些什麼。現在，我們會告訴你網路框架如何簡化那些工作，並幫助你選定自己的第一個網路程式，要用上什麼樣的框架。

網站安全 (en-US)

網站安全，有賴網頁設計時的高度警覺。這篇概要性的文章不是要讓你變成網站安全大神，而是幫你理解在強化網路程式免受大多數威脅時，第一要務為何。

評估
--

這份「概覽」模組不做任何評估，因為我們還沒有給你看過任何程式碼。我們希望到了這裡，你可以對伺服器端程式設計能提供什麼東西，有者良好的理解；我們也希望你能在建立第一個網站時要用什麼框架的方面，能夠下好決定。
Express 教程 5: 呈現圖書館數據
=====================

* 前頁
* Overview: Express Nodejs
* 次頁

我們現在準備好要新增網頁，以顯示本地圖書館網站的書本與其它資料。這些網頁將包括一個主頁 ，顯示我們每個模型的型態有多少筆紀錄，以及我們所有模型的清單與細節頁面。藉此，我們將得到從數據庫取得紀錄、以及使用樣版的實務經驗。

|  |  |
| --- | --- |
| 前置條件: | 完成先前教程主題 (包含 Express 教程 4: 路由與控制器）。 |
| 目標: | 
 了解如何使用非同步模組與 Pug 樣版語言，以及如何從我們的控制器函式中的
 URL 得取資料。
  |

概覽
--

在我們先前的教程中，定義了可以用來跟資料庫互動的 Mongoose models ，並創建了一些初始的圖書館紀錄。我們接著創建本地圖書館網站需要的所有路由，但僅使用"空殼控制器" 函式（這些是骨架控制器函式，當一個網頁被存取時，只回傳一個"未實作" 信息）。

下一步，是為這些顯示圖書館信息的網頁，提供充分的實作（我們將在後面的文章，檢視網頁表單的實作，像是創建、更新、刪除信息）。這包含了更新控制器函式，以利用我們的模型取得紀錄，並定義模板，為使用者顯示這些信息。

我們在一開始，提供概略的總覽/重點主題，解釋在控制器函式中，如何管理非同步操作，以及如何使用 Pug 撰寫模板。然後我們將為每一個主要的 "唯讀" 網頁提供實作步驟，並且在使用到任何特別的、或新的特性時，會附上簡短的解釋說明。

本教程的最後，你對路由、非同步函式、視圖、模型如何實際運作，應該有了更好的理解。

本教程的章節
------

本教程分為下列章節，說明為了顯示圖書館網站頁面，如何新增各種特性 。在進入下一個教程之前，你需要閱讀並逐一實作下列章節。

1. 模板入門 (en-US)
2. 本地圖書館基礎模板
3. 主頁 (en-US)
4. 書本清單頁面
5. 書本實例清單頁面
6. 日期格式化 - 使用 moment
7. 作者清單頁面、分類清單頁面與自我挑戰 (en-US)
8. 分類詳情頁面 (en-US)
9. 書本詳情頁面
10. 作者詳情頁面
11. 書本實例詳情頁面與自我挑戰
總結
--

我們現在已經為我們的網站，創建了所有 "唯讀" 的頁面: 一個主頁，可以顯示每一個模組的實例數量，書本的列表與詳細信息頁面，書本的實例、作者、分類。沿著目前的學習路徑，我們學到了許多基本知識，有控制器、在非同步作業時管理流控制、使用 Pug 創建視圖、使用模型查詢數據庫、如何從視圖傳送信息到模板、如何創建並擴展模板。而完成挑戰的人，還會學到如何用 moment 處理日期。

在下一篇文章，我們將依據目前為止學到的知識，創建 HTML 表單以及表單管理代碼，開始修改儲存在網站中的資料。

參閱
--

* Async module (Async docs)
* Using Template engines with Express (Express docs)
* Pug (Pug docs)
* Moment (Moment docs)
* 前頁
* Overview: Express Nodejs
* 次頁
Express 教學 1: 本地圖書館網站
=====================

* 前頁
* Overview: Express Nodejs
* 次頁

我們實作教程系列的第一篇文章，會說明將學到什麼東西，並提供「本地圖書館」範例網站的概述 。我們將在接下來的文章中一步一步完成這個網站。

|  |  |
| --- | --- |
| 前置條件: | 
 閱讀
 Express 介紹。
 在底下的教程，你將需要
 架設一個 Node 開發環境。 |
| 目標: | 介紹本教程的範例應用，讓讀者理解包含哪些主題。 |

概覽
--

歡迎來到 MDN "本地圖書館" Express (Node) 教程，我們將開發一個網站，用於管理本地圖書館的目錄。

本系列教程文章中，你將會:

* 使用 *Express 應用產生器工具，創建一個骨架網站與應用*
* 起動和停止 Node 網頁伺服器
* 使用數据庫存放應用的數据
* 創建路由用以要求不同的信息，創建模板 ("視圖") 以 HTML 的形式在瀏覽器中呈現數据
* 使用表單
* 部署應用到生產環境

這些主題中，有一部分你可能已經學過了，或者曾經簡短的接觸過。在本列系教程的最後，你應該知道的夠多，能夠自己開發簡單的 Express 應用。

本地圖書館網站
-------

*我們接下來將創建，並隨著本系列教程發展的網站，名字是本地圖書館。如同你的預測，此網站的目的，是為一間小型本地圖書館，提供一個線上目錄，使用者能夠瀏覽可取得的書本*，並管理他們的帳号。

本範例經過細心地考慮，因為它的規模可以放大或縮小，以配合我們的需要，演示盡可能多或少的細節。並且可以用來演示幾乎所有的 Express 特性。更重要的，它允許我們提供一條引導路徑，演示你在任何網站都會需要的功能:

* 在教程一開始，我們將定義一個簡單的、只能瀏覽的圖書館，圖書館成員能夠用來找到可以借的書。這允許我們找出，幾乎每個網站都會使用的共同操作: 從數据庫讀取並呈現內容。
* 跟隨教程的進展，圖書館的例子會一步一步擴充，以演示更高級的網站特征。比如我們會擴充圖書館，允許新書能夠被創建，並用這個來演示如何使用表單，並支持使用者授權。

即使這是一個具備相當擴充性的範例，它被叫做**本地**圖書館是有原因的 — 我們希望呈現給你最少的信息，能夠盡快幫助你上手並運行 Express。因此，我們將會存放書本、複本、作者、和其它關鍵信息。然而，我們不會存放其它圖書館可能用到的有關信息，或者提供支持多個圖書館網站的架構，又或者其它 "大型圖書館" 的特性。

我被卡住了，哪裡可以得到原始碼?
----------------

當你使用本教程，我們將在每個知識點，提供適當的代碼片段，讓你複制貼上，同時有些代碼，我們希望你能自己擴充 (會有一些指引)。

如果你被卡住了，你可以在 Github 的這裡，找到本地圖書館網站已經開發完成的版本。

**備註：** 在本教程中，指定版本的 node、Express、還有其它模組，都經過測試，並列出在專案項目的 package.json 檔案中。

總結
--

現在，你對本地圖書館網站以及將要學習的東西，有更多一點的認識，是時候開始創建一個 骨架項目，以存放我們的範例。

* 前頁
* Overview: Express Nodejs
* 次頁
使用 moment 做日期格式化
================

我們模型的日期預設呈現很難看: *Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)*。在本節中，我們將展示如何更新上一節中的 *書本實例 BookInstance 列表頁面*，以更友好的格式顯示`due_date`欄位字段：December 6th, 2016。

我們將使用的方法，是在我們的`BookInstance`模型中，創建一個返回格式化日期的虛擬屬性。我們將使用 moment 來做實際的格式化，這是一個輕量級 JavaScript 日期庫，用於解析，驗證，操作和格式化日期。

**備註：** 我們可以直接在 Pug 模板中，使用 moment 格式化字符串，或者可以在許多其它地方格式化字符串。使用虛擬屬性，可以使我們獲得格式化的日期，這與我們當前獲取 `due_date` 的方式完全相同。

安裝 moment
---------

在項目的根目錄，輸入下列命令


```bash
npm install moment
```

創建虛擬屬性
------

1. 打開 **./models/bookinstance.js**。
2. 在此頁面最上方，引入 *moment*。

```js
var moment = require("moment");
```


在 url 屬性後面，加入虛擬屬性 `due_back_formatted`。


```js
BookInstanceSchema.virtual("due\_back\_formatted").get(function () {
  return moment(this.due_back).format("MMMM Do, YYYY");
});
```


**備註：** 格式化方法可以使用幾乎任何模式顯示日期。moment文檔中，可以找到表示不同日期組件的語法。

更新視圖
----

打開 **/views/bookinstance\_list.pug** ，然後用 `due_back_formatted` 取代 `due_back` 。


```js
      if val.status!='Available'
        //span (Due: #{val.due\_back} )
        span  (Due: #{val.due_back_formatted} )
```


這就是本章節的全部了。如果你訪問側邊欄的 *All book-instances* ，你應該會看到所有的歸還日期都更吸引人了！

下一步
---

* 回到 Express 教學 5: 呈現圖書館資料
* 繼續教學 5 的下一個部分: Author list page and Genre list page challenge (en-US).
作者詳情頁面
======

作者細節頁面，需要呈現指定作者 `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](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page/locallibary_express_author_detail.png)

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

下一步
---

* 回到 Express 教學 5: 呈現圖書館資料
* 繼續教學 5 的最後一個部分: 書本實例詳情頁面與自我挑戰