「从零开始」前端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

来源:稀土掘金

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

相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
79 9
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
34 9
|
1月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
64 1
|
1月前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
1月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
2月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
68 1
|
1月前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
47 0
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
1月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
37 0