详解从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极简入门教程(三):进程
Oct 27 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
nodejs redis 发布订阅机制封装实现方法及实例代码
Dec 15 NodeJs
详解NodeJS框架express的路径映射(路由)功能及控制
Mar 24 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
nodejs利用ajax实现网页无刷新上传图片实例代码
Jun 06 NodeJs
Nodejs之http的表单提交
Jul 07 NodeJs
nodejs之get/post请求的几种方式小结
Jul 26 NodeJs
nodeJS微信分享
Dec 20 NodeJs
nodejs 最新版安装npm 的使用详解
Jan 18 NodeJs
nodejs用gulp管理前端文件方法
Jun 24 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
flash用php连接数据库的代码
2011/04/21 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python实现巡检系统(solaris)示例
2014/04/02 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python中的常量和变量代码详解
2018/07/25 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
英文请假条
2014/04/11 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
人民检察院起诉书
2015/05/20 职场文书
加强党性修养心得体会
2016/01/21 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js