文章詳情頁
express框架+bootstrap美化ejs模板實例分析
瀏覽:105日期:2022-06-10 14:22:55
1、前言
上節express框架通過ejs模板渲染輸出頁面 一文中說到,.ejs文件中可以寫html代碼,但最終實現的頁面并不是很漂亮,我們還需要額外的寫一些樣式來修飾一下。此處,我決定使用bootstrap來美化那張成績單網頁。
2、下載bootstrap
我經常下載前端資源的方式是通過npm,這里我就這樣介紹一下吧。
- 首先,在桌面上創建一個臨時目錄(叫它trash吧)
- 打開cmd,進入trash目錄。輸入
npm install --save bootstrap
注:小技巧——如果想知道你下載的是哪個版本的bootstrap,可以輸入npm ls,像下圖這樣找到版本信息。
3、部署css樣式文件
步驟很簡單,只需要兩步:
- 依次在./node_modules/bootstrap/dist/css中,找到文件bootstrap.min.css,并將它復制到我們的項目目錄的public/stylesheets中。
- 其次,打開上次我們編輯的views/score.ejs文件,將bootstrap.min.css引入進去。
以上操作完成之后,代碼內容是這樣的:
注:bootstrap樣式的使用很簡單,上圖中,我只在table標簽上添加了class="table"屬性,就完成了樣式的優化。table樣式的優化手段,您可以訪問官方doc自己嘗試
4、驗證
訪問鏈接http://localhost:3000/system,若看到表格已經有了明顯變化,說明我們的學習任務完成了。
5、寫在最后
以樣式文件引入來講靜態資源的引入,是比較容易闡述的。初學者可以舉一返三,將js文件引入到public/javascripts目錄下,完成一些web頁的功能。
說到成績信息,應該屬于被限制訪問的內容,有權限的用戶才可以查詢。所以,我們要完成一個系統登錄的操作,確保信息被授權的用戶(即張三本人)訪問。所以下一節中,我將會介紹用戶認證和session檢查相關的功能實現,敬請關注。
標簽:
JavaScript
相關文章:
1. 基于SpringBoot bootstrap.yml配置未生效的解決2. IIS Express 取代 ASP.NET Development Server的配置方法3. bootstrap select2 動態從后臺Ajax動態獲取數據的代碼4. Express框架定制路由實例分析5. express框架通過ejs模板渲染輸出頁面實例分析6. 使用本機IIS?Express開發Asp.Net?Core應用圖文教程7. Vue+express+Socket實現聊天功能8. Django配置Bootstrap, js實現過程詳解9. Django添加bootstrap框架時無法加載靜態文件的解決方式10. Vue+Bootstrap收藏(點贊)功能邏輯與具體實現
排行榜