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

来源:稀土掘金

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

相关文章
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
3月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
3月前
|
Web App开发 缓存 监控
如何解决Node框架中内存管理的挑战?
解决 Node 框架中内存管理的挑战需要综合运用多种方法,并且需要在开发过程中保持谨慎和细心,不断优化和改进代码。同时,定期进行内存管理的检查和维护也是非常重要的。
131 63
|
3月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
3月前
|
安全 前端开发 JavaScript
Node框架的优缺点
Node 框架的优点使其在现代 Web 开发中具有重要地位,但同时也需要开发者在使用过程中注意其缺点,合理选择和应用,以充分发挥其优势,避免潜在问题的出现。随着技术的不断发展和完善,Node 框架也在不断改进和优化,以更好地适应各种应用需求。
113 47
|
3月前
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
194 2
|
3月前
|
存储 缓存 JavaScript
node 框架
Node 框架以其独特的优势和广泛的应用场景,成为了现代 Web 开发中不可或缺的一部分。掌握 Node 框架的开发技能,对于开发者来说具有重要的意义。
158 59
|
3月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
168 1
|
3月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
49 9

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex