1. 案例：搭建简单的Apache服务器
var http = require('http')
var fs = require('fs')
var server = http.createServer()
var wwwDir = 'D:\\CWork\\node.js黑马程序员\\study_nodejs\\day02\\code\\www'
server.on('request', function(req, res) {
var url = req.url
fs.readFile('./template.html', function(err, data) {
if (err) {
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 console.log('读取目录不存在')
}
var content = ''
files.forEach(function (item) {
// 在 ES6的 ``字符串中，可以使用${}来引用变量
content += `
<tr>
<td data-value="apple/"><a class="icon dir" href="/D:\\CWork\\node.js黑马程序员\\study_nodejs\\day02\\code\\www">${
item}/</a></td>
<td class="detailsColumn" data-value="0"></td>
<td class="detailsColumn" data-value="1509589967">2017/11/2 上午10:32:47</td>
</tr>
`
})
data = data.toString()
data = data.replace('^_^',content)
res.end(data)
console.log(files)
});
});
})
// 3. 绑定端口号，启动服务
server.listen(3000, function() {
console.log('Server running...')
})
2. 模板引擎的基本使用
需要安装 art-template
cmd中执行命令 npm install art-template --save
2.1 在浏览器中使用art-template模板引擎
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 注意： 在浏览器中需要引用template-web.js文件 -->
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>hello {
{
name }}</p>
<p>我今年{
{
age }}岁了</p>
<p>我喜欢： {
{
each hobbies}} {
{
$value}} {
{
/each}}</p>
</body>
</html>
</script>
<script>
var ret = template('tpl', {
name: 'Jack',
age: 18,
hobbies: [
'写代码',
'玩游戏',
'唱歌'
]
})
console.log(ret)
</script>
</body>
</html>
2.2 在node中使用art-template模板引擎
3. Apache案例升级版：加入模板引擎
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var server = http.createServer()
var wwwDir = 'D:\\CWork\\node.js黑马程序员\\study_nodejs\\day02\\code\\www'
server.on('request', function(req, res) {
var url = req.url
fs.readFile('./template-apache.html', function(err, data) {
if (err) {
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('找不到文件目录')
}
// 这里只需要使用模板引擎解析替换data中的模板字符串就可以了
// 数据就是files
// 然后去你的template.html文件中编写你的模板语法就可以了
var htmlStr = template.render(data.toString(), {
title: '哈蛤',
files: files,
wwwDir: wwwDir
})
res.end(htmlStr)
});
});
});
// 3. 绑定端口号，启动服务
server.listen(3000, function() {
console.log('Server running...')
})
