Express
@(express)[mac|nodejs|angularjs|bootstrap|jquery]
Express簡介
Express提供了一個輕量級模塊，把Node.js的http模塊功能封裝在一個簡單易用的接口中。Express也擴展了http模塊的功能，使你輕松處理服務器的路由、響應、cookie和HTTP請求的狀態。使用Express可以充當Web服務器。
后端初始化
安裝express
找到合適的路徑創建項目的文件，在終端中輸入（以下都是終端命令）
mkdir projectName
進入項目
cd projectName
創建一個 npm 的 package.json 配置文件
npm init
安裝 express 並將其保存到依賴列表中
npm install express --save
查看 express 的版本
express --version
快速創建Express應用骨架
使用全局方式安裝 Express 應用生成器
npm install express-generator -g
在安裝了 express 的文件夾中快速生成 Express 應用
express appName
生成的目錄結構如下
appName/
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
提示：
public是放置靜態文件的目錄，routes是放置路由文件的目錄，view是放置模板引擎的目錄
由於 Express 中的 npm 配置文件 package.json 已經定義好了模塊，如下依賴列表 dependencies
{
"name": "appName",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
}
}
使用 npm 安裝這些模塊
npm install
運行 Express 應用
node bin/www
在瀏覽器中輸入 http://localhost:3000，顯示如下表明運行成功
Express
Welcome to Express
同時可以在終端中，查看HTTP請求日志(該打印日志與模塊morgan有關)
GET / 200 584.249 ms - 170
GET /stylesheets/style.css 200 5.106 ms - 111
GET /favicon.ico 404 39.354 ms - 1315
GET / 304 26.731 ms - -
GET /stylesheets/style.css 304 1.134 ms - -
GET / 304 9.207 ms - -
GET /stylesheets/style.css 304 0.644 ms - -
GET / 304 12.299 ms - -
GET /stylesheets/style.css 304 0.276 ms - -
^C
victor:wirelessSystem victor$ node bin/www
GET / 304 573.628 ms - -
GET /stylesheets/style.css 304 3.037 ms - -
提示：其中
200表明請求被正常處理，304表明服務器允許請求訪問資源
如果想要更改訪問的端口號，找到目錄 bin/www 修改 port 變量的端口號
var port = normalizePort(process.env.PORT || '7101');
修改之后，按住 Ctrl + C 停止運行 bin/www， 重新運行 bin/www（也可以安裝使用pm2、supervisor等監視程序變化）打開 Chrome 繼續訪問 http://localhost:7101
前端初始化
使用bower初始化前端項目目錄
使用全局安裝 bower
npm install -g bower
提示：Bower是一個前端技術的軟件包管理器，可用於搜索、安裝和卸載一些前端的網絡資源，如Jquery、AngularJS、BootStrap等庫文件，當然也可以安裝一些自動化工具，例如Grunt等
創建一個 bower 的 bower.json 配置文件
bower init
配置文件如下所示(大同小異)
{
"name": "appName",
"description": "this is a bower.json",
"main": "",
"authors": [
"victor"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
提示：默認的依賴是放置在
bower_components目錄下，這並不是我們想要的，因為在 Express項目中默認的靜態文件放置在public目錄下，所以需要設置放置目錄為public目錄
自定義包的安裝目錄
在public目錄下，創建一個lib目錄用於存放前端庫
mkdir public/lib
創建配置文件.bowerrc (名字固定)，該配置文件配置 bower 的下載代碼包的目錄
vim .bowerrc
這是一個標准的 JSON 文件，輸入配置信息
{
"directory":"public/lib"
}
安裝前端的庫文件
安裝 boostrap，安裝完以后可以看見在public/lib目錄下發現bootstrap和jquery
bower install bootstrap --save
安裝 angularjs
bower install angular --save
提示：需要注意的是
bootstrap和angular都需要依賴於jquery，所以會同時安裝jquery