内容简介：自从Node.js出现之后，相应的web框架就出现了，而且都是比较容易上手和搭建的，框架中都有一个很重要的概念“中间件”，今天就来扒一下其中的奥妙。还记得之前面试的时候，我说用过Node搭建了一个小型的后台框架，然后面试官就问了一下你用过什么常用的中间件吗？我当时知道中间件就是一个类似插件一样，依次执行的东西。虽然我在项目当中也用到了类似body-parser、express.static()这些，奈何年少无知我不知道这就是中间件。现在想想要是再问我中间件原理就更不懂了。
自从Node.js出现之后，相应的web框架就出现了，而且都是比较容易上手和搭建的，框架中都有一个很重要的概念“中间件”，今天就来扒一下其中的奥妙。
01 前言
还记得之前面试的时候，我说用过Node搭建了一个小型的后台框架，然后面试官就问了一下你用过什么常用的中间件吗？
我当时知道中间件就是一个类似插件一样，依次执行的东西。虽然我在项目当中也用到了类似body-parser、express.static()这些，奈何年少无知我不知道这就是中间件。现在想想要是再问我中间件原理就更不懂了。
现在的中间件是挺多的，可以满足我们很多的数据处理与请求，我们今天就来看一下中间件这个神奇的东西到底神在哪？
02 认识Express
得益于JavaScript的发展，使得Node诞生了， 能够在服务器端运行JS代码 ，这无疑是令人激动的事情，Express其实就是一个 Node.js Web程序框架 ，简单来说就是快速构建一个“后台”。我们用很简单的代码就可以搭建一个服务器，不用费劲心思来使用其他的语言来搭建，而且其他语言在什么也没干的情况下就出现极多的代码。
Node与其他传统的Web服务器的重大区别就是它是 单线程 的，它可以简化Web程序的编写，如果要实现多线程就启动多个Node实例即可。而且 Node是跨平台的，与平台是无关的 ，我们可以在Windows或者 Linux 操作系统上都可运行。
快速开始
我们在使用Express编写应用程序的时候一般都会有固定的代码，有一定的目录结构。这中“常规”的代码就是我们所说的脚手架，让我们更方便地开发。我们随便建一个文件夹来使用Express。
-
npm init
使用这一行命令来 初始化一个package.json文件 ，但是要注意的是package.json的name不能叫express，不然会在下一句命令会报错。
-
npm install express --save
安装express，成功之后你会在项目的根目录看到多了node_modules文件夹，这里就是第三方的应用包，我们的express也会安装在这里。
因为这个文件夹极大，甚至包含了成百上千的包，所以代码提交的时候我们肯定不会带上它的。所以我们在根目录下面就 创建一个.gitignore文件 ，内容就是 node_modules ，用与忽略这个文件夹。
-
新建入口文件 app.js
在根目录新建一个入口文件，通常叫app.js或者index.js都可以。
var express = require("express");
var app = express();
app.set("port", process.env.PORT || 3000);
// 定制 404 页面
app.use(function (req, res) {
res.type("text/plain");
res.status(404);
res.send("404 - Not Found");
});
// 定制 500 页面
app.use(function (err, req, res, next) {
console.error(err.stack);
res.type("text/plain");
res.status(500);
res.send("500 - Server Error");
});
app.listen(app.get("port"), function () {
console.log(
"Express started on http://localhost:" +
app.get("port") +
"; press Ctrl-C to terminate."
);
});
那其实这样你就创建了小型的服务器了，接下来就直接启动一下，node app.js就会发现它已经是监听了3000端口。但是我们发现他是没有东西的，因为我们没有配置路由，默认就是返回错误页404。
我们尝试配置一个的路由，主要要在404路由之前，不然也会出现404。
上面我们看到了404和500使用的是app.use而不是路由的形式，这是一种中间件的写法，我们可以理解为没有路由匹配的时候走的方向。
app.get("/", function (req, res) {
res.type("text/plain");
res.send("这是首页");
});
app.get("/about", function (req, res) {
res.type("text/plain");
res.send("这是关于页");
});
静态文件引入
我们开发中难免会有一些图片等资源的引入，express给我们提供了一种便于资源引入的方法，我们直接在app.js文件的路由开始之前就加入这一行代码：
var express = require("express");
var app = express();
app.use(express.static(__dirname + '/public'));//需要加入的代码
意思就是这里的资源可以不经任何处理就直接发送给客户端，可以放置图片、CSS文件等。
动态渲染模板
我们可以加载静态资源文件，但是我们要使用html模板进行内容的渲染就要加入模板引擎了，但是这种模板引擎的我用的比较少，我一般都会结合vue进行渲染的。但是今天我们就来探讨一下不用vue要怎么渲染出来。
首先我们要安装一下模板殷勤express-handlebars：
npm install express-handlebars
我们现在跟目录之下建立一个views文件夹，然后再建立一个index.html文件用于渲染。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>首页</h1>
<img src="/express.png" alt="">
{{#each list}}
<h2>昵称:{{this.name}}</h2>
<h2>年龄:{{this.age}}</h2>
<hr>
{{/each}}
</body>
</html>
app.js
var express = require("express");
var app = express();
const exphbs = require("express-handlebars");//引入模板
app.engine(//设置模板
"html",
exphbs({
layoutsDir: "views",
defaultLayout: "layout",
extname: ".html",
})
);
然后我们修改一下之前的请求根路径的路由，修改成：
app.get("/", function (req, res) {
res.render("index", {
layout: false,
title: "首页",
list: [
{
name: "张三",
age: 20,
},
{
name: "李四",
age: 15,
},
],
});
});
以上改好之后重启运行，打开 localhost:3000 你就可以看到你的页面渲染出来了。如果你的网站是比较小型的，一般使用这样的轻量级框架就可以完成了，但是模板语法自己也要了解一下。
03 中间件解析
其实中间件很好理解，想象一下有一个长的管道，中间可以加入很多东西，这些东西就是我们所说的中间件。
中间件类型
express的中间件可以分成几种：
- 应用级中间件
- 路由级中间件
- 错误处理中间件
- 内置中间件
- 第三方中间件
应用级中间件
我们使用的 app.use('/',(req,res)={}) 这种就是，直接挂载到app下面的。
app.use((req,res,next) => {
//这个中间件是所有都执行的，没有挂载到具体的路径
next(); // 控制权下一个中间件
})
app.get("/about", function (req, res) {
res.type("text/plain");
res.send("这是关于页");
});
路由级中间件
路由级中间件和上面应用级中间件类似，但是它绑定对象不是app而是为express.Router()对象。
router.get('/getValue', (req, res, next) => {
api.getValue(req, res, next);
});
router.post('/setValue', (req, res, next) => {
api.setValue(req, res, next);
});
错误处理中间件
错误处理中间件有四个参数,定义错误处理中间件必须使用这四个参数。即使不需要next对象，也必须在参数中声明它，否者中间件会识别为一个常规中间件，不能处理错误。
// 定制 500 页面
app.use(function (err, req, res, next) {
console.error(err.stack);
res.type("text/plain");
res.status(500);
res.send("500 - Server Error");
});
内置中间件
express.static是 Express 唯一内置的中间件。它基于 serve-static，负责在 Express 应用中提托管静态资源。
var options = {
dotfiles: 'ignore',
etag: false,
extensions: ['htm', 'html'],
index: false,
maxAge: '1d',
redirect: false,
setHeaders: function (res, path, stat) {
res.set('x-timestamp', Date.now());
}
}
app.use(express.static('public', options));
第三方中间件
这个其实有很多，我们使用的body-parser这种就是属于第三方的中间件。这里常用的有：
- body-parser:用于处理body数据
- cookie-session：处理session数据
- cookie-parser：用来操作cookie
其实我们很多的功能都可以通过第三方的中间件来完成，前端真的不简单，有很多大佬在为了前段的发展尽心尽力，我只会CV。
中间件实现原理
好了，说了这么多，我们就来分析一些这个中间件是怎么实现的，如何才可以使得管道平稳运行。我们可以发现中间件都是有执行顺序的，前后的执行结果是不一样的。有点类似我们队列的样子。
接下来就参照这种思想来实现一下这中间件的核心代码。
var http = require('http');
function express() {
var funcs = []; // 待执行的函数数组
var app = function (req, res) {
var i = 0;
function next() {
var task = funcs[i++]; // 取出函数数组里的下一个函数
if (!task) { // 如果函数不存在,return
return;
}
task(req, res, next); // 否则,执行下一个函数
}
next();
}
app.use = function (task) {
funcs.push(task);
}
return app; // 返回实例
}
这里就是核心代码了，精髓都在这里，接下来我们就写一些自己的中间件，来测试一下是否可行。
var app = express();
function middlewareA(req, res, next) {
console.log('中间件1开始...');
next();
console.log('中间件1结束...');
}
function middlewareB(req, res, next) {
console.log('中间件2开始...');
next();
console.log('中间件2结束...');
}
function middlewareC(req, res, next) {
console.log('中间件3开始...');
next();
console.log('中间件3结束...');
}
app.use(middlewareA);
app.use(middlewareB);
app.use(middlewareC);
http.createServer(app).listen('3000', function () {
console.log('listening 3000....');
});
运行这一段js代码的时候，控制台就出现了中间件的执行过程。它有一种类似于先进后出的“栈结构”。
04、小结
以上就是本文的所有内容了，主要介绍了Web框架Express的使用方法，以及使用模板引擎进行数据渲染的具体操作。我们还重点了解了Express的中间件实现原理与过程，了解其中的思想。大家也可以去了解一下常见的中间件，试着去使用它们，你会发现开发竟是如此简单。
我们也知道除了Express框架之外还有Koa框架，它也是由Express的原班人员打造出来的，我认为只要是用的舒服就好，没有必要说哪个好哪个不好。
参考文章：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- JVM 知识体系框架
- 你的前端知识框架，该如何搭建？
- Vue 框架原理相关知识点
- Python3 爬虫知识梳理(框架篇)
- 重学前端学习笔记（三）--前端知识框架图
- Spring Boot 框架中必须了解的知识点
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
