Bagaimana untuk menggunakan enjin templat dalam Nodejs? Bagaimana untuk membuat HTML menggunakan enjin templat?-tutorial js-php.cn

Bagaimana untuk menggunakan enjin templat dalam Nodejs? Bagaimana untuk membuat HTML menggunakan enjin templat?

青灯夜游

Lepaskan： 2021-08-11 10:21:25

ke hadapan

2601 orang telah melayarinya

Artikel ini akan memperkenalkan kepada anda cara menggunakan enjin templat dalam penyemak imbas, cara menggunakan enjin templat dalam Nod dan cara menggunakan enjin templat untuk memaparkan HTML melalui kes.

Bagaimana untuk menggunakan enjin templat dalam Nodejs? Bagaimana untuk membuat HTML menggunakan enjin templat?

[Pembelajaran yang disyorkan: "tutorial nodejs"]

Gunakan readdir untuk mendapatkan semua nama fail di bawah laluan yang ditentukan

Struktur fail

Bagaimana untuk menggunakan enjin templat dalam Nodejs? Bagaimana untuk membuat HTML menggunakan enjin templat?

Kod pelaksanaan

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

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

Salin selepas log masuk

Output kod

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

Salin selepas log masuk

Gunakan enjin templat dalam penyemak imbas

1 >

npm install art-template

Salin selepas log masuk

2 Perkenalkan templat seni melalui tag skrip

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

Salin selepas log masuk

3 sintaks enjin untuk memanggil

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

Salin selepas log masuk

Gunakan enjin templat dalam Node

1. Pasang templat seni

npm install art-template

Salin selepas log masuk

2 Muatkan templat seni

dalam modul yang perlu menggunakan templat enjin

3 Semak dokumentasi dan gunakan API enjin templat

Kes kecil menggunakan enjin templat dalam Node

const template = require(&#39;art-template&#39;);

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

console.log(test);

Salin selepas log masuk

Hasil keluaran

hello NodeJs

Salin selepas log masuk

Kes kecil menggunakan enjin templat untuk memaparkan HTML

Struktur HTML

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

Salin selepas log masuk

Kod nod

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;);
    }
})

Salin selepas log masuk

Mencapai kesan

Bagaimana untuk menggunakan enjin templat dalam Nodejs? Bagaimana untuk membuat HTML menggunakan enjin templat? Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan

! !

Atas ialah kandungan terperinci Bagaimana untuk menggunakan enjin templat dalam Nodejs? Bagaimana untuk membuat HTML menggunakan enjin templat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!