2023年6月29日发(作者：)

模板引擎在浏览器和服务器的渲染⽅法，及他们的区别（art-template）art-template模板引擎在浏览器中使⽤模板引擎（art-template） 在node中使⽤模板引擎（art-template）安装：npm install art-template该命令在哪执⾏就会把包下载到哪⾥。默认会下载到 node_modules ⽬录中node_modules 不要改，也不⽀持改。在 Node 中使⽤ art-template 模板引擎1. 安装 npm install art-template2. 在需要使⽤的⽂件模块中加载 art-template只需要使⽤ require ⽅法加载就可以了：require(‘art-template’)参数中的 art-template 就是你下载的包的名字也就是说你 isntall 的名字是什么，则你 require 中的就是什么3. 查⽂档，使⽤模板引擎的 template = require('art-template')var fs = require('fs')le('./', function (err, data) { if (err) { return ('读取⽂件失败了') } // 默认读取到的 data 是⼆进制数据 // ⽽模板引擎的 render ⽅法需要接收的是字符串 // 所以我们在这⾥需要把 data ⼆进制数据转为 字符串 才可以给模板引擎使⽤ var ret = (ng(), { name: 'Jack', age: 18, province: '北京市', hobbies: [ '写代码', '唱歌', '打游戏' ], title: '个⼈信息' }) (ret)})

⼤家好，我叫：{{ name }}

我今年 {{ age }} 岁了

我来⾃ {{ province }}

我喜欢：{{each hobbies}} {{ $value }} {{/each}}

在Express中配置使⽤express-art-template模板引擎1. 安装npm install --save art-template//普通的npm install --save express-art-template

//搭配express使⽤的模板引擎2. 配置配置使⽤ art-template 模板引擎第⼀个参数，表⽰，当渲染以 .art 结尾的⽂件的时候，使⽤ art-template 模板引擎//第⼀个参数⽤来配置视图的后缀名，这⾥是art，则你存储在views⽬录中的模板⽂件必须是//('art',require('express-art-template'))//这⾥我们把art改为('html', require('express-art-template'))3. 使⽤Express 为 Response 相应对象提供了⼀个⽅法：renderrender ⽅法默认是不可以使⽤，但是如果配置了模板引擎就可以使⽤了(‘html模板名’, {模板数据})第⼀个参数不能写路径，默认会去项⽬中的 views ⽬录查找该模板⽂件也就是说 Express 有⼀个约定：开发⼈员把所有的视图⽂件都放到 views ⽬录中('/', function (req, res) { ('', { title: 'hello world' })})如果想要修改默认的

views视图渲染存储⽬录，可以// 注意：第⼀个参数views千万不要写错('views', ⽬录路径)⼦模板 include1. 语法{{include './'}}{{include './' data}}2. 案例 {{ include './' }}

中间内容

{{ include './' }}

头部

footer

尾部

运⾏后显⽰头部中间内容尾部模板继承1. 语法{{extend './'}}{{block 'head'}} ... {{/block}}2. 案例

{{ block 'css' }}{{ /block }}

{{ include './' }} {{ block 'content' }}

默认内容

{{ /block }} {{ include './' }}

{{ block 'script' }}{{ /block }}

{{extend './'}}{{ block 'css' }}{{ /block }}{{ block 'content' }}

{{ /block }}{{ block 'script' }} {{ /block }}

头部

footer

尾部

模板继承和⼦模板使⽤模板继承和⼦模板，可以省略⼀些公共内容，减少代码量。服务端渲染和客户端渲染的区别客户端渲染不需要重新加载页⾯，所以速度上较快。客户端渲染不利于 SEO 搜索引擎优化服务端渲染是可以被爬⾍抓取到的，客户端异步渲染是很难被爬⾍抓取到的所以你会发现真正的⽹站既不是纯异步也不是纯服务端渲染出来的，⽽是两者结合来做的服务端渲染可以在⽹页源代码中看到渲染后的代码，⽽客户端渲染的看不到，只能点击查看元素中看到。例如京东的商品列表就采⽤的是服务端渲染，⽬的了为了 SEO 搜索引擎优化⽽它的商品评论列表为了⽤户体验，⽽且也不需要 SEO 优化，所以采⽤是客户端渲染