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

本文涉及的产品
云原生网关 MSE Higress,422元/月
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
注册配置 MSE Nacos/ZooKeeper,118元/月
简介: 【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件

前言


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的用法差不多吗)


用get和post进行一个请求的监听


● 监听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发送请求

目录
相关文章
|
2月前
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
59 8
|
3月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
3月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
86 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
59 2
|
3月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
77 3
|
3月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
134 1
|
3月前
|
数据采集 JavaScript 搜索推荐
服务器端渲染(SSR)(Nuxt+Next.js)
服务器端渲染(SSR)技术在服务器上生成页面HTML,提升首屏加载速度和SEO效果。Nuxt.js和Next.js分别是基于Vue.js和React.js的流行SSR框架。Nuxt.js提供自动化路由管理、页面级数据获取和布局系统,支持SSR和静态站点生成。Next.js支持SSR、静态生成和文件系统路由,通过`getServerSideProps`和`getStaticProps`实现数据获取。SSR的优点包括首屏加载快、SEO友好和适合复杂页面,但也会增加服务器压力、开发限制和调试难度。选择框架时,可根据项目需求和技术栈决定使用Nuxt.js或Next.js。
|
3月前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
78 0