欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

express框架+bootstrap美化ejs模板實(shí)例分析

 更新時(shí)間：2023年05月16日 09:09:43   作者：Teacher_Tian_2019  
這篇文章主要介紹了express框架+bootstrap美化ejs模板,結(jié)合實(shí)例形式分析了express框架引入bootstrap結(jié)合ejs模版引擎相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下

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，這里我就這樣介紹一下吧。

  1. 首先，在桌面上創(chuàng)建一個(gè)臨時(shí)目錄（叫它trash吧）
  2. 打開(kāi)cmd，進(jìn)入trash目錄。輸入npm install --save bootstrap
    在這里插入圖片描述
    注：小技巧——如果想知道你下載的是哪個(gè)版本的bootstrap，可以輸入npm ls，像下圖這樣找到版本信息。
    在這里插入圖片描述

3、部署css樣式文件

步驟很簡(jiǎn)單，只需要兩步：

  1. 依次在./node_modules/bootstrap/dist/css中，找到文件bootstrap.min.css，并將它復(fù)制到我們的項(xiàng)目目錄的public/stylesheets中。
  2. 其次，打開(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)注。

相關(guān)文章

最新評(píng)論