摘要:在本文中我们一起来探讨一下为什么要在软件开发中进行前后端的分离,如何做到前后端分离,如何解耦。

简单地说,就是要把复杂的问题简单化,把一个从0到N的问题转化为N个0到1的问题。另一个相近的说法就是“解耦”。

举个例子,我们接到一个客户需求,要求写一个应用,这个应用中有页面的切换,有对应页面的数据交互,数据的获取,数据的计算,如果把这些功能放在一个单一的应用中的话,从大局观的角度来看,这个单一的应用是比较复杂的。

为了降低这个复杂度,我们首先要做的就是前后端分开,关于前后端的定义,大体来说是这样的:前端负责的内容主要有页面路径管理,页面对应数据的显示与管理等等;后端负责的内容主要有数据的提供,数据的计算,安全性管理等等;前后端的通信一般通过HTTP请求来实现;当然这里也有个例外情况,比如有一部分功能可能要求实时性,像类似聊天类的功能,共享文档的功能,画板分享的功能,多人协同操作的功能等等,需要通过socketio这样的通信机制进行。

再细分一下讲,单一的程序框架模型会是MVC(Model-View-Controller)结构的。前后端分离以后,后端会有Model/Entity-Repository/Service-Controller,前端会有View-Model-API调用。

看一下前端部分,View主要是指网页的页面,手机端的页面(Android就是Activity,Layout和View等, iOS就是View Controller和UIView等),如果使用跨平台技术(如React Native, Flutter,Xamarin等)也离不开上述的概念,大同小异。这部分的处理当然离不开数据Model和API调用。处理好这些以后前端的任务也就做好了。

再看一下后端部分,界面相关的处理已经不再是后端的任务了,后端只需要通过API提供前端需要的数据就可以了。Controller就是用来定义这些API的,这一部分会分析或者计算出前端的输入和输出模型,具体处理方式有以下几个因素考虑:请求的类型如GET,POST, PUT, DELTE,PATCH等;数据From Body,数据From Route,数据From Form等等;数据处理完成以后,一个是通过API返回,一个是更新数据源,这里的数据源可以是数据库如SQL和NoSQL,可以是消息中间件如Kafka,也可以是数据缓冲服务器如Redis等等。通过上述的描述,我们可以看到后端的任务变得更加轻量级了,逻辑上也更加简单了。

所以,通过前后端的分离,我们把前端和后端的复杂度始终维持在可控的范围内。如果在软件开发中始终使用这种理念的话,我们会大大扩展我们的软件开发效率和程序质量。因为解决一个N难度的问题显然要比解决N个1难度问题要困难得多。对于一个N难度的问题,我们将其分解为N个1难度的问题之后,我们可以各个击破,步步为营,一步一个脚印,在工作中从容而且自信,因为我们始终用最简单的方法去解决问题。如果碰上复杂的问题,就再将其分化为多个难度为1的问题,以此类推。简单一些讲,就是要保证我们在解决问题的时候,不打无准备之仗,始终脚踏实地,分而治之,避免把我们自己架到火炉上烤。

复杂度降低以后,整个项目的维护成本和扩展成本都会非常的低。我们对项目开发的驾驭能力也会提高很多。

再说一个数据流向的问题,这个主要发生在前端。 这部分的处理会直接关联到前端程序设计的复杂度。在三大前端框架中有双向数据流向和单向数据流向,其中React只支持单向数据流向。但是目前有了Hooks机制以后,你可以通过传Setter和Getter两个Reference来达到修改数据的目的。这种通过传递参数到其他Component的模式实际上增加了程序的复杂度,因为一层层的传递使得组件之间的耦合性增强了。

那么如何解决这个问题呢?

在Angular中可以通过Service中定义Getter和Setter来解决这个问题,每个需要操作这个数据的组件都可以依赖注入这个Service,有了这个Service,就可以很轻松的读取和更新其中的数据了,对于数据的监听,可以通过在Service定义一个Subject,监听到数据变化以后,你可以更新界面,向服务器发送请求等等,这样做,组件之间的耦合性就大大降低了。

再说一下单向数据流向机制如Ngrx, VueX, Mux等等。单向数据流向机制在目前的前端开发中使用很普遍,然而,实际上这种机制会增加程序的复杂度。这个主要是因为这种机制会在前端开发层级中引入另外一套体系来维护数据的流向,假如我们对已有的业务定义为从0到1的实现,加上这个机制以后,就变成了0到1再加上另外一个0到1,变成了0到2的问题。这就变复杂了。

前端只要做好如下的任务如页面的切换,数据与后端的交互,数据模型与API的对应, 组件尽量的写成Self-Contained就可以了。

所以我不建议在前端中再额外的添加类似的数据流向机制了。

再谈一下后端的分析。我们在谈后端的时候,我们不太关心使用什么技术(Node JS,.net Core,SpringBoot,PHP, Python, Ruby On Rails等等),这是因为后端的逻辑是清晰的,不管你用那种技术,程序的设计的层级是大同小异的。

后端的主要任务是API数据的提供。比如用户相关的API,创建一个用户,更新一个用户,删除一个用户等等的操作都是在一个用户Controller定义相关的API。对于Controller的添加,我建议要根据业务层来添加,不要在一个Controller中做太多的事情。比如我们可以添加Book Controller来处理Book相关的操作,订单Controller来处理订单相关的操作。

这样做是为了把API设计变成线性的,平行的,各自Controller之间的耦合性降到最低,从而也就降低了复杂度。

进一步说,在实现的层级上,我们可以有Data Set对应数据库表格,Entity对应数据表格记录,Model对应API数据模型,Service/Repository负责逻辑实现等等。

在后端技术选取中,数据库相关的操作是一个不可逾越的门槛,有的框架使用类似EntityFramework的机制如.NetCore和PHP Laravel, 有的使用类似JPA Hibernate,Mybatis如Spring Boot,有的则直接使用JDBC SQL语句执行的方式,有的结合Stored Procedure。在这个地方,按照程序复杂度排序的话,由低到高分别是EntityFrameWork<JPA Hibernate+Mybatis< JDBC SQL < Stored Procedure。

当然,数据库的设计,数据库的升级Migration也都是关系到程序项目复杂度的因素。这个要结合具体的后端技术来谈。在本文中我们就不展开了。

好了,本文我们主要探讨了前后端分离的作用,如何进行前后端分离,如何解耦,有不足之处,请不吝指正。

点击关注,第一时间了解华为云新鲜技术~

Web前后端:如何分离,如何解耦?相关推荐

  1. Python Web前后端分离框架Django+Vue搭建

    Python Web前后端分离框架Django+Vue搭建 对前面所学知识的归纳整理,感兴趣的可以看看,欢迎指正. 一.前后端分离框架介绍 本项目基于 Python 的 Web 框架开发,采用前后端分 ...

  2. 视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java

    Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...

  3. web前后端分离开发部署模式

    web前后端分离开发部署模式 在开始讨论这个话题之前我们先来认识一下传统的开发模式. 一.传统开发模式 相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/ ...

  4. 淘宝玉伯引发Web前后端研发模式讨论

    淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于Web 前后端研发模式的思考. ...

  5. (转载)淘宝玉伯引发Web前后端研发模式讨论

    个人认为:他们根据自己的经验,以谈话的模式来讨论web的前后端协作,还是很有趣的,也很有借鉴意义. 淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery.不久 ...

  6. 前后端不分离到分离演变,优势,前后端接口联调,排错

    前后端分离,不分离简介 前言 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构 ...

  7. 前后端分离开发的理解以及和前后端不分离的区别

    一.前后端分离的概念 前后端分离 前后端分离是一种架构模式,说通俗点就是后端项目里面看不到页面(JSP | HTML),后端给前端提供接口,前端调用后端提供的 REST 风格接口就行,前端专注写页面( ...

  8. shiro原理/流程(前后端不分离)

    1.整体流程 1>subject 封装了用户名密码,用户权限,用户角色等信息 2>securitymanager负责进行校验用户名密码,权限等操作 3>realm,相当于securi ...

  9. 什么是前后端分离 前后端不分离

    前后端不分离 前端页面看到的效果都是由后端控制,由后端渲染页面或重定向到其他页面,后端需要控制前端的展示,前后端耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接APP时,APP可能并不需要 ...

最新文章

  1. Extjs EditorGridPanel中ComboBox列的显示问题
  2. 手把手教你如何在阿里云ECS搭建Python TensorFlow Jupyter
  3. nps-cli 让你在命令行即可方便的查看、设置和删除 npm-scripts 命令
  4. 一日一技:安装Python第三方库的几种姿势
  5. splunk 提取字段_全面的Splunk应用日志分析介绍
  6. 第 22 章 备忘录模式
  7. L2-002 链表去重 (25 分)—团体程序设计天梯赛
  8. html5 切换语言,Vue项目中使用国际化, 并配置动态切换语言的方法
  9. markdown:轻松转成html 并加载本地图片
  10. 使用exrex第三方模块,制作私人订制的高精度密码字典,保存至txt
  11. 使用免费的卡巴斯基清除木马
  12. SqlServer导入Excel文件数据
  13. 【粗解】【通信编码】卷积编码器的简单实现
  14. java 30分钟_java 当前时间加减30分钟的时间
  15. DSPE-PEG12-Mal,C72H135N2O23P长臂亲水性小分子PEG试剂
  16. ##配置 SEP+RRPP 混合环组网
  17. 蜂窝六边形的六边形消除高分秘籍
  18. css学习笔记-盒子的样式
  19. Scheme Language
  20. dB和功率单位dBm、dBw分析

热门文章

  1. CAN笔记(3) 错误状态
  2. JAVA中的适配器应用_Java适配器模式详解和实际应用.md
  3. extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现
  4. gels imagej 图片处理_如何用ImageJ进行粒度分析
  5. 如何搭建lamp(CentOS7+Apache+MySQL+PHP)环境
  6. MySQL多表数据记录查询详解
  7. html5_canvas初学
  8. 第二章《深入C#数据类型》项目经理评分
  9. 上传文件时显示选择窗口
  10. 仿QQ校友DIV模拟窗口