NodeJS简易博客系统（一）Jade/Pug模板引擎入门

逃离我推掉我的手 2022-05-09 13:48 367阅读 0赞

国庆到现在一直忙着移动端比赛的事情，今天开始nodejs后端框架express的学习。学习路线大概如下：

1.  模板引擎pug/swig基本使用
2.  mongodb的简单学习
3.  数据库框架mongoose的简单使用
4.  NodeJs常用
5.  express的简单使用
6.  所有view页面的制作
7.  博客系统业务逻辑实现

这就是我对NodeJs学习的一个简单介绍，下面开始学习模板引擎pug。

# 一、属性 #

1、单行属性

左边是pug的写法，右边是在html中的翻译，管道符号 `|` 的行是用于控制空格的。

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td style="width:278px;">a(href='baidu.com') 百度<br> |<br> |<br> a(class='button' href='baidu.com') 百度</td> 
   <td style="width:401px;">&lt;a href="baidu.com"&gt;百度&lt;/a&gt;<br> &lt;a class="button" href="baidu.com"&gt;百度&lt;/a&gt;</td> 
  </tr> 
 </tbody> 
</table>

2、多行属性

<table style="width:679px;"> 
 <tbody> 
  <tr> 
   <td style="width:230px;">input(<br> &nbsp; type='checkbox'<br> &nbsp;name='agreement'<br> &nbsp; checked<br> )</td> 
   <td style="width:448px;">&lt;input type="checkbox" name="agreement" checked="checked" /&gt;</td> 
  </tr> 
 </tbody> 
</table>

3、用引号括起来的属性

<table style="width:682px;"> 
 <tbody> 
  <tr> 
   <td style="width:265px;">div(class='div-class', (click)='play()')<br> div(class='div-class' '(click)'='play()')</td> 
   <td style="width:416px;">&lt;div class="div-class" (click)="play()"&gt;&lt;/div&gt;<br> &lt;div class="div-class" (click)="play()"&gt;&lt;/div&gt;</td> 
  </tr> 
 </tbody> 
</table>

4、属性嵌入

<table style="width:679px;"> 
 <tbody> 
  <tr> 
   <td style="width:264px;">- var url = 'pug-test.html';<br> a(href='/' + url) 链接<br> |<br> |<br> - url = 'https://example.com/'<br> a(href=url) 另一个链接</td> 
   <td style="width:412px;">&lt;a href="/pug-test.html"&gt;链接&lt;/a&gt;<br> &lt;a href="https://example.com/"&gt;另一个链接&lt;/a&gt;</td> 
  </tr> 
 </tbody> 
</table>

5、不转义的属性

在默认情况下，所有的属性都经过转义（即把特殊字符转换成转义序列）来防止诸如跨站脚本攻击之类的攻击方式。如果您非要使用特殊符号，您需要使用 `!=` 而不是 `=`。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>div(escaped="&lt;code&gt;")<br> div(unescaped!="&lt;code&gt;")</td> 
   <td>&lt;div escaped="&amp;lt;code&amp;gt;"&gt;&lt;/div&gt;<br> &lt;div unescaped="&lt;code&gt;"&gt;&lt;/div&gt;</td> 
  </tr> 
 </tbody> 
</table>

还有.后面跟类属性;\#后面跟ID属性;style=\{\}为样式属性;省略掉标签名称的话，它就是默认值div。

# 二、控制语句 #

1、分支语句case

case是 JavaScript 的switch指令的缩写，并且它接受如下的形式：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>- var friends = 10<br> case friends<br> &nbsp; when 0<br> &nbsp; &nbsp; p 您没有朋友<br> &nbsp; when 1<br> &nbsp; &nbsp; p 您有一个朋友<br> &nbsp; default<br> &nbsp; &nbsp; p 您有 #{friends} 个朋友</td> 
   <td>&lt;p&gt;您有 10 个朋友&lt;/p&gt;</td> 
  </tr> 
 </tbody> 
</table>

同时可以用break来终止条件，所有js代码无用-作为前缀。

2、循环语句

或者

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>-&nbsp;var list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"]<br> each item in list<br> &nbsp; li= item</td> 
   <td>&lt;li&gt;Uno&lt;/li&gt;<br> &lt;li&gt;Dos&lt;/li&gt;<br> &lt;li&gt;Tres&lt;/li&gt;<br> &lt;li&gt;Cuatro&lt;/li&gt;<br> &lt;li&gt;Cinco&lt;/li&gt;<br> &lt;li&gt;Seis&lt;/li&gt;</td> 
  </tr> 
 </tbody> 
</table>

3、条件语句

Pug 的条件判断的一般形式的括号是可选的，所以您可以省略掉开头的 `-`，效果是完全相同的。

<table style="width:568px;"> 
 <tbody> 
  <tr> 
   <td>- var user = { description: 'foo bar baz' }<br> - var authorised = false<br> #user<br> &nbsp; if user.description<br> &nbsp; &nbsp; h2.green 描述<br> &nbsp; &nbsp; p.description= user.description<br> &nbsp; else if authorised<br> &nbsp; &nbsp; h2.blue 描述<br> &nbsp; &nbsp; p.description.<br> &nbsp; &nbsp; &nbsp; 用户没有添加描述。<br> &nbsp; &nbsp; &nbsp; 不写点什么吗……<br> &nbsp; else<br> &nbsp; &nbsp; h2.red 描述<br> &nbsp; &nbsp; p.description 用户没有描述</td> 
   <td style="width:320px;">&lt;div id="user"&gt;<br> &nbsp; &lt;h2 class="green"&gt;描述&lt;/h2&gt;<br> &nbsp; &lt;p class="description"&gt;foo bar baz&lt;/p&gt;<br> &lt;/div&gt;</td> 
  </tr> 
 </tbody> 
</table>

用 `=` 开始一段带有输出的代码时它将被 HTML 转义：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>p= '这个代码被 &lt;转义&gt; 了！'</td> 
   <td>&lt;p&gt;这个代码被 &amp;lt;转义&amp;gt; 了！&lt;/p&gt;</td> 
  </tr> 
 </tbody> 
</table>

# 三、包含、继承和扩展 #

1、包含

包含（include）功能允许您把另外的文件内容插入进来。

<table style="width:655px;"> 
 <tbody> 
  <tr> 
   <td style="width:311px;">//- index.pug<br> doctype html<br> html<br> &nbsp; include includes/head.pug<br> &nbsp; body<br> &nbsp; &nbsp; h1 我的网站<br> &nbsp; &nbsp; p 欢迎来到我这简陋得不能再简陋的网站。<br> &nbsp; &nbsp; include includes/foot.pug</td> 
   <td style="width:341px;"> <p>&lt;!DOCTYPE html&gt;<br> &lt;html&gt;</p> <p>&lt;head&gt;<br> &nbsp; &lt;title&gt;我的网站&lt;/title&gt;<br> &nbsp; &lt;script src="/javascripts/jquery.js"&gt;&lt;/script&gt;<br> &nbsp; &lt;script src="/javascripts/app.js"&gt;&lt;/script&gt;<br> &lt;/head&gt;</p> <p>&lt;body&gt;<br> &nbsp; &lt;h1&gt;我的网站&lt;/h1&gt;<br> &nbsp; &lt;p&gt;欢迎来到我这简陋得不能再简陋的网站。&lt;/p&gt;<br> &nbsp; &lt;footer id="footer"&gt;<br> &nbsp; &nbsp; &lt;p&gt;Copyright (c) foobar&lt;/p&gt;<br> &nbsp; &lt;/footer&gt;<br> &lt;/body&gt;</p> <p>&lt;/html&gt;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:311px;">//- includes/head.pug<br> head<br> &nbsp; title 我的网站<br> &nbsp; script(src='/javascripts/jquery.js')<br> &nbsp; script(src='/javascripts/app.js')</td> 
  </tr> 
  <tr> 
   <td style="width:311px;">//- includes/foot.pug<br> footer#footer<br> &nbsp; p Copyright (c) foobar</td> 
  </tr> 
 </tbody> 
</table>

2、继承

Pug 支持使用 `block` 和 `extends` 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。

<table style="width:661px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content</code></pre> </td> 
   <td style="width:394px;"> <p>&lt;!DOCTYPE html&gt;</p> <p>&lt;html&gt;</p> <p>&lt;head&gt;</p> <p>&lt;title&gt;Express&lt;/title&gt;</p> <p>&lt;link rel="stylesheet" href="<a href="http://localhost:3000/stylesheets/style.css" rel="nofollow">/stylesheets/style.css</a>"&gt;</p> <p>&lt;/head&gt;</p> <p>&lt;body&gt;</p> <p>&lt;h1&gt;Express&lt;/h1&gt;</p> <p>&lt;p&gt;Welcome to Express&lt;/p&gt;</p> <p>&lt;/body&gt;</p> <p>&lt;/html&gt;</p> </td> 
  </tr> 
  <tr> 
   <td> <pre><code>extends layout

block content
  h1= title
  p Welcome to #{title}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

3、扩展

扩展其实就是在block里又有block。

# 四、迭代 #

1、each

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>ul<br> &nbsp; each val, index in {1:'一',2:'二',3:'三'}<br> &nbsp; &nbsp; li= index + ': ' + val</td> 
   <td>&lt;ul&gt;<br> &nbsp; &lt;li&gt;1: 一&lt;/li&gt;<br> &nbsp; &lt;li&gt;2: 二&lt;/li&gt;<br> &nbsp; &lt;li&gt;3: 三&lt;/li&gt;<br> &lt;/ul&gt;</td> 
  </tr> 
 </tbody> 
</table>

此外，each支持三目运算符，也可以在each语句后面接else块，表示会在数组与对象没有可供迭代的值时被执行。

2、while

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>- var n = 0;<br> ul<br> &nbsp; while n &lt; 4<br> &nbsp; &nbsp; li= n++</td> 
   <td>&lt;ul&gt;<br> &nbsp; &lt;li&gt;0&lt;/li&gt;<br> &nbsp; &lt;li&gt;1&lt;/li&gt;<br> &nbsp; &lt;li&gt;2&lt;/li&gt;<br> &nbsp; &lt;li&gt;3&lt;/li&gt;<br> &lt;/ul&gt;</td> 
  </tr> 
 </tbody> 
</table>

当然，也可以使用break来结束循环。

# 五、混入mixin #

mixin可以说是pug非常强大的功能，是一种允许您在 Pug 中重复使用一整个代码块的方法。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>//- 定义<br> mixin list<br> &nbsp; ul<br> &nbsp; &nbsp; li foo<br> &nbsp; &nbsp; li bar<br> &nbsp; &nbsp; li baz<br> //- 使用<br> +list<br> +list</td> 
   <td>&lt;ul&gt;<br> &nbsp; &lt;li&gt;foo&lt;/li&gt;<br> &nbsp; &lt;li&gt;bar&lt;/li&gt;<br> &nbsp; &lt;li&gt;baz&lt;/li&gt;<br> &lt;/ul&gt;<br> &lt;ul&gt;<br> &nbsp; &lt;li&gt;foo&lt;/li&gt;<br> &nbsp; &lt;li&gt;bar&lt;/li&gt;<br> &nbsp; &lt;li&gt;baz&lt;/li&gt;<br> &lt;/ul&gt;</td> 
  </tr> 
 </tbody> 
</table>

也可以如函数般使用：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>mixin pet(name)<br> &nbsp; li.pet= name<br> ul<br> &nbsp; +pet('猫')<br> &nbsp; +pet('狗')<br> &nbsp; +pet('猪')</td> 
   <td>&lt;ul&gt;<br> &nbsp; &lt;li class="pet"&gt;猫&lt;/li&gt;<br> &nbsp; &lt;li class="pet"&gt;狗&lt;/li&gt;<br> &nbsp; &lt;li class="pet"&gt;猪&lt;/li&gt;<br> &lt;/ul&gt;</td> 
  </tr> 
 </tbody> 
</table>

当然也可以混入块，这就很舒服了，如果你只想在当前模板中重复利用一个块，可以不用另外生成模板继承或者包含，直接用混入块。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>mixin article(title)<br> &nbsp; .article<br> &nbsp; &nbsp; .article-wrapper<br> &nbsp; &nbsp; &nbsp; h1= title<br> &nbsp; &nbsp; &nbsp; if block<br> &nbsp; &nbsp; &nbsp; &nbsp; block<br> &nbsp; &nbsp; &nbsp; else<br> &nbsp; &nbsp; &nbsp; &nbsp; p 没有提供任何内容。</p> <p>+article('Hello world')</p> <p>+article('Hello world')<br> &nbsp; p 这是我<br> &nbsp; p 随便写的文章</p> </td> 
   <td>&lt;div class="article"&gt;<br> &nbsp; &lt;div class="article-wrapper"&gt;<br> &nbsp; &nbsp; &lt;h1&gt;Hello world&lt;/h1&gt;<br> &nbsp; &nbsp; &lt;p&gt;没有提供任何内容。&lt;/p&gt;<br> &nbsp; &lt;/div&gt;<br> &lt;/div&gt;<br> &lt;div class="article"&gt;<br> &nbsp; &lt;div class="article-wrapper"&gt;<br> &nbsp; &nbsp; &lt;h1&gt;Hello world&lt;/h1&gt;<br> &nbsp; &nbsp; &lt;p&gt;这是我&lt;/p&gt;<br> &nbsp; &nbsp; &lt;p&gt;随便写的文章&lt;/p&gt;<br> &nbsp; &lt;/div&gt;<br> &lt;/div&gt;</td> 
  </tr> 
 </tbody> 
</table>

还可以混入属性：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>mixin link(href, name)<br> &nbsp; //- attributes == {class: "btn"}<br> &nbsp; a(class!=attributes.class href=href)= name</p> <p>+link('/foo', 'foo')(class="btn")</p> </td> 
   <td>&lt;a class="btn" href="/foo"&gt;foo&lt;/a&gt;</td> 
  </tr> 
 </tbody> 
</table>

在使用混入时，可以传入不定长的数组，这个和java中有点类似，用变量加前缀...来说明这是个不定长数组：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>mixin list(id, ...items)<br> &nbsp; ul(id=id)<br> &nbsp; &nbsp; each item in items<br> &nbsp; &nbsp; &nbsp; li= item</p> <p>+list('my-list', 1, 2, 3, 4)</p> </td> 
   <td>&lt;ul id="my-list"&gt;<br> &nbsp; &lt;li&gt;1&lt;/li&gt;<br> &nbsp; &lt;li&gt;2&lt;/li&gt;<br> &nbsp; &lt;li&gt;3&lt;/li&gt;<br> &nbsp; &lt;li&gt;4&lt;/li&gt;<br> &lt;/ul&gt;</td> 
  </tr> 
 </tbody> 
</table>

在声明完混入块后调用时，一定要记得加前缀+。