详解从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中的非阻塞方法介绍
Jun 05 NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
nodeJS代码实现计算交社保是否合适
Mar 09 NodeJs
nodejs实现HTTPS发起POST请求
Apr 23 NodeJs
Nodejs抓取html页面内容(推荐)
Aug 11 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 NodeJs
nodejs爬虫遇到的乱码问题汇总
Apr 07 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
NodeJs通过async/await处理异步的方法
Oct 09 NodeJs
windows系统下更新nodejs版本的方案
Nov 24 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
php实现session共享的实例方法
2019/09/19 PHP
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
Python中join和split用法实例
2015/04/14 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python 防止死锁的方法
2020/07/29 Python
Python中的面向接口编程示例详解
2021/01/17 Python
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
保卫科工作岗位职责
2014/03/01 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
节约用水的口号
2014/06/20 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
第一节英语课开场白
2015/06/01 职场文书
闪闪红星观后感
2015/06/08 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python