Node.js Express 框架

news/2024/7/19 12:37:13 标签: express, nodejs

Express 简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

可以设置中间件来响应 HTTP 请求。

定义了路由表用于执行不同的 HTTP 请求动作。

可以通过向模板传递参数来动态渲染 HTML 页面。

安装 Express

安装 Express 并将其保存到依赖列表中：

$ cnpm install express --save

以上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。以下几个重要的模块是需要与 express 框架一起安装的：

body-parser：node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。

express-art-template：使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。

cookie-parser：这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。

multer：node.js 中间件，用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

$ cnpm install body-parser --save
$ cnpm install art-template --save
$ cnpm install express-art-template --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

 安装完后，我们可以查看下 express 使用的版本号：

$ cnpm list express
/data/www/node
└── express@4.15.2  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

第一个 Express 框架实例

接下来我们使用 Express 框架来输出 "Hello World"。

以下实例中我们引入了 express 模块，并在客户端发起请求后，响应 "Hello World" 字符串。

创建 express_demo.js 文件，代码如下所示：

express_demo.js 文件代码：

//express_demo.js 文件
var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
   res.send('Hello World');
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})

执行以上代码：

$ node express_demo.js

应用实例，访问地址为 http://0.0.0.0:8081

在浏览器中访问 http://127.0.0.1:8081，结果如下图所示：

 中间件

中间件是一堆方法，可以接收客户端发来的请求、可以对请求作出响应，也可以将请求继续交给下一个中间件继续处理。

中间件由2部分组成：中间件方法，请求处理函数。

中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求，路由也是中间件。

app.get('请求路径','处理函数') // 接收并处理get请求
app.post('请求路径','处理函数') // 接收并处理post请求

路由中间件

可以针对同一个请求设置多个中间件，对同一个请求进行多次处理 (路由中间件)，默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配(就不会往下执行了，不会调用后面的路由处理，调用next() 就会继续往下执行)。

const app = require('express')()

// 中间件一
app.get('/add',(req, res, next)=>{
	req.name = "/add 路由中间件"
	next() // 调用下一个中间件
})

// 中间件二
app.get('/add',(req, res, next)=>{
	req.age = 19
	next()
})

app.get('/add', (req, res)=>{
    let {name, age} = req
    res.send({name, age})
})

// localhost:3000/add
app.listen(3000,()=>console.log("服务器启动成功"))

app.use()：全局/应用程序级别中间件

app.use是express“调用中间件的方法”。所谓“中间件（middleware），就是处理HTTP请求的函数，用来完成各种特定的任务，比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。 所有经过这个中间件的数据，如果有必要的话，都会被这个函数加工处理。

简而言之，app.use() 里面使用的参数，主要是函数。但这个使用，并不是函数调用，而是使用的意思。当用户在浏览器发出请求的时候，这部分函数才会启用，进行过滤、处理。

express的路由，众所周知，是app.get()、app.post()、app.all()......但其实，它们都是app.use的别名。

app.use 匹配所有的请求方式，可以直接传入处理函数 代表接收所有请求。

app.use((req, res, next)=>{
    next()
})

用法：

app.use的调用方式，除了类似 app.use(匿名函数或函数名)，也可以是类似 app.use("/",匿名函数或函数名)。

app.use(path,callback)中的callback既可以是router对象又可以是函数；
app.get(path,callback)中的callback只能是函数。

当一个路由有好多个子路由时用app.use(path,router)

例子：

http://localhost:3000/home/one
http://localhost:3000/home/second
http://localhost:3000/home/three

路由/home后面有三个子路由紧紧跟随，分别是/one、/second、/three。如果使用app.get()，则要不断的重复,很麻烦，也不利用区分。

app.get("/home",callback)
app.get("/home/one",callback)
app.get("/home/second",callback)
app.get("/home/three",callback)

我们可以创建一个router.js 专门用来一个路由匹配多个子路由 ：

var express = require('express')
var router = express.Router()
router.get("/",(req,res)=>{
    res.send("/")
})
router.get("/one",(req,res)=>{
    res.send("one")
})
router.get("/second",(req,res)=>{
    res.send("second")
})
router.get("/treen",(req,res)=>{
    res.send("treen")
})
module.exports = router;

在app.js中导入router.js 

var express = require('express')
var router = require("./router")
var app = express()

app.use('/home',router) //router路由对象中的路由都会匹配到"/home"路由后面
app.get('/about', function (req, res) {
  console.log(req.query)
  res.send('你好，我是 Express!')
})

// 4 .启动服务
app.listen(3000, function () {
  console.log('app is running at port 3000.')
})

那么，什么时用app.use，什么时用app.get呢？

路由规则是app.use(path,router)定义的，router代表一个由express.Router()创建的对象，在路由对象中可定义多个路由规则。可是如果我们的路由只有一条规则时，可直接接一个回调作为简写，也可直接使用app.get或app.post方法。即当一个路径有多个匹配规则时，使用app.use（）。

关心路径的中间件

匹配 路径以 /admin 开头的 /admin /admin/a /admin/a/b …

app.use('/admin',(req, res, next)=>{
    next()
})

示例 

const app = require('express')()

// 所要请求都会触发
app.use((req, res, next)=>{
    req.name = "应用程序级别中间件"
    next()
})

// /admin
app.use('/admin',(req, res, next)=>{
    req.name1 = "/admin 路径的请求"
    next()
})

app.get('/admin/add', (req, res)=>{
    let {name, name1} = req
    res.send({name, name1})
})

// localhost:3000/admin/add
app.listen(3000,()=>console.log("服务器启动成功"))

错误处理中间件

在程序执行的过程中，不可避免的会出现一些错误，比如文件读取失败，数据库连接失败，默认只能捕获同步的错误。

异步错误处理

const app = require('express')()

// 所要请求都会触发
app.use((req, res, next)=>{
    req.name = "应用程序级别中间件"
    next({err:'ffff'}) // 传入错误参数 异步错误处理
    
	// 或者 抛出错误 默认只能捕获同步的错误
	// thorw new Error("程序执行错误")
	// thorw "程序执行错误"
	// 或者 代码报错
})

app.get('/admin/add', (req, res)=>{
    let {name, name1} = req
    res.send({name, name1})
})

// 错误处理
app.use((err,req, res, next)=>{
    console.error(err) // next() 传入的内容
    res.status(500).send("错误处理")
})

app.listen(3000,()=>console.log("服务器启动成功"))

内置中间件

// express.static
// express.json
// express.urlencoded
// ....

// 开放静态资源 path.join(__dirname,"./public/") 会改造成绝对路径
app.use("/public/",express.static(path.join(__dirname,"./public/")))
app.use("/node_modules/",express.static(path.join(__dirname,"./node_modules/")))

第三方中间件

// border-parser
// compression
// ....

let bodyParser = require("body-parser")      
// post参数处理
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())

请求和响应

Express 应用使用回调函数的参数： request 和 response 对象来处理请求和响应的数据。

app.get('/', function (req, res) {
   // --
})

request 和 response 对象的具体介绍：

Request 对象 - request 对象表示 HTTP 请求，包含了请求查询字符串，参数，内容，HTTP 头部等属性。常见属性有：

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

Response 对象 - response 对象表示 HTTP 响应，即在接收到请求时向客户端发送的 HTTP 响应数据。常见属性有：

res.app：同req.app一样
res.append()：追加指定HTTP头
res.set()在res.append()后将重置之前设置的头
res.cookie(name，value [，option])：设置Cookie
opition: domain / expires / httpOnly / maxAge / path / secure / signed
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.render(view,[locals],callback)：渲染一个view，同时向callback传递渲染后的字符串，如果在渲染过程中有错误发生next(err)将会被自动调用。callback将会被传入一个可能发生的错误以及渲染后的页面，这样就不会自动输出了。
res.send()：传送HTTP响应
res.sendFile(path [，options] [，fn])：传送指定路径的文件 -会自动根据文件extension设定Content-Type
res.set()：设置HTTP头，传入object可以一次设置多个头
res.status()：设置HTTP状态码
res.type()：设置Content-Type的MIME类型

路由

我们已经了解了 HTTP 请求的基本应用，而路由决定了由谁(指定脚本)去响应客户端请求。

在HTTP请求中，我们可以通过路由提取出请求的URL以及GET/POST参数。

接下来我们扩展 Hello World，添加一些功能来处理更多类型的 HTTP 请求。

创建 express_demo2.js 文件，代码如下所示：

var express = require('express');
var app = express();
 
//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})
 
 
//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})
 
//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})
 
//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})
 
// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})
 
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})

执行以上代码：

$ node express_demo2.js

应用实例，访问地址为 http://0.0.0.0:8081

接下来你可以尝试访问 http://127.0.0.1:8081 不同的地址，查看效果。

在浏览器中访问 http://127.0.0.1:8081/list_user，结果如下图所示：

在浏览器中访问 http://127.0.0.1:8081/abcd，结果如下图所示：

在浏览器中访问 http://127.0.0.1:8081/abcdefg，结果如下图所示：

express-art-template模板引擎

为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。

使用

npm install art-template express-art-template

命令进行安装。

在一个项目中可以使用多个模板引擎。

示例：

// 引入express框架
const express = require('express');
// 引入路径模块
const path = require('path');
// 引入express 
const app = express();

// 1. 告诉express使用什么模板引擎渲染什么后缀的模板文件
app.engine('art',require('express-art-template'))

// 2. 告诉express模板存放的位置是哪里
// 第一个views是固定的,是express的配置项名字
// 第二个views是文件夹的名字
app.set('views',path.join(__dirname,'views'))

// 3. 告诉express模板的默认后缀是什么 ( 方便在渲染模板的时候，省去后缀 )
app.set('view engine','art');

// 创建一个路由
app.get('/index',(req,res) => {
    // 渲染模板 （可以省掉art） -- res.render()
    // 1.拼接模板路径
    // 2.拼接模板后缀
    // 3.哪一个模板和哪一个数据进行拼接
    // 4.将拼接结果响应给客户端
    res.render('index',{
        //    模板要展示的数据
        msg: 'message'
    })
})

app.get('/list',(req,res) => {
    res.render('list',{
        msg: 'list page'
    })
})

// 监听端口
app.listen(3000);

静态文件

为了提供对静态资源文件（图片，css，js文件）的服务，请使用Express内置的中间函数express.static。

传递一个包含静态资源的目录给express.static中间件用于立即开始提供文件。 比如用以下代码来提供public目录下的图片、css文件和js文件：

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

如果前台想请求后台public目录下images/08.jpg静态的图片资源，通过：

http://localhost:3000/images/08.jpg

通过多次使用 express.static中间件来添加多个静态资源目录：

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

Express将会按照你设置静态资源目录的顺序来查看静态资源文件。 

为了给静态资源文件创建一个虚拟的文件前缀（文件系统中不存在），可以使用express.static函数指定一个虚拟的静态目录，如下：

app.use('/static', express.static('public'))

现在你可以使用‘/static’作为前缀来加载public文件夹下的文件了，比如：

http:// localhost:3000/static/image/kitten.jpg。 

GET 方法

以下实例演示了在表单中通过 GET 方法提交两个参数，我们可以使用 server.js 文件内的 process_get 路由器来处理输入：

index.htm 文件代码：

<html>
<body>
<form action="http://127.0.0.1:8081/process_get" method="GET">
First Name: <input type="text" name="first_name">  <br>
 
Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

 server.js 文件代码：

var express = require('express');
var app = express();
 
app.use('/public', express.static('public'));
 
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.get('/process_get', function (req, res) {
 
   // 输出 JSON 格式
   var response = {
       "first_name":req.query.first_name,
       "last_name":req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})

执行以上代码：

node server.js

应用实例，访问地址为 http://0.0.0.0:8081

浏览器访问 http://127.0.0.1:8081/index.htm，如图所示：

现在你可以向表单输入数据，并提交，如下演示：

POST 方法

以下实例演示了在表单中通过 POST 方法提交两个参数，我们可以使用 server.js 文件内的 process_post 路由器来处理输入：

index.htm 文件代码：

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
First Name: <input type="text" name="first_name">  <br>
 
Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js 文件代码：

var express = require('express');
var app = express();
 
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // 创建 application/x-www-form-urlencoded 编码解析

// const bodyParser = require("body-parser");
// app.use(bodyParser.urlencoded({ extended: false }))
// app.use(bodyParser.json())
 
app.use('/public', express.static('public'));
 
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.post('/process_post', urlencodedParser, function (req, res) {
 
   // 输出 JSON 格式
   var response = {
       "first_name":req.body.first_name,
       "last_name":req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})

执行以上代码：

$ node server.js

应用实例，访问地址为 http://0.0.0.0:8081

浏览器访问 http://127.0.0.1:8081/index.htm，如图所示：

现在你可以向表单输入数据，并提交，如下演示：


http://www.niftyadmin.cn/n/886891.html

相关文章

贵州毕节计算机考试成绩,2021贵州毕节公务员考试成绩查询入口-时间（已开通）...

贵州毕节计算机考试成绩,2021贵州毕节公务员考试成绩查询入口-时间（已开通）...

2021贵州公务员笔试于3月27日结束&#xff0c;现在已进入4月中旬&#xff0c;贵州毕节公务员考试成绩已发布&#xff0c;为了让考生们了解毕节公务员考试成绩查询入口&#xff0c; 中公贵州公务员考试网为您整理于此&#xff0c;现整理相关入口如下&#xff0c;考生们可自行进行…
阅读更多...
express中app和router的区别

express中app和router的区别

var app express(); var router express.Router(); 以上二者的区别是什么&#xff0c;什么时候用哪个最合适&#xff1f; 区别看下面的例子&#xff1a; app.js var express require(express),dogs require(./routes/dogs),cats require(./routes/cats),birds …
阅读更多...
秦殇多人游戏服务器被占用,秦殇多人图文攻略（1.30原版）

秦殇多人游戏服务器被占用,秦殇多人图文攻略（1.30原版）

完整流程&#xff1a;1.杀死赵村的秦军首领&#xff1a;在阳周城西门边和行人对话接任务&#xff0c;去赵村杀死秦军首领后&#xff0c;回来和行人对话得到一枚戒指&#xff0c;有20%的概率可以得到“风神戒”。2.杀狼王&#xff1a;在阳周城郊入口处的小屋中和铁匠对话接任务&…
阅读更多...
Node和Django中如何进行CORS跨域

Node和Django中如何进行CORS跨域

一、Node服务端设置跨域&#xff1a; 1、axios不支持jsonp&#xff0c;因为axios的作者觉得jsonp不太友好&#xff0c;推荐用CORS方式更为干净&#xff1b; 2、在使用axios发送请求时&#xff0c;服务器端设置 res.header("Access-Control-Allow-Origin", "*…
阅读更多...
微信公众号内嵌页面不执行ajax,微信公众号前端开发（weui）+ajax

微信公众号内嵌页面不执行ajax,微信公众号前端开发（weui）+ajax

>> 一行代码即可使页面适应手机屏幕&#xff0c;具体介绍可参考链接&#xff0c;很好用>>> 3. rem>> rem之后好像没怎么用&#xff0c;以后有更多了解再来补充>>> 4. 微信JSSDK开发文档>> 这个不太懂具体作用&#xff0c;以后了解了再来补…
阅读更多...
让IE8和IE9支持 placeholder

让IE8和IE9支持 placeholder

1、原因&#xff1a;placeholder是h5的新属性&#xff0c;IE10以前的浏览器(8、9)不支持此属性。 2、解决方法&#xff1a;jQuery三方插件 jquery-placeholder 3、快速开始&#xff1a; <!DOCTYPE html> <html> <head><title>test</title>&l…
阅读更多...
win10系统装服务器2008蓝屏,win10专业版系统出现蓝屏的原因及解决方法

win10系统装服务器2008蓝屏,win10专业版系统出现蓝屏的原因及解决方法

Win7/Win8.1系统用户升级到Win10后&#xff0c;运行过程中总会遇到各种问题&#xff0c;比如蓝屏、无限重启问题&#xff0c;这些都属于常见故障之一&#xff0c;造成升级Windows10出现蓝屏的原因很多。如果以前Win7/Win8.1版本的系统是正常&#xff0c;可以排除硬件问题&#…
阅读更多...
win10 关闭位置定位服务器,Win10专业版关闭定位服务的方法

win10 关闭位置定位服务器,Win10专业版关闭定位服务的方法

Win10专业版如何关闭定位服务&#xff1f;Win10专业版系统添加了不少我们之前都没见过的功能&#xff0c;位置定位功能就是其中一种。获取使用设备的位置信息&#xff0c;可以有更好的个性化服务&#xff0c;不过&#xff0c;其实很多朋友并不需要定位服务功能&#xff0c;因此…
阅读更多...
最新文章

Copyright @ 2022~2023