Node.js的Express框架使用上手指南


Posted in Javascript onMarch 12, 2016

Express介绍
npm提供了大量的第三方模块,其中不乏许多Web框架,比如我们本章节要讲述的一个轻量级的Web框架 ——— Express。

Express是一个简洁、灵活的node.js Web应用开发框架, 它提供一系列强大的功能,比如:模板解析、静态文件服务、中间件、路由控制等等,并且还可以使用插件或整合其他模块来帮助你创建各种 Web和移动设备应用,是目前最流行的基于Node.js的Web开发框架,并且支持Ejs、jade等多种模板,可以快速地搭建一个具有完整功能的网站。

好,下面我们就开始吧!

1. NPM安装

npm install express

2. 获取、引用

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

通过变量“app”我们就可以调用express的各种方法了,好戏刚刚开始,继续加油吧!

创建应用
认识了Express框架,我们开始创建我们的第一个express应用。

在我们的默认项目主文件app.js添加如下内容:

var express = require('express');
var app = express();
app.get('/', function (request, response) {
response.send('Hello World!');
});

app.listen(80);

说明:在后面课程学习中,我们会统一使用80端口用于监听请求。

添加完毕之后,通过右侧栏的“测试地址”来查看浏览器内容,当看到“Hello World!”内容就表明一个简单的express应用已经创建成功了。

get请求
前面我们实现了一个简单的express应用,下面我们就开始具体讲述它的具体实现,首先我们先来学习Express的常用方法。

get方法 —— 根据请求路径来处理客户端发出的GET请求。

格式:

app.get(path,function(request, response));

path为请求的路径,第二个参数为处理请求的回调函数,有两个参数分别是request和response,代表请求信息和响应信息。

如下示例:

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

app.get('/', function(request, response) {
response.send('Welcome to the homepage!');
});
app.get('/about', function(request, response) {

response.send('Welcome to the about page!');
});
app.get("*", function(request, response) {

response.send("404 error!");
});
app.listen(80);

上面示例中,指定了about页面路径、根路径和所有路径的处理方法。并且在回调函数内部,使用HTTP回应的send方法,表示向浏览器发送一个字符串。

参照以上代码,试试自己设定一个get请求路径,然后浏览器访问该地址是否可以请求成功。

Middleware<中间件>
1.什么是中间件?

中间件(middleware)就是处理HTTP请求的函数,用来完成各种特定的任务,比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。 它最大的特点就是,一个中间件处理完,可以把相应数据再传递给下一个中间件。

2.一个不进行任何操作、只传递request对象的中间件,大概是这样:

function Middleware(request, response, next) {
next();
}

上面代码的next为中间件的回调函数。如果它带有参数,则代表抛出一个错误,参数为错误文本。

function Middleware(request, response, next) {
next('出错了!');
}

抛出错误以后,后面的中间件将不再执行,直到发现一个错误处理函数为止。如果没有调用next方法,后面注册的函数也是不会执行的。

all函数的基本用法
和get函数不同app.all()函数可以匹配所有的HTTP动词,也就是说它可以过滤所有路径的请求,如果使用all函数定义中间件,那么就相当于所有请求都必须先通过此该中间件。

格式:

app.all(path,function(request, response));

如下所示,我们使用all函数在请求之前设置响应头属性。

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

app.all("*", function(request, response, next) {
response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); //设置响应头属性值
next();
});

app.get("/", function(request, response) {

response.end("欢迎来到首页!");
});

app.get("/about", function(request, response) {

response.end("欢迎来到about页面!");
});

app.get("*", function(request, response) {

response.end("404 - 未找到!");
});

app.listen(80);

上面代码参数中的“*”表示对所有路径有效,这个方法在给特定前缀路径或者任意路径上处理时会特别有用,不管我们请求任何路径都会事先经过all函数。

如果所示,如果我们跳过all函数又会怎么样呢,自己动手试一试?

use基本用法1
use是express调用中间件的方法,它返回一个函数。

格式:

app.use([path], function(request, response, next){});

//可选参数path默认为"/"。

1. 使用中间件

app.use(express.static(path.join(__dirname, '/')));

如上呢,我们就使用use函数调用express中间件设定了静态文件目录的访问路径(这里假设为根路径)。

2. 如何连续调用两个中间件呢,如下示例:

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

app.use(function(request, response, next){
 console.log("method:"+request.method+" ==== "+"url:"+request.url);
 next();
});

app.use(function(request, response){
 response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
 response.end('示例:连续调用两个中间件');
});

app.listen(80);

回调函数的next参数,表示接受其他中间件的调用,函数体中的next(),表示将请求数据传递给下一个中间件。

上面代码先调用第一个中间件,在控制台输出一行信息,然后通过next(),调用第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以req对象就不再向后传递了。

use基本用法2
use方法不仅可以调用中间件,还可以根据请求的网址,返回不同的网页内容,如下示例:

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

app.use(function(request, response, next) {
if(request.url == "/") {


response.send("Welcome to the homepage!");

}else {


next();

}
});

app.use(function(request, response, next) {

if(request.url == "/about") {


response.send("Welcome to the about page!");

}else {


next();

}
});
app.use(function(request, response) {

response.send("404 error!");
});
app.listen(80);

上面代码通过request.url属性,判断请求的网址,从而返回不同的内容。

回调函数
Express回调函数有两个参数,分别是request(简称req)和response(简称res),request代表客户端发来的HTTP请求,request代表发向客户端的HTTP回应,这两个参数都是对象。示例如下:

function(req, res) {
});

在后面的学习中,我们会经常和它打交道,牢牢记住它的格式吧!

获取主机名、路径名
今天我们就先来学习如何使用req对象来处理客户端发来的HTTP请求。

req.host返回请求头里取的主机名(不包含端口号)。

req.path返回请求的URL的路径名。

如下示例:

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

app.get("*", function(req, res) {
console.log(req.path);

res.send("req.host获取主机名,req.path获取请求路径名!");
});

app.listen(80);

试一试在浏览器中输入任意一个请求路径,通过req查看主机名或请求路径。

query基本用法
query是一个可获取客户端get请求路径参数的对象属性,包含着被解析过的请求参数对象,默认为{}。

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

app.get("*", function(req, res) {
console.log(req.query.参数名);

res.send("测试query属性!");
});

app.listen(80);

通过req.query获取get请求路径的对象参数值。

格式:req.query.参数名;请求路径如下示例:

例1: /search?n=Lenka

req.query.n // "Lenka"

例2: /shoes?order=desc&shoe[color]=blue&shoe[type]=converse

req.query.order // "desc"

req.query.shoe.color // "blue"

req.query.shoe.type // "converse"

试一试get请求一个带参数路径,使用“req.query.参数名”方法获取请求参数值。

param基本用法
和属性query一样,通过req.param我们也可以获取被解析过的请求参数对象的值。

格式:req.param("参数名");请求路径如下示例:

例1: 获取请求根路径的参数值,如/?n=Lenka,方法如下:

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

app.get("/", function(req, res) {

console.log(req.param("n")); //Lenka


res.send("使用req.param属性获取请求根路径的参数对象值!");

});
app.listen(80);

例2:我们也可以获取具有相应路由规则的请求对象,假设路由规则为 /user/:name/,请求路径/user/mike,如下:

app.get("/user/:name/", function(req, res) {
console.log(req.param("name")); //mike

res.send("使用req.param属性获取具有路由规则的参数对象值!");
});

PS:所谓“路由”,就是指为不同的访问路径,指定不同的处理方法。

看了上面的示例,试一试使用req.param属性解析一个请求路径对象,并获取请求参数值。

params基本用法
和param相似,但params是一个可以解析包含着有复杂命名路由规则的请求对象的属性。

格式:req.params.参数名;

例1. 如上课时请求根路径的例子,我们就可以这样获取,如下:

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

app.get("/user/:name/", function(req, res) {
console.log(req.params.name); //mike

res.send("使用req.params属性获取具有路由规则的参数对象值!");
});

app.listen(80);

查看运行结果,和param属性功能是一样的,同样获取name参数值。

例2:当然我们也可以请求复杂的路由规则,如/user/:name/:id,假设请求地址为:/user/mike/123,如下:

app.get("/user/:name/:id", function(req, res) {
console.log(req.params.id); //"123"

res.send("使用req.params属性复杂路由规则的参数对象值!");
});

对于请求地址具有路由规则的路径来说,属性params比param属性是不是又强大了那么一点点呢!

send基本用法
send()方法向浏览器发送一个响应信息,并可以智能处理不同类型的数据。格式如下: res.send([body|status], [body]);

1.当参数为一个String时,Content-Type默认设置为"text/html"。

res.send('Hello World'); //Hello World

2.当参数为Array或Object时,Express会返回一个JSON。

res.send({ user: 'tobi' }); //{"user":"tobi"}
res.send([1,2,3]); //[1,2,3]

3.当参数为一个Number时,并且没有上面提到的任何一条在响应体里,Express会帮你设置一个响应体,比如:200会返回字符"OK"。

res.send(200); // OK
res.send(404); // Not Found
res.send(500); // Internal Server Error

send方法在输出响应时会自动进行一些设置,比如HEAD信息、HTTP缓存支持等等。

Javascript 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 #Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 #Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 #Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 #Javascript
原生JavaScript制作微博发布面板效果
Mar 11 #Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 #Javascript
详解Angularjs中的依赖注入
Mar 11 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
讲解Python中的递归函数
2015/04/27 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
关于人生的感言
2014/01/17 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2015年度物流工作总结
2015/04/30 职场文书
鸡毛信观后感
2015/06/11 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
ipad隐藏软件app图标方法
2022/04/19 数码科技