实现Apache的www目录页
- 要实现
Apache的www目录页，我们首先要读取到目录页文件的名称，然后在利用模板引擎替换掉，最后将替换好的页面渲染到浏览器中
1. 第一个问题出现了，如何获取文件夹里面的目录，即文件名
readdir了解下 (●ˇ∀ˇ●)
- 作用： 读取文件的目录；
- 语法：
fs.readdir('要读取的文件的路径'，function(error, files) {...}),其中回调函数中的error还是错误对象，files是一个数组，里面存放着文件夹的目录信息，即文件名。- 注意：
readdir(...)都是小写的字母
例：
- 首先，创建一个readdir.js文件
**readdir.js**
const fs = require('fs');
fs.readdir('E:/day day up/14Nodejs教程精讲（7天+5天赠送）/www', function(error, files) {
if(error) {
return console.log('404 not found')
}
console.log(files);
})
- 然后在命令行中运行readdir.js文件
PS E:\good good study\NodeJs> node .\readdir.js
[ 'index.html', 'timg.jpg' ]
- 这是www目录中的文件
image.png
2.第二个问题，模板引擎是什么？
模板引擎有很多，这里我们用的是
art-template
-
模板引擎在浏览器端的应用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./art-template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<div>
{{if mark == 0}}
<h1>刘备</h1>
{{else if mark == 1}}
<h1>关羽</h1>
{{else}}
<h1>张飞</h1>
{{/if}}
</div>
</script>
<script>
var data = {
'mark':3
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
总结：在浏览器应用模板引擎，首先引入
art-template.js，然后定义一个模板用<script>包裹，type可以随便写，只要不是type=text/javascript就行，防止被当成js来解析，然后定义一个<script>标签，这里面写的是js
- 模板引擎在服务端的应用
1. 首先，
const template = require(art-template), 这是一个第三方包，所以使用之前要先安装一下，npm install art-template，这里就默认装好了，直接引入了
然后，var htmlStr = template.render('渲染模板'，{渲染的数据}),这样就可以得到渲染之后的字符串了
例：
- 首先，创建一个
template-demo.js文件
**template-demo.js**
const template = require('art-template');
let res = template.render('hello {{name}}', {
name: 'jason'
})
console.log(res);
- 然后，在命令行窗口运行这个文件
PS E:\good good study\NodeJs> node .\template-demo.js
hello jason
2. 如果传入的模板比较多，可以定义一个变量来保存字符串模板
例：
- 首先，将
template-demo.js文件修改一下
**template-demo.js**
const template = require('art-template');
var htmlStr = `
<p>我的名字是 {{name}}</p>
<p>我的年龄是 {{age}}</p>
<p>我的爱好是 {{each hobbies}} {{ $value }} {{/each}}</p>
`
let res = template.render(htmlStr, {
name: 'jason',
age:18,
hobbies: ['睡觉', '吃饭', '打豆豆']
})
console.log(res);
- 然后，在命令行运行
template-demo.js文件
PS E:\good good study\NodeJs> node .\template-demo.js
<p>我的名字是 jason</p>
<p>我的年龄是 18</p>
<p>我的爱好是 睡觉 吃饭 打豆豆 </p>
3. 继续，我们总不能每次都粘贴一大堆字符串吧，这时联系之前学习的读文件操作，就好做了，我们可以将模板定义为一个
html文件，然后读取这个文件，就可以拿到字符串模板，这样就可以渲染了 <(￣︶￣)↗[GO!]
- 首先，创建一个
template.html以及修改之后的template-demo.js
**template.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>我的名字是 {{name}}</p>
<p>我的年龄是 {{age}}</p>
<p>我的爱好是 {{each hobbies}} {{ $value }} {{/each}}</p>
</body>
</html>
**template-demo.js**
const template = require('art-template');
const fs = require('fs');
fs.readFile('./template.html', function(error, data) {
if(error) {
return console.log('not found')
}
let res = template.render(data.toString(), {
name: 'jason',
age:18,
hobbies: ['睡觉', '吃饭', '打豆豆']
})
console.log(res);
})
- 然后，在命令行运行
template-demo.js文件
PS E:\good good study\NodeJs> node .\template-demo.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>我的名字是 jason</p>
<p>我的年龄是 18</p>
<p>我的爱好是 睡觉 吃饭 打豆豆 </p>
</body>
</html>
4. 服务端模板引擎的应用
例：
- 首先，改写
template-demo.js文件，template.html文件不变
**template.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>我的名字是 {{name}}</p>
<p>我的年龄是 {{age}}</p>
<p>我的爱好是 {{each hobbies}} {{ $value }} {{/each}}</p>
</body>
</html>
**template-demo.js**
const http = require('http');
const fs = require('fs');
const template = require('art-template');
let server = http.createServer();
server.on('request', function(request, response) {
var url = request.url;
fs.readFile('./template.html', function(error, data) {
if(error) {
return response.end('404 not found');
}
var htmlStr = template.render(data.toString(), {
name: 'jason',
age: 18,
hobbies: ['吃饭', '睡觉', '打豆豆']
})
response.end(htmlStr);
})
})
server.listen(8080, function() {
console.log('Server is running...')
})
- 然后，在命令行运行
template-demo.js文件
PS E:\good good study\NodeJs> node .\template-demo.js
Server is running...
-
- 接着，在浏览器输入
localhost:8080
image.png
总结： 这就是服务端模板引擎的使用，将模板定义在一个新的文件，把他理解为字符串，然后通过
fs读取这个文件，然后将读取到的数据当作模板，利用模板引擎渲染，最后将渲染之后的字符串返回。
