博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解node的模板引擎
阅读量:5142 次
发布时间:2019-06-13

本文共 1778 字,大约阅读时间需要 5 分钟。

1.1.3:分析模板引擎

   1.什么是模板引擎

    模板引擎是一个将页面模板和要显示的数据结合生成HTML页面的工具

    可以这么理解,如果说Express中的路由控制方法是MVC中的控制器的话,那么模板就是MVC的视图。

    什么是ejs?

    ejs是模板引擎的一种,也是在1.1.2节中用到的模板引擎,因为它使用起来非常简单,而且与express集成良好。

   2.使用模板引擎

     我在之前讲过通过以下两行代码设置模板文件的存储位置和使用的模板引擎:

app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs'); 

注意:通过express -e blog,我们只是初始化了一个使用ejs模板引擎的工程而已,比如node_modules下添加了ejs模块,在views有index.ejs。这并不是说强制该项目只能使用ejs,而不能使用其它模板引擎如jade,真正指定使用哪个模板引擎的是:

app.use('view engine','ejs');

  在1.1.2节的routes/index.js中通过调用res.render()渲染模块,并将其产生的页面返回给客户端。它接收两个参数,第一个参数是模板名称,即views目录下的模板文件名,扩展名.ejs可选;第二个参数是传递给模板的数据对象,用于模板翻译。

       打开views/index.ejs,内容如下:

      <%= title %>    

<%= title %>

Welcome to <%= title %>

  当我们res.render("index",{title:"木人子韦"});时,模板引擎会把<%=title%>替换成“木人子韦”,然后把替换后的页面显示给用户。

       渲染后生成的页面代码为:

      木人子韦    

木人子韦

Welcome to 木人子韦

注意:通过app.use(express.static(path.join(__dirname, 'public')));将css等静态文件的根目录设置为了public文件夹,所以在上面代码中的

href='/stylesheets/style.css'

就相当于

href='public/stylesheets/style.css'

       ejs的标签系统非常简单,有以下标签:

  • <% '脚本' 标签,用于流程控制,无输出。
  • <%_ 删除其前面的空格符
  • <%= 输出数据到模板(输出是转义 HTML 标签)
  • <%- 输出非转义的数据到模板
  • <%# 注释标签,不执行、不输出内容
  • <%% 输出字符串 '<%'
  • %> 一般结束标签
  • -%> 删除紧随其后的换行符
  • _%> 将结束标签后面的空格符删除

注意:当变量code为普通字符串时,<%=code%>和<%-code%>没有区别。当code为<div>从删库到跑路</div>这样的字符串时,<%=code%>会原样输出<div>从删库到跑路</div>,而<%-code%>则会显示  从删库到跑路  字符串。

      感受一下标签<% code %>,其它的标签找官方文档。下面模仿ejs的官方实例:

实例

数据

user:{name:"木人子韦"}

模板

<% if (user) { %>  

<%= user.name %>

<% } %>

渲染后的代码

木人子韦

  

 3.页面布局

     在Express 3.x中不再使用layout.ejs进行页面布局,转而使用include来替代。

include的简单使用方法如下:

     index.ejs

<%- include top%>murenziwei<%- include bottom%>

  top.ejs

I am top.ejs

 bottom.ejs

I am bottom.ejs

 最终,index.ejs会显示

I am top.ejsmurenziweiI am bottom.ejs

 在1.1.3节中,我们学习了模板引擎的相关知识。

 

转载于:https://www.cnblogs.com/murenziwei/p/10159590.html

你可能感兴趣的文章
JavaScript面向对象初探——封装和继承
查看>>
L2-001 紧急救援 (dijkstra+dfs回溯路径)
查看>>
javascript 无限分类
查看>>
spring IOC装配Bean(注解方式)
查看>>
[面试算法题]有序列表删除节点-leetcode学习之旅(4)
查看>>
SpringBoot系列五:SpringBoot错误处理(数据验证、处理错误页、全局异常)
查看>>
kubernetes_book
查看>>
OpenFire 的安装和配置
查看>>
ZJOI2018游记Round1
查看>>
侧边栏广告和回到顶部
查看>>
https://blog.csdn.net/u012106306/article/details/80760744
查看>>
ios应用版本号设置规则
查看>>
海上孤独的帆
查看>>
error: more than one device and emulator 问题解决
查看>>
Java基础:容器
查看>>
YUV摘要格式
查看>>
【方法2】删除Map中Value反复的记录,而且仅仅保留Key最小的那条记录
查看>>
C# CheckedListBox控件的使用方法
查看>>
【HDOJ】2007平方和与立方和
查看>>
SharePoint自定义程序页面部署 不用重启IIS
查看>>