• 概述
• 運(yùn)行原理
• 底層：http模塊
• 對(duì)http模塊的再包裝
• 什么是中間件
• use方法
• Express的方法
• all方法和HTTP動(dòng)詞方法
• set方法
• response對(duì)象
• requst對(duì)象
• 項(xiàng)目開發(fā)實(shí)例
• 編寫啟動(dòng)腳本
• 配置路由
• 靜態(tài)網(wǎng)頁模板
• 動(dòng)態(tài)網(wǎng)頁模板
• 安裝模板引擎
• 新建數(shù)據(jù)腳本
• 新建網(wǎng)頁模板
• 渲染模板
• 指定靜態(tài)文件目錄
• ExpressJS 4.0的Router用法
• 基本用法
• router.route方法
• router中間件
• 對(duì)路徑參數(shù)的處理
• app.route
• 參考鏈接

概述

$ mkdir hello-world

{  "name": "hello-world",  "description": "hello world test app",  "version": "0.0.1",  "private": true,  "dependencies": {    "express": "4.x"  }}

$ npm install

var express = require('express');var app = express();app.use(express.static(__dirname + '/public'));app.listen(8080);

// index.jsvar express = require('express');var app = express();app.get('/', function (req, res) {      res.send('Hello world!');});app.listen(3000);  

node index

// routes/index.jsmodule.exports = function (app) {      app.get('/', function (req, res) {          res.send('Hello world');    });};

// index.jsvar express = require('express');  var app = express();  var routes = require('./routes')(app);  app.listen(3000);  

運(yùn)行原理

var http = require("http");var app = http.createServer(function(request, response) {  response.writeHead(200, {"Content-Type": "text/plain"});  response.end("Hello world!");});app.listen(3000, "localhost");

var express = require('express');var app = express();app.get('/', function (req, res) {      res.send('Hello world!');});app.listen(3000);  var express = require("express");var http = require("http");var app = express();app.use(function(request, response) {  response.writeHead(200, { "Content-Type": "text/plain" });  response.end("Hello world!\n");});http.createServer(app).listen(1337);

function uselessMiddleware(req, res, next) {     next();}

function uselessMiddleware(req, res, next) {     next('出錯(cuò)了！');}

var express = require("express");var http = require("http");var app = express();app.use(function(request, response, next) {  console.log("In comes a " + request.method + " to " + request.url);  next();});app.use(function(request, response) {  response.writeHead(200, { "Content-Type": "text/plain" });  response.end("Hello world!\n");});http.createServer(app).listen(1337);

var express = require("express");var http = require("http");var app = express();app.use(function(request, response, next) {  if (request.url == "/") {    response.writeHead(200, { "Content-Type": "text/plain" });    response.end("Welcome to the homepage!\n");  } else {    next();  }});app.use(function(request, response, next) {  if (request.url == "/about") {    response.writeHead(200, { "Content-Type": "text/plain" });  } else {    next();  }});app.use(function(request, response) {  response.writeHead(404, { "Content-Type": "text/plain" });  response.end("404 error!\n");});http.createServer(app).listen(1337);

app.use('/', someMiddleware);

var express = require("express");var http = require("http");var app = express();app.use("/", function(request, response, next) {    response.writeHead(200, { "Content-Type": "text/plain" });    response.end("Welcome to the homepage!\n");});app.use("/about", function(request, response, next) {    response.writeHead(200, { "Content-Type": "text/plain" });    response.end("Welcome to the about page!\n");});app.use(function(request, response) {  response.writeHead(404, { "Content-Type": "text/plain" });  response.end("404 error!\n");});http.createServer(app).listen(1337);

Express的方法

var express = require("express");var http = require("http");var app = express();app.all("*", function(request, response, next) {  response.writeHead(200, { "Content-Type": "text/plain" });  next();});app.get("/", function(request, response) {  response.end("Welcome to the homepage!");});app.get("/about", function(request, response) {  response.end("Welcome to the about page!");});app.get("*", function(request, response) {  response.end("404!");});http.createServer(app).listen(1337);

app.get("/hello/:who", function(req, res) {  res.end("Hello, " + req.params.who + ".");});

app.get('/hello/:who?',function(req,res) {    if(req.params.id) {        res.end("Hello, " + req.params.who + ".");    }    else {        res.send("Hello, Guest.");    }});

app.get('/forum/:fid/thread/:tid', middleware)// 匹配/commits/71dbb9c// 或/commits/71dbb9c..4c084f9這樣的git格式的網(wǎng)址app.get(/^\/commits\/(\w+)(?:\.\.(\w+))?$/, function(req, res){  var from = req.params[0];  var to = req.params[1] || 'HEAD';  res.send('commit range ' + from + '..' + to);});

app.set("views", __dirname + "/views");app.set("view engine", "jade");

response.redirect("/hello/anime");response.redirect("http://www.example.com");response.redirect(301, "http://www.example.com");

response.sendFile("/path/to/anime.mp4");

app.get("/", function(request, response) {  response.render("index", { message: "Hello World" });});

項(xiàng)目開發(fā)實(shí)例

{   "name": "demo",   "description": "My First Express App",   "version": "0.0.1",   "dependencies": {      "express": "3.x"   }}

var express = require('express');var app = express();

// 設(shè)定port變量，意為訪問端口app.set('port', process.env.PORT || 3000);// 設(shè)定views變量，意為視圖存放的目錄app.set('views', path.join(__dirname, 'views'));// 設(shè)定view engine變量，意為網(wǎng)頁模板引擎app.set('view engine', 'jade');app.use(express.favicon());app.use(express.logger('dev'));app.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);// 設(shè)定靜態(tài)文件目錄，比如本地文件// 目錄為demo/public/images，訪問// 網(wǎng)址則顯示為http://localhost:3000/imagesapp.use(express.static(path.join(__dirname, 'public')));

app.listen(app.get('port'));

node app.js

app.get('/', function(req, res) {   res.send('Hello World');});

node app.js

app.get('/', function(req, res){  var body = 'Hello World';  res.setHeader('Content-Type', 'text/plain');  res.setHeader('Content-Length', body.length);  res.end(body);});

app.get('/api', function(request, response) {   response.send({name:"張三",age:40});});

{  "name": "張三",  "age": 40}

// routes/api.jsexports.index = function (req, res){  res.json(200, {name:"張三",age:40});}

// app.jsvar api = require('./routes/api');app.get('/api', api.index);

var express = require('express');var app = express(); app.get('/', function(req, res) {   res.sendfile('./views/index.html');}); app.get('/about', function(req, res) {   res.sendfile('./views/about.html');}); app.get('/article', function(req, res) {   res.sendfile('./views/article.html');}); app.listen(3000);

<html><head>   <title>首頁</title></head> <body><h1>Express Demo</h1> <footer><p>   <a href="/">首頁</a> - <a href="/about">自我介紹</a> - <a href="/article">文章</a></p></footer> </body></html>

動(dòng)態(tài)網(wǎng)頁模板

npm install hbs --save-dev

// package.json文件{  "name": "demo",  "description": "My First Express App",  "version": "0.0.1",  "dependencies": {    "express": "3.x"  },  "devDependencies": {    "hbs": "~2.3.1"  }}

// app.js文件var express = require('express');var app = express();// 加載hbs模塊var hbs = require('hbs');// 指定模板文件的后綴名為htmlapp.set('view engine', 'html');// 運(yùn)行hbs模塊app.engine('html', hbs.__express);app.get('/', function (req, res){    res.render('index');});app.get('/about', function(req, res) {    res.render('about');});app.get('/article', function(req, res) {    res.render('article');});

// blog.js文件var entries = [    {"id":1, "title":"第一篇", "body":"正文", "published":"6/2/2013"},    {"id":2, "title":"第二篇", "body":"正文", "published":"6/3/2013"},    {"id":3, "title":"第三篇", "body":"正文", "published":"6/4/2013"},    {"id":4, "title":"第四篇", "body":"正文", "published":"6/5/2013"},    {"id":5, "title":"第五篇", "body":"正文", "published":"6/10/2013"},    {"id":6, "title":"第六篇", "body":"正文", "published":"6/12/2013"}];exports.getBlogEntries = function (){   return entries;} exports.getBlogEntry = function (id){   for(var i=0; i < entries.length; i++){      if(entries[i].id == id) return entries[i];   }}

<!-- views/index.html文件 --><h1>文章列表</h1> {{#each entries}}   <p>      <a href="/article/{{id}}">{{title}}</a><br/>      Published: {{published}}   </p>{{/each}}

<!-- views/about.html文件 --><h1>自我介紹</h1> <p>正文</p>

<!-- views/article.html文件 --><h1>{{blog.title}}</h1>Published: {{blog.published}} <p/> {{blog.body}}

<!-- views/layout.html文件 --><html> <head>   <title>{{title}}</title></head> <body>     {{{body}}}    <footer>      <p>         <a href="/">首頁</a> - <a href="/about">自我介紹</a>      </p>   </footer>    </body></html>

// app.js文件var express = require('express');var app = express(); var hbs = require('hbs');// 加載數(shù)據(jù)模塊var blogEngine = require('./blog'); app.set('view engine', 'html');app.engine('html', hbs.__express);app.use(express.bodyParser()); app.get('/', function(req, res) {   res.render('index',{title:"最近文章", entries:blogEngine.getBlogEntries()});}); app.get('/about', function(req, res) {   res.render('about', {title:"自我介紹"});}); app.get('/article/:id', function(req, res) {   var entry = blogEngine.getBlogEntry(req.params.id);   res.render('article',{title:entry.title, blog:entry});}); app.listen(3000);

node app.js

app.use(express.static('public'));

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">

ExpressJS 4.0的Router用法

var router = express.Router();router.get('/', function(req, res) {    res.send('首頁');    });router.get('/about', function(req, res) {    res.send('關(guān)于');    });app.use('/', router);

var router = express.Router();router.route('/api')    .post(function(req, res) {        // ...    })    .get(function(req, res) {        Bear.find(function(err, bears) {            if (err) res.send(err);            res.json(bears);        });    });app.use('/', router);

router.use(function(req, res, next) {    console.log(req.method, req.url);    next();  });

router.param('name', function(req, res, next, name) {    // 對(duì)name進(jìn)行驗(yàn)證或其他處理……    console.log(name);    req.name = name;    next();  });router.get('/hello/:name', function(req, res) {    res.send('hello ' + req.name + '!');});

app.route('/login')    .get(function(req, res) {        res.send('this is the login form');    })    .post(function(req, res) {        console.log('processing');        res.send('processing the login form!');    });

參考鏈接