express框架+bootstrap美化ejs模板實例分析

1、前言

  上節express框架通過ejs模板渲染輸出頁面 一文中說到，.ejs文件中可以寫html代碼，但最終實現的頁面并不是很漂亮，我們還需要額外的寫一些樣式來修飾一下。此處，我決定使用bootstrap來美化那張成績單網頁。

2、下載bootstrap

  我經常下載前端資源的方式是通過npm，這里我就這樣介紹一下吧。

1. 首先，在桌面上創建一個臨時目錄（叫它trash吧）
2. 打開cmd，進入trash目錄。輸入npm install --save bootstrap
   
   注：小技巧——如果想知道你下載的是哪個版本的bootstrap，可以輸入npm ls，像下圖這樣找到版本信息。
   

3、部署css樣式文件

步驟很簡單，只需要兩步：

1. 依次在./node_modules/bootstrap/dist/css中，找到文件bootstrap.min.css，并將它復制到我們的項目目錄的public/stylesheets中。
2. 其次，打開上次我們編輯的views/score.ejs文件，將bootstrap.min.css引入進去。
     以上操作完成之后，代碼內容是這樣的：
   
     注：bootstrap樣式的使用很簡單，上圖中，我只在table標簽上添加了class="table"屬性，就完成了樣式的優化。table樣式的優化手段，您可以訪問官方doc自己嘗試

4、驗證

  訪問鏈接http://localhost:3000/system，若看到表格已經有了明顯變化，說明我們的學習任務完成了。

5、寫在最后

  以樣式文件引入來講靜態資源的引入，是比較容易闡述的。初學者可以舉一返三，將js文件引入到public/javascripts目錄下，完成一些web頁的功能。
  說到成績信息，應該屬于被限制訪問的內容，有權限的用戶才可以查詢。所以，我們要完成一個系統登錄的操作，確保信息被授權的用戶（即張三本人）訪問。所以下一節中，我將會介紹用戶認證和session檢查相關的功能實現，敬請關注。