app.use([path], function) 使用中间件 function,可选参数path默认为"https://www.jb51.net/"。使用 app.use() “定义的”中间件的顺序非常重要，它们将会顺序执行，use的先后顺序决定了中间件的优先级(经常有搞错顺序的时候);
最后介绍个很有用的express API：
app.render(view, [options], callback) 渲染 view, callback 用来处理返回的渲染后的字符串。
路由实战：
路径代码应该是项目中最本机的一部分了。express中创建一个或者一套新的handle非常简单，先看看express现有的，一会儿我们创建俩个实际的规则。
变量 routes 和 user 都是刚才require的模块，他们各自exports了index方法和list方法；其中Response.render()表示渲染view，同时传进对应的数据，Response.send()为发送一个响应；在设置路由时index和list方法作为回调函数最终执行。
流程大概了解啦，俺们也就实际搞一把，最easy的一种方式，简单俩步：
第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下
exports.test = function(req, res){ res.send('test welcome.'); };
在app.js文件设置路由那块加上app.get('/test', routes.test);
第二种方式就是多了两步，先新建一个模块如test.js文件，输出然后exports对应的方法；在app.js中require这个模块，再加一行设置路由即完成了。
快速炫起来，集成Bootstrap：
JS工程师使用Nodejs上手还是以快速搭建网站为主，所以才会介绍Express，那么为了让网站更快的体面起来，集成使用Bootstrap就是上佳选择，非常喜欢其响应式布局和整体系的脚手架。
PS：因为Bootstrap的JS插件都依赖jQeury，所以jQuery也一并引入了。
前文已经说到了，静态文件都放在public文件夹中，切文件夹内已经帮我们把类目都分好了，images、 javascripts、 stylesheets。
分别引入bootstrap.min.css文件至stylesheets目录下；jquery-1.x.x.min.js和bootstrap.min.js放到javascripts文件夹下。
然后俺们修改view/index.html把文件引入使用即可，下面放出俺在bootstrap demo的基础改的index.html，大家随意拿去使用和修改。
<!DOCTYPE html> <html lang="zh-cn"> <head> <title><%= title %></title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="https://www.jb51.net/stylesheets/bootstrap.min.css"> <!--<link href="https://www.jb51.net/stylesheets/base.css">--> <!--<link href="https://www.jb51.net/stylesheets/common.css">--> <!--<link href="https://www.jb51.net/stylesheets/page.css">--> <!-- 建议在项目中把CSS分好level，好维护和管理 --> <style> html, body { overflow-x: hidden;} body { padding-top: 70px;background:#f1f1f1; } footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;} .header-navbar-style { filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9; background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%); border:1px solid #aaa; font-size:16px; } .beige {background:beige;} .bisque {background:bisque;} .darkseagreen{ background:darkseagreen;} </style> </head> <body> <div role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="https://www.jb51.net/">Product</a> </div> <div> <ul> <li><a href="https://www.jb51.net/">Home</a></li> <li><a href="https://www.jb51.net/contactus">Contact</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> <li></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="https://www.jb51.net/faq">FAQ</a></li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.container --> </div><!-- /.navbar --> <!-- 以上位置建议创建个header.html维护起来 --> <style> @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } } </style> <div> <div> <div> <p> <button type="button" data-toggle="offcanvas">Toggle nav</button> </p> <div> <h1>Welcome <%= title %>!</h1> <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> </div> <div> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#" role="button">View details »</a></p> </div><!--/span--> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#" role="button">View details »</a></p> </div><!--/span--> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#" role="button">View details »</a></p> </div><!--/span--> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#" role="button">View details »</a></p> </div><!--/span--> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#" role="button">View details »</a></p> </div><!--/span--> <div> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a href="#" role="button">View details »</a></p> </div><!--/span--> </div><!--/row--> </div><!--/span--> <div role="navigation"> <div> <a target="_blank" href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> </div><!--/span--> </div><!--/row--> </div><!--/.container--> <!-- 从header.html之后到此可分为page层 --> <footer> <p>Copyright © 2014. Designed by nieweidong.</p> </footer> <script src="https://www.jb51.net/javascripts/jquery-1.11.0.min.js"></script> <script src="https://www.jb51.net/javascripts/bootstrap.min.js"></script> <script> $(document).ready(function() { $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleClass('active'); }); }); </script> </body> </html>
如果样式有问题请检查下bootstrap的路径是否正确引入。
启动项目之后觉得高大上很简单，有木有！！
FAQ&总结：