Express的安裝和初始化

Express
@(express)[mac|nodejs|angularjs|bootstrap|jquery]
Express簡介
Express提供了一個輕量級模塊，把Node.js的http模塊功能封裝在一個簡單易用的接口中。Express也擴展了http模塊的功能，使你輕松處理服務(wù)器的路由、響應(yīng)、cookie和HTTP請求的狀態(tài)。使用Express可以充當(dāng)Web服務(wù)器。

后端初始化

安裝express
找到合適的路徑創(chuàng)建項目的文件，在終端中輸入（以下都是終端命令）

mkdir projectName

進(jìn)入項目

cd projectName

創(chuàng)建一個 npm 的 package.json 配置文件

npm init

安裝 express 并將其保存到依賴列表中

npm install express --save

查看 express 的版本

express --version

快速創(chuàng)建Express應(yīng)用骨架
使用全局方式安裝 Express 應(yīng)用生成器

npm install express-generator -g

在安裝了 express 的文件夾中快速生成 Express 應(yīng)用

express appName

生成的目錄結(jié)構(gòu)如下

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
是放置靜態(tài)文件的目錄，routes
是放置路由文件的目錄，view
是放置模板引擎的目錄

由于 Express 中的 npm 配置文件 package.json 已經(jīng)定義好了模塊，如下依賴列表dependencies

{
  "name": "firstapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "ejs": "^2.5.7",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

使用 npm 安裝這些模塊

npm install

運行 Express 應(yīng)用

node bin/www

在瀏覽器中輸入http://localhost:3000
，顯示如下表明運行成功

**Express**Welcome to Express

同時可以在終端中，查看HTTP
請求日志(該打印日志與模塊morgan
有關(guān))

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

提示：其中200
表明請求被正常處理，304
表明服務(wù)器允許請求訪問資源

如果想要更改訪問的端口號，找到目錄bin/www
修改 port 變量的端口號

var port = normalizePort(process.env.PORT || '7101'); 

修改之后，按住Ctrl + C
停止運行bin/www
， 重新運行bin/www
（也可以安裝使用pm2、supervisor等監(jiān)視程序變化）打開 Chrome 繼續(xù)訪問http://localhost:7101

前端初始化

使用bower初始化前端項目目錄
使用全局安裝 bower

npm install -g bower

提示：Bower是一個前端技術(shù)的軟件包管理器，可用于搜索、安裝和卸載一些前端的網(wǎng)絡(luò)資源，如Jquery、AngularJS、BootStrap等庫文件，當(dāng)然也可以安裝一些自動化工具，例如Grunt等

創(chuàng)建一個 bower 的 bower.json 配置文件

bower init

配置文件如下所示(大同小異)

{
  "name": "firstapp",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.7"
  }
}

提示：默認(rèn)的依賴是放置在bower_components
目錄下，這并不是我們想要的，因為在 Express項目中默認(rèn)的靜態(tài)文件放置在public
目錄下，所以需要設(shè)置放置目錄為public
目錄

自定義包的安裝目錄
在public
目錄下，創(chuàng)建一個lib
目錄用于存放前端庫

mkdir public/lib

創(chuàng)建配置文件.bowerrc
(名字固定)，該配置文件配置 bower 的下載代碼包的目錄

vim .bowerrc

這是一個標(biāo)準(zhǔn)的 JSON 文件，輸入配置信息

{ "directory":"public/lib"}

圖片.png

安裝前端的庫文件
安裝 boostrap，安裝完以后可以看見在public/lib
目錄下發(fā)現(xiàn)bootstrap和jquery

bower install bootstrap --save

安裝 angularjs

bower install angular --save

圖片.png

提示：需要注意的是bootstrap和angular都需要依賴于jquery，所以會同時安裝jquery