Home > Article > Web Front-end > How to use template engine in Nodejs? How to render HTML using template engine?

How to use template engine in Nodejs? How to render HTML using template engine?

青灯夜游forward: 2021-08-11 10:21:072553browse

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"]

Use readdir to get all file names under the specified path

File structure

How to use template engine in Nodejs? How to render HTML using template engine?

Implementation code

const fs = require(&#39;fs&#39;);

fs.readdir(&#39;G:/pink_code/Node_Study/02&#39;,(err,list) => {
    if (!err) {
        console.log(list);
    }
})

Code Output

[ &#39;01_http-helloWorld.js&#39;, &#39;02_使用readdir获取指定路径下的所有文件名.js&#39;, &#39;www&#39; ]

Use the template engine in the browser

##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(&#39;tpl&#39;,{
        name: &#39;China&#39;
    });
    console.log(test);
</script>

Using the template engine in Node

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(&#39;art-template&#39;);

const test = template.render(&#39;hello {{name}}&#39;,{
    name: &#39;NodeJs&#39;
})

console.log(test);

Output result

hello NodeJs

A small case of using template engine to render HTML

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(&#39;http&#39;);
const template = require(&#39;art-template&#39;);
const fs = require(&#39;fs&#39;);

const server = http.createServer();

server.on(&#39;request&#39;, (req, res) => {
    const url = req.url;

    // 文件路径
    const filePath = &#39;G:/pink_code/Node_Study/02&#39;;
    // 获取文件路径下所有的文件名
    let listName;
    fs.readdir(filePath, (err, list) => {
        if (!err) {
            listName = list;
        }
    })
    // 读取模板文件内容
    fs.readFile(&#39;./www/template.html&#39;, (err, data) => {
        if (!err) {
            data = data.toString();
            test = template.render(data,{
                files: listName
            })
            res.end(test);
        } else {
            console.log(&#39;读取文件出错&#39;, err);
        }
    });

})

// 监听3000端口
server.listen(3000, (err) => {
    if (!err) {
        console.log(&#39;服务器启动成功！&#39;);
    }
})

Achieve effect

How to use template engine in Nodejs? How to render HTML using template engine?

For more programming related knowledge, please Visit:

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!

html

Statement：

This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete

Previous article：Let’s talk about the usage skills of debugger in vscodeNext article：Let’s talk about the usage skills of debugger in vscode

See more

How to use template engine in Nodejs? How to render HTML using template engine?

Use readdir to get all file names under the specified path

Use the template engine in the browser

Using the template engine in Node

A small case of using template engine to render HTML

Related articles