关于架构:基于Nodejs打造Web架构中间层

69次阅读

共计 6913 个字符，预计需要花费 18 分钟才能阅读完成。

前言

Node.js 自 2009 年诞生以来，倒退速度相当惊人，目前各种开发框架层出不穷，国内外各大公司都在应用，如国内的阿里的淘宝、天猫、阿里云、蚂蚁金服，腾讯视频、携程、百度、网易、苏宁、京东、爱奇艺、去哪儿、有赞、贝壳找房等等好多企业都在应用，大部分企业把 Node.js 作为中间层去利用，明天和大家简略说说对于基于 Nodejs 打造 Web 架构中间层的一些常识。

一、中间层与中间件

1、什么是中间层

中间层（Middle Tier）也称作应用程序服务器层或应用服务层，是用户接口或 Web 客户端与数据库之间的逻辑层。典型状况下 Web 服务器位于该层，业务对象在此实例化。中间层是生成并操作接管信息的业务规定和函数的汇合。它们通过业务规定（能够频繁更改）实现该工作，并由此被封装到在物理上与应用程序程序逻辑自身相独立的组件中。

1.1 Node 作为中间层模式

以 Node 作为中间层，当客户端关上一个网站时，先申请到 node 服务器这一层，通过 node 服务器转发申请到后端的服务器，获取数据，而后返给 node 的模板引擎，依据视图模板渲染好模板字符串页面，再返回给客户端，间接展现页面，如图：

1.2 负载均衡器 -Nginx

Nginx 是一个高性能的 WEB 服务器和反向代理服务器，最罕用的软件负载均衡器。

当访问量比拟大时，频繁的申请，会给服务带来很大压力，通过负载平衡、分流，加重服务器的压力；另一方面，网站部署在多台服务器，当某台服务器故障的时候，能够马上切换到其它服务器，还能保障网站能失常拜访，这就是负载平衡的劣势。

2、什么是中间件

2.1 中间件概念

中间件 (MiddleWare) 是一种独立的系统软件服务程序，分布式应用软件借助这种软件在不同的技术之间共享资源，中间件位于客户机服务器的操作系统之上，治理计算资源和网络通信。从这个意义上能够用一个等式来示意中间件：中间件 = 平台 + 通信，这也就限定了只有用于分布式系统中能力叫中间件，同时也把它与撑持软件和实用软件辨别开来。

在 NodeJS 中，中间件次要是指封装所有 Http 申请细节解决的办法。一次 Http 申请通常蕴含很多工作，如记录日志、ip 过滤、查问字符串、申请体解析、Cookie 解决、权限验证、参数验证、异样解决等，但对于 Web 利用而言，并不心愿接触到这么多细节性的解决，因而引入中间件来简化和隔离这些基础设施与业务逻辑之间的细节，让开发者可能关注在业务的开发上，以达到晋升开发效率的目标。中间件能够了解为一个对用户申请进行过滤和预处理的货色，它个别不会间接对客户端进行相应，而是将解决之后的后果传递上来。简略来说就是实现某种性能的函数。

Express 是一个本身性能极简，齐全是路由和中间件形成一个 web 开发框架：从实质上来说，一个 Express 利用就是在调用各种中间件，中间件机制如图所示：

2.2 中间件机制外围实现

中间件是从 Http 申请发动到响应完结过程中的解决办法，通常须要对申请和响应进行解决，因而一个根本的中间件的模式如下：

`const middleware = (req, res, next) => {
// TODO
next()
}`

二、中间层的意义

Node.js 是一个 Javascript 运行环境。Node.js 应用事件驱动，非阻塞 I /O 模型而得以轻量和高效，非常适合在分布式设施上运行数据密集型的实时利用。Node.js 是单过程、单线程运行机制，通过事件轮询（event loop）来实现并发操作，而且性能很好。

Node.js 最大的改进架构就是 ” 减少了中间层 ”，前后端拆散，应用 Node.js 来做‘BBF(backend of frontend)’在传统后端退出了 Node.js 这一层，通过此有两点益处，前端接管了 view 层，后端渲染也开始全副由前端掌控，另一个就是接口层减少了一层。在前后端拆散的人造抉择下，Node.js 中间层能够承当更多的责任。

1、Node.js 中间层可做的工作

  • 代理：在开发环境下，咱们能够利用代理来，解决最常见的跨域问题；在线上环境下，咱们能够利用代理，转发申请到多个服务端。
  • 缓存：缓存其实是更凑近前端的需要，用户的动作触发数据的更新，Node.js 中间层能够间接解决一部分缓存需要。
  • 限流：Node.js 中间层，能够针对接口或者路由做响应的限流。
  • 日志：相比其余服务端语言，Node.js 中间层的日志记录，能更方便快捷的定位问题（是在浏览器端还是服务端）。
  • 监控：善于高并发的申请解决，做监控也是适合的选项。
  • 鉴权：有一个中间层去鉴权，也是一种繁多职责的实现。
  • 路由：前端更须要把握页面路由的权限和逻辑。
  • 服务端渲染：Node.js 中间层的解决方案更灵便，比方 SSR、模板直出、利用一些 JS 库做预渲染等等。

2、Node.js 中间层带来的益处

  • 通过 PC Web 本人的中间层，能够依照业务定制化接口，扩充前端展示的能力和范畴；
  • 中间层接口由应用接口的前端工程师开发，对展示和接口的性能更加相熟，防止了以前的工作模式中接口方跟各方的需要对接、沟通、联调工夫，这样使得我的项目的推动更加顺利，我的项目迭代会更快；
  • 中间层应用 NodeJS，开发语言是 JavaScript，跟当初前端工程师的工作语言一样，缩小了学习老本；
  • 中间层接口的开发由前端工程师同时负责开发，既节俭了人力老本，同时又进步了前端开发人员的技术能力，使得前端工程师向全栈工程师迈进。

3、Node.js 中间层的劣势

  • 性能拆散，加重板块累赘;
  • 跨零碎、跨终端均可重用页面数据校验、逻辑代码，无需因为新零碎、终端的接入而重写校验；
  • 只在中间件中做一次数据校验，防止了前端做数据校验的同时后端也要做校验的反复，在无效保证数据的有效性的同时升高了团队整体的工作量；
  • 解决数据逻辑，解放了前端既要做页面渲染又要写简单的逻辑，使得页面开发人员专一于页面渲染，不仅使得分工更为明确，我的项目合作效率更高，更重要的是疾速响应页面使得页面加载更快，用户体验更好，防止了浏览器长时间显示空白页面的不敌对体验，真正的前后端拆散。

三、中间层的实现

后面写了很多实践方面的常识，接下来本人手动来简略实现 Node.js 基于 Koa 框架实现的中间层。

1、后端提供的接口

先理解一下后端提供的一个接口，依据前端页面输出不同账号信息，后端接口会返回不同的值，如图：


这段 PHP 代码是依据前端传给不同的用户名和明码状态返回不同的状态码。

2、搭建前端页面

前端页面用了 ejs 模板引擎采纳服务端渲染形式来进行。前端页面次要有三个代码的文件，app.js，admin.js，admin.ejs。

2.1 我的项目代码构造

2.2 我的项目代码展现

1、是 app.js 代码

`const Koa = require(‘koa’);
// 路由
const Router = require(‘koa-router’);
// 模板引擎
const ejs = require(‘koa-ejs’);
// 数据解析
const body = require(‘koa-bodyparser’);
// 解决动态文件
const static = require(“koa-static”);
const path = require(‘path’);
const app = new Koa();
ejs(app,{

root:path.resolve(__dirname,"template"), 
layout:false,
viewExt:"ejs",
cache:false,
debug:false

})
const router = new Router();
app.use(body());
router.get(“/”,ctx => {

ctx.body = '主页';

})
router.use(“/admin”,require(“./router/admin”));
app.use(static(‘./static’));
app.use(router.routes());
app.listen(3000);`

2、登录页面文件，用 ejs 模板引擎来解决

`<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 我是治理页面 </title>
<script src="/js/jquery.min.js"></script>

</head>
<body>

<p> 用户：<input type="text"></p>
<p> 明码：<input type="password"></p>
<button> 提交 </button>
<script>
   $(function(){$('button').click(function(){var username = $(':text').val();
           var password = $(':password').val();
           $.ajax({
               url:'/admin/login',
               method:'post',   
               data:{
                   username,
                   password
               },
               success(data){console.log(data);
               }
           })
       })
   })
</script>

</body>
</html>`

3、代码逐渐实现逻辑

1、应用下面的登录页代码，而后 admin.js 页面代码如下

`const Router = require(‘koa-router’);
const querystring = require(‘querystring’);
const router = new Router();
router.get(‘/’,async ctx=>{

await ctx.render('admin/admin')

})
router.post(“/login”,async ctx => {

const {username,password} = ctx.request.body;
console.log(username,password);

})
module.exports = router.routes();`

此时登录页面输出用户名和明码点击提交时会输入构造如下代码：

“^CedzdeMacBook-Pro-5:0323 edz$ nodemon app.js
[nodemon] 2.0.2
[nodemon] to restart at any time, enter rs
[nodemon] watching dir(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node app.js
admin 123456 // 后端拿到了前端传给的数据 “

此时传过的数据后端会拿他与数据库作比对，进行解决，而 Node.js 只充当中介作用，不做数据的解决。

2、咱们接着看，把要的数据传个服务端，应用 axios 发送数据到服务端，其中外面用到了数据格式的转换：

`const Router = require(‘koa-router’);
const querystring = require(‘querystring’);
const router = new Router();
router.get(‘/’,async ctx=>{

await ctx.render('admin/admin')

})
// 此处为中间层，起到中介作用，会把数据发给后端接口
router.post(“/login”,async ctx => {

const {username,password} = ctx.request.body;
//console.log(username,password);
// 要数据传给服务端，应用 axios 发送数据到服务端
const {data} = await axios({
    url:'http://localhost/login/check.php', 
    method:'post',
    data:{
        username,
        password
    },
    // username=admin&password=123456 查问字符串
    // 数据格式转换，前端是个 JSON 数据格式，后端拿到的是表单数据
    transformRequest:[
        data =>{return querystring.stringify(data)
        }
    ]
})

})
module.exports = router.routes();`

此时登录页面输出用户名和不同的明码和空明码时点击提交时会输入构造如下代码：

“^CedzdeMacBook-Pro-5:0323 edz$ nodemon app.js
[nodemon] 2.0.2
[nodemon] to restart at any time, enter rs
[nodemon] watching dir(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node app.js
{code:1}
{code:0}
{code:3}“

3、这时咱们把后端传回的接口数据在进行从新包装一下，增加如下代码：

`// 从新包装

if(data.code !== 1){
    // return 中断条件
    return ctx.body = {
        code:401,
        message:'未经受权'
    }
}
// 前端本人定义的提醒语，后端专一逻辑开发，不必在和前端定义接口
ctx.body = {
   code:200,
   message:'校验胜利'
}`

这时页面会返回通过前端包装的提醒语，如图所示：

总的解决路由的 admin.js 代码文件如下：

`const Router = require(‘koa-router’);
const axios = require(‘axios’);
const querystring = require(‘querystring’);
const router = new Router();
router.get(‘/’,async ctx=>{

await ctx.render('admin/admin')

})
// 此处为中间层，起到中介作用，会把数据发给后端接口
router.post(“/login”,async ctx => {

const {username,password} = ctx.request.body;
//console.log(username,password);
// 要数据传给服务端，应用 axios 发送数据到服务端
const {data} = await axios({
    url:'http://localhost/login/check.php', // 后端提供的一个接口文件
    method:'post',
    data:{
        username,
        password
    },
    // username=admin&password=123456 查问字符串
    // 数据格式转换，前端是个 JSON 数据格式，后端拿到的是表单数据
    transformRequest:[
        data =>{return querystring.stringify(data)
        }
    ]
})
// 从新包装
// console.log(data);
if(data.code !== 1){
    // return 中断条件
    return ctx.body = {
        code:401,
        message:'未经受权'
    }
}
// 前端本人定义的提醒语，后端专一逻辑开发，不必在和前端定义接口
ctx.body = {
   code:200,
   message:'校验胜利'
}

})
module.exports = router.routes();`

服务端不要裸露太多给用户信息，不必提醒用户名正确或者明码谬误，避免被他人猜，前端依据后端提供的状态码从新定义输入提醒内容，对用户来说特地的敌对，不管后端给前端什么样的接口内容，前端都能够包装接口，所以后端只有返回给前端数据就能够了，接口的定义前端本人能够进行包装。

四、总结

中间层曾经为越来越多的大公司所利用，进入中间层后，前端能做的事件越来越多，将触角伸向了服务器，除了前后端拆散外，还能做 redis 缓存，负载平衡策略。另一方面，不止是 Node.js 能做中间层，PHP 也能够，因为 Node.js 是用 js 写的，Node.js 的生态很成熟，对于前端人员来说，比拟容易上手。

Web 端的开发团队是需要链中的最上游、数据链的上游，很多产品性能都受限于业务接口，中间层提供了一种可能，让咱们 Web 前端开发工作有了本人的接口开发能力能够对接最原始数据，既缩小了前端开发中的局限性，也让前端团队在开发过程中有了更多的想象力，能更好的依据业务须要疾速发展我的项目。
招聘信息

好将来技术团队正在热招前端、算法、流媒体后盾开发等各个方向高级开发工程师岗位，大家可扫描下方二维码或微信搜寻关注“好将来技术 ”，点击本公众号“ 技术招聘”栏目理解详情，欢送感兴趣的搭档退出咱们！

兴许你还想看

DStack– 基于 flutter 的混合开发框架

WebRTC 源码剖析——视频流水线建设（上）

“ 考试 ” 背地的迷信：教育测量中的实践与模型（IRT 篇）

正文完
架构
发表至： 架构
2020-07-31
 0
关于架构:架构之并发和并行
架构设计模式外观模式
架构设计模式观察者模式
关于架构:EventBridge-事件总线及-EDA-架构解析