標籤：資料 format prim roc expr module 依賴庫 http row
學習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或其他模型引擎比如htmlapp.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‘);});// 輸出模型appmodule.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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
