Node 之 Express 學習筆記 第二篇 Express 4x 骨架詳解

週末，沒事就來公司加班繼續研究一下Express ，這也許也是單身狗的生活吧。

一、目錄結構：

• bin, 存放啓動項目的腳本文件
• node_modules, 項目全部依賴的庫，以及存放 package.json 中安裝的模塊，當你在 package.json 添加依賴的模塊並安裝後，存放在這個文件夾下
• public，靜態文件(css,js,img)
• routes，路由文件(MVC中的C,controller)
• views，頁面文件(jade模板)，後期打算換成 Ejs 模板搞搞
• package.json，存儲着工程的信息及模塊依賴
• app.js，應用核心配置文件（入口文件）

 

二、Package.json

package.json用於項目依賴配置及開發者信息，scripts屬性是用於定義操做命令的，能夠很是方便的增長啓動命令，好比默認的start，用npm start表明執行node ./bin/www命令。當在 dependencies 中添加依賴的模塊時，運行 npm install ，npm 會檢查當前目錄下的 package.json，並自動安裝全部指定的模塊。

 1 {
 2   "name": "myapp",
 3   "version": "0.0.0",
 4   "private": true,
 5   "scripts": {
 6     "start": "node ./bin/www"
 7   },
 8   "dependencies": {
 9     "body-parser": "~1.13.2",
10     "cookie-parser": "~1.3.5",
11     "debug": "~2.2.0",
12     "express": "~4.13.1",
13     "jade": "~1.11.0",
14     "morgan": "~1.6.1",
15     "serve-favicon": "~2.3.0"
16   }
17 }

 

三、app.js

核心文件，也是項目入口文件。

 1 var express = require('express');
 2 //用於處理目錄的對象，提升開發效率
 3 var path = require('path');  
 4 //用戶加載圖標
 5 var favicon = require('serve-favicon');  
 6 //在控制檯中，顯示req請求的信息
 7 var logger = require('morgan'); 
 8 //加載cookie模塊，用於獲取web瀏覽器發送的cookie中的內容
 9 var cookieParser = require('cookie-parser'); 
10 //解析客戶端請求的body中的內容,內部使用JSON編碼處理,url編碼處理以及對於文件的上傳處理
11 var bodyParser = require('body-parser');  
12 
13 var routes = require('./routes/index');
14 var users = require('./routes/users');
15 var demo = require('./routes/demo');
16 
17 var app = express();  //生成一個express實例 app
18 
19 
20 //設置VIEWS文件夾，__dirname是node.js裏面的全局變量。取得執行js所在的路徑
21 app.set('views', path.join(__dirname, 'views'));
22 // 視圖引擎設置
23 app.set('view engine', 'jade');
24 
25 
26 // 定義icon圖標，參數爲圖標的路徑。若是不指明，則用默認的express圖標
27 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
28 
29 //加載日誌中間件，定義日誌和輸出級別
30 app.use(logger('dev'));
31 
32 //加載解析json的中間件,接受json請求 
33 app.use(bodyParser.json()); 
34 
35 //加載解析urlencoded請求體的中間件
36 app.use(bodyParser.urlencoded({ extended: false })); 
37 
38 //加載解析cookie的中間件
39 app.use(cookieParser());  
40 
41 //靜態文件目錄設置,設置public文件夾爲存放靜態文件的目錄
42 app.use(express.static(path.join(__dirname, 'public')));
43 //app.use(express.static(path.join(__dirname, 'html')));
44 
45 //路由控制器
46 app.use('/', routes);
47 app.use('/users', users);
48 app.use('/demo',demo);
49 
50 // 捕獲404錯誤，並轉發到錯誤處理器
51 app.use(function(req, res, next) {
52   var err = new Error('Not Found');
53   err.status = 404;
54   next(err);
55 });
56 
57 // error handlers
58 
59 // 開發環境下的500錯誤處理器，將錯誤信息渲染error模版並顯示到瀏覽器中
60 if (app.get('env') === 'development') {
61   app.use(function(err, req, res, next) {
62     res.status(err.status || 500);
63     res.render('error', {
64       message: err.message,
65       error: err
66     });
67   });
68 }
69 
70 // 生產環境下的錯誤處理器，將錯誤信息渲染error模版並顯示到瀏覽器中
71 // no stacktraces leaked to user
72 app.use(function(err, req, res, next) {
73   res.status(err.status || 500);
74   res.render('error', {
75     message: err.message,
76     error: {}
77   });
78 });
79 
80 //導出app實例供其餘模塊調用
81 module.exports = app;

 

四、Bin/www文件

www文件內容：這裏擁有着http服務器的基本配置，www文件也是一個node的腳本，用於分離配置和啓動程序只用。代碼以下：

 1 #!/usr/bin/env node  //代表是 node 可執行文件
 2 
 3 /**
 4  * Module dependencies.
 5  */
 6 //依賴加載
 7 //引入咱們上面導出的app實例
 8 var app = require('../app');
 9 
10 //引入debug模塊，打印調試日誌
11 var debug = require('debug')('myapp:server');
12 var http = require('http');
13 
14 /**
15  * Get port from environment and store in Express.
16  */
17 //定義啓動端口
18 var port = normalizePort(process.env.PORT || '3000');
19 app.set('port', port);
20 
21 /**
22  * Create HTTP server.
23  */
24 
25 var server = http.createServer(app);
26 
27 /**
28  * Listen on provided port, on all network interfaces.
29  */
30 
31 server.listen(port);
32 server.on('error', onError);
33 server.on('listening', onListening);
34 
35 /**
36  * Normalize a port into a number, string, or false.
37  */
38 //端口標準化函數
39 function normalizePort(val) {
40   var port = parseInt(val, 10);
41 
42   if (isNaN(port)) {
43     // named pipe
44     return val;
45   }
46 
47   if (port >= 0) {
48     // port number
49     return port;
50   }
51 
52   return false;
53 }
54 
55 /**
56  * Event listener for HTTP server "error" event.
57  */
58 //HTTP異常事件處理函數
59 function onError(error) {
60   if (error.syscall !== 'listen') {
61     throw error;
62   }
63 
64   var bind = typeof port === 'string'
65     ? 'Pipe ' + port
66     : 'Port ' + port;
67 
68   // handle specific listen errors with friendly messages
69   switch (error.code) {
70     case 'EACCES':
71       console.error(bind + ' requires elevated privileges');
72       process.exit(1);
73       break;
74     case 'EADDRINUSE':
75       console.error(bind + ' is already in use');
76       process.exit(1);
77       break;
78     default:
79       throw error;
80   }
81 }
82 
83 /**
84  * Event listener for HTTP server "listening" event.
85  */
86 //事件綁定函數
87 function onListening() {
88   var addr = server.address();
89   var bind = typeof addr === 'string'
90     ? 'pipe ' + addr
91     : 'port ' + addr.port;
92   debug('Listening on ' + bind);
93 }

 

五、routes

生成一個路由實例用來捕獲訪問主頁的GET請求，導出這個路由並在app.js中經過app.use('/', routes); 加載。這樣，當訪問主頁時，就會調用res.render('index', { title: 'Express' });渲染views/index.jade模版並顯示到瀏覽器中。

1 var express = require('express');
2 var router = express.Router();
3 
4 /* GET home page. */
5 router.get('/', function(req, res, next) {
6   res.render('index', { title: 'Express' });
7 });
8 
9 module.exports = router;

關於路由，路由中有兩個經常使用功能：

• app.route()函數，建立可連接的途徑處理程序的路由路徑。
• express.Router類，建立模塊化安裝路徑的處理程序。

app.route方法會返回一個Route實例，它能夠繼續使用全部的HTTP方法，包括get,post,all,put,delete,head等。

1 app.route('/users')
2   .get(function(req, res, next) {})
3   .post(function(req, res, next) {})

express.Router類，則能夠幫助咱們更好的組織代碼結構。在app.js文件中，定義了app.use(‘/’, routes); routes是指向了routes目錄下的index.js文件，./routes/index.js文件中，express.Router被定義使用， 路徑/*處理都會由routes/index.js文件裏的Router來處理。若是咱們要管理不一樣的路徑，那麼能夠直接配置爲多個不一樣的Router。

1 app.use('/user', require('./routes/user').user);
2 app.use('/admin', require('./routes/admin').admin);
3 app.use('/', require('./routes'));

 

 

Express生成的骨架大體內容都差很少了解了。下一篇寫一個小demo，連實踐一下。