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

来源:稀土掘金

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

相关文章
|
26天前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
45 3
|
4天前
|
JSON JavaScript 中间件
Express.js:构建轻量级Node.js应用的基石
**Express.js 概览**:作为Node.js首选Web框架,Express以其轻量、灵活和强大的特性深受喜爱。自2009年以来,其简洁设计和丰富中间件支持引领开发者构建定制化应用。快速开始:使用`express-generator`创建项目,安装依赖,启动应用。示例展示如何添加返回JSON消息的GET路由。Express适用于RESTful API、实时应用等多种场景,社区支持广泛,助力高效开发。
7 1
|
25天前
|
JavaScript 前端开发 中间件
Express框架搭建项目 node.js
【6月更文挑战第3天】这篇文章是关于使用Express框架构建Node.js Web应用的教程。Express是一个轻量级、功能丰富的框架,特点包括简洁灵活的核心、强大的中间件支持、灵活的路由系统和模板引擎兼容性。文章介绍了如何安装Express,并通过一个简单的示例展示了如何创建一个基本的Web服务器。最后,鼓励读者继续学习和实践,以充分利用Express和Node.js的能力。
27 1
|
25天前
|
SQL JavaScript 前端开发
简单用Nodejs + express 编写接口
【6月更文挑战第3天】该文介绍了如何在Node.js和Express中创建GET和POST接口。首先,简要提到了准备工作,建议查阅上一篇文章。接着展示了GET接口的示例,说明可以直接在浏览器中请求。然后,详细解释了POST接口的步骤,包括引入Express模块、设置路由处理程序、解析请求体及处理请求。最后,强调了编写接口时应注意错误处理、安全性、中间件使用、路由组织、日志记录、性能优化和测试等关键点。作者以肥晨的身份结尾,鼓励关注其分享的前端学习资料和技术动态。
21 1
|
25天前
|
JavaScript NoSQL 数据库连接
使用Nodejs + express连接数据库mongoose
【6月更文挑战第3天】这篇文章介绍了如何在Express应用中使用Mongoose连接MongoDB数据库。首先,需要创建一个`db.js`文件,然后通过`npm install mongoose`安装Mongoose驱动。接着,在应用中引入MongoDB模块,建立到数据库的连接。创建一个Mongoose schema定义数据模型,如用户信息表。最后,执行数据库操作,包括查询、插入、更新和删除文档,并在完成后关闭数据库连接。文中还提供了相关代码示例。
15 1
|
15天前
|
JSON JavaScript 中间件
Node.js Express 框架
Node.js Express 框架
13 0
|
25天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
11 0
|
2月前
|
JSON JavaScript 前端开发
❤Nodejs 第九章(token身份认证和express-jwt的安装认识)
【4月更文挑战第9天】Node.js第九章介绍了Token身份认证,特别是JWT(JSON Web Token)作为跨域认证的解决方案。JWT由Header、Payload和Signature三部分组成,用于在客户端和服务器间安全传输用户信息。前端收到JWT后存储在localStorage或sessionStorage中,并在请求头中发送。Express-JWT是一个中间件,用于解析JWT。基本用法包括设置secret和algorithms。注意安全问题,避免混合使用不同算法以防止降级攻击。
62 0
|
2月前
|
移动开发 JavaScript 前端开发
为了学习vue3,安装nvm进行node的多版本管理
为了学习vue3,安装nvm进行node的多版本管理
88 2
|
2月前
|
资源调度 jenkins 持续交付
jenkins 自动安装nodejs16.16.0版本报错处理
jenkins 自动安装nodejs16.16.0版本报错处理
96 0