基于Nodejs打造Web架构中间层

时间  2021-02-22
标签 php html 前端 node jquery ios web ajax redis 算法 栏目 HTML 繁體版
原文   原文链接

前言

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

1、中间层与中间件

一、什么是中间层

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

1.1 Node做为中间层模式

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

18163329db355a3d7e5abdf3.webp.jpg

1.2 负载均衡器-Nginx

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

当访问量比较大时，频繁的请求，会给服务带来很大压力，经过负载均衡、分流，减轻服务器的压力；另外一方面，网站部署在多台服务器，当某台服务器故障的时候，能够立刻切换到其它服务器，还能保证网站能正常访问，这就是负载均衡的优点。jquery

181633291fcbdf31f8f23fe2.webp.jpg

二、什么是中间件

2.1 中间件概念

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

在NodeJS中，中间件主要是指封装全部Http请求细节处理的方法。一次Http请求一般包含不少工做，如记录日志、ip过滤、查询字符串、请求体解析、Cookie处理、权限验证、参数验证、异常处理等，但对于Web应用而言，并不但愿接触到这么多细节性的处理，所以引入中间件来简化和隔离这些基础设施与业务逻辑之间的细节，让开发者可以关注在业务的开发上，以达到提高开发效率的目的。中间件能够理解为一个对用户请求进行过滤和预处理的东西，它通常不会直接对客户端进行相应，而是将处理以后的结果传递下去。简单来讲就是实现某种功能的函数。web

Express是一个自身功能极简，彻底是路由和中间件构成一个web开发框架：从本质上来讲，一个Express应用就是在调用各类中间件，中间件机制如图所示：
中间件.pngajax

2.2 中间件机制核心实现

中间件是从Http请求发起到响应结束过程当中的处理方法，一般须要对请求和响应进行处理，所以一个基本的中间件的形式以下：redis

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

2、中间层的意义

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

Node.js最大的改良架构就是"增长了中间层"，先后端分离，使用Node.js来作‘BBF(backend of frontend)’在传统后端加入了Node.js这一层，经过此有两点好处，前端接管了view层，后端渲染也开始所有由前端掌控，另外一个就是接口层增长了一层。在先后端分离的自然选择下，Node.js中间层能够承担更多的责任。

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

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

二、Node.js中间层带来的好处

  • 经过PC Web本身的中间层，能够按照业务定制化接口，扩大前端展示的能力和范围；
  • 中间层接口由使用接口的前端工程师开发，对展示和接口的功能更加熟悉，避免了之前的工做模式中接口方跟各方的需求对接、沟通、联调时间，这样使得项目的推动更加顺利，项目迭代会更快；
  • 中间层使用NodeJS，开发语言是JavaScript，跟如今前端工程师的工做语言同样，减小了学习成本；
  • 中间层接口的开发由前端工程师同时负责开发，既节省了人力成本，同时又提升了前端开发人员的技术能力，使得前端工程师向全栈工程师迈进。

三、Node.js中间层的优点

  • 功能分离，减轻板块负担;
  • 跨系统、跨终端都可重用页面数据校验、逻辑代码，无需由于新系统、终端的接入而重写校验；
  • 只在中间件中作一次数据校验，避免了前端作数据校验的同时后端也要作校验的重复，在有效保证数据的有效性的同时下降了团队总体的工做量；
  • 处理数据逻辑，解放了前端既要作页面渲染又要写复杂的逻辑，使得页面开发人员专一于页面渲染，不只使得分工更为明确，项目协做效率更高，更重要的是快速响应页面使得页面加载更快，用户体验更好，避免了浏览器长时间显示空白页面的不友好体验，真正的先后端分离。

3、中间层的实现

前面写了不少理论方面的知识，接下来本身手动来简单实现Node.js基于Koa框架实现的中间层。

一、后端提供的接口

先了解一下后端提供的一个接口，根据前端页面输入不一样帐号信息，后端接口会返回不一样的值，如图：

php.png
这段PHP代码是根据前端传给不一样的用户名和密码状态返回不一样的状态码。

二、搭建前端页面

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

2.1 项目代码结构

WX202003240944192x.png

2.2 项目代码展现

一、是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);`

二、登陆页面文件，用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>`

三、代码逐步实现逻辑

一、使用上面的登陆页代码，而后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只充当中介做用，不作数据的处理。

二、咱们接着看，把要的数据传个服务端，使用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 }``

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

`// 从新包装

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

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

结果.png

总的处理路由的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();`

服务端不要暴露太多给用户信息，不用提示用户名正确或者密码错误，防止被别人猜，前端根据后端提供的状态码从新定义输出提示内容，对用户来讲特别的友好，不论后端给前端什么样的接口内容，前端均可以包装接口，因此后端只要返回给前端数据就能够了，接口的定义前端本身能够进行包装。

4、总结

中间层已经为愈来愈多的大公司所应用，进入中间层后，前端能作的事情愈来愈多，将触角伸向了服务器，除了先后端分离外，还能作redis缓存，负载均衡策略。另外一方面，不止是Node.js能作中间层，PHP也能够，由于Node.js是用js写的，Node.js的生态很成熟，对于前端人员来讲，比较容易上手。

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

好将来技术团队正在热招前端、算法、流媒体后台开发等各个方向高级开发工程师岗位，你们可扫描下方二维码或微信搜索关注“好将来技术”，点击本公众号“技术招聘”栏目了解详情，欢迎感兴趣的伙伴加入咱们！

也许你还想看

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

WebRTC源码分析——视频流水线创建（上）

"考试"背后的科学：教育测量中的理论与模型（IRT篇）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程