详解从NodeJS搭建中间层再谈前后端分离


Posted in NodeJs onNovember 13, 2018

之前在知道创宇的项目中有用到过nodejs作中间层,当时还不太理解其背后真正的原因;后来在和一位学长交谈的过程中,也了解到蚂蚁金服也在使用类似的方法,使用nodejs作为中间层去请求真实后台的数据;之后人到北京,也见到现在的公司也在往nodejs后端方向靠拢。随着知识的增加,加之自己查阅资料,慢慢总结出了一些原理。

为什么要前后端分离

1、开发效率高
前端开发人员不用苦苦地配置各种后端环境,安装各种莫名的插件,摆脱对后端开发环境的依赖,一门心思写前端代码就好,后端开发人员也不用时不时的跑去帮着前端配环境。

2、职责清晰,找bug方便
以前有了bug,前端推后端,后端推前端,不知道该谁去该,前后端分离,是谁的问题就该谁去处理,处理问题方便很多,后期代码重构方便,做到了高可维护性。

从做微信小程序引发的思考

最近出于爱好,写了个音乐播放器的微信小程序(原本想用vue写的,后来因为公司业务原因,年后可能去做微信小程序,所以就换了前端技术栈),源码在我的GitHub上: wx-audio 。

思考:后端出于性能和别的原因,提供的接口所返回的数据格式也许不太适合前端直接使用,前端所需的排序功能、筛选功能,以及到了视图层的页面展现,也许都需要对接口所提供的数据进行二次处理。这些处理虽可以放在前端来进行,但也许数据量一大便会浪费浏览器性能。因而现今,增加node端便是一种良好的解决方案。

在我的微信小程序demo的server端代码中,我通过http模块对真实后台(网易云音乐API)发起http请求,然后通过express模块搭建后端服务。

发起请求:

// http.js
var formatURL = require('./formatURL.js');
var http = require('http');
const POSThttp = function(request){
 return new Promise((resolve, reject) => {
  let body = '';
  // http模块拿到真实后台api的数据
  http.get(formatURL(request.body.musicname), function(res){
   res.on('data', (data) => {
    body += data;
   }).on('end', () => {
    // 格式化
    const {
     name,
     audio: musicUrl,
     page,
     album: {
      name: musicName,
      picUrl,
     },
     artists: [{
      name: singer,
     }],
    } = JSON.parse(body).result.songs[0];
    const reply = {
     name,
     picUrl,
     musicUrl,
     page,
     singer,
    };
    resolve(reply);
   });
  });
 });
};
module.exports = POSThttp;

得到数据传回前端:

var express = require('express');
var POSThttp = require('./POSThttp.js');
var bodyParser = require('body-parser');
// 使用body-parser解析post请求的参数,如果没有,req.body为undefined。
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
 extended: true
}));
app.post('/', (req, res) => {
 POSThttp(req).then((data) => {
  res.send(data);
 }).catch((err) => {
  res.send(err);
 });
});
app.listen(3000, () => {
 console.log('open wx-audio server successful!')
});

这几十行代码也就实现了一个简单的中间层的demo,并做到了在中间层格式化参数,便于前端进行使用的过程。

为什么需要中间层?

其实这个问题,我认为跟面试常考的题:“为什么需要前后端分离?”是类似的,其原因可以归纳为以下几点:

现今网站存在问题

之前有向一位在百度有多年工作经验的老前辈交谈这类问题,我所提到的搜狐公司代码冗余、前后端耦合的问题,他是这么回答并且给予我这样的建议:

其实,提炼出来,现今大公司的老项目(包括百度、搜狐等公司所采用的后端渲染等),或多或少都会存在这样的一些 问题 :

  • 前端代码越来越复杂
  • 前后端依旧高度耦合
  • 无法良好的支持跨终端

前辈们提出的解决方案

参考 淘宝前后端分离解决方案

  • 前端代码越来越复杂,我们希望尽可能地减少工作量,开始使用类似MV*的分层结构,使前端后分离成为必要。
  • 前端需要处理更多的工作,希望有权操控View,Router(如:SPA的尝试)
  • 各种终端设备的兴起,需要我们把页面适配到更多的地方。

开始:我们所尝试的CLIENT-SIDE MV* 框架,后端暴露数据接口、处理业务逻辑,前端接收数据、处理渲染逻辑。

关于MVC的定义:

MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展现层(视图)和用户交互(控制器)。换句话说,一个事件的发生是这样的过程:

1. 用户和应用产生交互。

2. 控制器的事件处理器被触发。

3. 控制器从模型中请求数据,并将其交给视图。

4. 视图将数据呈现给用户。

我们不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分,将代码清晰地分割为若干部分,并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

如:Backbone, EmberJS, KnockoutJS, AngularJS等框架。

但这样的方式仍旧存在问题:

各层职责重叠

  • Client-side Model 是 Server-side Model 的加工
  • Client-side View 跟 Server-side是 不同层次的东西
  • Client-side的Controller 跟 Sever-side的Controller 各搞各的
  • Client-side的Route 但是 Server-side 可能没有

性能问题

  • 渲染,取值都在客户端进行,有性能的问题
  • 需要等待资源到齐才能进行,会有短暂白屏与闪动
  • 在移动设备低速网路的体验奇差无比

重用问题

  • 模版无法重用,造成维护上的麻烦与不一致
  • 逻辑无法重用,前端的校验后端仍须在做一次
  • 路由无法重用,前端的路由在后端未必存在

跨终端问题

  • 业务太靠前,导致不同端重复实现
  • 逻辑太靠前,造成维护上的不易

渲染都在客户端,模版无法重用,SEO实现 麻烦

NodeJS作为中间层的全栈开发方案

有了NodeJS之后,前端可以更加专注于视图层,而让更多的数据逻辑放在Node层处理。

我们使用Node层:

  • 转发数据,串接服务
  • 路由设计,控制逻辑
  • 渲染页面,体验优化
  • 中间层带来的性能问题,在异步ajax转成同步渲染过程中得到平衡
  • 更多的可能

其实更为重要的是,对于前端来说,NodeJS的学习成本是相当低的:我们无需学习一门新的语言,就能做到以前开发帮我们做的事情,一切都显得那么自然。

技术在不断变化中,唯有跟上技术革新的浪潮,才能不被时代所淘汰,不管是人还是企业。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs 搭建简单的Web服务器详解及实例
Nov 30 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
Nodejs+Socket.io实现通讯实例代码
Feb 13 NodeJs
async/await与promise(nodejs中的异步操作问题)
Mar 03 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
nodejs中express入门和基础知识点学习
Sep 13 NodeJs
nodejs中实现修改用户路由功能
May 24 NodeJs
nodejs二进制与Buffer的介绍与使用
Jul 11 NodeJs
分享五个Node.js开发的优秀实践 
Apr 07 NodeJs
手把手教你如何使用nodejs编写cli命令行
Nov 05 #NodeJs
基于nodejs的雪碧图制作工具的示例代码
Nov 05 #NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 #NodeJs
nodejs中函数的调用实例详解
Oct 31 #NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
Oct 17 #NodeJs
Nodejs实现多文件夹文件同步
Oct 17 #NodeJs
深入理解NodeJS 多进程和集群
Oct 17 #NodeJs
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
理解python正则表达式
2016/01/15 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python线程指南分享
2019/11/19 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Django nginx配置实现过程详解
2020/09/10 Python
python 带时区的日期格式化操作
2020/10/23 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
中职应届生会计求职信
2013/10/23 职场文书
学校安全生产承诺书
2014/05/23 职场文书
十八大标语口号
2014/10/09 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python