Node.js轻量级Web框架Express4.x使用指南

最新推荐文章于 2021-01-28 23:09:39 发布
最新推荐文章于 2021-01-28 23:09:39 发布
阅读量241 收藏
点赞数

【本文源址：http://blog.csdn.net/q1056843325/article/details/71079663 转载请添加该地址】

Express是一个轻量级的Web框架，简单、灵活 
也是目前最流行的基于Nodejs的Web框架 
通过它我们可以快速搭建功能完整的网站 
（express 英文意思：特快列车）

Express现在是4.x版本，更新很快 
并且不兼容旧版本 
导致现在市面上很多优秀的Node书籍过时 
这篇文章是一篇入门级的Express使用，需要一定Node.js的基础

Web应用创建

首先要做的是下载express并引用

npm install express --save
  • 1

全局安装就+个-g

引用express

var express = require('express');
var app = express();
  • 1
  • 2

通过app我们就可以使用各种express的API

在3.x版本的时候是这样写的 
var app =express.createServer(); 
现在这个函数已经被抛弃了

下面正式创建应用

//app.js
var express = require('express');
var app = express();
app.get('/', function(req, res){
  res.send('Express');
});
app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

启动之后就能给够在页面看到效果

$ node app.js
  • 1

app.get()

上面的app.listen()就不多说了 
用于监听端口

app.get(path, function(req, res){ }) 
用于用于处理客户端向服务器发送的GET请求 
path表示请求的路径 
回调函数的req和res是request和response的意思 
request表示客户端发送的HTTP请求信息 
response表示服务器发送的HTTP响应信息

使用res.send()可以向客户端发送信息

//app.js
var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('<h1>Express</h1>');
});
app.get('/demo', function(req, res){
  res.send('<h1>Demo</h1>');
})
app.get('/*', function(req, res){
  res.send('<h1>404<h1>');
})

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

app.post()

app.post(path, function(req, res){ }) 
用于用于处理客户端向服务器发送的POST请求 
和GET请求不同，POST请求不会将信息放在url中 
而是写入请求头中 
它的解析有所不同，下面再说

app.all()

在此之前还要提一个概念——中间件 
Middleware中间件在不同环境下有不同含义 
而在我们express中，简单说它就是一个特殊的函数 
用来处理HTTP请求的函数 
并且它有一个特点——处理完一个中间件可以传递给下一个中间件来处理

funciton(req, res, next){
    ...
    next();
}
  • 1
  • 2
  • 3
  • 4

（如果不使用执行next函数，那么之后监听的函数也不会执行） 
可以向next中传递字符串参数，代表抛出的错误信息 
这样当数据往下传递的时候，中间件不再进行处理 
直到找到一个错误处理函数为止

在app.all(path, function(req, res, next){ })的使用中 
就需要我们定义这样的中间件

这个方法可以过滤所有路径上的请求 
换句话说，在其他所有的中间件处理之前 
必须先通过app.all()的中间件进行处理

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

app.all('*', function(req, res, next){
  res.writeHead(200, ':)');
  next();
});

app.get('/', function(req, res){
  res.end('<h1>Express</h1>');
});
app.get('/demo', function(req, res){
  res.end('<h1>Demo</h1>');
})
app.get('/*', function(req, res){
  res.end('<h1>404<h1>');
})

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

这样不论客户端向我们发出了什么样的路径请求 
服务器响应信息前都会先打上响应头

app.use()

app.use([path, ]function(req, res, next){ }) 
这个方法一般情况是用来调用中间件的 
与前面的函数不同，它的第一个path参数可以省略，默认'/'

app.use(express.static(path.join(__dirname, '/public')));
  • 1
  • 2

上面的这个用法就是指定静态文件的访问路径

通过next参数我们可以连续调用中间件函数

app.use(function(req, res, next){
  console.log(1);
  next();
});
app.use(function(req, res, next){
  console.log(2);
  next();
});
app.use(function(req, res, next){
  console.log(3);
});
app.use(function(req, res, next){
  console.log(4);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

当发出网络请求的时候 
控制台就会输出 1 2 3 
因为第三个中间件没有调用next方法 
所以处理到此为止 
不会输出4

app.use()除了调用中间件 
还可以根据请求路径的不同，返回不同信息 
但我们一般不会这么用

//app.js
var express = require('express');
var app = express();

app.use(function(req, res, next){
  if(req.url == '/'){
    res.end('<h1>Express</h1>');
  }else{
    next();
  }
});
app.use(function(req, res, next){
  if(req.url == '/demo'){
    res.end('<h1>Demo</h1>');
  }else{
    next();
  }
});
app.use(function(req, res, next){
  res.end('<h1>404<h1>');
});

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

请求与响应

上面express中每一个回调函数都不可缺少req和res参数 
重要性可见一斑 
常见的req与res中的属性/方法如下（原生Node.js的req、res属性/方法也可以使用）

Request对象：

API含义
req.app当callback为外部文件时，用于访问express的实例
req.baseUrl获取路由当前安装的URL路径
req.body/cookies获得「请求主体」/ Cookies
req.fresh/stale判断请求是否还「新鲜」
req.hostname/ip获取主机名和IP地址
req.originalUrl获取原始请求URL
req.params获取路由的parameters
req.path获取请求路径
req.protocol获取协议类型
req.query获取URL的查询参数串
req.route获取当前匹配的路由
req.subdomains获取子域名
req.acceptsCharsets返回指定字符集的第一个可接受字符编码
req.acceptsEncodings返回指定字符集的第一个可接受字符编码
req.acceptsLanguages返回指定字符集的第一个可接受字符编码
req.accepts()检查可接受的请求的文档类型
req.get()获取指定的HTTP请求头
req.is()判断请求头Content-Type的MIME类型

Response对象：

API含义
res.app同req.app
res.append()追加指定HTTP头
res.set()在res.append()后将重置之前设置的头
res.cookie()设置Cookie
res.clearCookie()清除Cookie
res.download()传送指定路径的文件
res.get()返回指定的HTTP头
res.json()传送JSON响应
res.jsonp()传送JSONP响应
res.location()只设置响应的Location HTTP头，不设置状态码或者close response
res.redirect()设置响应的Location HTTP头，并且设置状态码302
res.send()传送HTTP响应
res.sendFile()传送指定路径的文件 -会自动根据文件extension设定Content-Type
res.set()设置HTTP头，传入object可以一次设置多个头
res.status()设置HTTP状态码
res.type()设置Content-Type的MIME类型

挑一些重点

req.query

req.query可以获取请求路径参数的对象

向服务器发送请求 http://localhost:3000/?user=tester&pass[a]=123&pass[b]=456

//app.js
var express = require('express');
var app = express();

app.get('/', function(req, res, next){
  console.log(req.query);
  console.log(req.query.user); //tester
  console.log(req.query.pass.a); //123
  console.log(req.query.pass.b); //456
  res.end();
});

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

req.params

req.params可以解析复杂路由规则上的属性 
（req.param综合了req.query和req.param的功能，但是被移除了不要使用）

向服务器发送请求 http://localhost:3000/123456

//app.js
var express = require('express');
var app = express();

app.get('/:id', function(req, res, next){
  console.log(req.params.id); //123456
  res.end();
});

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这样不论我在根路径后输入的是什么 
都会被解析为req.params.id

res.send()

res.send用于向客户端响应信息 
并且它的强大之处在于可以智能的处理我们传递的不同类型参数

app.get('/', function(req, res, next){
  res.send('express');
});
  • 1
  • 2
  • 3

当参数为字符串，会将响应头Content-Type默认设置为text/html 
也就是解析为html呈现在我们的页面上

app.get('/', function(req, res){
  res.send(200);
});
  • 1
  • 2
  • 3

当参数为数字，会自动帮我们设置响应体（状态码…）

app.get('/', function(req, res){
  res.send([1, 2, 3]);
});
  • 1
  • 2
  • 3

当参数为数组或对象，它会响应一个JSON

res.redirect()

使用这个方法可以让我们对网页重定向 
比如使用绝对url跳转到不同的域名

app.get('/', function(req, res){
  res.redirect('http://www.baidu.com');
});
  • 1
  • 2
  • 3

res.redirect()默认响应状态码是302 
可以更改这个状态码作为res.redirect()的第一个参数

//app.js
var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.redirect(302, 'demo');
});
app.get('/demo', function(req, res){
  res.end();
});

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

当在url地址栏中输入http://localhost:3000 
页面就会重定向到http://localhost:3000/demo

静态资源

静态资源就是指我们在开发中用到的css、js、img等等 
它们需要存放到一个静态资源目录 
当浏览器发出了一个非HTML文件请求 
服务器就会从这个静态资源目录下去查找文件 
我们一般在根目录下创建一个public文件来存储 
并在public中创建stylesheets、javascripts、images等文件夹 
用来存储特定类型的资源

指定静态资源目录的方法上面已经提到了

var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
  • 1
  • 2

比如说我们的html中有这样的代码

<link href="/javascripts/jquery.js" rel="stylesheet" media="screen">
  • 1

那么客户端运行发出请求 
服务器就会在public的javascripts文件夹下找到jquery.js静态资源

模板引擎

express框架默认是ejs和jade渲染模板 
这里以jade为例 
使用时肯定要下载

npm install jade --save
  • 1

再通过app.set()指定查找模板文件的目录（类似于静态资源） 
并指定模板文件后缀为jade

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
  • 1
  • 2

（如果不使用模板而使用原生html，app.set('view engine', 'html');）

如果我们想要访问模板该怎么做呢？ 
很简单，只需要一个方法res.render()

现在我写了一个简单的jade模板（关于jade语法超出本文讨论范围）

//views/index.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p= content
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

通过res.render渲染

//app.js
var express = require('express');
var path = require('path');
var app = express();

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

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get('/', function(req, res){
  res.render('index', {
    title: 'Express',
    content: 'this is an example'
  });
});

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

res.render()

res.render(view[, datas][, callback])

用于对网页模板进行渲染 
第一个参数是要渲染的模板名称 
第二个参数是传递给模板的变量，以对象形式存储，没有可省略 
第三个参数是渲染后回调函数，可以省略

路由

路由的意思就是根据不同的路径，来指定不同的处理方法 
我们一般把不同的路由封装进不同的模块 
首先在根目录下创建一个文件夹routes存储路由

现在我在routes文件夹下创建俩个路由文件index.js和users.js

修改app.js

//app.js
var express = require('express');
var path = require('path');
var app = express();

var index = require('./routes/index');
var users = require('./routes/users');

app.use('/', index);
app.use('/users', users);

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

这样表示http://localhost:3000/的路由交给index处理 
http://localhost:3000/users的路由交给users处理

下面简单的实现一下路由

//routes/index.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res){
  res.end('index');
});

router.get('/123', function(){
  res.end(123);
});

module.exports = router;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
//routes/users.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.end('users');
});

module.exports = router;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

通过express.Router()创建的router就像一个mini版的app一样 
app能做的，router都能做 
只是我们把逻辑都封装到了各个路由模块中

上面代码的结果：

body-parser中间件

作为一个入门级文章 
最后就来浅显的谈一个中间件body-parser吧 
其实express在3.x版本中内置了很多中间件 
但是4.x版本就将出static以外的所有中间件全部抽离出来了 
所以就需要我们单独安装

对照表如下：

Express 3.0Express 4.0
bodyParserbody-parser
compresscompression
cookieSessioncookie-session
loggermorgan
cookieParsercookie-parser
sessionexpress-session
faviconstatic-favicon
response-timeresponse-time
error-handlererrorhandler
method-overridemethod-override
timeoutconnect-timeout
vhostvhost
csrfcsurf

刚才就提到了POST请求有所不同 
不同的地方就在于我们需要body-parser这个中间件来处理数据 
通过req.body来获得数据

首先使用前不要忘记下载

npm install body-parser --save
  • 1
//app.js
var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', function(req, res){
  res.send('<form method="POST" action="./form">\
              <input type="text" name="user">\
              <input type="submit">\
            </form>');
});
app.post('/form', function(req, res){
  console.log(req.body);
  var user = req.body.user;
  res.send('账号: ' + user);
});

app.listen(3000);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

下面这四个方法分别用于对body内容采取不同的处理方法

  • bodyParser.json(options) 处理JSON数据
  • bodyParser.raw(options) 处理buffer数据
  • bodyParser.text(options) 处理文本数据
  • bodyParser.urlencoded(options) 处理UTF-8编码数据

这样我首先通过get请求获取主页面

提交表单向服务器发送post请求

服务器响应结果

express-generator

通过express-generator应用生成器 
可以为我们快速生成项目雏形 
在你要生成项目的目录中下载express-generator

npm install express-generator
  • 1

然后输入

express <项目文件名>
  • 1

这样express就会把必要的文件夹以及代码快速生成了

==主页传送门==

caimaomaocai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈Node.js轻量级Web框架Express4.x使用指南
10-19
本篇文章主要介绍了浅谈Node.js轻量级Web框架Express4.x使用指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
NODEJS+EXPRESS4框架应用，了解一下
weixin_34378922的博客
05-09 165
这个年头前端的老铁们面试的时候基本上都能看到一条:熟悉nodeJS,对于之前没有怎么了解这块技术的前端老铁们(大神忽略)，本文是一个很好的传送门，带你们入门nodeJs+express4框架，并写一个简单带有登陆功能、增删改列表功能的小后台（虽为前端，这个项目没做样式美化，基础bootstrap样式引用），全面应用nodeJs+expre...
Express 4.X 初体验
keny-大成的博客
01-10 483
1.什么是Express？ Express是基于Node.js平台，快速、开放、极简的 Web 开发框架，最新版本为Express4.17.1。 2.Express的安装 npm install express --save 当然是在你安装好npm和node的前提后，运行上面安装命令 + express@4.17.1 added 50 packages from 37 contri...
express: node.js里面高效轻量级的web框架；
aa804738534的博客
01-10 225
express使用 1: 安装express模块; npm install express 基于express创建一个实例; var express = require("express"); var app = express(); app.listen(8090); //http协议的一种操作模式，可以使用它来发送数据 app.get("/login", function(req, res){ res.send("----ok----"); }); //启动no.
node.js Web应用框架Express入门指南
10-25
主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
Node.js的轻量级作业调度-Node.js开发
05-27
使用可配置的调度Node.js议程的轻量级作业调度库提供了最小的开销。 议程旨在保持其代码库较小。 Mongo支持的持久层。 基于承诺的API。 具有可配置优先级，并发性和重复性的调度。 通过cron或人类可读的语法进行计划...
Node.js - Express 4.x框架高级实战（上）.rar
06-17
Node.js - Express 4.x框架高级实战（上）， 第一章：课程介绍与准备工作 第二章：第一个 Express 应用程序 第三章：Express 框架原理 第四章：路由
Node.js开发框架Express4.x
AnitaSun的博客
01-28 127
建立express项目 创建项目 express -e nodejs-demo 进入项目目录，创建package-lock.json cd nodejs-demo && npm install 启动项目 npm start Express bin, 存放启动项目的脚本文件 node_modules, 存放所有的项目依赖库。 public，静态文件(css,js,img) routes，路由文件(MVC中的C,controller) views，页面文件(Ejs模板
express4.x 搭建总结
木子小姐
07-29 421
express安装： 1.安装node.js 2.安装express npm install -g express (发现express不是外部命名) 还需要安装npm install -g express-generator 3.使用express创建一个工程 express helloworld 4.进入项目 cd helloworld 安装node包管理器 npm install 5.启动 ...
express4.x中文文档
weixin_33738578的博客
05-13 120
https://www.cnblogs.com/younger-plant/p/5547843.html https://github.com/ZhouBox/express_api_4.x_chinese/blob/master/Express_4.x_API_Chinese.md 转载于:https://www.cnblogs.com/xiaosongJiang/p/10856337....
express 4.x API 及简单示例
qq_27664967的博客
07-01 613
express 4.x API express() 创建一个express应用. The express() 函数是一个顶级函数通过express模块导出的. var express = require('express') var app = express() Methods express.json([options]) v4.16.0及更高版本中提供了此中间件 下表描述了可选的`options’对象的属性。 Property Description Type Default in
express4.x使用forever
maquealone的博客
03-13 584
forever是一个简单的命令式nodejs的守护进程，能够启动，停止，重启App应用。forever完全基于命令行操作，在forever进程之下，创建node的子进程，通过monitor监控node子进程的运行情况，一旦文件更新，或者进程挂掉，forever会自动重启node服务器，确保应用正常运行。具体forever的用法可以参考：https://www.jianshu.com/p/669a6...
Node.js之Express4.x
起风了
09-10 461
安装 1.官网下载安装node.js（不提） 2.express4.x安装 $ npm install -g express-generator 注意：4.x把命令行工具分离出来了，express-generator必须先全局安装， 如果需要安装指定版本: npm install -g express[email protected] $ npm install express --sa...
Nodejs Express4.x开发框架
皮皮王的专栏
10-13 584
开发环境： Ubuntu MonogoDB: v2.6.4 nodejs:v0.11.2 npm 2.1.10 ( 如果nodejs安装的时候是1.2.19版本，本文升级到了2.x版本) 1. 建立工程 进入工程目录 mkdir workplace cd workplace 全局安装express，express作为命令被安装到了系统中. npm install -g expr
Node.js express框架介绍
anneCoder的博客
07-12 425
资料网址：http://www.runoob.com/nodejs/nodejs-express-framework.html **定义：**express是一个node.js Web应用框架，可用于快速搭建完整功能的网站。 核心特性： · 可以设置中间件来响应 HTTP 请求。 · 定义了路由表用于执行不同的 HTTP 请求动作。 · 可以通过向模板传递参数来动态渲染 HTML 页面。...
如何用 Node.js 并选择 Express 框架作为服务器端框架
最新发布
07-15
要使用 Node.js 并选择 Express 框架作为服务器端框架，你需要按照以下步骤进行设置： 1. 首先，确保在你的机器上安装了 Node.js。你可以从 Node.js 的官方网站（https://nodejs.org）下载并安装适合你操作系统的版本。 2. 打开命令行终端，检查 Node.js 和 npm（Node.js 包管理器）是否正确安装。运行以下命令： ```bash node -v npm -v ``` 如果输出显示了 Node.js 和 npm 的版本号，说明安装成功。 3. 创建项目文件夹并进入该文件夹： ```bash mkdir my-express-app cd my-express-app ``` 4. 初始化项目并生成 `package.json` 文件。运行以下命令，按照提示设置项目信息： ```bash npm init ``` 5. 安装 Express 模块。运行以下命令： ```bash npm install express ``` 6. 创建一个名为 `server.js` 的文件，并使用以下代码作为服务器端的入口文件： ```javascript const express = require('express'); const app = express(); // 设置路由 app.get('/', (req, res) => { res.send('Hello, Express!'); }); // 启动服务器 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 7. 运行服务器。在命令行终端中，使用以下命令启动服务器： ```bash node server.js ``` 如果一切正常，你将会看到输出 `Server is running on port 3000`，表示服务器已经成功启动。 8. 在浏览器中访问 `http://localhost:3000`，你应该能够看到显示 `Hello, Express!` 的页面。 至此，你已经成功搭建了一个使用 Node.js 和 Express 框架的服务器端应用。你可以根据需要在 `server.js` 文件中添加更多的路由和处理逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值