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