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

一、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.url
	fs.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.url
	fs.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)
		})
	})
})