二、搭建Apache服务器 & 模板引擎-白红宇的个人博客

发布日期：2021-05-08 02:36:03 浏览次数：26 分类：原创文章

本文共 3182 字，大约阅读时间需要 10 分钟。

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

在这里插入图片描述

上一篇：三、案例：留言板 & url.parse()

下一篇：一、node.js搭建最简单的服务器

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

1. 案例：搭建简单的Apache服务器

2. 模板引擎的基本使用

2.1 在浏览器中使用art-template模板引擎

2.2 在node中使用art-template模板引擎

3. Apache案例升级版：加入模板引擎

发表评论

最新留言

关于作者

推荐文章