Home > Web Front-end > JS Tutorial > body text

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

青灯夜游
Release: 2021-08-11 10:21:25
forward
2560 people have browsed it

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.

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

[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('fs');

fs.readdir('G:/pink_code/Node_Study/02',(err,list) => {
    if (!err) {
        console.log(list);
    }
})
Copy after login

Code Output

[ '01_http-helloWorld.js', '02_使用readdir获取指定路径下的所有文件名.js', 'www' ]
Copy after login

Use the template engine in the browser

##1. Install art-template

npm install art-template
Copy after login
Copy after login

2. Introduce art-template through script tag

<script src="./node_modules/art-template/lib/template-web.js"></script>
Copy after login

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>
Copy after login

Using the template engine in Node

1. Install art-template

npm install art-template
Copy after login
Copy after login

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);
Copy after login

Output result

hello NodeJs
Copy after login

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>
Copy after login

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;);
    }
})
Copy after login

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!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template