ExpressJS - 模板

ExpressJS模板 - 从概述，环境，Hello World，路由，HTTP方法，URL构建，中间件，模板，服务静态文件，表单数据，数据库，Cookie，身份验证，会话，RESTful API，脚手架，错误处理，调试开始学习ExpressJS ，最佳实践，资源。

帕格是Express的模板引擎.模板引擎用于通过HTML消除我们的服务器代码的混乱，将字符串与现有的HTML模板串联起来.帕格是一个非常强大的模板引擎，具有多种功能，包括过滤器，包括，继承，插值等.有很多理由可以覆盖.

要使用Pug with Express，我们需要安装它，

npm install --save pug

现在安装了Pug，将其设置为应用的模板引擎.你不需要'要求'它.将以下代码添加到 index.js 文件中.

 app.set('view engine'，'pug ");  app.set('views'，'./views');

现在创建一个名为views的新目录.在里面创建一个名为 first_view.pug 的文件，并在其中输入以下数据.

doctype htmlhtml   head      title = "Hello Pug"   body      p.greetings#people Hello World!

要运行此页面，请将以下路线添加到您的应用中并减去;

app.get('/first_template', function(req, res){   res.render('first_view');});

您将得到输出为 : Hello World！ Pug将这个非常简单的标记转换为html.我们不需要跟踪关闭我们的标签，也不需要使用class和id关键字，而是使用'.'和'＃'来定义它们.以上代码首先转换为 :

         Hello Pug               Hello World!

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注释(<！ - comment - >).例如，

//This is a Pug comment

这个评论转换为以下内容.

属性

要定义属性，我们在括号中使用逗号分隔的属性列表.类和ID属性具有特殊表示.以下代码行包括为给定的html标记定义属性，类和id.

div.container.column.main#division(width = "100", height = "100")

这行代码转换为以下内容. :

将值传递给模板

当我们渲染Pug模板时，我们实际上可以从我们的模板中传递一个值路由处理程序，我们可以在模板中使用它.使用以下内容创建一个新的路由处理程序.

var express = require('express');var app = express();app.get('/dynamic_view', function(req, res){   res.render('dynamic', {      name: "TutorialsPoint",       url:"http://www.IT屋.com"   });});app.listen(3000);

并在views目录中创建一个名为 dynamic.pug 的新视图文件，其中包含以下代码 :

html   head      title=name   body      h1=name      a(href = url) URL

在浏览器中打开localhost:3000/dynamic_view;你应该得到以下输出 :

模板中的变量

我们也可以在文本中使用这些传递的变量.要在标记文本之间插入传递的变量，我们使用＃{variableName} 语法.例如，在上面的例子中，如果我们想从TutorialsPoint中提出问候语，那么我们就可以完成以下操作.

html   head      title = name   body      h1 Greetings from #{name}      a(href = url) URL

这种使用值的方法称为插值.上面的代码将显示以下输出. :

Templating Inter

条件

我们也可以使用条件语句和循环结构.

考虑以下 :

如果用户已登录，则页面应显示"嗨，用户"，如果没有，则"登录/注册"链接.为实现这一目标，我们可以定义一个简单的模板，如 :

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"}});

您将收到一条消息 : 嗨，Ayush .但是如果我们没有传递任何对象或传递没有用户密钥的对象，那么我们将获得一个注册链接.

包含和组件

Pug提供了一种非常直观的方式来为网页创建组件.例如，如果您看到新闻网站，则标题和类别的标题始终是固定的.我们可以使用 include 功能，而不是将其复制到我们创建的每个视图中.以下示例显示了我们如何使用此功能 :

使用以下代码创建3个视图 :

HEADER.PUG

div.header.   I'm the header for this website.

CONTENT.PUG

html   head      title Simple template   body      include ./header.pug      h3 I'm the main content      include ./footer.pug

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，您将收到以下输出 :

模板组件

包括可以也可用于包括明文，CSS和JavaScript.

Pug还有很多其他功能.但这些超出了本教程的范围.您可以通过 Pug 进一步探索帕格.