node.js中使用ejs渲染數(shù)據(jù)的代碼實現(xiàn)
更新時間：2023年11月11日 16:13:31 作者：萬物得其道者成
這篇文章主要介紹了node.js中使用ejs渲染數(shù)據(jù),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
用ejs模板引擎講面的數(shù)據(jù)渲染到頁面的表格中
[
{"pid":1,"pname":"小米1","price":2888},
{"pid":2,"pname":"小米2","price":3888},
{"pid":3,"pname":"小米3","price":4888},
{"pid":4,"pname":"小米4","price":5888},
{"pid":5,"pname":"小米5","price":6888},
]ejs模板引擎的使用
第一步 ： ejs的安裝 npm i ejs
第二步 ： 導(dǎo)入ejs模塊
第三步 ： 判斷路由 根據(jù)訪問不同的路由 渲染不同的ejs模板引擎
如何渲染ejs模板引擎?
ejs.renderFile( "路徑" , {數(shù)據(jù)} ,(err,data)=>{
} )
代碼實現(xiàn)：
js部分：
const http = require("http")
const url = require("url")
const ejs = require("ejs")
let arr = [
{"pid":1,"pname":"小米1","price":2888},
{"pid":2,"pname":"小米2","price":3888},
{"pid":3,"pname":"小米3","price":4888},
{"pid":4,"pname":"小米4","price":5888},
{"pid":5,"pname":"小米5","price":6888},
]
//創(chuàng)建服務(wù)器
http.createServer((req,res)=>{
//查找路由
let pathname = url.parse(req.url).pathname
if(pathname == "/home"){
//渲染ejs模板引擎
ejs.renderFile("./index.ejs",{arra:arr},(err,data)=>{
res.end(data)
})
}
}).listen(3002,()=>{ //啟動服務(wù)器
console.log("服務(wù)器已經(jīng)啟動")
}) html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellapdding="20" cellspacing="0">
<thead>
<tr>
<td>#</td>
<td>商品名稱</td>
<td>商品價格</td>
</tr>
</thead>
<tbody>
<% arra.forEach(item=>{%>
<tr>
<td><%= item.pid%></td>
<td><%= item.pname%></td>
<td><%= item.price%></td>
</tr>
<%})%>
</tbody>
</table>
</body>
</html>到此這篇關(guān)于node.js中使用ejs渲染數(shù)據(jù)的文章就介紹到這了,更多相關(guān)node.js ejs渲染數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺析nodejs實現(xiàn)Websocket的數(shù)據(jù)接收與發(fā)送
WebSocket是HTML5開始提供的一種瀏覽器與服務(wù)器間進行全雙工通訊的網(wǎng)絡(luò)技術(shù)，本文給大家介紹nodejs實現(xiàn)websocket的數(shù)據(jù)庫接收與發(fā)送，小伙伴們一起學(xué)習(xí)吧2015-11-11
Nodejs進階：核心模塊net入門學(xué)習(xí)與實例講解
本篇文章主要是介紹了Nodejs之NET模塊，net模塊是同樣是nodejs的核心模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
NodeJS使用文件流解決大文件處理的內(nèi)存與時間效率問題
在 NodeJS 中,文件操作是常見的任務(wù)之一,然而,當(dāng)處理大文件時,直接將整個文件加載到內(nèi)存中可能會導(dǎo)致內(nèi)存溢出或性能瓶頸,為了解決這一問題,NodeJS 提供了文件流（Stream）機制,本文將詳細(xì)介紹文件流的優(yōu)點、使用方法、應(yīng)用場景,并探討背壓（Backpressure）的概念2025-01-01
morgan是express默認(rèn)的日志中間件，這篇文章主要介紹了express默認(rèn)日志組件morgan的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Node.js使用mysql2 庫批量更新(Bulk Update)多條數(shù)據(jù)的方案
文章介紹了在Node.js中使用mysql2庫批量更新多條數(shù)據(jù)的三種方法：使用CASEWHEN語句、INSERT...ONDUPLICATEKEYUPDATE和事務(wù)+循環(huán)更新,每種方法都有其適用場景和優(yōu)缺點,建議根據(jù)數(shù)據(jù)量和更新邏輯選擇合適的方法,感興趣的朋友跟隨小編一起看看吧2026-01-01
在現(xiàn)代前端開發(fā)中,Node.js 和 npm 是不可或缺的工具,然而,隨著項目的迭代和依賴包的更新,我們常常會遇到依賴沖突、構(gòu)建失敗等問題,本文將通過一個實際案例,詳細(xì)講解如何解決 Node.js 項目中的依賴問題,包括升級 Node.js 和 npm、替換過時的依賴包、修復(fù)構(gòu)建錯誤等2025-02-02
nodejs對項目下所有空文件夾創(chuàng)建gitkeep的方法
這篇文章主要介紹了nodejs對項目下所有空文件夾創(chuàng)建gitkeep的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Node.js 中的流Stream模塊簡介及如何使用流進行數(shù)據(jù)處理
Node.js中的流（Stream）模塊用于高效處理流式數(shù)據(jù),包括可讀流、可寫流、雙邊流和轉(zhuǎn)換流等,通過`fs.createReadStream`和`.pipe`方法可以方便地讀取文件并寫入控制臺或處理網(wǎng)絡(luò)請求,在實際開發(fā)中,需要注意錯誤處理、資源管理和性能優(yōu)化等問題2025-03-03
這篇文章主要介紹了nodejs的請求路由概述,需要的朋友可以參考下2014-07-07
nodejs更新package.json中的dependencies依賴到最新版本的方法
今天小編就為大家分享一篇nodejs更新package.json中的dependencies依賴到最新版本的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10