标签：boost 代码 title 经验 打开 数据 static pat 方便
最近由于工作需要全栈开发，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代码如下
<html><head><title>hello world</title></head><body data-ext-version="1.4.2"></body></html>
是不是很神奇，哈哈，就这样，感觉还是有点烦啊，特别是写样式，笔者是最不喜欢写样式代码的了，于是乎就想到了一个伟大的框架——bootstrap，按理说，应该是可以用到jade里面去的吧？于是笔者就尝试了一下
首先是引入bootstrap
1 doctype html 2 html 3 head 4 title= title 5 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 body 9 ul.nav.nav-tabs 10 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并分享经验
标签：boost 代码 title 经验 打开 数据 static pat 方便
原文地址：http://www.cnblogs.com/sizhou/p/7215566.html
