Home > Article > Web Front-end > How to use template engine in Nodejs? How to render HTML using template engine?
This article will introduce to you how to use the template engine in the browser, how to use the template engine in Node, and talk about how to use the template engine to render HTML through cases.
[Recommended study: "nodejs tutorial"]
File structure
Implementation code
const fs = require('fs');
fs.readdir('G:/pink_code/Node_Study/02',(err,list) => {
if (!err) {
console.log(list);
}
})Code Output
[ '01_http-helloWorld.js', '02_使用readdir获取指定路径下的所有文件名.js', 'www' ]
##1. Install art-template
npm install art-template
2. Introduce art-template through script tag
<script src="./node_modules/art-template/lib/template-web.js"></script>
3. Use template engine syntax to call
<script src="./node_modules/art-template/lib/template-web.js"></script>
<script>
const test = template('tpl',{
name: 'China'
});
console.log(test);
</script>
1. Install art-template
npm install art-template
2. Load art-template in the module that needs to use the template engine
3. Check the documentation and use the template engine API
A small case of using template engine in Node
const template = require('art-template');
const test = template.render('hello {{name}}',{
name: 'NodeJs'
})
console.log(test);
Output result
hello NodeJs
HTML structure
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<style>
h1 {
border-bottom: 1px solid #c0c0c0;
margin-bottom: 10px;
padding-bottom: 10px;
white-space: nowrap;
}
table {
border-collapse: collapse;
}
th {
cursor: pointer;
}
td.detailsColumn {
-webkit-padding-start: 2em;
text-align: end;
white-space: nowrap;
}
a.icon {
-webkit-padding-start: 1.5em;
text-decoration: none;
user-select: auto;
}
a.icon:hover {
text-decoration: underline;
}
a.file {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}
a.dir {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}
a.up {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
}
html[dir=rtl] a {
background-position-x: right;
}
#parentDirLinkBox {
margin-bottom: 10px;
padding-bottom: 10px;
}
#listingParsingErrorBox {
border: 1px solid black;
background: #fae691;
padding: 10px;
display: none;
}
</style>
<title id="title">C:\Users\HP\Desktop\共享文件\ 的索引</title>
</head>
<body>
<div id="listingParsingErrorBox">糟糕！Google Chrome无法解读服务器所发送的数据。请<a
href="http://code.google.com/p/chromium/issues/entry">报告错误</a>，并附上<a href="LOCATION">原始列表</a>。</div>
<h1 id="header">C:\Users\HP\Desktop\共享文件\ 的索引</h1>
<div id="parentDirLinkBox" style="display: block;">
<a id="parentDirLink" class="icon up" href="/C:/Users/HP/Desktop/%E5%85%B1%E4%BA%AB%E6%96%87%E4%BB%B6/..">
<span id="parentDirText">[上级目录]</span>
</a>
</div>
<table>
<thead>
<tr id="theader">
<th id="nameColumnHeader" tabindex="0" role="button">名称</th>
<th id="sizeColumnHeader" tabindex="0" role="button">
大小
</th>
<th id="dateColumnHeader" tabindex="0" role="button">
修改日期
</th>
</tr>
</thead>
<tbody id="tbody">
{{each files}}
<tr>
<td data-value="{{$value}}"><a class="icon file" draggable="true" href="{{$value}}">{{$value}}</a>
</td>
<td data-value="193955">189 kB</td>
<td data-value="1627464963">2021/7/28 下午5:36:03</td>
</tr>
{{/each}}
</tbody>
</table>
</body>
</html>
Node Code
const http = require('http');
const template = require('art-template');
const fs = require('fs');
const server = http.createServer();
server.on('request', (req, res) => {
const url = req.url;
// 文件路径
const filePath = 'G:/pink_code/Node_Study/02';
// 获取文件路径下所有的文件名
let listName;
fs.readdir(filePath, (err, list) => {
if (!err) {
listName = list;
}
})
// 读取模板文件内容
fs.readFile('./www/template.html', (err, data) => {
if (!err) {
data = data.toString();
test = template.render(data,{
files: listName
})
res.end(test);
} else {
console.log('读取文件出错', err);
}
});
})
// 监听3000端口
server.listen(3000, (err) => {
if (!err) {
console.log('服务器启动成功！');
}
})
Achieve effect
Introduction to Programming! !
The above is the detailed content of How to use template engine in Nodejs? How to render HTML using template engine?. For more information, please follow other related articles on the PHP Chinese website!
