基于express+mongodb+pug的博客系统——pug篇
很久之前就想自己搭一个博客了，最开始用hexo+github，但是换电脑后总是有些麻烦。后来使用WordPress，但是用WordPress总觉得没什么技术含量，前后端都是人家写好的，而且买的垃圾虚拟机老是出问题，动不动就要提交工单解决，所以最后干脆就直接在博客园上写了。
最近比较闲，所以正好抽时间简单看了下node.js，然后看了看express，顺便搭了个博客出来练手。当然也不仅是单纯的练手，更多的算是一种探路或者摸索吧，因为公司虽然有大牛，但更多的是忙于应付业务，基本上是没时间去学学新的东西来尝试解决我们在开发中遇到的各种问题，这其中就包括比如重复书写大量相同代码，后期维护困难等。
在此之前，我也没有真正写过后台项目，虽然在学校用PHP+MySQL写过几个简单的页面，但是毕业快一年了，以前的东西都太久没用，基本都快忘记了。所以现在使用node.js+mongoDB也算是从零开始吧，在写的过程中，有简单的去对项目结构等作出一些优化调整，但越往后，理解也就越深，所以更多的干脆就留着下一版来更改吧。
这一个版本算是初级版本吧，基本功能是全的。不过经过这三个多星期的实际操作和阅读一些别人的博客，从代码结构和工程结构方面，都有更深的理解，所以还有很多能够优化的地方。不过并不打算等到都做好了再写，而是先把这段时间遇到的坑记录下来，要不时间越久，忘的也就越多，早点记录，多少还能留下点什么，也能帮助其他新手朋友更容易入门。
这一个版本所用到的库，包括node框架express4.4X、数据库mongoDB、模板引擎pug（原jade）。
废话不多说，进入正题。
我在项目中使用的pug.js是最新2.0版本的。
1.基础文档
在pug中没有结束标签，需要严格使用缩进来表示父子元素之间的关系。
编译前：
doctype html
html
head
title pug基础 body
p.text 必须严格使用缩进，来表明父子和兄弟元素间的关系
编译后：
<!DOCTYPE html>
<html>
<head>
<title>pug基础 </title>
</head> <body>
<p class="text">必须严格使用缩进，来表明父子和兄弟元素间的关系</p>
</body>
</html>
2.内容渲染(插值)
各个模板引擎渲染方法都差不多，这里主要是给大家展示在pug模板里插值的写法。
方法一:
插入固定字符串，直接在标签后面敲空格输入字符串就行
插入变量时，输出字符使用#{}；输出html代码使用!{}
在使用大括号插值时，还支持JavaScript表达式
编译前：
- var string = "string";
- var html = "<span>htmlString</span>"; p 直接写插入字符串，只需在标签后面敲一个空格
p 需要渲染为字符串的变量#{string}
p 大括号插值也支持JavaScript表达式#{string.toUpperCase()}
p 需要渲染为html代码的变量!{html}
编译后：
<p>直接写插入字符串，只需在标签后面敲一个空格</p>
<p>需要渲染为字符串的变量string</p>
<p>需要渲染为字符串的变量STRING</p>
<p>需要渲染为html代码的变量<span>htmlString</span></p>
方法二：
1.使用=插入text
2.使用!=插入html
3.同样也支持JavaScript表达式
编译前：
- var string = "string";
- var html = "<span>htmlString</span>"
p 直接写插入字符串，只需在标签后面敲一个空格
p= '需要渲染为字符串的变量'+string.toUpperCase()
p!= '需要渲染为html代码的变量'+html
编译后:
<p>直接写插入字符串，只需在标签后面敲一个空格</p>
<p>需要渲染为字符串的变量STRING</p>
<p>需要渲染为html代码的变量<span>htmlString</span></p>
3.属性
pug模板中给元素添加属性
简单添加
编译前：
a(class='link' href='www.baidu.com') 百度
编译后：
<a class="link" href="www.baidu.com">百度</a>
三元表达式
编译前：
- var active= true
a(class=active? 'link-active' : '' href="www.baidu.com") 百度
编译后：
<a class="link-active" href="www.baidu.com">百度</a>
class条件
编译前：
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
编译后：
<a href="/">Home</a>
<a class="active" href="/about">About</a>
属性插值
编译前：
- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize) //- 支持ES6的环境中
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)
编译后：
<button class="btn btn-info btn-lg" type="button"></button>
<button class="btn btn-info btn-lg" type="button"></button>
4.语句
语句包括编程语言中的for、if、switch这些，只是在pug中，稍微有些不同。
case
case语句和JavaScript中的switch语句类似。
编译前：
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
编译后：
<p>you have 10 friends</p>
if
编译前：
- var user = { name: 'tom' }
- var age = false
#user
if user.description
h2.green 如果user.name为true
p.description= user.name
else if age
h2.blue 如果age为true
p.description= age
else
h2.red Description
p.description User has no description
编译后：
<h2 class="green">如果user.name为true</h2>
<p class="description">foo bar baz</p>
each
编译前：
- var arr = ['zero', 'one', 'two'];
- var obj = {name:'tom',age:21,country:'china'}; ul.array
each val, index in arr
li= index + ': ' + val ul.object
each val, key in obj
li= key + ': ' + val
编译后：
<ul class="array">
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul> <ul class="object">
<li>name: tom</li>
<li>age: 21</li>
<li>country: china</li>
</ul>
5.include
通过include，你可以在一个pug模板里，引入另外一个pug组件。
编译前：
//- index.pug
doctype html
html
title include用法 body
include components/head.pug p 在index.pug文件中引入了head.pug和footer.pug两个组件 include components/footer.pug
//- components/head.pug
h1 这是head.pug组件
//- components/footer.pug
footer 这是footer.pug组件
编译后：
<!DOCTYPE html>
<html> <head>
<title>include用法</title>
</head> <body>
<h1>这是head.pug组件</h1> <p>在index.pug文件中引入了head.pug和footer.pug两个组件</p> <footer>这是footer.pug组件</footer>
</body>
</html>
6.模板继承
include可以帮我们少写很多重复代码，同时更容易去维护每个组件。而继承则能够使模板更加灵活，进一步减少我们的工作量。
在pug里，我们可以使用extends来继承模板，使用block来定义可能会变化或者可扩展的内容。
编译前：
//- layout.pug
doctype html
html
head
title Template Inheritance用法
//- 这里是可以扩展的link区域
block links
link(rel="stylesheet" href='/main.css') script(src="/jquery.js") body
head 所有页面的公共头部 //- 这里是可以扩展的内容区域
block content
//- 这里是可以扩展的script区域
block scripts
script(src="/bootstrap.js")
//- index.pug
extends layout.pug block links
link(rel="stylesheet" href='/bootstrap.css')
link(rel="stylesheet" href="/index.css") block content
h1 模板继承的用法
p 使用extends来继承模板
p 使用block来自定义模板里的内容 block append scripts
script(src="index.js")
编译后：
<doctype html>
<html>
<head>
<title>Template Inheritance用法</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="index.css">
</head> <body>
<header> 所有页面的公共头部</header> <h1>模板继承的用法</h1>
<p>使用extends来继承模板</p>
<p>使用block来自定义模板里的内容</p> <script src="/index.js"></script>
<script src="/bootstrap.js"></script>
</body>
</html>
7.内联script
我们有时也会在html页面内嵌一些JavaScript代码，在pug中也很简单
编译前：
doctype html
html
head
title 内联script
body
h1 需要在此页面中内联一些脚本 script.
console.log('只需要在script后面加上一个.符号')
编译后：
<doctype html>
<html>
<head>
<title>内联script</title>
</head> <body>
<h1>需要在此页面中内联一些脚本</h1> <script>
console.log('只需要在script后面加上一个.符号')
</script>
</body>
</html>
结语：
以上基本涵盖了pug的95%内容，还剩下一点少用的没有一一赘述，比如过滤器（filters）和注释（comments）等，markdown过滤器是个好东西，不过我觉得一般就个人项目，比如博客这样的会用上。
这些东西也足够你在项目中使用了，对于剩下的那5%，大家可以自己去看看官网，了解一下，都挺简单pug.js。
另外在我使用的时候，发现pug的写法除了缩进以外，也可以按照标准的html书写格式来创建模板，插值什么的，通过#{}方式同样好使。
不过在官网上没看见可以使用这种方式创建模板的说明，这是第一次使用pug(jade)，所以不知道会不会是兼容以前的版本，有知道的朋友麻烦告诉我一声，谢谢哈！
基于express+mongodb+pug的博客系统——pug篇的更多相关文章
- NodeJS+Express+MongoDB 简单个人博客系统【Study笔记】
Blog 个人博客系统 iBlog是在学习NodeJs时候一个练手项目Demo 系统支持用户注册/登录,内容文章查看,评论,后台管理(定制显示的分类版块,进行文章内容添加)超级管理员还可进行用户管理等 ...
- 基于express+mongodb+pug的博客系统——后台篇
上一篇介绍了模板引擎pug.js的用法,这一篇就主要写后台逻辑了. 后台的大部分的功能都有了,只是在已经登录的状态下,前台和后台的逻辑处理还不是很完善. 先上几张图吧,仿旧版的简书,改了下UI,因为没 ...
- 基于React服务器端渲染的博客系统
系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...
- 分享个基于 Node.js + React 的博客系统
是使用 ES2015+ 特性写的,使用了 ThinkJS 框架,后台使用了 React. 完全使用 Markdown 来写文章,还可以把文章推送到团队博客系统中(团队博客也需要使用该系统). 项目地址 ...
- 基于Koa2+mongoDB的后端博客框架
主要框架:koa2全家桶+mongoose+pm2. 在阅读前建议将项目克隆到本地配合食用,否则将看得云里雾里. 项目地址:https://github.com/YogurtQ/koa-server. ...
- 基于开源博客系统（jpress）搭建网站
基于开源博客系统(jpress)搭建网站 JPress 使用 Java8 开发,基于流行的JFinal和Jboot框架. 目前JPress已经内置的文章和页面其实是两个模块,可以移除和新增其他模块,因 ...
- Asp.net博客系统收集和简单介绍
国内Asp.net博客系统收集和简单介绍 [转载文章,仅供个人参考,引自http://www.soyaoo.com/Blog/post/92.html] 1.ZJ-Blog程序简介:基于A ...
- 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统
很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...
- 项目实战（连载）：基于Angular2+Mongodb+Node技术实现的多用户博客系统教程（2）
本章主要讲什么(一句话)? <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)> -- 基于MongoDB的MyBlog数据库知识技术储备(上 ...
随机推荐
- JIRA6.36-7.23数据迁移文档
JIRA6.3.6-JIRA7.2.3数据迁移文档 安装JIRA7.2.3 安装包位于服务器/opt/SOFTWARE_PACKAGE目录下 建立JIRA安装的目录数据目录 cd /opt mkdir ...
- 关于oracle后导数据的一些小TIPS
今天下午需要把一些数据导入到正式环境中,但是通过Excel拷贝进去行会错位,把excel的每一列的双击让其变为最宽即可解决该问题
- 老李分享：webservice是什么？2
web service 组件 基本的 web service 平台是 XML + HTTP.所有标准的 web service 使用以下组件: SOAP(简单对象访问协议) UDDI(通用描述.发现与 ...
- 老李推荐：第14章6节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-启动ViewServer
老李推荐:第14章6节<MonkeyRunner源码剖析> HierarchyViewer实现原理-装备ViewServer-启动ViewServer poptest是国内唯一一家培养 ...
- Android 开发之开发插件使用：Eclipse 插件 SQLiteManger eclipse中查看数据内容--翻译
最近研究了一段时间Android开发后发现,google自带的ADT工具,缺失一些开发常用的东西,希望可以构建一个类似使用JAVA EE开发体系一样开发的工具包集合,包括前台开发,调试,到后台数据库的 ...
- 设计模式(四)—观察者模式
一.概述 观察者模式类似于邮件订阅和RSS订阅,当我们浏览一些博客或wiki时,经常会看到RSS图标,就这的意思是,当你订阅了该文章,如果后续有更新,会及时通知你.其实,简单来讲就一句话:当 ...
- MySQL学习笔记(三)—索引
一.概述 1.基本概念 在大型数据库中,一张表中要容纳几万.几十万,甚至几百万的的数据,而当这些表与其他表连接后,所得到的新的数据数目更是要大大超出原来的表.当用户检索这么大量的数据时,经 ...
- mysql 分析3使用分析sql 性能 show profiles ;
show variables like '%profiling%'; 查看状态 查看时间去哪了``` set profiling=1;// 打开 show profiles; 查看执行过的 ...
- 学习面向对象编程OOP 第二天
好,今天继续学习这个面向对象编程.(根据博客园 小炒花生米写的博客学习而来) 一,封装性 a.把对象的全部属性和全部服务(方法)结合在一起,形成一个不可分割的独立单元 =>对象 b.信息隐蔽,尽 ...
- SQL入门之条件表达式
where子句和having子句主要是用来筛选符合条件的元组,其后紧跟的即为条件表达式. 0.and, or条件的连接 用法和一般编程语言一样,主要用于条件的拼接.and两边都为真,则结果为真.or两 ...