ExpressJS 模板化

  • 模板化

    Pug是Express的模板引擎。模板引擎用于消除我们的服务器代码与HTML的混乱情况,将字符串疯狂地连接到现有的HTML模板。Pug是一个非常强大的模板引擎,具有多种功能,包括过滤器,包含,继承,插值等。在这方面有很多基础。要将Pug与Express一起使用,我们需要安装它,
    
    npm install --save pug
    
    现在已经安装了Pug,将其设置为您的应用程序的模板引擎。你不需要用“require”将其包含。将以下代码添加到index.js文件。
    
    app.set('view engine', 'pug');
    app.set('views','./views');
    
    现在创建一个名为views的新目录。在其中创建一个名为first_view.pug的文件,然后在其中输入以下数据。
    
    doctype html
    html
       head
          title Hello Pug
       body
          p.greetings#people Hello World!
    
    要运行此页面,请将以下路由添加到您的应用程序-
    
    app.get('/first_template', function(req, res){
       res.render('first_view');
    });
    
    运行此代码后访问“/first_template”路径时,我们在浏览器收到以下HTML响应-
    
    <!DOCTYPE html><html><head><title>Hello Pug</title></head><body><p class="greetings" id="people">Hello World!</p></body></html>
    
    Pug将此外观非常简单的标记转换为html。我们不需要关闭标签,也不需要使用class和id关键字,而只需使用'.'和'#'来定义它们。
    Pug除了简化HTML标记外,还可以做更多的事情。
  • Pug的重要特征

    现在让我们探索Pug的一些重要功能。
    简单标签
    标签根据其缩进进行嵌套。像上面的示例一样,<title>在<head>标记内缩进,因此位于其中。但是<body>标记在同一缩进上,因此它是<head>标记的同级。我们不需要关闭标签,只要Pug在相同或外部缩进级别遇到下一个标签,它就会为我们关闭标签。要将文本放在标签内,我们有3种方法-
    • 空格分隔
    • 
      h1 Welcome to Pug
      
    • 管道文字
    • 
      div
         | To insert multiline text, 
         | You can use the pipe operator.
      
    • 文字块
    • 
      div.
         But that gets tedious if you have a lot of text.
         You can use "." at the end of tag to denote block of text.
         To put tags inside this block, simply enter tag in a new line and 
         indent it accordingly.
      
    注释
    Pug使用与JavaScript(//)相同的语法来创建注释。这些注释将转换为html注释(<!-- 注释 -->)。例如,
    
    //This is a Pug comment
    
    该注释被转换为以下内容。
    
    <!--This is a Pug comment-->
    
    属性
    为了定义属性,我们在括号中使用逗号分隔的属性列表。类和ID属性具有特殊的表示形式。以下代码行涵盖了为给定html标记定义属性,类和ID。
    
    div.container.column.main#division(width = "100", height = "100")
    
    这行代码将转换为以下代码。-
    
    <div class = "container column main" id = "division" width = "100" height = "100"></div>
    
    将值传递给模板
    渲染Pug模板时,实际上可以从路由处理程序中为其传递值,然后可以在模板中使用它。使用以下命令创建一个新的路由处理程序。
    
    var express = require('express');
    var app = express();
    
    app.get('/dynamic_view', function(req, res){
       res.render('dynamic', {
          name: "jc2182", 
          url:"http://www.cainiaoya.com"
       });
    });
    
    app.listen(3000);
    
    然后在views目录中创建一个新的视图文件,名为dynamic.pug,其代码如下:
    
    html
       head
          title=name
       body
          h1=name
          a(href = url) URL
    
    在浏览器中打开localhost:3000/dynamic_view;您应该获得以下输出-
    我们还可以在文本中使用这些传递的变量。为了在标签的文本之间插入传递的变量,我们使用#{variableName}语法。例如,在上面的示例中,如果我们想放置jc2182到greetings中,则可以执行以下操作。
    
    html
       head
          title=name
       body
          h1 Greetings from #{name}
          a(href = url) URL
    
    这种使用值的方法称为插值。上面的代码将显示以下输出。-
    有条件的
    我们也可以使用条件语句和循环结构。考虑以下内容- 如果用户已登录,则页面应显示“Hi,User”,否则,将显示“Login / Sign Up”链接。为此,我们可以定义一个简单的模板,例如-
    
    html
       head
          title Simple template
       body
          if(user)
             h1 Hi, #{user.name}
          else
             a(href = "/sign_up") Sign Up
    
    当使用路线渲染时,我们可以像下面的程序中那样传递对象-
    
    res.render('/dynamic',{
       user: {name: "Ayush", age: "20"}
    });
    
    您将收到一条消息- “Hi,Ayush”。但是,如果我们不传递任何对象或传递没有用户密钥的对象,那么我们将获得一个注册链接。
    包含和组件
    Pug提供了一种非常直观的方式来创建网页组件。例如,如果您看到新闻网站,则带有徽标和类别的标题始终是固定的。无需将其复制到我们创建的每个视图中,而是可以使用include功能。以下示例显示了我们如何使用此功能-使用以下代码创建3个视图-
    页眉
    
    div.header.
       I'm the header for this website.
    
    内容
    
    html
       head
          title Simple template
       body
          include ./header.pug
          h3 I'm the main content
          include ./footer.pug
    
    页脚
    
    div.footer.
       I'm the footer for this website.
    
    为此创建一条路由,如下所示:
    
    var express = require('express');
    var app = express();
    
    app.get('/components', function(req, res){
        res.render('content');
    });
    
    app.listen(3000);
    
    转到localhost:3000/components,您将收到以下输出-
    include也可以用来包含纯文本,css和JavaScript。pug还有更多功能。但是,这些超出了本教程的范围。您可以在Pug进一步探索。