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

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缓存支持等等。

(0)

相关推荐

  • node.js express中app.param的用法详解

    前言 大家应该都知道,express中app.param方法用于验证参数,我个人把它理解成类似对参数过滤的一个中间件.在这里我来结合几个demo,加深大家对app.param方法的理解.下面话不多说,来一起通过示例代码看看详细的介绍吧. demo1: var express = require('express'); var app = express(); app.param(function(param, option) { return function (req, res, next,

  • node.js Web应用框架Express入门指南

    一.安装 复制代码 代码如下: $ npm install express 或者在任何地方使用可执行的 express(1) 安装: 复制代码 代码如下: \# 译注:强烈建议这种方式$ npm install -g express 二.快速上手 最快上手 express 的方法是利用可执行的 express(1) 来生成一个应用,如下所示: 创建一个 app: 复制代码 代码如下: $ npm install -g express$ express /tmp/foo && cd /tmp

  • Node.js和Express简单入门介绍

    仅仅入门如何用Node.js和Express搭建一个web服务器,没有说明太多概念性的东西. 一. Nodejs简介 ​ ==Node是JavaScript语言的服务器运行环境.== ​ 所谓"运行环境"有两层意思:首先,JavaScript语言通过Node在服务器运行,在这个意义上,Node有点像JavaScript虚拟机:其次,Node提供大量工具库,使得JavaScript语言与操作系统互动(比如读写文件.新建子进程),在这个意义上,Node又是JavaScript的工具库. ​

  • Node.js+Express配置入门教程详解

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型

  • 从零学习node.js之express入门(六)

    一. 介绍 什么是express,为什么要使用express?根据官方网站的说法,express是一个基于 Node.js 平台的极简.灵活的web应用开发框架,它提供一系列强大的特性.丰富的API接口,对web应用的接口进行了二次的封装,提供了MVC模式,方便我们可以快速地创建各种web和移动应用. Express 框架核心特性: 可以设置中间件来响应 HTTP 请求. 定义了路由表用于执行不同的 HTTP 请求动作. 可以通过向模板传递参数来动态渲染 HTML 页面. 本文也只是简单的了解下

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

    Express介绍 npm提供了大量的第三方模块,其中不乏许多Web框架,比如我们本章节要讲述的一个轻量级的Web框架 --- Express. Express是一个简洁.灵活的node.js Web应用开发框架, 它提供一系列强大的功能,比如:模板解析.静态文件服务.中间件.路由控制等等,并且还可以使用插件或整合其他模块来帮助你创建各种 Web和移动设备应用,是目前最流行的基于Node.js的Web开发框架,并且支持Ejs.jade等多种模板,可以快速地搭建一个具有完整功能的网站. 好,下面我

  • node.js使用express框架进行文件上传详解

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究. 目前的研究算是取得的比较好的进展. Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口. 于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api). 话不多说,直接代码贴起讲解: 1.创建一个node.js项目(这里我以ex

  • Node.js中Express框架的使用教程详解

    目录 Express简介 Express生成器 1. 什么是Express生成器 2. 安装Express生成器 创建Express项目 安装项目依赖 运行Express项目 Express目录结构说明 创建一个新路由模块 1. 创建ejs模块文件 2. 创建路由文件 3. 在app.js中引入路由 4. 运行项目 经过前面几天对Node.js的学习,基本的开发知识已经逐渐掌握,所谓工欲善其事必先利其器,今天进一步学习Node.js的开发框架Express.利用Express框架可以快速的进行W

  • Node.js使用Express.Router的方法

    在实际开发中通常有几十甚至上百的路由,都写在 index.js 既臃肿又不好维护,这时可以使用 express.Router 实现更优雅的路由解决方案. 目录结构如下: routes的index.js代码如下: const express = require('express') const router = express.Router() router.get('/', function (req, res) { res.send('hello, express') }) module.ex

  • 微信小程序的mpvue框架快速上手指南

    一.什么是mpvue框架? mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序),mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验. 二.必要的开发基础 ① 熟练掌握vue.js(未曾使用过vue这个框架的话,建议vue的官方文档进行学习:https://cn.vue

  • node.js(express)中使用Jcrop进行图片剪切上传功能

    需求说明 简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程 说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64

  • 十大 Node.js 的 Web 框架(快速提升工作效率)

    Node.js 系统含有多种不同的结构,如 MVC.全栈.REST API 和生成器等.这些结构不仅提升了 Web 应用的开发效率,也优化了开发过程.在这里,我们收集整理了十个高效的 Node.js 框架,希望对你有帮助. 1.Node.js 开发框架 Sail.js Sails.js 就像是 Node.js 平台上的 Rails 框架.这是一个可靠可伸缩的开发框架,面向服务的架构,提供数据驱动的 API 集合.用来开发多玩家游戏.聊天应用和实时面板引用非常方便,也可用于开发企业级 Node.j

  • Node.js利用Express实现用户注册登陆功能(推荐)

    要求 了解Express框架 了解node.js常用模块:express,body-parser,mysql 了解express Router 了解HTML form表单 了解MySQL Server 及安装使用 了解SQLyog使用 环境 OS: Win10 Node.js: v12.19.0 Express: v4.17.1 Yarn: v1.22.10 使用VScode IDE body-parser:1.19.0 mysql: 2.18.1 MySQL Server:5.7 SQLyog

  • 基于node.js依赖express解析post请求四种数据格式

    node.js依赖express解析post请求四种数据格式 分别是这四种: www-form-urlencoded form-data application/json text/xml 1.www-form-urlencoded 这是http的post请求默认的数据格式,需要body-parser中间件的支持 服务器端的demo: var express = require('express'); var app = express(); var bodyParser = require('

随机推荐