当前位置: 首页 > 后端技术 > Node.js

杂记node视图模板引擎的选择

时间:2023-04-03 19:47:04 Node.js

node开发,在前端模板引擎的使用历史上,试过ejs,先后用了一年jade,后来又用了swig。在使用jade的过程中,我还是没能适应它过于灵活的缩进语法,没能适应它与html标签语法偏差比较大的问题。我在写玉牌标签的缩进和嵌套的时候,经常会出错,然后我要一层一层的检查。代码缩进只是为了直观,在jade中是一种语法。用它来写视图很不舒服。.后来开始找其他的模板,希望能像写asp.netMVC的cshtml视图文件一样,大致保留html标签的样子,只是在注入数据的时候加入程序控制,和HTML混合。后来又考虑了ejs和swig。总的来说,ejs比swig强,排名也高很多(ejs是TJ创建的,有自己的粉丝群)。我的简单需求还好:保持基本的html标签语法,直观支持母版页布局,划分代码区支持简单的条件判断,轻循环。小项目,没遇到什么坑。下面简单记录几个swig常用的功能点。使用母版页母版页一般会规划页面的整体区域,比如顶部侧边栏、侧边栏等。新建一个layout.html,简单的给母版页建个架子,通过{%block[setanamethere]%}{%endblock%}指定子页的填充区域例子:{%blocktitle%}这里是给引用页面添加标题的输入区域。子页面设置标题后会被覆盖{%endblock%}<hr/><p>下面是另一个可以添加内容的区域</p>{%blockfooter%}{%endblock%}</body>{%blockscripts%}{%endblock%}</html>然后再新建一个child.html页面,应用masterpage,并填充相应区域,示例如下:{%extends'./layout.html'%}{%blocktitle%}我是标题,我会填到母版页的标题块{%endblock%}{%blockcontent%}<p>我会填到母版页的内容块</p>{%endblock%}{%blockfooter%}<p>我将填充母版页的页脚块</p>{%endblock%}{%blockscripts%}{%endblock%}使用swig渲染child.html,结果如下所示。根据结果??来分析母版页的使用情况,应该可以很直观的了解注入数据的使用情况。假设在渲染页面之前注入的数据是{name:'ni.ke',age:18}in传入的数据对象的name属性可以通过{{name}}语法渲染到页面上。判断循环{%ifvalue%}<p>当值为真时我会加载</p>{%endif%}{%foriteminlist%}<p>{{item.value}}</p>{%endfor%}备注如果你使用的是express前端框架,可以直接使用swig官方包。如果使用Koa,可以使用tj写的co-views模块来辅助。不仅支持swig,还支持jade、ejs等模板引擎。</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇:<a title="nvm版本管理" href="/houduanjishu/241773.html">nvm版本管理</a> </div> <div class="prev">下一篇:<a title="开源项目Spartacus的git分支使用规范" href="/houduanjishu/241775.html">开源项目Spartacus的git分支使用规范</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>杂记node视图模板引擎的选择相关文章</code></div> <ul> <li><a href="/shujuyingyong/281994.html" target="_blank" title="SQL Server中如何修改视图的定义和属性">SQL Server中如何修改视图的定义和属性</a></li> <li><a href="/shujuyingyong/281809.html" target="_blank" title="SQL Server的数据结构简介:表、索引和视图">SQL Server的数据结构简介:表、索引和视图</a></li> <li><a href="/shujuyingyong/281769.html" target="_blank" title="如何利用SQL Server的动态管理视图查看执行过的语句">如何利用SQL Server的动态管理视图查看执行过的语句</a></li> <li><a href="/shujuyingyong/281703.html" target="_blank" title="SQLServer数据库中如何创建表、视图和存储过程">SQLServer数据库中如何创建表、视图和存储过程</a></li> <li><a href="/shujuyingyong/281653.html" target="_blank" title="如何利用SQL Server的动态管理视图查看正在执行的SQ">如何利用SQL Server的动态管理视图查看正在执行的SQ</a></li> <li><a href="/shujuyingyong/281533.html" target="_blank" title="SQL Server视图的作用和优势">SQL Server视图的作用和优势</a></li> <li><a href="/shujuyingyong/281297.html" target="_blank" title="如何在SQL Server中查看和修改视图的定义语句">如何在SQL Server中查看和修改视图的定义语句</a></li> <li><a href="/shujuyingyong/281139.html" target="_blank" title="如何利用sqlserver的动态管理视图查看sql执行记录">如何利用sqlserver的动态管理视图查看sql执行记录</a></li> <li><a href="/shujuyingyong/281131.html" target="_blank" title="SQL Server中如何使用CREATE VIEW语句创建">SQL Server中如何使用CREATE VIEW语句创建</a></li> <li><a href="/shujuyingyong/281006.html" target="_blank" title="如何使用SQL语句删除SQL Server中的视图">如何使用SQL语句删除SQL Server中的视图</a></li> <li><a href="/shujuyingyong/280906.html" target="_blank" title="如何在SQL Server中使用视图执行存储过程">如何在SQL Server中使用视图执行存储过程</a></li> <li><a href="/shujuyingyong/280890.html" target="_blank" title="如何使用SQL Server访问Oracle数据库中的视图">如何使用SQL Server访问Oracle数据库中的视图</a></li> <li><a href="/shujuyingyong/280450.html" target="_blank" title="如何使用SQL Server创建和管理视图">如何使用SQL Server创建和管理视图</a></li> <li><a href="/shujuyingyong/280432.html" target="_blank" title="SQL Server视图的创建和使用方法,以及是否需要重启数">SQL Server视图的创建和使用方法,以及是否需要重启数</a></li> <li><a href="/bianchengyuyan/275323.html" target="_blank" title="在ASP.NETMVC3中使用视图模型分享">在ASP.NETMVC3中使用视图模型分享</a></li> <li><a href="/bianchengyuyan/274683.html" target="_blank" title="从WindowsPhone8.1通用应用程序中的视图模型导航">从WindowsPhone8.1通用应用程序中的视图模型导航</a></li> <li><a href="/bianchengyuyan/274460.html" target="_blank" title="具有Bindable属性的自定义视图在Xamarin.For">具有Bindable属性的自定义视图在Xamarin.For</a></li> <li><a href="/bianchengyuyan/274406.html" target="_blank" title="在MVC3中将海量列表传递给视图分享">在MVC3中将海量列表传递给视图分享</a></li> <li><a href="/bianchengyuyan/274140.html" target="_blank" title="如何创建属于一个Tab页的一组控件的全屏视图Share">如何创建属于一个Tab页的一组控件的全屏视图Share</a></li> <li><a href="/bianchengyuyan/274130.html" target="_blank" title="TreeView+Logo分享">TreeView+Logo分享</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/369814.html" title="美国DARPA开发军用可穿戴视图增强显示器" target="_blank">美国DARPA开发军用可穿戴视图增强显示器</a></li> <li><em>2</em><a href="/kejifunen/367145.html" title="Rushcrm:CRM系统如何定制首页视图" target="_blank">Rushcrm:CRM系统如何定制首页视图</a></li> <li><em>3</em><a href="/kejifunen/360138.html" title="微软推出 HoloLens 观众视图,看看 MR 的世界" target="_blank">微软推出 HoloLens 观众视图,看看 MR 的世界</a></li> <li><em>4</em><a href="/kejifunen/356632.html" title="三星墙电视图片欣赏!把如画的日月星辰关起来挂在家里" target="_blank">三星墙电视图片欣赏!把如画的日月星辰关起来挂在家里</a></li> <li><em>5</em><a href="/kejifunen/349232.html" title="谷歌推出VR视图,轻松自己制作全景图片和视频 " target="_blank">谷歌推出VR视图,轻松自己制作全景图片和视频 </a></li> <li><em>6</em><a href="/jishutupo/318534.html" title="debug node.js应用程序的最佳方法是什么" target="_blank">debug node.js应用程序的最佳方法是什么</a></li> <li><em>7</em><a href="/jishutupo/318530.html" title="如何使用node.js创建Web API?" target="_blank">如何使用node.js创建Web API?</a></li> <li><em>8</em><a href="/jishutupo/318440.html" title="在容器化环境中使用node.js的最佳方法是什么" target="_blank">在容器化环境中使用node.js的最佳方法是什么</a></li> <li><em>9</em><a href="/jishutupo/318400.html" title="在.NET C#中实现模型视图控制器模式" target="_blank">在.NET C#中实现模型视图控制器模式</a></li> <li><em>10</em><a href="/jishutupo/318399.html" title="我如何一起使用node.js和mongodb?" target="_blank">我如何一起使用node.js和mongodb?</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/jishutupo/318381.html" title="针对软件开发人员的node.js面试问题的提示" target="_blank">针对软件开发人员的node.js面试问题的提示</a></li> <li><em>2</em><a href="/shumafazhan/299309.html" title="微软正在考虑为新的 Windows 10 Skype 应用程" target="_blank">微软正在考虑为新的 Windows 10 Skype 应用程</a></li> <li><em>3</em><a href="/shujuyingyong/288218.html" title="Nodejs如何连接mongodb并渲染网页" target="_blank">Nodejs如何连接mongodb并渲染网页</a></li> <li><em>4</em><a href="/shujuyingyong/288162.html" title="Node.js如何使用MongoDB 0进行数据库操作" target="_blank">Node.js如何使用MongoDB 0进行数据库操作</a></li> <li><em>5</em><a href="/shujuyingyong/288137.html" title="如何解决node版本导致的mongodb连接27017端口失" target="_blank">如何解决node版本导致的mongodb连接27017端口失</a></li> <li><em>6</em><a href="/shujuyingyong/288122.html" title="MongoDB和JavaScript的完美搭配:如何使用No" target="_blank">MongoDB和JavaScript的完美搭配:如何使用No</a></li> <li><em>7</em><a href="/shujuyingyong/288121.html" title="Node.js如何实现高效稳定的MongoDB数据库连接" target="_blank">Node.js如何实现高效稳定的MongoDB数据库连接</a></li> <li><em>8</em><a href="/shujuyingyong/288042.html" title="如何使用Node.js将Excel数据导入MongoDB数据" target="_blank">如何使用Node.js将Excel数据导入MongoDB数据</a></li> <li><em>9</em><a href="/shujuyingyong/287997.html" title="Node.js如何连接和操作MongoDB数据库" target="_blank">Node.js如何连接和操作MongoDB数据库</a></li> <li><em>10</em><a href="/shujuyingyong/287595.html" title="Node.js和MongoDB如何实现高效的数据库连接池管理" target="_blank">Node.js和MongoDB如何实现高效的数据库连接池管理</a></li> <li><em>11</em><a href="/shujuyingyong/287585.html" title="Node.js连接MongoDB时遇到的常见问题和解决方法" target="_blank">Node.js连接MongoDB时遇到的常见问题和解决方法</a></li> <li><em>12</em><a href="/shujuyingyong/287350.html" title="Nodejs如何使用Mongoose库连接和操作MongoD" target="_blank">Nodejs如何使用Mongoose库连接和操作MongoD</a></li> <li><em>13</em><a href="/shujuyingyong/287201.html" title="Node.js连接MongoDB的常见问题和解决方法" target="_blank">Node.js连接MongoDB的常见问题和解决方法</a></li> <li><em>14</em><a href="/shujuyingyong/287148.html" title="Nodejs mongodb 封装的方法和优势" target="_blank">Nodejs mongodb 封装的方法和优势</a></li> <li><em>15</em><a href="/shujuyingyong/287061.html" title="Node.js如何使用MongoDB驱动程序实现数据库操作" target="_blank">Node.js如何使用MongoDB驱动程序实现数据库操作</a></li> <li><em>16</em><a href="/shujuyingyong/286801.html" title="MongoDB JavaScript查询入门:如何使用Mon" target="_blank">MongoDB JavaScript查询入门:如何使用Mon</a></li> <li><em>17</em><a href="/shujuyingyong/286618.html" title="MongoDB项目实战:如何使用Node.js和Expres" target="_blank">MongoDB项目实战:如何使用Node.js和Expres</a></li> <li><em>18</em><a href="/shujuyingyong/286411.html" title="Nodejs和MongoDB的优势与局限" target="_blank">Nodejs和MongoDB的优势与局限</a></li> <li><em>19</em><a href="/shujuyingyong/282077.html" title="SQL Server视图的创建、修改和删除" target="_blank">SQL Server视图的创建、修改和删除</a></li> <li><em>20</em><a href="/shujuyingyong/282021.html" title="如何在SQL Server中修改视图数据" target="_blank">如何在SQL Server中修改视图数据</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。 如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>