服务端渲染 --- 模板引擎

一、Apach 替换页面的内容
template.html

<table><thead><tr><th onclick="javascript;sortTable(0);">名称</th><th class="detailsColumn" onclick="javascript:sortTable(1);">大小</th><th class="detailsColumn" onclick="javascript:sortTable(2);">修改日期</th></tr></thead><tbody id="tbody">^_^<!-- {{ each files }}<tr><td data-value="apple"><a class="icon dir" href="/D:/Movie/www/apple/">${item}</a></td><td class="detailsClounm" data-value="0"></td><td class="detailsCloumn" data-value="1509589967">2021/09/28 下午15：53：45<td><tr>{{ each }}--></tbody>
</table>

var http = require('http')
var fs = require('fs')
var template = require('art-template')var server = http.createServer()var wwwDir = 'D:/Movie/www'server.on('request', function(req, res) {var url = req.urlfs.readFile('./template.html', function(err, data) {if (err) {return res.end('404 Not Found.')}// 1、如何得到 wwwDir 目录列表中的文件名和目录名// fs.readdir// 2、如何将得到的文件名称和目录名替换到template.html中// 2.1 在 template.html 中需要替换的位置预留一个特殊的标记// 2.2 根据 files 生成需要的 HTML 内容fs.readdir(wwwDir, function(err, files){if (err) {return res.end('Can not find wwwDir.')}// 2.1 生成需要替换的内容var content = ''files.forEach(function(item){content += `<tr><td data-value="apple/"><a class="icon dir" href="/D:/Movie/www/apple/">${item}</td><td class="detailsColumn" data-value="0"></td><td class="detailsColumn" data-value="1509589967">2021/09/28 下午15：33：45</td></tr>`})// 2.3 替换data = data.toString()data = data.replace('^_^', content)// 3. 发送解析替换过的响应数据res.send(data)})})
})

二、用模板引擎替换页面的内容
template.html

<table><thead><tr><th onclick="javascript;sortTable(0);">名称</th><th class="detailsColumn" onclick="javascript:sortTable(1);">大小</th><th class="detailsColumn" onclick="javascript:sortTable(2);">修改日期</th></tr></thead><tbody id="tbody">{{ each files }}<tr><td data-value="apple"><a class="icon dir" href="/D:/Movie/www/apple/">{{ $value }}</a></td><td class="detailsClounm" data-value="0"></td><td class="detailsCloumn" data-value="1509589967">2021/09/28 下午15：53：45<td><tr>{{ each }}</tbody>
</table>

var http = require('http')
var fs = require('fs')
var template = require('art-template')var server = http.createServer()var wwwDir = 'D:/Movie/www'server.on('request', function(req, res) {var url = req.urlfs.readFile('./template.html', function(err, data) {if (err) {return res.end('404 Not Found.')}// 1、如何得到 wwwDir 目录列表中的文件名和目录名// fs.readdir// 2、如何将得到的文件名称和目录名替换到template.html中// 2.1 在 template.html 中需要替换的位置预留一个特殊的标记// 2.2 根据 files 生成需要的 HTML 内容fs.readdir(wwwDir, function(err, files){if (err) {return res.end('Can not find wwwDir.')}var htmlStr = template.render(data.toString, {title: 'haha'files: files})// 3. 发送解析替换过的响应数据res.send(htmlStr)})})
})