「从零开始」前端node够用指北(四)⚡---Express框架

简介: 「从零开始」前端node够用指北(四)⚡---Express框架

🎉 前言


  • 记得我第一次接触学习node的时候还是跟着菜鸟教程一个个学起来,时间过得也挺久了,平时如果没有怎么使用的话也会慢慢淡忘些许😅。
  • 当时学的时候就感觉有点迷茫,不知道学来干嘛🤯,有些公司很少需要你会node甚至不用,我相信有挺多入门选手也是这样的想法的🤧,带着这个想法我想重新学习一下node,并站在学习者的角度感同身受的分享一下这个够用指北系列,希望对大家有所帮助😆。
  • 相信大家想学习node也是为了能够自己写点数据展示一下,实现一下增删查改,本系列为了照顾新手同学会讲的比较基础,目的就是为了满足前端node够用目标。
  • 本文主要分享的是Express框架,全文大概1800+字,阅读可能需要十分钟。具体的指北向导放在文章最下方,会持续更新喔,欢迎点赞收藏❤️❤️~


👻 关于Express


  • 任何东西都会产出让它更加方便或者说是效率更高的工具或者框架,就正如我们经常使用的vuereact大大的提高了开发效率,而Express也是一样,Express框架的初衷是为了拓展Node内置模块的功能提高开发效率,但实际上ExpressNode内置http模块的基础上做了一层抽象的封装。
  • 本文将主要分享关于Express的路由和中间件,一起来看看Express到底提高了多少效率吧。


👻 引入Express


  • 我们需要在在文件夹建立一个js文件来作为我们项目启动的开始,来作为我们的服务器。
mkdir expressLearn 
cd expressLearn 
echo test>express_01.js
  • 我们在安装Express之前需要初始化npm生成一个package.json文件,这个文件主要的作用是存放我们的模块和一些项目的配置信息,更多想了解的信息可以前往你真的了解package.json吗查阅喔。
npm init 
  • 执行命令后一直回车即可,就会发现package.json文件已经创建好了。
npm install express
  • 安装express模块,这样我们项目的基本模块以及准备好了。


👻 路由


🏃 搭建服务器

  • 我们之前使用node内置的http模块确实可以开发一个服务器,但是我们需要写很多的代码比较麻烦,而我们判断路径的时候也没有办法简便的根据路由判断,对于不同的地址只能通过http.createServer 的回调函数来判断,会很麻烦。
  • Express提供了一套路由机制可以来帮我们解决这些难题。
  • 我们客户端向服务端发送请求一般有两个因素,第一个是URL也就是路径,第二个也就是GETPOSTHTTP请求方法。而服务端根据这两个元素来选择对应处理逻辑也就叫做路由,简单点说就是不同的URL+请求方法来访问不同的数据和网页。
  • 接下来简单搭建一个express服务器来慢慢解释。
/* express_01.js */
const express = require('express');
const port = 8000;
const app = express();
// 当请求根目录的时候被调用
app.get('/', (req, res) => {
  res.send('Hello World');
});
// 当请求/about的时候被调用
app.get("/about",function(req,res){
  res.end("about")
});
// 当请求/weather的时候被调用
app.get("/weather",function(req,res){
  res.end("weather")
});
app.listen(port);
  • 接下来我们在命令行输入node express_01.js并在浏览器输入http://localhost:8000/就可以呈现出页面。

  • 由上面的例子我们可以看到我们先是引入了express模块,使用express()方法创建变量app ,该方法会返回一个请求处理函数闭包,最后用app来监听一个端口,我们可以用app来制作路由,后面三个app.get()函数就是Express中强大的路由系统了。
  • 我们定义路由的方式正如上例所示,app调用一个小写HTTP请求方法,包括 getpostputdelete 等等,这个方法有两个参数。
  • path:这个是我们客户端访问的URL,例如上例的//about
  • callback:这个是我们的回调函数,跟http模块一样同样的也有reqres的参数。
  • Express 在原来基础上对reqres对象进行了功能扩展。你可以在官方文档中找到所有细节内容。
  • 继续上例,当我们分别输入不同的url的时候,页面会输出不同的英文,这是因为我们的路由机制发挥了左右,通过控制url就能进入自己想进入的页面。


🏃 热更新

  • 但是现在我们每次更改代码后都要重新执行node express_01.js,我们需要一个热更新的开发服务器。
  • 我们可以使用nodemon,安装依赖在开发环境并在package.json文件加入指令。
npm install nodemon --save-dev
{
  "name": "expresslearn",
  "version": "1.0.0",
  "description": "",
  "main": "express_01.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon express_01.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}
  • 我们可以在命令行键入npm run dev即可运行我们的服务器,并且当我们更改js代码的时候浏览器也会同步更新~


👻 中间件


  • 中间件不只是在Express出现的而是一种常用的软件工程概念,中间件就是将具体业务和底层逻辑解耦的组件。
  • 中间件的本质就是一个函数,而在Express中我们可以利用中间件在收到请求和返回相应的过程中做一些我们想做的事情。
  • 在中间件中我们可以执行任何代码,我们经常用来定制能够适用多个应用场景、可复用性良好的代码。
  • 那么在Express具体该怎么定义和使用呢?


🏃 中间件的定义

function middleware(req, res, next) {
  console.log('我是中间件')
  // 一些逻辑
  next();
}
复制代码
  • 中间件其实就是一个函数,这个函数可以接收三个参数。
  • req:请求对象
  • res:响应对象
  • next:执行下一步的变量next
  • 在一个中间件中我们可以执行任何代码但是一定要有一个next()将控制权交给下一个中间件,否则请求将会被挂起卡主不动。


🏃 在全局中使用中间件

app.use(middleware);
复制代码
  • 这样的话这个中间件就在全局启用了,当我们启动该中间件的时候,接下来做任何请求的时候都会触发这个中间件。


🏃 在路由中使用中间件

// 当请求/weather的时候被调用
app.get("/weather",middleware,function(req,res){
  res.end("weather")
});
复制代码
  • 这样就在我们的路由中使用中间件,只有当我们的路径是/weather的时候才会触发这个中间件,访问其他URL的时候不会触发。


👋 写在最后


  • 总的来说NodeJS提供了http网络模块,我们可以利用这个来创建简单的服务器,但是这个过程非常繁琐非常底层,所以我们需要一个提高效率的框架就是Express,它是第三方框架,在Node内置http模块的基础上做了一层抽象的封装,简化Web服务器端应用的开发。
  • 本文够用指北就到这里结束了,为了照顾新人讲的特别基础,请大佬们见谅哈~~
  • 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛


🌅 指北向导


「从零开始」前端node够用指北(一)⚡---安装与模块

「从零开始」前端node够用指北(二)⚡---文件操作

「从零开始」前端node够用指北(三)⚡---网络操作

「从零开始」前端node够用指北(四)⚡---Express框架

「从零开始」前端node够用指北(五)⚡---连接数据库

「从零开始」前端node够用指北(六)⚡---实战之数据大屏


作者:快跑啊小卢_

链接:https://juejin.cn/post/6998678824699297823

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
15天前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
6天前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
2天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
17 8
|
7天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
21 3
|
14天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
13天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
36 1
|
14天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
14天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
20天前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
57 1
|
2天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
7 0