* Raymond Camden, [Introduction to Express](http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-express/) * Christopher Buecheler, [Getting Started With Node.js, Express, MongoDB](http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/) * Stephen Sugden, [A short guide to Connect Middleware](http://stephensugden.com/middleware_guide/) * Evan Hahn, [Understanding Express.js](http://evanhahn.com/understanding-express/) * Chris Sevilleja, [Learn to Use the New Router in ExpressJS 4.0](http://scotch.io/tutorials/javascript/learn-to-use-the-new-router-in-expressjs-4) * Stefan Fidanov, [Limitless file uploading to Amazon S3 with Node & Express](http://www.terlici.com/2015/05/23/uploading-files-S3.html) ## 功能链接 * [论坛](https://github.com/ruanyf/jstutorial/issues) * [Markdown源码](https://raw.github.com/ruanyf/jstutorial/gh-pages/nodejs/express.md) * [修订历史](https://github.com/ruanyf/jstutorial/commits/gh-pages/nodejs/express.md)

首先，在网页插入上传文件的表单。 ~~~ Select an image to upload: ~~~ 然后，服务器脚本建立指向`/upload`目录的路由。这时可以安装multer模块，它提供了上传文件的许多功能。 ~~~ var express = require('express'); var router = express.Router(); var multer = require('multer'); var uploading = multer({ dest: __dirname + '../public/uploads/', // 设定限制，每次最多上传1个文件，文件大小不超过1MB limits: {fileSize: 1000000, files:1}, }) router.post('/upload', uploading, function(req, res) { }) module.exports = router ~~~ 上面代码是上传文件到本地目录。下面是上传到Amazon S3的例子。 首先，在S3上面新增CORS配置文件。 ~~~ * GET POST PUT * ~~~ 上面的配置允许任意电脑向你的bucket发送HTTP请求。 然后，安装aws-sdk。 ~~~ $ npm install aws-sdk --save ~~~ 下面是服务器脚本。 ~~~ var express = require('express'); var router = express.Router(); var aws = require('aws-sdk'); router.get('/', function(req, res) { res.render('index') }) var AWS_ACCESS_KEY = 'your_AWS_access_key' var AWS_SECRET_KEY = 'your_AWS_secret_key' var S3_BUCKET = 'images_upload' router.get('/sign', function(req, res) { aws.config.update({accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY}); var s3 = new aws.S3() var options = { Bucket: S3_BUCKET, Key: req.query.file_name, Expires: 60, ContentType: req.query.file_type, ACL: 'public-read' } s3.getSignedUrl('putObject', options, function(err, data){ if(err) return res.send('Error with S3') res.json({ signed_request: data, url: 'https://s3.amazonaws.com/' + S3_BUCKET + '/' + req.query.file_name }) }) }) module.exports = router ~~~ 上面代码中，用户访问`/sign`路径，正确登录后，会收到一个JSON对象，里面是S3返回的数据和一个暂时用来接收上传文件的URL，有效期只有60秒。 浏览器代码如下。 ~~~ // HTML代码为 // Please select an image // // // document.getElementById("image").onchange = function() { var file = document.getElementById("image").files[0] if (!file) return sign_request(file, function(response) { upload(file, response.signed_request, response.url, function() { document.getElementById("preview").src = response.url }) }) } function sign_request(file, done) { var xhr = new XMLHttpRequest() xhr.open("GET", "/sign?file_name=" + file.name + "&file_type=" + file.type) xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText) done(response) } } xhr.send() } function upload(file, signed_request, url, done) { var xhr = new XMLHttpRequest() xhr.open("PUT", signed_request) xhr.setRequestHeader('x-amz-acl', 'public-read') xhr.onload = function() { if (xhr.status === 200) { done() } } xhr.send(file) } ~~~ 上面代码首先监听file控件的change事件，一旦有变化，就先向服务器要求一个临时的上传URL，然后向该URL上传文件。

router对象的param方法用于路径参数的处理，可以 ~~~ router.param('name', function(req, res, next, name) { // 对name进行验证或其他处理…… console.log(name); req.name = name; next(); }); router.get('/hello/:name', function(req, res) { res.send('hello ' + req.name + '!'); }); ~~~ 上面代码中，get方法为访问路径指定了name参数，param方法则是对name参数进行处理。注意，param方法必须放在HTTP动词方法之前。

router实例对象的route方法，可以接受访问路径作为参数。 ~~~ 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); ~~~

Express 4.0的router对象，需要单独新建。然后，使用该对象的HTTP动词方法，为不同的访问路径，指定回调函数；最后，挂载到某个路径 ~~~ var router = express.Router(); router.get('/', function(req, res) { res.send('首页'); }); router.get('/about', function(req, res) { res.send('关于'); }); app.use('/', router); ~~~ 上面代码先定义了两个访问路径，然后将它们挂载到根目录。如果最后一行改为app.use('/app', router)，则相当于/app和/app/about这两个路径，指定了回调函数。 这种挂载路径和router对象分离的做法，为程序带来了更大的灵活性，既可以定义多个router对象，也可以为将同一个router对象挂载到多个路径。

Express 4.0的Router用法，做了大幅改变，增加了很多新的功能。Router成了一个单独的组件，好像小型的express应用程序一样，有自己的use、get、param和route方法。

模板文件默认存放在views子目录。这时，如果要在网页中加载静态文件（比如样式表、图片等），就需要另外指定一个存放静态文件的目录。 ~~~ app.use(express.static('public')); ~~~ 上面代码在文件app.js之中，指定静态文件存放的目录是public。于是，当浏览器发出非HTML文件请求时，服务器端就到public目录寻找这个文件。比如，浏览器发出如下的样式表请求： ~~~ ~~~ 服务器端就到public/bootstrap/css/目录中寻找bootstrap.css文件。

最后，改写app.js文件。 ~~~ // app.js文件 var express = require('express'); var app = express(); var hbs = require('hbs'); // 加载数据模块 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); ~~~ 上面代码中的render方法，现在加入了第二个参数，表示模板变量绑定的数据。 现在重启node服务器，然后访问[http://127.0.0.1:3000。](http://127.0.0.1:3000%E3%80%82/) ~~~ node app.js ~~~ 可以看得，模板已经使用加载的数据渲染成功了。

接着，新建模板文件index.html。 ~~~ 文章列表 {{#each entries}} {{title}} Published: {{published}} {{/each}} ~~~ 模板文件about.html。 ~~~ 自我介绍 正文 ~~~ 模板文件article.html。 ~~~ {{blog.title}} Published: {{blog.published}} {{blog.body}} ~~~ 可以看到，上面三个模板文件都只有网页主体。因为网页布局是共享的，所以布局的部分可以单独新建一个文件layout.html。 ~~~ {{title}} {{{body}}} 首页 - 自我介绍 ~~~

渲染是指将数据代入模板的过程。实际运用中，数据都是保存在数据库之中的，这里为了简化问题，假定数据保存在一个脚本文件中。 在项目目录中，新建一个文件blog.js，用于存放数据。blog.js的写法符合CommonJS规范，使得它可以被require语句加载。 ~~~ // 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]; } } ~~~

Express支持多种模板引擎，这里采用Handlebars模板引擎的服务器端版本[hbs](https://github.com/donpark/hbs)模板引擎。 先安装hbs。 ~~~ npm install hbs --save-dev ~~~ 上面代码将hbs模块，安装在项目目录的子目录node_modules之中。save-dev参数表示，将依赖关系写入package.json文件。安装以后的package.json文件变成下面这样： ~~~ // package.json文件 { "name": "demo", "description": "My First Express App", "version": "0.0.1", "dependencies": { "express": "3.x" }, "devDependencies": { "hbs": "~2.3.1" } } ~~~ 安装模板引擎之后，就要改写app.js。 ~~~ // app.js文件 var express = require('express'); var app = express(); // 加载hbs模块 var hbs = require('hbs'); // 指定模板文件的后缀名为html app.set('view engine', 'html'); // 运行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'); }); ~~~ 上面代码改用render方法，对网页模板进行渲染。render方法的参数就是模板的文件名，默认放在子目录views之中，后缀名已经在前面指定为html，这里可以省略。所以，res.render('index') 就是指，把子目录views下面的index.html文件，交给模板引擎hbs渲染。

在项目目录之中，建立一个子目录views，用于存放网页模板。 假定这个项目有三个路径：根路径（/）、自我介绍（/about）和文章（/article）。那么，app.js可以这样写： ~~~ 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); ~~~ 上面代码表示，三个路径分别对应views目录中的三个模板：index.html、about.html和article.html。另外，向服务器发送信息的方法，从send变成了sendfile，后者专门用于发送文件。 假定index.html的内容如下： ~~~ 首页 Express Demo 首页 - 自我介绍 - 文章 ~~~ 上面代码是一个静态网页。如果想要展示动态内容，就必须使用动态网页模板。

所谓“路由”，就是指为不同的访问路径，指定不同的处理方法。 （1）指定根路径 在app.js之中，先指定根路径的处理方法。 ~~~ app.get('/', function(req, res) { res.send('Hello World'); }); ~~~ 上面代码的get方法，表示处理客户端发出的GET请求。相应的，还有app.post、app.put、app.del（delete是JavaScript保留字，所以改叫del）方法。 get方法的第一个参数是访问路径，正斜杠（/）就代表根路径；第二个参数是回调函数，它的req参数表示客户端发来的HTTP请求，res参数代表发向客户端的HTTP回应，这两个参数都是对象。在回调函数内部，使用HTTP回应的send方法，表示向浏览器发送一个字符串。然后，运行下面的命令。 ~~~ node app.js ~~~ 此时，在浏览器中访问[http://127.0.0.1:3000，网页就会显示“Hello](http://127.0.0.1:3000%EF%BC%8C%E7%BD%91%E9%A1%B5%E5%B0%B1%E4%BC%9A%E6%98%BE%E7%A4%BA%E2%80%9CHello/) World”。 如果需要指定HTTP头信息，回调函数就必须换一种写法，要使用setHeader方法与end方法。 ~~~ app.get('/', function(req, res){ var body = 'Hello World'; res.setHeader('Content-Type', 'text/plain'); res.setHeader('Content-Length', body.length); res.end(body); }); ~~~ （2）指定特定路径 上面是处理根目录的情况，下面再举一个例子。假定用户访问/api路径，希望返回一个JSON字符串。这时，get可以这样写。 ~~~ app.get('/api', function(request, response) { response.send({name:"张三",age:40}); }); ~~~ 上面代码表示，除了发送字符串，send方法还可以直接发送对象。重新启动node以后，再访问路径/api，浏览器就会显示一个JSON对象。 ~~~ { "name": "张三", "age": 40 } ~~~ 我们也可以把app.get的回调函数，封装成模块。先在routes目录下面建立一个api.js文件。 ~~~ // routes/api.js exports.index = function (req, res){ res.json(200, {name:"张三",age:40}); } ~~~ 然后，在app.js中加载这个模块。 ~~~ // app.js var api = require('./routes/api'); app.get('/api', api.index); ~~~ 现在访问时，就会显示与上一次同样的结果。 如果只向浏览器发送简单的文本信息，上面的方法已经够用；但是如果要向浏览器发送复杂的内容，还是应该使用网页模板。

上一节使用express命令自动建立项目，也可以不使用这个命令，手动新建所有文件。 先建立一个项目目录（假定这个目录叫做demo）。进入该目录，新建一个package.json文件，写入项目的配置信息。 ~~~ { "name": "demo", "description": "My First Express App", "version": "0.0.1", "dependencies": { "express": "3.x" } } ~~~ 在项目目录中，新建文件app.js。项目的代码就放在这个文件里面。 ~~~ var express = require('express'); var app = express(); ~~~ 上面代码首先加载express模块，赋给变量express。然后，生成express实例，赋给变量app。 接着，设定express实例的参数。 ~~~ // 设定port变量，意为访问端口 app.set('port', process.env.PORT || 3000); // 设定views变量，意为视图存放的目录 app.set('views', path.join(__dirname, 'views')); // 设定view engine变量，意为网页模板引擎 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); // 设定静态文件目录，比如本地文件 // 目录为demo/public/images，访问 // 网址则显示为http://localhost:3000/images app.use(express.static(path.join(__dirname, 'public'))); ~~~ 上面代码中的set方法用于设定内部变量，use方法用于调用express的中间件。 最后，调用实例方法listen，让其监听事先设定的端口（3000）。 ~~~ app.listen(app.get('port')); ~~~ 这时，运行下面的命令，就可以在浏览器访问[http://127.0.0.1:3000。](http://127.0.0.1:3000%E3%80%82/) ~~~ node app.js ~~~ 网页提示“Cannot GET /”，表示没有为网站的根路径指定可以显示的内容。所以，下一步就是配置路由。

（1）request.ip request.ip属性用于获得HTTP请求的IP地址。 （2）request.files request.files用于获取上传的文件。

（1）response.redirect方法 response.redirect方法允许网址的重定向。 ~~~ response.redirect("/hello/anime"); response.redirect("http://www.example.com"); response.redirect(301, "http://www.example.com"); ~~~ （2）response.sendFile方法 response.sendFile方法用于发送文件。 ~~~ response.sendFile("/path/to/anime.mp4"); ~~~ （3）response.render方法 response.render方法用于渲染网页模板。 ~~~ app.get("/", function(request, response) { response.render("index", { message: "Hello World" }); }); ~~~ 上面代码使用render方法，将message变量传入index模板，渲染成HTML网页。

set方法用于指定变量的值。 ~~~ app.set("views", __dirname + "/views"); app.set("view engine", "jade"); ~~~ 上面代码使用set方法，为系统变量“views”和“view engine”指定值。