Nodejs初級階段之express
上一篇《node.js 初體驗》寫的也不錯，感興趣的朋友可以了解下。
Node和NPM的安裝夠便捷了，不細說...有幾點基礎順手提一下：
1.安裝命令中的 “-g” 表示全局(global)
2.express的版本不是通常的 “-v” 來查看，而是 “-V”
3.安裝express項目的命令如下
express -e nodejs-product -e, --ejs add ejs engine support -J, --jshtml add jshtml engine support (defaults to jade)
PS：模板引擎之類暫時不必care，不過俺當初學習搭建Node+express時用的是ejs，所以也就順手一直用著了
Node的小基友supervisor
每次修改代碼后會自動重啟。懶程序員就指望這種省事省力的工具活著了:)
安裝：npm install -g supervisor
執(zhí)行：supervisor app.js
另一個小基友forever
虛擬機一關node服務就關了，不過forever可以讓node服務不停止，介紹如下，安裝和執(zhí)行不細說啦，我懶：
forever是一個簡單的命令式nodejs的守護進程，能夠啟動，停止，重啟App應用。forever完全基于命令行操作，在forever進程之下，創(chuàng)建node的子進程，通過monitor監(jiān)控node子進程的運行情況，一旦文件更新，或者進程掛掉，forever會自動重啟node服務器，確保應用正常運行。
express項目目錄
如上圖就是一個express項目結構，簡單過一下：
app.js： 項目入口，反正express愛叫app.js沒轍，你可以改成index.js或者main.js都成。相當于php項目中的 index.php、index.html
node_modules： 存放項目的依賴庫
package.json： 項目依賴配置及開發(fā)者信息(這個要說就說多了，還是看文檔好，俺就不誤人子弟了。下期看看抽個小段單說Node模塊)
public： 靜態(tài)文件如 css,js,img (PS:俺其實習慣叫static)
routes： 路由文件(學習的重要攻克對象。尼瑪業(yè)務好不好，路由是關鍵)
Views： 頁面文件(Ejs或者jade的模板，默認是jade，俺這用Ejs，在初階練手最重要，所以都可以試試)
打開View 文件發(fā)現(xiàn)index.ejs比較不習慣，所以對app.js進行小改動：
“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如下：
代碼小解：
因為針對的是初階入門，俺們還是繼續(xù)過一下express的使用與Node的方法哈：
require() 用于在當前模塊中加載和使用其他模塊；此方法是模塊的基礎，使用中大概有路徑的概念就行。PS：JS文件可以去掉".js"后綴
exports 表示模塊的導出對象，用于導出模塊的屬性和公共方法。在項目routes文件夾下有index.js和users.js（路由有細說），都使用到exports對象導出對象，如33行的routes.index和34行的user.list;
PS：一個模塊的代碼只會在模塊第一次被使用時執(zhí)行，不會因require多次而被初始化多次。
express() 表示創(chuàng)建express應用程序。簡單幾行代碼其實就可以創(chuàng)建一個應用，如下：
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('hello world');
console.log('hello world');
});
app.listen('8808');
app.listen() 就是在給定的主機和端口上監(jiān)聽請求，這個和node中http模塊的http.createServer(function(){...}).listen()效果一致；
app.set(name, value)和app.get(name)就是你想的那樣，set()為設置 name 的值設為 value，get()為獲取設置項 name 的值。如俺app.js的圖片16行中的一句“app.set('port', process.env.PORT || 3000)”就是設置項目的port，在下面使用http.createServer時就可以使用app.get('port')來獲取，只是俺偷懶沒用來著；
了解app.engine()方法之前先看看express應用的安裝命令:“express -e nodejs-product”，其中的 -e 和 -J 我們一開始已經提到，表示ejs和jade模板。
如果想把模板后綴改成“.html”時就會用到app.engine方法，來重新設置模板文件的擴展名，比如想用ejs模板引擎來處理“.html”后綴的文件：app.engine('.html', require('ejs').__express);
app.engine(ext, callback) 注冊模板引擎的 callback 用來處理ext擴展名的文件。
PS：__express不用去care，其實就是ejs模塊的一個公共屬性，表示要渲染的文件擴展名。
app.use([path], function) 使用中間件 function,可選參數path默認為"/"。使用 app.use() “定義的”中間件的順序非常重要，它們將會順序執(zhí)行，use的先后順序決定了中間件的優(yōu)先級(經常有搞錯順序的時候);
最后介紹個很有用的express API：
app.render(view, [options], callback) 渲染 view, callback 用來處理返回的渲染后的字符串。
路由實戰(zhàn)：
路徑代碼應該是項目中最本機的一部分了。express中創(chuàng)建一個或者一套新的handle非常簡單，先看看express現(xiàn)有的，一會兒我們創(chuàng)建倆個實際的規(guī)則。
變量 routes 和 user 都是剛才require的模塊，他們各自exports了index方法和list方法；其中Response.render()表示渲染view，同時傳進對應的數據，Response.send()為發(fā)送一個響應；在設置路由時index和list方法作為回調函數最終執(zhí)行?！?
流程大概了解啦，俺們也就實際搞一把，最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也一并引入了。
前文已經說到了，靜態(tài)文件都放在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 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">-->
<!-- 建議在項目中把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 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)建個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 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>
如果樣式有問題請檢查下bootstrap的路徑是否正確引入。
啟動項目之后覺得高大上很簡單，有木有??！
FAQ&總結：
俺們的express項目暫時，且express也并沒有涉及到任何數據庫，這個事情需要第三方node模塊，比如mysql或者MongoDB，后續(xù)俺會有一章單獨介紹這塊。
express也不是Node中web框架的唯一選擇，不過由于其文檔較全，所以才以其為示例為大家介紹，其原理和實現(xiàn)其實細化之后并不復雜，也希望更多的JS工程師折騰出自己的Web框架。
好了，今天先給大家絮叨到這里，希望本文分享大家喜歡。
相關文章
這篇文章主要介紹了如何用Node.js編寫內存效率高的應用程序，對Node.js感興趣的同學，可以參考下2021-04-04
這篇文章主要介紹了在Mac OS下使用Node.js的簡單教程,Node.js是讓JavaScript應用運行于服務器端的框架,需要的朋友可以參考下2015-06-06
輕松創(chuàng)建nodejs服務器（8）：非阻塞是如何實現(xiàn)的
這篇文章主要介紹了輕松創(chuàng)建nodejs服務器（8）：非阻塞是如何實現(xiàn)的,本文著重分析非阻塞的實現(xiàn),對代碼進行了分解,需要的朋友可以參考下2014-12-12
詳解Node.js中exports和module.exports的區(qū)別
這篇文章主要介紹了詳解Node.js中exports和module.exports的區(qū)別,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
nodejs文件實現(xiàn)打包成exe, 并設置開機自啟動的方法詳解(沒有黑窗口)
這篇文章主要介紹了nodejs文件實現(xiàn)打包成exe, 并設置開機自啟動的方法,結合實例形式分析了node.js使用pkg包實現(xiàn)生成exe可執(zhí)行文件的相關操作技巧,需要的朋友可以參考下2023-05-05
本文是小編在網絡上整理的關于垃圾回收器的相關知識點，很多語言和程序都用的到，有興趣的可以學習下。2018-05-05
本篇文章主要介紹了Node學習記錄之cluster模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
詳解如何在Node.js的httpServer中接收前端發(fā)送的arraybuffer數據
這篇文章主要介紹了詳解如何在Node.js的httpServer中接收前端發(fā)送的arraybuffer數據，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了Async/Await替代Promise的6個理由，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
使用NodeJs 開發(fā)微信公眾號（三)微信事件交互實例
這篇文章主要介紹了使用NodeJs 開發(fā)微信公眾號（三)微信事件交互實例的相關資料,需要的朋友可以參考下2016-03-03