Nodejs学习笔记（五）——express框架、路由（器）及中间件

最新推荐文章于 2022-05-10 22:46:45 发布
最新推荐文章于 2022-05-10 22:46:45 发布
阅读量613 收藏 5
点赞数 2
分类专栏： JavaScript/Nodejs 文章标签： nodejs 路由 路由传参 express 中间件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29493173/article/details/117218955
版权

【目录】
Nodejs学习笔记（一）——基础之全局对象、包和npm
Nodejs学习笔记（二）——模块
Nodejs学习笔记（三）——同步和与异步之文件系统模块
Nodejs学习笔记（四）——http协议与服务器
Nodejs学习笔记（六）——Mysql模块
Nodejs学习笔记（七）——接口API

文章目录


框架：是一整套解决方案，简化已有功能，添加之前没有的功能。

一、express框架下载安装

基于Node.js的框架，快速、开放、极简的WEB开发框架。
网址：www.expressjs.com
属于第三方模块，需要先去下载安装
npm install express

下载后会有一个node——modules包：
在这里插入图片描述

二、路由

路由：用来处理不同的请求，根据请求的URL和请求的方法来做出特定的响应。

路由的三要素：请求的URL，请求的方法，回调函数

1. res响应对象

1.1设置响应的内容并发送：res.send()

app.get('/list', (res, req)=>{
//设置自响应的内容并发送
	res.send('这是商品列表');
});
app.get('/person', (req, res)=>{
    res.send(`<h2>这是个人中心</h2>
    欢迎回来`);
});

1.2 设置响应的重定向并发送：res.redirect();

get /study 跳转到tmooc

app.get('/study', (req, res)=>{
    res.redirect('http://www.tmooc.cn/');
});

get / 跳转到/person

(同一服务器下直接写/URL)

app.get('/', (req, res)=>{
    res.redirect('/person');
});

1.3 设置响应的文件并发送：sendFile()

文件必须使用绝对路径（__dirname）

//添加路由(get /index)，响应1.html
app.get('/index', (req, res)=>{
    //res.sendFile(__dirname+'\\1.html');
    //响应文件
    res.sendFile(__dirname+'/1.html');
});

1.html:
<p>123</p>
在这里插入图片描述
以上三种响应在一个路由中只能调用一次

2.req 请求对象

req.url 获取请求的url
req.method 获取请求的请求方法
req.query 获取以查询字符串格式传递的数据

三、数据传递的方法

传递方式格式路由获取
get传递查询字符串http://127.0.0.1:8080/mysearch?kw=笔记本&id=2req.query 格式为对象
post传递采用流的方式，不可见通过事件的方式 req.on(‘data’, (chunk)=>{ chunk 获取的数据，格式为buffer，转字符串后为查询字符串，需要借助查询字符串模块解析为对象})
路由传参http://127.0.0.1:8080/package/express app.get(’/package/:pname’,(req,res)=>{req.params 获取路由传参的数据，格式为对象

})

1.对比get和post传递数据的区别：

  1. get传递的数据格式为查询字符串，URL中可见；post传递的方式是以流的方式，URL不可见；post更安全，通常注册、登录使用。get传递的速度更快，通常搜索的时候使用。
  2. get传递的数据有大小限制，根据不同的浏览器大小不同，范围2~8k之间，post没有大小限制。

2.get传递

search.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>search</title>
</head>
<body>

<h2>用户搜索</h2>
<!--
    form   用于提交，向服务器发请求
    method 设置请求的方法
        get 不安全，使用查询字符串传递数据
        post  安全，from data传
        
    action 设置请求的url
    name   保存用户输入的值
-->
<form method = "get" action = "/mysearch">
    <input type = "text" name = "kw"/>
    <input type = "submit" />
</form>

</body>
</html>

在这里插入图片描述
提交后，将以查询字符串方式传递数据，设置请求的url为/mysearch
在这里插入图片描述
server.js:

const express = require('express');
const url = require('url');

const app = express(); 
app.listen(8080);

app.get('/search', (req, res)=>{
    res.sendFile(__dirname+'/search.html');
});
//表单/mysearch的响应
app.get('/mysearch', (req, res)=>{
    //req获取请求的url和请求方法
    //console.log(req.url, req.method);
    //获取以查询字符串格式传递的数据
    console.log(req.query);

    res.send('搜索成功');
});

3.post传递

login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>search</title>
</head>
<body>

<h2>用户搜索</h2>
<!--
    form   用于提交，向服务器发请求
    method 设置请求的方法
    action 设置请求的url
    name   保存用户输入的值
-->
<form method = "post" action = "/mylogin">
    <input type = "text" name = "user"/>
    <input type = "password" name = "password"/>
    <input type = "submit" />
</form>

</body>
</html>

页面生成：
在这里插入图片描述
提交后，post方式跳转后不会在url显示传递的数据，但在F12下Network可以看见数据是通过From Data传递，所以要使用文件流传递数据：
在这里插入图片描述
server.js：使用文件流获取数据，querystring转换查询字符串

const express = require('express');
const querystring = require('querystring');
const url = require('url');

const app = express(); 
app.listen(8080);

app.get('/login', (req, res)=>{
    res.sendFile(__dirname+'/login.html');
});

//表单/mylogin的响应，传过来是post方式，也要使用post方式响应
app.post('/mylogin', (req, res)=>{
    //获取以查询字符串格式传递的数据
    //使用文件流 chunk获取的分段数据
    req.on('data', (chunk)=>{
        //得到数据为buffer，转字符串后为查询字符串
        console.log(chunk.toString());
        let obj = querystring.parse(chunk.toString());
        console.log(obj);
    });

    res.send('登录成功');
});

在这里插入图片描述

4.路由传参

创建添加到购物车的路由(get /shopping)，传递商品的编号lid、购买的数量count、用户的编号uid，最后响应以下内容
商品的编号：xx
购买的数量：xx
用户的编号：xx

req.params 获取路由传参的数据，格式为对象

const express = require('express'); 

const app = express();
app.listen(8080);

//:lid、:count、:uid为三组形参，严格按照格式进行查询
app.get('/shopping/:lid&:count&:uid', (req, res)=>{
    //console.log(req.params);
    res.send(`
        商品的编号：${req.params.lid}<br>
        购买的数量：${req.params.count}<br>
        用户的编号：${req.params.uid}
    `)
});

输入“http://localhost:8080/shopping/30&1&5”，对应的形参位置就会传递值。
在这里插入图片描述

四、路由器

1. 创建路由器并导出

const express = require('express');//引入express
const r = express.Router();//创建路由器对象

//添加路由
module.exports = r;

2. 引入路由器模块

const userRouter = require('./02_user.js');

3. 在web服务器下引入并挂载

app.use('/user', userRouter);
参数1：要添加的前缀
参数2：要挂载的路由器



路由器示例代码：

在这里插入图片描述

02_app（WEB服务器）：

//创建服务器
const express = require('express');
const app = express();
app.listen(8080);

//引入用户路由器模块
const userRouter = require('./02_user.js');
//console.log(userRouter);

//引入商品路由器模块
const productRouter = require('./02_product.js');
//console.log(productRouter);


//挂载路由器到WEB服务器，路由才能成为web服务器下的一部分
// /user/list
app.use('/user', userRouter);
// /product/list
app.use('/product', productRouter);

02_user.js（用户路由器）：

//引入express模块
const express = require('express');
//创建路由器对象
const r = express.Router();

//添加路由get /list 响应'用户列表
r.get('/list', (req, res)=>{
    res.send('用户列表');
})

module.exports = r;

输入前缀为/user的“/user/list”会响应用户列表
在这里插入图片描述

02_product.js（商品路由器）：

const express = require('express');
const r = express.Router();

//添加路由get /list 响应'商品列表
r.get('/list', (req, res)=>{
    res.send('商品列表');
})

module.exports = r;

输入前缀为/product的“/product/list”会响应用户列表：
在这里插入图片描述

五、中间件

用于拦截对路由的请求，也可以做出响应，允许往后继续执行（下一个中间件或者路由）；
本质是一个函数，一旦拦截到会自动调用这个函数。

分为应用级中间件、路由级中间件、内置中间件、第三方中间件、错误处理中间件。

1.应用级中间件

也成为自定义中间件

  • app.use(要拦截的URL，回调函数)
app.use('/list', fn);
function fn(req, res, next) {
	next();//往后继续执行，可能是下一个中间件，或路由
}

next() 往后继续执行

示例：
get方式添加/shopping路由，并用中间件拦截/shopping，将传递的price打八折，并在路由中响应打折后的price
在这里插入图片描述

//创建服务器
const express = require('express');
const app = express();
app.listen(8080);

//传过去的price打八折再继续执行下去
function fn(req, res, next) {
    req.query.price *= 0.8;//打折，隐式转数值
    next();//继续执行
}
//拦截/shopping,调用fn
app.use('/shopping', fn);

//添加到购物车路由(get /shopping)
app.get('/shopping', (req, res)=>{
    res.send(`
    商品的最终价格：${req.query.price}
    `);
});

2.路由级中间件

路由器的使用

  • app.use(要拦截的URL，路由器)

3.内置中间件

托管静态资源（html、css、js、图像）
如果浏览器要请求静态资源，不需要通过路由响应文件，而是自动去寻找文件

  • app.use(express.static(‘要托管的目录’));

示例：在static.js中静态自动请求public下的资源，public下有1.html
static.js:

const express = require('express');
const app = express();
app.listen(8080);

//托管静态资源；如果浏览器端要请求静态资源，自动到public目录中寻找
app.use(
    express.static('./public')//同目录下的public目录
)

public下1.html：
<h2>这是public下的1.html文件</h2>

此时可以直接使用localhost:8080/1.html访问，并显示1.html的页面内容：
在这里插入图片描述

4.第三方中间件

第三方中间件属于第三方模块，需要先去下载安装
npm install body-parser

（1）body-parser中间件

将post请求的数据解析为对象

  1. 引入body-parser中间件
    const bodyParser = require('body-parser');
  2. 使用body-parser中间件，将post请求的数据解析为对象，内容放在 req.body 中
    app.use(bodyParser.urlencoded({ extended:false }));
    extended：是否使用第三方查询字符串模块qs，不使用则使用核心模块下querystring
  3. 获取post传递的数据，前提使用了该中间件！
    console.log(req.body);

示例：托管静态资源login.html在public目录下，页面提交表单后，在/login响应登录成功，并获取post传递的数据。
在这里插入图片描述

/public/login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>

<form method="post" action = "/login">
用户 <input type = "text" name = "user"/><br>
密码 <input type = "password" name = "upwd"/><br>
<input type = "submit"/>
</form>

</body>
</html>

server.js：使用body-parser中间件

//1、引入body-parser中间件
const bodyParser = require('body-parser');
//创建服务器
const express = require('express');
const app = express();
app.listen(8080);

//托管静态资源
app.use(express.static('./public'));

//2、使用body-parser中间件，将post请求的数据解析为对象,放在req.body中
app.use(bodyParser.urlencoded({
    extended:false//是否使用第三方查询字符串模块qs。不使用则使用核心模块下querystring
}));

app.post('/login', (req, res)=>{

    /*法一：post获取数据原方式：文件流（需在头部引入querystring模块）
        let str = chunk.toString();
        let obj = querystring.parse(str);
        console.log(obj);
    */

    //法二：使用body-parser中间件方法：
    //3、获取post传递的数据
    //前提使用了中间件
    console.log(req.body);

    res.send('登录成功');
});

首先访问托管的静态资源localhost:8080/login.html:
在这里插入图片描述
提交后，响应登陆成功， 并获取post传递的数据：
在这里插入图片描述

你脸上有BUG
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
nodejs开发——express路由与中间件
10-20
本篇文章主要介绍了nodejs开发——express路由与中间件 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【Nodejs】初识Node.js Web应用开发框：Express_03
青春木鱼的博客
05-06 582
本文主要内容为Express框架及其路由、路由器的创建与应用。Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站
node.js中express的Router路由的使用
qq_26642611的博客
02-07 1528
express中的Router作用就是为了方便我们更好的根据路由去分模块。避免将所有路由都写在入口文件中。 一、简单的使用Router const express = require('express'); let app = express(); app.listen(8888); //创建路由实例，我们可以在该实例上自由的添加路由 let usersRouter = express.Router(); let orderRouter = express.Router(); //添加两个路由到
Nodejs学习之旅--Express框架的基本使用（入门级）--钩子函数--art-template模板引擎的使用
听雨少年的博客
07-21 391
一、Express框架简介 在前面Node基础中我们学习了 Node.js 中的 http 模块，虽然知道使用 Node.js 中的 http 模块是可以开发 Web 应用的，处理静态资源，处理动态资源，请求分发（路由）等等，也可以让开发者对 HTTP 协议的理解更加清晰，但是使用起来比较复杂，开发效率低。 npm 提供了大量的第三方模包，其中不乏许多 Web 框架，我们没有必要重复发明轮子，因而选择使用 Express 作为开发框架，因为它是目前最稳定、使用最广泛，而且 Node.js 官方推荐的唯一一个
nodejs：express框架(一)router
Hr_ving的博客
10-14 750
nodejs：express框架(一)router 一、介绍 express是 基于 Node.js 平台，快速、开放、极简的 Web 开发框架 ，有着丰富的http工具。 里面有着一个Router类，用来当作路由器，处理路由的转换。 二、安装 在整个项目所在的文件夹中安装 npm install express -S 三、创建 创建一个router.js文件，用来设置主路由 创建一个user.js文件，用来设置子路由 四、user.js 4.1、导入 const express = requ
nodejs路由器
weixin_43755916的博客
09-05 488
商品模块（product） 列表 /product/list 详情/product/detail 删除 /product/delete 用户模块（user） 列表 /user/list 详情 /user/detail 删除 /user/delete 路由器 路由在使用过程中，不同的模块产生相同的URL，同一模块下的所有的路由挂载到特定的前缀 例如：商品模块下的路由挂载到product，...
详解NodeJS框架express的路径映射（路由）功能及控制
10-20
主要介绍了详解NodeJS框架express的路径映射（路由）功能及控制，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
NodeJS学习笔记之Connect中间件模块（一）
10-24
是一个目录概要，里面记录着NodeJS的基础知识部分，今天这篇文章以及后续的几篇，将是一个进阶系列，让我们建立一个由浅入深的学习的过程，
NodeJS学习笔记之Connect中间件应用实例
10-24
前面我们介绍了几篇内容的connect中间件的基础知识，今天我们来实例应用一下，做个记事本的小应用，希望大家能够喜欢。
NodeJS搭建博客系统(一)基本配置与路由控制
热门推荐
fendo
12-08 1万+
1. 技术准备 node.js 我选用的是最新的node-v6.9.2-x64 npm          node.js包依赖管理工具 express 一个简单的Web框架 markdown.js node.js中的markdown解析器， 什么是markdown? 用过GitHub的朋友应该知道，readme.md文件 prettify.js         googl
Node.js Web 开发框架大全《路由篇》
weixin_33736832的博客
11-24 133
　　这篇文章与大家分享优秀的 Node.js 路由（Routers）模块。Node 是一个服务器端 JavaScript 解释器，它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个（只有一个）物理机的连接代码。 您可能感兴趣的相关文章 10大流行的 Metro UI 风格 Bootstrap 主题 推荐35款精致的 CSS...
NodeJs路由设计
功不唐捐，玉汝于成。
08-01 2293
NodeJs目录如上： bin下的www是项目入口 node_moduls 项目所需模块 public 静态资源,如图片,js,css routes 路由文件 views 页面模板 app.js 项目需要的中间件等基本配置 package.json 定义项目的基本信息等,包括项目所需要的模块名和版本号 npm start 运行后,浏览器输入 ht
Nodejs day04 5/24
weixin_45759858的博客
05-25 121
框架：是一整套解决方案，简化了已有的功能，添加了之前没有的功能。
Nodejs —Express-2 中间件
qq_1212的博客
08-24 593
1.中间件 用于拦截对服务器的请求 分为应用级中间件，路由级中间件，内置中间件，第三方中间件，错误处理中间。 （1）应用级中间件 就是一个函数，一旦拦截到以后会自动调用这个函数 app.use(要拦截的URL，函数） //引入第三方模块 const express=require('express'); //创建web服务器 const app=express(); //设置端口 app.listen(8080); function fn(req,res,next){//next..
nodejs路由器中添加路由方法
weixin_33908217的博客
01-27 1601
昨天又度过了一个足不出门的周末，在家里无聊刷剧近好几个小时，原本计划要把新看的书的读书笔记给整理好。果真一个人面对周末的大好时光，就会放肆起来。 好在趁着夜未深，在临睡前将之前关于服务器，路由器和剩下的添加路由的方法整理出来了。 所以，今天还是续接前一天的内容，在路由器中添加路由的几种方法。 首先，需要明确的是多个路由最好都添加到路由器中，因为路由器是存储和管理路由的容器，方便web服务器调用路由...
Nodejs实现路由
Handsome_gir的博客
03-17 369
教你如何使用Nodejs实现路由 index.html（主页面） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="http://local...
【Node.js】关于Node.js接口的详解和案例--restful风格接口。案例：添加商品接口，添加员工接口，删除员工接口
zhongqingtian的博客
05-10 682
【Node.js】关于Node.js接口的详解和案例--restful风格接口。案例：添加商品接口，添加员工接口，删除员工接口
玩转nodeJS系列：使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快...
weixin_30394981的博客
10-13 181
前言： 使用nodeJS原生API实现快速灵活路由，方便与其他库/框架进行整合； 1、原生API，简洁高效的轻度封装，加速路由解析，nodeJS本就应该这样轻快 2、不包含任何第三方库/框架，可以灵活的搭配其他库/框架进行web开发 github项目地址:https://github.com/eguid/eguidRouter 1、API介绍及使用说明 注：新...
NodeJs——（12）添加路由
weixin_34226182的博客
07-03 160
①之前我们有这么一段代码： app.use('/', routes); //假如是根目录，那么交给routes.js来处理； app.use('/users', users); //假如是/users目录，交给users.js来处理 当访问根目录的时候，调用routes；当访问的是users路径是，由users来处理； 然后又知道，当访...
Nodejs——axios请求接口及拦截器使用
最新发布
04-01
在Node.js中使用axios请求接口以及拦截器的使用方法如下： 首先，需要安装axios模块： ``` npm install axios ``` 然后，在代码中引入axios模块： ```js const axios = require('axios'); ``` 接下来，可以使用axios发送GET、POST等请求： ```js axios.get('http://example.com/api') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); axios.post('http://example.com/api', {data: 'hello'}) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 当然，axios还支持一些其他的请求方法，比如PUT、DELETE等。 接下来，我们可以使用axios的拦截器对请求和响应进行处理。例如，我们可以在请求头中添加token： ```js axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); }); ``` 在上面的代码中，我们使用了axios的interceptors.request.use方法，它可以在请求被发送出去之前对其进行拦截处理。在这个例子中，我们将localStorage中存储的token添加到请求头中的Authorization字段中。 我们还可以使用axios的interceptors.response.use方法对响应进行处理。例如，我们可以检查响应状态码是否为401，如果是，则跳转到登录页面： ```js axios.interceptors.response.use(response => { return response; }, error => { if (error.response.status === 401) { window.location.href = '/login'; } return Promise.reject(error); }); ``` 在上面的代码中，我们使用了axios的interceptors.response.use方法，它可以在响应被接收之前对其进行拦截处理。在这个例子中，我们检查了响应状态码是否为401，并且在这种情况下跳转到登录页面。 以上就是在Node.js中使用axios请求接口及拦截器的使用方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你脸上有BUG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值