nodejs入門篇---創建project並具體解釋
想了非常久。總想寫點對大家有優點的，今天解說生成項目。
如今市面上一般須要人全棧-----mean（mongo，express。angular，nodejs），這樣能夠從前端開發到後端以及數據庫，聽起來牛呼呼的。
這篇文章就說nodejs和比較流行的框架express4.X版本號（因為3.X版本號沒怎麽研究過。並且和4有一定差別。況且4也出來非常久了。非用不可啊），後面的文章會帶上mongo（oh。應該說是mongoose）至於angualr我有獨立的研究過。和nodejs之流放在一起用還沒搞過，還是看實際情況吧。
這篇文章就寫個生成項目（頁面就用ejs，對jade木有還沒研究，不能坑了大夥）
眾所周知，一個project肯定有非常多目錄以及文件。那麽怎麽高速生成開發框架呢。兩種方式，第一是使用工具，我用的是webstorm，另一個是語法，用命令操作到工作空間，然後運行命令 express -e aTest（當中-e就是指ejs。aTest是project名。也是最上層的目錄名），為了可以形象化截圖。我們還是用工具生成。
1：new一個project，各種開發都是從這裏開始的
2：選nodeproject
3：選版本和驅動面板，版本不改，驅動面板改成ejs。點擊ok
因為我們本地已經安裝了nodejs。所以我們點擊cancel
這樣，一個nodejsproject生成了。例如以下圖
文件夾解釋：
app.js：啟動文件，或者說入口文件
package.json：存儲著project信息以及模板依賴，當在dependencies中加入依賴的模塊時。執行npm install，nmp會檢查當前文件夾下的package.json，並自己主動安裝全部指定的模塊
node_modules：存放package.json中安裝的模塊，當你在package.json加入依賴的模塊並安裝後，存放在這個目錄下
public：存放image、css、js等文件
routes：存放路由文件
views：存放視圖文件或者說模板文件
bin：存放可運行文件
打開app.js
<span style="font-size:14px;">var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
</span>
這裏我們通過require()載入了express、path 等模塊,以及 routes 目錄下的index. js和 users.js 路由文件。 以下來解說每行代碼的含義。
(1) var app = express()：生成一個express實例 app。
(2)app.set(‘views‘, path.join(__dirname, ‘views’))：設置 views 文件夾為存放視圖文件的文件夾, 即存放模板文件的地方,__dirname 為全局變量,存儲當前正在運行的腳本所在的文件夾。
(3)app.set(‘view engine‘, ‘ejs’)：設置視圖模板引擎為 ejs。
(4)app.use(favicon(__dirname + ‘/public/favicon.ico’))：設置/public/favicon.ico為favicon圖標。
(5)app.use(logger(‘dev’))：載入日誌中間件。
(6)app.use(bodyParser.json())：載入解析json的中間件。
(7)app.use(bodyParser.urlencoded({ extended: false }))：載入解析urlencoded請求體的中間件。
(8)app.use(cookieParser())：載入解析cookie的中間件。
(9)app.use(express.static(path.join(__dirname, ‘public‘)))：設置public文件夾為存放靜態文件的文件夾。
(10)app.use(‘/‘, routes);和app.use(‘/users‘, users)：路由控制器。
(11)
app.use(function(req, res, next) {
var err = new Error(‘Not Found‘);
err.status = 404;
next(err);
});
捕獲404錯誤，並轉發到錯誤處理器。
(12)
if (app.get(‘env‘) === ‘development‘) {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error‘, {
message: err.message,
error: err
});
});
}
開發環境下的錯誤處理器，將錯誤信息渲染error模版並顯示到瀏覽器中。
(13)
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error‘, {
message: err.message,
error: {}
});
});
生產環境下的錯誤處理器。將錯誤信息渲染error模版並顯示到瀏覽器中。
(14)module.exports = app ：導出app實例供其它模塊調用。
接下來再看看bin/www文件
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('aTest:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
?
'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
解釋一下：
(1)#!/usr/bin/env node：表明是 node 可運行文件。
(2)var debug = require(‘debug‘)(‘blog’)：引入debug模塊。打印調試日誌。
(3)var app = require(‘../app’)：引入我們上面導出的app實例。
(4)app.set(‘port‘, process.env.PORT || 3000)：設置端口號。
(5)
var server = app.listen(app.get(‘port‘), function() {
debug(‘Express server listening on port ‘ + server.address().port);
});
啟動project並監聽3000端口，成功後打印 Express server listening on port 3000。
以下再看一下 routes/index.js 文件：
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
生成一個路由實例用來捕獲訪問主頁的GET請求，導出這個路由並在app.js中通過app.use(‘/‘, routes); 載入。
這樣，當訪問主頁時，就會調用res.render(‘index‘, { title: ‘Express‘ });渲染views/index.ejs模版並顯示到瀏覽器中。
再看 views/index.ejs 文件：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
在渲染模板時我們傳入了一個變量 title 值為 express 字符串。模板引擎會將全部 <%= title %> 替換為 express 。然後將渲染後生成的html顯示到瀏覽器中，如上圖所看到的。
通過上面的知識。我們學習了怎樣創建一個project並啟動它。了解了project的大體結構和運作流程。下一篇講路由。
。。
nodejs入門篇---創建project並具體解釋