nodejs之express4x
學習node好榜樣！前陣子看了php，那個模塊化編譯真的好棒。然而php學習起來不是一般的記不住，畢竟和js還是有不同的。於是轉移到了node。看到熟悉的js腳本，心裏踏實多了。
話不多講，php我也是要駕馭的，只是要排到後面去了。今天先來個基於node的框架之express4的模板實例
官網api：http://www.expressjs.com.cn/4x/api.html
1.首先，全局安裝。
npm install -g [email protected]
2.檢測安裝結果
express --version
3.創建項目，這裏我選擇d盤node文件夾，安裝框架模板。
express -e nodeDemo
4.進入項目安裝依賴
cd nodeDemo && npm install
5.運行項目，如果不知道運行命令是啥，打開項目根目錄下‘package.json’文件，查看scripts對象裏默認第一個的屬性名，這個模板裏叫start。
npm start
6.運行之後，打開項目根目錄下的bin文件夾裏的www.js，查看這一句代碼：‘var port = normalizePort(process.env.PORT || ‘3000‘);’3000就是端口號。基於node服務器本機ip原則。在瀏覽器輸入。
localhost:3000 或者 127.0.0.1:3000
7.項目結構
bin, 存放啟動項目的腳本文件
node_modules, 存放所有的項目依賴庫。
public，靜態文件(css,js,img)
routes，路由文件(MVC中的C,controller)
views，頁面文件(Ejs模板)
package.json，項目依賴配置及開發者信息
app.js，應用核心配置文件
8.app.js核心文件說明
// 加載依賴庫，原來這個類庫都封裝在connect中，現在需地註單獨加載
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 index = require(‘./routes/index‘);
var users = require(‘./routes/users‘);
// 創建項目實例
var app = express();
// // 定義EJS模板引擎和模板文件位置，也可以使用jade或其他模型引擎比如html
app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘ejs‘);
//如果選用html模版就把下面的註釋並打開把上面這句註釋即可。
/*
app.engine(‘.html‘, ejs.__express);
app.set(‘view engine‘, ‘html‘);
*/
// uncomment after placing your favicon in /public// 定義icon圖標
//app.use(favicon(path.join(__dirname, ‘public‘, ‘favicon.ico‘)));
// 定義日誌和輸出級別
app.use(logger(‘dev‘));
// 定義數據解析器
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 定義cookie解析器
app.use(cookieParser());
// 定義靜態文件目錄
app.use(express.static(path.join(__dirname, ‘public‘)));
// 匹配路徑和路由
app.use(‘/‘, index);
app.use(‘/users‘, users);
// catch 404 and forward to error handler//404錯誤
app.use(function(req, res, next) {
var err = new Error(‘Not Found‘);
err.status = 404;
next(err);
});
// error handler//500錯誤
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get(‘env‘) === ‘development‘ ? err : {};
// render the error page
res.status(err.status || 500);
res.render(‘error‘);
});
// 輸出模型app
module.exports = app;
9.查看./bin/www文件。
#!/usr/bin/env node
/**
* 依賴加載
*/
var app = require(‘../app‘);
var debug = require(‘debug‘)(‘nodedemo1:server‘);
var http = require(‘http‘);
/**
* 定義啟動端口.
*/
var port = normalizePort(process.env.PORT || ‘3000‘);
app.set(‘port‘, port);
/**
* 創建HTTP服務器實例
*/
var server = http.createServer(app);
/**
* 啟動網絡服務監聽端口
*/
server.listen(port);
server.on(‘error‘, onError);
server.on(‘listening‘, onListening);
/**
* 端口標準化函數
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* HTTP異常事件處理函數
*/
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;
}
}
/**
* 事件綁定函數
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === ‘string‘
? ‘pipe ‘ + addr
: ‘port ‘ + addr.port;
debug(‘Listening on ‘ + bind);
}
10.編輯views/index.ejs文件
這裏就是前臺展示的頁面了。可以使用我們熟悉框架啊之類的。文件類型是ejs的，如果想用熟悉的html的，需要在app.js裏修改一下就好，我已經在上面代碼中寫清楚了註釋。
11.重點來了，我夢寐以求的模塊化網站：把index.ejs頁面切分成3個部分：header.ejs, index.ejs, footer.ejs，用於網站頁面的模塊化。
編輯header.ejs。註意結構！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
</head>
<body>
編輯footer.ejs。
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
編輯index.ejs。
<% include header.ejs %> <div class="well jumbotron"> <h1><%= title %></h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <% include footer.ejs %>
重新啟動項目，刷新頁面就會看到結果了。
這裏需要註意，如果你的模塊組件放在了其他文件夾下 那麽引入的命令裏是可以加路徑的，如果你換成了html模板的話，記得把引入命令也修改了。比如：<% include ./psge/header.html %>
至於路由啊還有更高層次的就到官網上看api吧http://www.expressjs.com.cn/4x/api.html
入門到此結束。
<% include header.ejs %>
<div class="well jumbotron">
<h1><%= title %></h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<% include footer.ejs %>nodejs之express4x