模板引擎是什么这里就不过多介绍了,从上面的案例中我们已近手动实现了模板引擎要做的事,处理字符串,更准确地说应该是将数据填充到模板代码这一字符串操作过程我们可以通过模板引擎来完成。
模板引擎有诸多优点,这里不再赘述,我们在使用中感受。比如art-yemplate模板引擎。官网地址:art-yemplate
既然使用了Node.js我们就尽量使用npm来安装,新建一个文件夹code来保存代码:
2.在浏览器中使用art-template <!DOCTYPE html> <html> <head> <title>Demo</title> <mata charset=utf-8> <script type="text/javascript" src="http://www.likecs.com/default/index/url/code/node_modules/art-template/lib/template-web.js"></script> </head> <body> <!--显示位置--> <p></p> <!--模板代码--> <script type="text/html"> 大家好,我叫{{ name }}, 我喜欢{{each hobbies}}{{$value}} {{/each}} </script> <script type="text/javascript"> //数据 var data = { name: '张三', hobbies: ['看书','打游戏','写代码'] }; //使用template方法将数据填充到模板中 var html = template('demo',data); //将模板显示到页面上 window.document.getElementById('show').innerHTML = html; </script> </body> </html>注意几点:
记得引用template-web.js文件
相关格式要求和api查看官网文档即可
模板引擎不关心格式以及内容,只是将{{}}表达式中的值进行数据填充,和我们手动replace处理字符串的操作是一样的。
模板引擎还有其他好处,比如根据语句来处理数据,内部引用等。比我们手动处理字符串要方便很多,算是一个介绍代码工作的工具,且运行速度很快,渲染接近原生js。(有的模板引擎稍慢)
3.在Node.js中使用art-template 我们直接在上面的案例上进行改动即可: var http = require('http'); var fs = require('fs'); var template = require('art-template');//启用art-template模板引擎 var server = http.createServer(); server.listen(8000); console.log('server running'); server.on('request',function(request,response){ var url = request.url; var rootDir = 'D:/Users/Administrator/Desktop/Node/www'+url;//根据请求路径显示 //创建模板代码 var templateStr = ` <h1>{{dir}}的索引</h1> <div> <a href="#"> <span>[上级目录]</span> </a> </div> <table> <thead> <tr> <th>名称</th> <th> 大小 </th> <th> 修改日期 </th> </tr> </thead> <tbody> {{each data}} <tr> <td><a href="#">{{$value}}</a></td> <td>1k</td> <td>2018/11/5 上午10:50:48</td> </tr> {{/each}} </tbody> </table> `; //获取数据 fs.readdir(rootDir,function(err,data){ if(err){ return response.end('404,Not Fond!'); } //使用模板引擎填充数据 var htmStr = template.render(templateStr,{ dir:rootDir, data:data }); response.setHeader('Content-Type','text/html;charset=utf-8'); response.end(htmStr); }); });值得注意的点:
在Node.js中使用require()来加载模板引擎(注意,如果Node的安装目录的下node_modules(默认安装地址)没有安装模板引擎,需要将执行的js放到和模板引擎保存的文件夹下,比如我们之前是新建了code文件夹来保存代码,所以现在需要将执行的js也放在code下才能找到模板)
使用模板引擎的render()方法来处理模板代码(在浏览器在中是template()方法)
在浏览器中是使用id作为参数,在Node.js中直接使用模板代码作为参数即可。
注意模板代码要符合使用的模板引擎的规范。${value}是es6中模板字符串的变量表达式,而{{}}是art-template模板引擎的表达式。
四、案例:留言板需求:使用Node.js实现留言板功能,即在如下页面输入评论,首页显示评论,相关html和css代码如下:
1.准备工作目录结构如下: