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