4.3模板引擎
- 不关心内容，只关心自己认识的模板标记语法，例如{{key_word}}，该语法称为mustache语法
- 最早诞生于服务器领域，后来发展到前端
4.3.1 安装
模板安装（在cmd或powershell中运行）
npm install art-template
4.3.2 浏览器中使用模板引擎（1.html）
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>在浏览器中使用art-template</title>
</head>
<body>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tp1">
大家好 我叫{{ name }}
我今年{{age}}岁了
我来自{{team}}队
</script>
<script>
var ret=template('tp1',{
name:'Kobe Bryant',
age:41,
team:'Lakers'
})
console.log(ret)
</script>
</body>
在浏览器中运行后，查看console.log显示以下内容：
4.3.3node中使用模板引擎
var template = require('art-template')//''中的内容即加载的包的名字
var res = template.render(`
大家好 我叫{{ name }}
我今年{{age}}岁了
我来自{{team}}队 `, {
name:'Kobe Bryant',
age:41,
team:'lakers'
})
console.log(res)
在cmd中运行，返回下述内容：
大家好 我叫Kobe Bryant
我今年41岁了
我来自lakers队
4.3.4node中使用模板引擎建立服务器
var template = require('art-template')//''中的内容即加载的包的名字
var fs = require('fs')
var http = require('http')
var server = http.createServer()
var source ='G:/code/nodejs/'
server.on('request', function (req, res) {
var url = req.url
fs.readFile(source+'template-apache.html',function(err,data){
if (err){
return res.end('404 not found')
}
fs.readdir(source,function(err,files){
if (err){
return res.end('can not find dir')
}
//这里只需要使用模板引擎解析替换data中的模板字符即可
//数据就是files
//把template.html中做相应修改
var htmlStr = template.render(data.toString(), {
files: files
})
res.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(htmlStr)
})
})
console.log('收到请求', req.url)
})
//绑定端口号，启动服务器
server.listen(3000, function () {
console.log('服务器启动成功，可在浏览器通过127.0.0.1：3000 本机回送IP访问')
})
html文件代码：仅注出关键部分，其余可以通过浏览器生成
<tbody id="tbody">
{{each files}}
<tr>
<td data-value="apple/"><a class="icon dir" href="/D:/Movie/www/apple/">{{$value}}/</a></td>
<td class="detailsColumn" data-value="0"></td>
<td class="detailsColumn" data-value="1509589967">2017/11/2 上午10:32:47</td>
</tr>
{{/each}}
</tbody>
可以做到，扫描储存在source路径的内容，动态生成索引文件。
4.3.5 客户端渲染和服务端渲染
- 服务端渲染
- 在服务端使用模板引擎
- 与客户端一次通信即可
- 对服务器的能力提出要求
- 客户端渲染
- 第一次请求先解析出一部份，再向服务器请求第二次。
- 区别
- 客户端渲染不利于SEO搜索引擎优化
- 服务端渲染易被爬虫爬到，例如京东商品列表，就应使用服务端渲染
- 客户端渲染速度较快，例如评论区等可以用，优化用户体验
4.4留言本案例
我的服务器开放了 /public/ 目录所以这里的请求路径都写成：/public/xxx/ 在这里就是 url 根路径的意思。浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上。不要再想文件路径了，把所有的路径都想象成 url 地址
4.4.1处理网站的静态资源
浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析，当在解析的过程中，如果发现：
-
link
-
script
-
img
-
iframe
-
video
-
audio
等带有 src 或者 href（link） 属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。
注意：在服务端中，文件中的路径就不要去写相对路径了。因为这个时候所有的资源都是通过 url 标识来获取的。
为方便静态资源管理，将静态资源放在public目录下。
4.4.2如何通过服务器让客户端重定向
- 状态码设置为302临时重定向（statusCode
- 301永久重定向，浏览器会记住，下一次直接跳转
- 302临时重定向，浏览器不记忆，下一次一样先发给服务端，服务端指定
- 在响应头中通过location告诉客户端往哪里重定向（setHeader
如果客户端发现收到服务器的状态码是302就会自动去响应头中找location，然后对该地址发起新的请求。也即客户端自动跳转
备注
-
采用无分号代码风格时，注意一行以以下三种情况开头时：
- （
- [
- ` //反引号，键盘1左边那个东西。EcmaScript 6新增的一种字符串包裹模式，支持换行和拼接变量
在前面补上一个分号，避免解析错误
