express框架+bootstrap美化ejs模板實例分析
更新時間：2023年05月16日 09:09:43 作者：Teacher_Tian_2019
這篇文章主要介紹了express框架+bootstrap美化ejs模板,結(jié)合實例形式分析了express框架引入bootstrap結(jié)合ejs模版引擎相關(guān)操作技巧與注意事項,需要的朋友可以參考下
1、前言
上節(jié)express框架通過ejs模板渲染輸出頁面 一文中說到，.ejs文件中可以寫html代碼，但最終實現(xiàn)的頁面并不是很漂亮，我們還需要額外的寫一些樣式來修飾一下。此處，我決定使用bootstrap來美化那張成績單網(wǎng)頁。
2、下載bootstrap
我經(jīng)常下載前端資源的方式是通過npm，這里我就這樣介紹一下吧。
- 首先，在桌面上創(chuàng)建一個臨時目錄（叫它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引入進去。
以上操作完成之后，代碼內(nèi)容是這樣的：
注：bootstrap樣式的使用很簡單，上圖中，我只在table標簽上添加了class="table"屬性，就完成了樣式的優(yōu)化。table樣式的優(yōu)化手段，您可以訪問官方doc自己嘗試
4、驗證
訪問鏈接http://localhost:3000/system，若看到表格已經(jīng)有了明顯變化，說明我們的學習任務(wù)完成了。
5、寫在最后
以樣式文件引入來講靜態(tài)資源的引入，是比較容易闡述的。初學者可以舉一返三，將js文件引入到public/javascripts目錄下，完成一些web頁的功能。
說到成績信息，應(yīng)該屬于被限制訪問的內(nèi)容，有權(quán)限的用戶才可以查詢。所以，我們要完成一個系統(tǒng)登錄的操作，確保信息被授權(quán)的用戶（即張三本人）訪問。所以下一節(jié)中，我將會介紹用戶認證和session檢查相關(guān)的功能實現(xiàn)，敬請關(guān)注。
您可能感興趣的文章:
- node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能
- node.js平臺下利用cookie實現(xiàn)記住密碼登陸（Express+Ejs+Mysql）
- 零基礎(chǔ)搭建Node.js、Express、Ejs、Mongodb服務(wù)器及應(yīng)用開發(fā)入門
- express框架通過ejs模板渲染輸出頁面實例分析
- Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進行日期格式化的實現(xiàn)方法
- nodejs中的express-jwt的使用解讀
- NodeJS?Express使用ORM模型訪問關(guān)系型數(shù)據(jù)庫流程詳解
- NodeJs Express框架操作MongoDB數(shù)據(jù)庫執(zhí)行方法講解
- NodeJs?Express路由使用流程解析
- NodeJs Express中間件使用流程解析
相關(guān)文章
這篇文章主要介紹了node.js中的dns.getServers方法使用說明,本文介紹了dns.getServers方法說明、語法和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
零基礎(chǔ)之Node.js搭建API服務(wù)器的詳解
今天小編就為大家分享一篇關(guān)于零基礎(chǔ)之Node.js搭建API服務(wù)器的詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
今天小編就為大家分享一篇關(guān)于NodeJS實現(xiàn)同步的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要給大家介紹了如何利用forever和pm2部署node.js項目的相關(guān)資料，文中給出了詳細的介紹和示例代碼供大家參考學習，相信對大家的學習或者工作具有一定的學習價值，需要的朋友們下面隨著小編一起來看看吧。2017-05-05
詳解electron如何攔截網(wǎng)絡(luò)請求并處理響應(yīng)
這篇文章主要為大家詳細介紹了electron如何攔截網(wǎng)絡(luò)請求并處理響應(yīng),文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
身份驗證是Web開發(fā)的重要組成部分,JWT由于其簡單性,安全性和可擴展性,已成為在Web應(yīng)用程序中實現(xiàn)身份驗證的流行方法,在這篇文章中,我將指導你在Node.js應(yīng)用程序中使用MongoDB進行數(shù)據(jù)存儲來實現(xiàn)JWT身份驗證,需要的朋友可以參考下2024-12-12
pnpm zip是pnpm v7.0.0引入的實驗性命令,用于將項目打包成 ZIP 文件,與 pnpm pack 相比,輸出格式為 ZIP 且支持依賴打包,下面就來詳細的介紹一下pnpm zip命令的具體使用,感興趣的可以了解一下2026-06-06
node學習筆記之讀寫文件與開啟第一個web服務(wù)器操作示例
這篇文章主要介紹了node學習筆記之讀寫文件與開啟第一個web服務(wù)器操作,結(jié)合實例形式分析了nodejs文件讀寫及創(chuàng)建web服務(wù)接收request請求與處理相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關(guān)于如何使node也支持從url加載一個module的相關(guān)資料，文中通過示例代碼將實現(xiàn)的方法介紹非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧2018-06-06
node.js連接mongoose數(shù)據(jù)庫方法詳解
之前我們都是通過shell來完成對數(shù)據(jù)庫的各種操作的，在開發(fā)中大部分時候我們都需要通過程序來完成對數(shù)據(jù)庫的操作。而Mongoose就是一個讓我們可以通過Node來操作MongoDB的模塊2022-08-08