node.js学习笔记Day2

最新推荐文章于 2022-11-13 10:29:59 发布

cwdben

最新推荐文章于 2022-11-13 10:29:59 发布

阅读量204

点赞数

分类专栏： node.js

本文链接：https://blog.csdn.net/cwdben/article/details/104506569

版权

node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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搜索引擎优化
- 服务端渲染易被爬虫爬到，例如京东商品列表，就应使用服务端渲染
- 客户端渲染速度较快，例如评论区等可以用，优化用户体验