【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件

news2024/11/18 23:24:40

目录

前言

初识express

使用express创建基本的web服务器

初识express路由

路由匹配概念

路由模块化

中间件

中间件和路由的区别

定义中间件函数

中间件作用 

 局部生效中间价

中间件分类

 1.应用级别中间件

 2.路由级别的中间件

 3.错误级别中间件

 4.内置中间件

 5.自定义中间件

写在最后



前言

express特别像node.js内置的http模块一样,帮助我们来创建web服务器的,express实际上就是npm中的一个第三方的包,它里面提供了快捷创建Web服务器的方法,本篇将讲到如何使用express进行web服务器和路由的创建

初识express

既然是一个包那么首先就要进行安装这个包

使用npm i express@4.17.1来进行安装,安装成功后就可以直接使用了

express给我们带来的主要效果就是进行一个服务器的创建,那么下面就让我们一起来进行一个最基本的服务器创建

使用express创建基本的web服务器

web服务器的创建一共分为三部

1.导入express

2.创建web服务器

3.调用app.listen(端口号,回调函数),启动服务

// 导入express
const express = require('express');
// 创建web服务器
const app = express();
// 调用app.listen
app.listen(80, () => {
    console.log('express server running at http://localhost');
})

这样一个简单的服务器就创建好了(这么一看和http的用法差不多吗)

getpost进行一个请求的监听

● 监听GET请求

 ● 监听post请求

 ● 获取URL中携带的查询参数

通过req.query对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数

● 获取url中动态参数

● 托管静态资源

通过express.static()创建一个静态资源服务器

 注:多次使用express.static()就可以得到多个静态资源服务器了

初识express路由

在Express中,路由指的是客户端的请求服务器处理函数之间的映射关系。 Express中的路由由3部分组成,分别是请求的类型、请求的URL地址处理函数

 METHON(请求类型) PATH(请求URL地址) HANDLER(处理函数)

路由匹配概念

当一个请求到达服务器之后,需要先经过路由的匹配,匹配成功之后,调用对应的处理函数。 在匹配时,会按照路由的顺序进行匹配,如果请求类型和请求的URL同时匹配成功,Express会将这次请求,转交给对应的function函数进行处理。也就是说满足请求类型和请求的URL同时匹配成功这个条件时才能进行函数处理,否则不会进行对客户端的请求进行处理

注:路由会按照定义的先后顺序自上而下进行匹配,并且请求类型和请求的URL必须匹配成功才能进行函数处理

1.导入express模块。2,挂载路由。3,监听80端口

const express = require('express');
const app = express()
// 挂载路由
app.get('/', (req, res) => {
    res.send('hello friend')
})
app.post('/', (req, res) => {
    res.send('hello my friend')
})
app.listen(80, () => {
    console.log('express server running at http://localhost');
})

路由模块化

就是将路由模块单独提出来,进行暴露共享,然后再供其他的模块使用

const express = require('express');
// 导入express
const router = express.Router();
// 使用express.Router()创建路由对象
router.get('/user/list', (req, res) => {
    res.send('GET user list. ');
});
router.post('/user/add', (req, res) => {
    res.send('Add new user. ')
});
// 挂载路由
module.exports = router;
// 暴露共享对象

使用路由模块

const express = require('express');
const app = express()
// 导入路由模块
const router = require('./04路由模块化.js')
// 注册路由模块,挂载前缀
app.use(router);
// app.use()用来注册全局中间件
app.listen(80, () => {
    console.log('express server running at http://localhost');
})

中间件

中间件和路由的区别

express的中间件本质上是一个函数,它类似于路由处理函数我们可以进行一下对比

区分他俩的标志就是next这个参数,有next函数的就是中间件的处理函数,没有的就是路由处理函数,在预处理中next函数至关重要next函数是实现多个中间件连续调用的关键,它表示把流转关系转交给下一一个中间件或路由。

定义中间件函数

跟路由很相似

const express = require('express');
const app = express();
// 定义一个简单的中间件函数
const mw = (req, res, next) => {
    console.log('中间件函数');
    next();
}
app.listen(80, () => {
    console.log('http://localhost');
})

全局中间件

就是客户端无论发起什么请求,到达服务器之后都得出发的中间件叫做全局中间件

简化中间件函数

中间件作用 

多个中间件之间,共享同一份req和res。基于这样的特性,我们可以在前面的的中间件中,统一为req或res对象添加自定义的属性或方法,供后面的的中间件或路由进行使用。(简而言之,中间件里面的req,res可以供给后面的中间件或者是路由使用)

 局部生效中间价

不使用app.use()定义的中间件,叫做局部生效的中间件

const express = require('express');
const app = express();
// 1.定义中间件函数
const mw1 = (req, res, next) => {
    console.log('局部中间件已调用');
    next()
}
// 2.创建路由
app.get('/', mw1, (req, res) => {
    res.send('Home page.')
})
app.get('/user', (req, res) => {
    res.send('User page.')
})
app.listen(80, function () {
    console.log('Express ');

})

注意事项:  

①一定要在路由之前注册中间件 ②客户端发送过来的请求,可以连续调用多个中间件进行处理 ③执行完中间件的业务代码之后,不要忘记调用next()函数 ④为了防止代码逻辑混乱,调用next()函数后不要再写额外的代码 ⑤连续调用多个中间件时,多个中间件之间,共享req和res对象

中间件分类

在express中,把中间件分为了五大类分别是

1.应用级别中间件

(通过app.use()/app.get()/app.post(),绑定到app实例上的中间件)

 

 2.路由级别的中间件

 (绑定到express.Router(实例上的中间件,叫做路由级别的中间件。它的用法和应用级别中间件没有任何区别。只不过,应用级别中间件是绑定到app实例上,路由级别中间件绑定到router实例上)

 3.错误级别中间件

(专门用来捕获整个项目中发生的异常错误,从而防止项目异常崩溃的问题。错误级别中间件的function处理函数中,必须有4个形参,形参顺序从前到后,分别是(err, req, res, next),错误级别的中间件一定要在路由后面否则不会执行该错误级别中间件。)

 4.内置中间件

1.express.static快速托管静态资源的内置中间件

2.express.json解析JSON格式的请求体数据(4.16.0及以上版本可用)

3.express.urlencoded解析URL-encoded格式的请求体数据(4.16.0及以上版本可用)

 4.body-parser的使用

// 导入express 模块
const express = require('express');
const app = express();
// 导入body-parser
const parser = require('body-parser');
// 注册中间件
app.use(parser.urlencoded({ extended: false }))
app.post('/', (req, res) => {
    // 如果没有配置任何解析表单数据的中间件,则req. body默认等于undefined
    console.log(req.body);
    res.send('ok')
})
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1');

})

5.自定义中间件

将该模块进行封装

// 导入querystring内置模块
const qs = require('querystring');

const parser = (req, res, next) => {
    // 用来储存客户端发送的数据
    let str = ''
    // 监听req的data事件
    req.on('data', (chunk) => {
        str += chunk;
    })
    // 监听req的end事件
    req.on('end', () => {
        // 打印储存完整的请求体数据        
        // 使用querystring内置模块解析请求体数据
        // 把字符串数据解析为对象格式
        // 将解析出来的数据对象挂载为req.body
        const body = qs.parse(str);
        req.body = body;
        next()
    })
}
module.exports = parser;

 使用该模块

const express = require('express');
const app = express();
// 导入querystring内置模块
const qs = require('querystring');

// 定义解析表单的中间件具体的业务逻辑
const cousttomParser = require('./12对自定义的中间件进行模块化')
app.use(cousttomParser)
app.post('/', (req, res) => {
    res.send(req.body)
})
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1');
})

使用apipost发送请求

写在最后

点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409377.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

带你深入理解js事件循环机制

同步任务和异步任务(微任务和宏任务) JavaScript是一门单线程语言 分为同步任务和异步任务 同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务。 异步任务指的是,不进入主线程…

Pro1:图片的隐藏和显示

什么是JavaScript?实现目标实现代码实现效果实现方法💛作者主页:静Yu 🧡简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者 💛社区地址:前端知识交…

axios 中如何取消请求_从不会使用到精通原理_番茄出品

start 最近频繁遇到一个问题,axios 是如何取消请求的?这篇文章将从新手小白的视角出发,从 axios 取消逻辑的基础使用,到原理分析,带你彻底了解并掌握 axios 中取消请求的“秘密”。编写时间:2023/02/24-23…

520到了,教你做个JavaWeb表白墙小项目

目录 1.配置 Maven 项目 1.1 创建 Maven 项目 1.2 引入相关依赖 1.3 项目总结构 2. 约定前后端交互接口 3.服务端代码 3.1 创建Message类 3.2 创建工具类 3.3 添加信息类(AddMessage) 3.4 查询信息类(MessageList) 4. …

vue3中的配置代理

如图,配置代理就是在客户端与服务器中充当中介的角色 目录 关于配置代理,首先我们的要知道为什么要配置代理,配置代理做了什么事情 一、跨域是什么 二、如何解决 三、配置代理案例 1. 下面是我自己在后端尝试解决跨域的例子 2.然后在vue中…

【Vue项目实战】Vue3中动态修改样式和级联样式优先顺序详解

Vue实战笔记目录前言一、ref修改样式1、通过 Vue 的 ref 组件获取 DOM 元素节点注:这边比较一下,和 DOM操作 document.getElementById(id) 这个方法有什么区别2、通过 ref 修改 DOM 元素节点样式二、通过v-bind对Html元素的样式(style)进行动态绑定三、v…

端午假期整理了仿天猫H5 APP项目vue.js+express+mongo

效果 源码 源码太多,放github上了点击 遇到的问题 连接mongodb数据库多个集合(model文件) mongodb与mysql数据库连接不同,sql在定义查询语句时可以连接不同的表mongodb需要在开始定义好连接要用到的表 module.exports {dbPr…

echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

基本使用方法 echarts-wordcloud是基于echarts的一个词云库,是我常用的一个组件,业务上用的多一点,但是这个库在echarts的官网文档里面没有说明,git上的说明也很少,有些配置需要自己摸索,下面都是我的血泪…

css动画效果

动画1&#xff08;沿着椭圆转动&#xff09; 其实是个2D转动&#xff0c;只不过咱们设置椭圆&#xff0c;然后加上scale缩放&#xff08;近大远小&#xff09;&#xff0c;看上去就是3D效果 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head…

使用Node.js手撸一个建静态Web服务器,内部CV指南

文章里有全部代码&#xff0c;也可以积分下载操作步骤如上图文章结束 话说这个键盘真漂亮~~ 文章目录使用Node.js手撸一个建静态Web服务器一、动静态服务器的概念1.1 静态Web服务器概念1.2 静态Web服务器的优点1.3 快速搭建的途径二、 手撸指南2.1 框架搭建2.2 CtrlC/V2.3 启动…

Vue使用ElementUI对table的指定列进行合算

前言 最近有一个想法&#xff0c;就是记录自己花销的时候&#xff0c;table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。 然后我就顺着elementui的table组件寻找相关的demo&#xff0c;还真发现了一个这样的demo。 对于这个demo&#xff0c;官方…

css实现轮播图

轮播图&#xff1a;就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 轮播图的实现代码&#xff1a; 1&#xff09;创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致&#xff0c…

npm i 安装不上依赖怎么办

起因 在github上下载的项目需要使用npm i来安装依赖。但是安装过程需要很久&#xff0c;然后安装完了又发现安装过程报错了。导致项目跑不起来。原因是某些依赖没有成功的安装上去 解决办法&#xff08;依次试&#xff0c;每次试新的命令最好把上次安装node_modules删掉&#…

threejs三维地图大屏项目分享

这是最近公司的一个项目。客户的需求是基于总公司和子公司的数据&#xff0c;开发一个数据展示大屏。 大屏两边都是一些图表展示数据&#xff0c;中间部分是一个三维中国地图&#xff0c;点击中国地图的某个省份&#xff0c;可以下钻到省份地图的展示。 地图上&#xff0c;会做…

(Select)解决:Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)

Ⅰ、Element-ui 提供的组件与想要目标情况的对比&#xff1a; 1、Element-ui 提供组件情况&#xff1a; 其一、Element-ui 自提供的代码情况为(示例的代码)&#xff1a; // Element-ui 自提供的代码&#xff1a; <template><el-select v-model"value" pla…

JS对象详解

JS对象详解 js的对象是什么&#xff1f;js的对象类型有哪些&#xff1f;具体实例是什么&#xff1f; 一、ECMA-262对JS对象的定义&#xff1a; 属性的无序集合&#xff0c;每个属性存放一个原始值、对象或函数&#xff1b; 对象是无特定顺序的值的数组&#xff1b; 对象是一…

用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

目录 一、写在前面 二、效果图 三、实现思路 四、实现代码 1、login总界面 2、registercheck总代码 3、logoutcheck总代码 4、amendcheck总代码 相关文章 jsp实现简单登入注册界面功能用jsp实现简单登入注册界面功能&#xff08;css美化&#xff09;&#xff08;软件i…

【前端点击穿透】pointer-events属性详解

什么是pointer-events&#xff1f; pointer-events 属性是一个指针属性&#xff0c;是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。 This CSS property,when set to “none” allows elements to not receive hover/click events,instead the event will occur…

使用Three.js实现web端显示点云

需要了解html、js、websocket的基本使用&#xff0c;建议浏览three.js文档中场景、渲染器、光源、相机以点模型、Buffergeometry的相关知识 第一步&#xff0c;创建html文件 <!DOCTYPE html> <html><head><meta charset"utf-8"><title&…

vue3+vite在main.ts或者main.js文件中引入/App.vue报错(/App.vue不是模块)

vscode报错&#xff1a;./APP.vue不是模块场景复现情况一、vue3.0js情况二、vue3.0ts方案一&#xff1a;根目录新建env.d.ts方案二&#xff1a;根目录新建tsconfig.jsonvue3报错提示 找不到模块“/App.vue”或其相应的类型声明 场景复现 在使用 vue3➕vite➕ts 或者 js 搭建前…