老規(guī)矩咱筛，開頭部分都是些自娛自樂的隨想，想到哪寫到哪...
到今天俺已經(jīng)在俺廠工作倆年零幾天了杆故，工作以來頭一回在一家企業(yè)工作超倆年迅箩，對于這倆年確實(shí)只有滿滿的成就感，不管是工作還是生活...寫到這句突然又想寫篇這倆年的總結(jié)处铛，等這篇文章發(fā)了之后就著手整理吧饲趋，吼吼。
那篇《node.js 初體驗(yàn)》好像才發(fā)生在前幾月撤蟆，沒想到時(shí)間已過兩年有多奕塑。且看到文章末尾處那句： “這篇文章只會(huì)是一個(gè)開始” 令俺臉紅掩面
...
好吧龄砰，反正臉皮厚已不是倆三天，讓俺裝傻混過去吧讨衣，咱往前看才是硬道理不是换棚。俺一定痛改前非、洗心革面反镇、好好改造固蚤，今年中心的小心思是把【前端攻略系列】折騰點(diǎn)名堂出來，厚積薄發(fā)的時(shí)刻來鳥歹茶。
Node不得不寫寫夕玩，沒轍呀，太火惊豺！看看最近的前端圈子吧燎孟，沒弄過幾行Node代碼都不好意思和別人打招呼；不折騰點(diǎn)Node的小平臺(tái)扮叨、小工具缤弦，去食堂都不好意思多搞幾碗飯，所以俺也就順大潮把自己的工作筆記整理整理彻磁，試試能否寫好這篇Nodejs系列碍沐。
好吧，不開玩笑噠~~~介紹這篇和接下來幾篇Node文章的內(nèi)容衷蜓，基本都屬于Node的初階累提，略偏實(shí)戰(zhàn)，進(jìn)階和高階內(nèi)容正在YY中磁浇，最終的目錄與里程碑下一篇應(yīng)該差不多能定下來斋陪。
本篇以介紹Express為話題，延伸出用Node開發(fā)小頁面，然后其中穿插概述express主要的API无虚、路由的原理缔赠、Node模塊概念，順便也會(huì)介紹自己使用Node工具等等友题。默認(rèn)看官們都具備JavaScript基礎(chǔ)嗤堰，所以過于基礎(chǔ)的內(nèi)容俺就不浪費(fèi)篇幅咯，GOGO度宦。
最后自我爆料一個(gè)吧踢匣。老婆已回家養(yǎng)胎，所以俺窮的只有時(shí)間了戈抄。有時(shí)間好好加班拼工作离唬，有時(shí)間好好寫博(客)拼積累...諸如心靈雞湯什么的就不灌各位啦，喝多了反胃:)
一不小心隨想就寫了那么多划鸽，尼瑪炫酷狂拽屌炸天有木有输莺！
-------------------------------------------- 華麗麗的分割線 --------------------------------------------
Node和NPM的安裝夠便捷了，不細(xì)說...有幾點(diǎn)基礎(chǔ)順手提一下：
安裝命令中的 “-g” 表示全局(global)
express的版本不是通常的 “-v” 來查看裸诽，而是 “-V”
-
安裝express項(xiàng)目的命令如下
express -e nodejs-product-e, --ejs add ejs engine support
-J, --jshtml add jshtml engine support (defaults to jade)
PS：模板引擎之類暫時(shí)不必care模闲，不過俺當(dāng)初學(xué)習(xí)搭建Node+express時(shí)用的是ejs，所以也就順手一直用著了
Node的小基友supervisor
每次修改代碼后會(huì)自動(dòng)重啟崭捍。懶程序員就指望這種省事省力的工具活著了:)
安裝：npm install -g supervisor
執(zhí)行：supervisor app.js
另一個(gè)小基友forever
虛擬機(jī)一關(guān)node服務(wù)就關(guān)了尸折，不過forever可以讓node服務(wù)不停止，介紹如下殷蛇，安裝和執(zhí)行不細(xì)說啦实夹，我懶：
forever是一個(gè)簡單的命令式nodejs的守護(hù)進(jìn)程，能夠啟動(dòng)粒梦，停止亮航，重啟App應(yīng)用。forever完全基于命令行操作匀们，在forever進(jìn)程之下缴淋，創(chuàng)建node的子進(jìn)程，通過monitor監(jiān)控node子進(jìn)程的運(yùn)行情況泄朴，一旦文件更新重抖，或者進(jìn)程掛掉，forever會(huì)自動(dòng)重啟node服務(wù)器祖灰，確保應(yīng)用正常運(yùn)行钟沛。
express項(xiàng)目目錄
如上圖就是一個(gè)express項(xiàng)目結(jié)構(gòu)，簡單過一下：
app.js： 項(xiàng)目入口局扶，反正express愛叫app.js沒轍恨统，你可以改成index.js或者main.js都成叁扫。相當(dāng)于php項(xiàng)目中的 index.php、index.html
node_modules： 存放項(xiàng)目的依賴庫
package.json： 項(xiàng)目依賴配置及開發(fā)者信息(這個(gè)要說就說多了畜埋，還是看文檔好莫绣，俺就不誤人子弟了。下期看看抽個(gè)小段單說Node模塊)
public： 靜態(tài)文件如 css,js,img (PS:俺其實(shí)習(xí)慣叫static)
routes： 路由文件(學(xué)習(xí)的重要攻克對象悠鞍。尼瑪業(yè)務(wù)好不好兔综，路由是關(guān)鍵)
-
Views： 頁面文件(Ejs或者jade的模板，默認(rèn)是jade狞玛，俺這用Ejs，在初階練手最重要涧窒，所以都可以試試)
打開View 文件發(fā)現(xiàn)index.ejs比較不習(xí)慣心肪，所以對app.js進(jìn)行小改動(dòng)：
“app.set('view engine', 'ejs');” 變成 “app.engine('.html', ejs.__express);app.set('view engine', 'html');”
-
上一行出現(xiàn)的ejs變量需要require ejs模塊，增加代碼“var ejs = require('ejs');”
最終的app.js如下：
代碼小解：
因?yàn)獒槍Φ氖浅蹼A入門纠吴，俺們還是繼續(xù)過一下express的使用與Node的方法哈：
require() 用于在當(dāng)前模塊中加載和使用其他模塊硬鞍；此方法是模塊的基礎(chǔ)，使用中大概有路徑的概念就行戴已。PS：JS文件可以去掉".js"后綴
exports 表示模塊的導(dǎo)出對象固该，用于導(dǎo)出模塊的屬性和公共方法。在項(xiàng)目routes文件夾下有index.js和users.js（路由有細(xì)說）糖儡，都使用到exports對象導(dǎo)出對象伐坏，如33行的routes.index和34行的user.list;
PS：一個(gè)模塊的代碼只會(huì)在模塊第一次被使用時(shí)執(zhí)行，不會(huì)因require多次而被初始化多次握联。
express() 表示創(chuàng)建express應(yīng)用程序桦沉。簡單幾行代碼其實(shí)就可以創(chuàng)建一個(gè)應(yīng)用，如下：
var express = require('express'); var app = express();
app.get('/', function(req, res){
res.send('hello world');
console.log('hello world');
});
app.listen('8808');</pre>
app.listen()就是在給定的主機(jī)和端口上監(jiān)聽請求金闽，這個(gè)和node中http模塊的http.createServer(function(){...}).listen()效果一致纯露；
app.set(name, value)和app.get(name)就是你想的那樣，set()為設(shè)置 name 的值設(shè)為 value代芜，get()為獲取設(shè)置項(xiàng) name 的值埠褪。如俺app.js的圖片16行中的一句“app.set('port', process.env.PORT || 3000)”就是設(shè)置項(xiàng)目的port，在下面使用http.createServer時(shí)就可以使用app.get('port')來獲取挤庇，只是俺偷懶沒用來著
了解app.engine()方法之前先看看express應(yīng)用的安裝命令:“express -e nodejs-product”钞速，其中的 -e 和 -J 我們一開始已經(jīng)提到，表示ejs和jade模板嫡秕。
如果想把模板后綴改成“.html”時(shí)就會(huì)用到app.engine方法玉工，來重新設(shè)置模板文件的擴(kuò)展名，比如想用ejs模板引擎來處理“.html”后綴的文件：app.engine('.html', require('ejs').__express);
app.engine(ext, callback) 注冊模板引擎的 callback 用來處理ext擴(kuò)展名的文件淘菩。
PS：__express不用去care遵班，其實(shí)就是ejs模塊的一個(gè)公共屬性屠升，表示要渲染的文件擴(kuò)展名。
app.use([path], function) 使用中間件 function,可選參數(shù)path默認(rèn)為"/"狭郑。使用 app.use() “定義的”中間件的順序非常重要腹暖，它們將會(huì)順序執(zhí)行，use的先后順序決定了中間件的優(yōu)先級(經(jīng)常有搞錯(cuò)順序的時(shí)候);
最后介紹個(gè)很有用的express API：
app.render(view, [options], callback)渲染 view, callback 用來處理返回的渲染后的字符串翰萨。
路由實(shí)戰(zhàn)：
路徑代碼應(yīng)該是項(xiàng)目中最本機(jī)的一部分了脏答。express中創(chuàng)建一個(gè)或者一套新的handle非常簡單，先看看express現(xiàn)有的亩鬼，一會(huì)兒我們創(chuàng)建倆個(gè)實(shí)際的規(guī)則殖告。
變量 routes 和 user 都是剛才require的模塊，他們各自exports了index方法和list方法雳锋；其中Response.render()表示渲染view黄绩，同時(shí)傳進(jìn)對應(yīng)的數(shù)據(jù)，Response.send()為發(fā)送一個(gè)響應(yīng)玷过；在設(shè)置路由時(shí)index和list方法作為回調(diào)函數(shù)最終執(zhí)行爽丹。
流程大概了解啦，俺們也就實(shí)際搞一把辛蚊，最easy的一種方式粤蝎，簡單倆步：
- 第一種方式就是在當(dāng)前的routes/index.js或者routes/test.js中加幾行代碼如下
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
<!--<link href="/stylesheets/base.css" rel="stylesheet">-->
<!--<link href="/stylesheets/common.css" rel="stylesheet">-->
<!--<link href="/stylesheets/page.css" rel="stylesheet">-->
<!-- 建議在項(xiàng)目中把CSS分好level，好維護(hù)和管理 -->
<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 class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Product</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li class=""><a href="/contactus">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu beige">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class=""><a href="/faq">FAQ</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<!-- 以上位置建議創(chuàng)建個(gè)header.html維護(hù)起來 -->
<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 class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron bisque">
<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 class="row">
<div class="col-6 col-sm-6 col-lg-4">
<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 class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<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 class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<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 class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<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 class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<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 class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<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 class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<a target="_blank" href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.container-->
<!-- 從header.html之后到此可分為page層 -->
<footer class="darkseagreen">
<p>Copyright © 2014. Designed by nieweidong.</p>
</footer>
<script src="/javascripts/jquery-1.11.0.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
- 在app.js文件設(shè)置路由那塊加上app.get('/test', routes.test);
第二種方式就是多了兩步，先新建一個(gè)模塊如test.js文件，輸出然后exports對應(yīng)的方法雀扶；在app.js中require這個(gè)模塊筹燕，再加一行設(shè)置路由即完成了。
快速炫起來，集成Bootstrap：
JS工程師使用Nodejs上手還是以快速搭建網(wǎng)站為主，所以才會(huì)介紹Express，那么為了讓網(wǎng)站更快的體面起來墓懂，集成使用Bootstrap就是上佳選擇，非常喜歡其響應(yīng)式布局和整體系的腳手架霉囚。
PS：因?yàn)锽ootstrap的JS插件都依賴jQeury捕仔，所以jQuery也一并引入了。
前文已經(jīng)說到了盈罐，靜態(tài)文件都放在public文件夾中榜跌，切文件夾內(nèi)已經(jīng)幫我們把類目都分好了，images盅粪、 javascripts钓葫、 stylesheets。
分別引入bootstrap.min.css文件至stylesheets目錄下票顾；jquery-1.x.x.min.js和bootstrap.min.js放到j(luò)avascripts文件夾下础浮。
然后俺們修改view/index.html把文件引入使用即可帆调，下面放出俺在bootstrap demo的基礎(chǔ)改的index.html，大家隨意拿去使用和修改豆同。
View Code
如果樣式有問題請檢查下bootstrap的路徑是否正確引入番刊。
啟動(dòng)項(xiàng)目之后覺得 高大上 很簡單，有木有Ｓ靶狻芹务！
FAQ&總結(jié)：
俺們的express項(xiàng)目暫時(shí)，且express也并沒有涉及到任何數(shù)據(jù)庫鸭廷，這個(gè)事情需要第三方node模塊枣抱，比如mysql或者M(jìn)ongoDB，后續(xù)俺會(huì)有一章單獨(dú)介紹這塊辆床。
express也不是Node中web框架的唯一選擇佳晶，不過由于其文檔較全，所以才以其為示例為大家介紹佛吓，其原理和實(shí)現(xiàn)其實(shí)細(xì)化之后并不復(fù)雜，也希望更多的JS工程師折騰出自己的Web框架垂攘。
尼瑪還有幾個(gè)小時(shí)就到3月了维雇，一月一篇可是俺的目標(biāo)，所以全面的demo俺之后再補(bǔ)上哈晒他。
如果覺得這文章也算用心吱型，請勞駕點(diǎn)右下角的推薦。
最后陨仅，有 北京&上海 的朋友想換工作的津滞，百度移動(dòng)云 真誠無比的期待【有技術(shù)、毀底線灼伤、無節(jié)操触徐、大聰明、多勤奮】的你...(JD和我郵箱在頁面右上角)
參考資料：
