这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战
🎉 前言
- 记得我第一次接触学习
node的时候还是跟着菜鸟教程一个个学起来,时间过得也挺久了,平时如果没有怎么使用的话也会慢慢淡忘些许😅。 - 当时学的时候就感觉有点迷茫,不知道学来干嘛🤯,有些公司很少需要你会
node甚至不用,我相信有挺多入门选手也是这样的想法的🤧,带着这个想法我想重新学习一下node,并站在学习者的角度感同身受的分享一下这个够用指北系列,希望对大家有所帮助😆。 - 相信大家想学习
node也是为了能够自己写点数据展示一下,实现一下增删查改,本系列为了照顾新手同学会讲的比较基础,目的就是为了满足前端node的够用目标。 - 本文主要分享的是
Express框架,全文大概1800+字,阅读可能需要十分钟。具体的指北向导放在文章最下方,会持续更新喔,欢迎点赞收藏❤️❤️~
👻 关于Express
- 任何东西都会产出让它更加方便或者说是效率更高的工具或者框架,就正如我们经常使用的
vuereact大大的提高了开发效率,而Express也是一样,Express框架的初衷是为了拓展Node内置模块的功能提高开发效率,但实际上Express在Node内置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也就是路径,第二个也就是
GETPOST等HTTP请求方法。而服务端根据这两个元素来选择对应处理逻辑也就叫做路由,简单点说就是不同的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请求方法,包括get、post、put、delete等等,这个方法有两个参数。path:这个是我们客户端访问的URL,例如上例的//aboutcallback:这个是我们的回调函数,跟http模块一样同样的也有reqres的参数。
- Express 在原来基础上对
req和res对象进行了功能扩展。你可以在官方文档中找到所有细节内容。 - 继续上例,当我们分别输入不同的
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够用指北(四)⚡---Express框架
「从零开始」前端node够用指北(五)⚡---连接数据库
「从零开始」前端node够用指北(六)⚡---实战之数据大屏