[JavaScript知识库] 使用underscore模块的template功能实现对HTML的数据注入+template实现数据注入（后面更新）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 使用underscore模块的template功能实现对HTML的数据注入+template实现数据注入（后面更新） -> 正文阅读

[JavaScript知识库]使用underscore模块的template功能实现对HTML的数据注入+template实现数据注入（后面更新）

使用underscore模块的template功能实现对HTML的数据注入

安装underscore

代码是：npm i underscore

在这里插入图片描述

查看是否安装成功

在这里插入图片描述
server.js文件

var http = require('http');
const fs = require('fs');
var _ = require("underscore");
var server = http.createServer();

server.on('request', function (req, res) {
    var music = {
        Id: 1002,
        title: '梦里水乡',
        singer: '老八秘制小汉堡',
        type: '奥利给'
    }
    const url = req.url;
    if (url === '/show') {
        fs.readFile(__dirname + url + '.html', 'utf-8', function (err, data) {
            if (err) {
                res.end(err.message);
            } else {
                var compiled = _.template(data);//解析执行函数
                var htmlstr = compiled(music);//调用函数，注入数据
                res.end(htmlstr);//显示页面
            }
        })
    } else {
        res.end('404 not found!!!!!!');
    }
});
server.listen(3000, "127.0.0.1", function () {
    console.log("server is listening 127.0.0.1:3000");
});

show.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>歌单</title>
</head>

<body>
    <ul>
        <li>歌曲信息: <%=Id%>
        </li>
        <li>歌曲名称:<%=title%>
        </li>
        <li>歌手:<%=singer%>
        </li>
    </ul>
</body>

</html>