java模板引擎 jade_初次入坑jade模板引擎（一）

最近由于工作需要全栈开发，nodejs做后端，在写一个后台管理系统的时候，我一直在考虑用怎样的方式去写，尝试过依然采用前后端分离的结构、使用json数据进行数据交互的模式，但是尝试过才知道，真的很花时间和精力，大部分精力都花在了前端构建上面了。

后来我想到了模板引擎，采用现成的UI框架直接套用，然后通过模板引擎直接在服务端生成HTML代码。node常用的模板引擎有ejs和jade，都说jade很牛逼，所以今天就尝试了一下。

首先安装jade

npm install jade

安装好后在express中添加对jade的支持

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

app.set('view engine', 'jade');

其实还有一种很偷懒的方法，就是直接全局安装express   npm install -g express 然后命令行直接打开输入 express -v 就会自动生成express的项目目录，并且自动在app.js文件中添加了对jade的支持，屡试不爽。

为什么说jade很牛呢？因为jade里面不用写那么多代码，举个例子

doctype html

html

head

title hello world

body

这段jade代码最后会被翻译成HTML代码如下

hello world

是不是很神奇，哈哈，就这样，感觉还是有点烦啊，特别是写样式，笔者是最不喜欢写样式代码的了，于是乎就想到了一个伟大的框架——bootstrap，按理说，应该是可以用到jade里面去的吧？于是笔者就尝试了一下

首先是引入bootstrap

1 doctype html2 html3 head4 title=title5 link(rel="stylesheet", href="/css/bootstrap.css")6 script(src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js”')7 script(src='/js/bootstrap.js')8 body9 ul.nav.nav-tabs10 li(role='presentation' class='active')11 a(href='#') 888

12 li(role='presentation')13 a(href='#') 888

14 li(role='presentation')15 a(href='#') 888

16 li(role='presentation')17 a(href='#') 888

最后还真的出来了boostrap的样式，真是很方便啊！

敲黑板，划重点了！！

注意你的静态资源文件一定要放在你express对外暴露的文件夹中，比如说笔者的代码 app.use(express.static(path.join(__dirname, 'public'))); 对外暴露的是public这个文件夹，那么我所有的静态资源根目录都是基于这个文件夹的，那么我的路径应该是从这个文件夹算起的路径。

比如说我bootstrap.css放在了public里面的css这个文件夹中 /css/bootstrap.css

有童鞋可能要问了，为什么静态资源文件不和jade文件放在一起呢？因为你最终看到的HTML页面都是经过服务端解析过后编译而成的纯HTML代码，都是以缓存的形式放在了public文件夹下，所以你的相对路径也是相对于public文件夹而言的。

早点睡了，回头有时间继续学习jade并分享经验