標籤:create case ons install 流行 3.x 解析 請求 error:
想了非常久。總想寫點對大家有優點的,今天解說產生項目。
如今市面上一般須要人全棧-----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 setupapp.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 handlerapp.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err);});// error handlers// development error handler// will print stacktraceif (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 userapp.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並具體解釋