二、搭建Apache服务器模板引擎

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.urlfs.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.urlfs.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...')
})