《浅谈架构之路:前后端分离模式》

 

前言:分离模式

  对前后端分离研究了一段时间,恰逢公司有一个大项目决定尝试使用前后端分离模式进行,便参与其中。该项目从2016年初立项至今,平平稳稳得度过,但也涌现出越来越多的问题,绝对不是说前后端分离模式不好,而是很多公司在尝试前后端分离的时候没有做好充分得准备。

  网上对前后端分离介绍的文章已经屡见不鲜,接下来本人用一点粗浅的言语也谈谈这块,献丑了。

为什么要分离?

  如果只问“前后端分离的意义大么?”这是废话,因为从软件架构的角度 Web 的前后端从一开始不就一直是分离的么,而且 browser、server 可能将永远分离下去。

  为了了解这个问题,我们有必要先了解一下 Web的研发模式演变,关于这个题材,下面这篇博文说得不错,这边就不做搬运工了。

  https://github.com/lifesinger/blog/issues/184

  我们不能“为了分离而分离”,而应该“为了真正理解web开发、为了更好完成需求而分离”。

前后端分离的误区?

  1、前端人员配备是否充足?

  由于所在公司以往项目采用传统开发风格,即以后端MVC为主的开发模式,前端人员仅仅提供静态html页面,其余工作皆由后端开发人员完成。采用前后端分离模式可以减后台负担,加快研发效率,当然,前提是前端能做好的话。以往只需要提供静态页面的前端人员,在前后端分离模式中要负责项目的view+controller部分,即除了静态页面,还需要负责页面的所有交互代码、以及nodejs与视图层以及后端API的交互工作,无疑增加了前端人员的学习成本,在没有足够知识和人才储备的情况下,只能让前端人员加班加点。结果是大量前端人员离职(PS:做这么多事,工资总得加吧!)

  2、前后端职责分配?

  很多公司认为采用前后端分离之后,前后端只需要通过指定API进行交互即可,前端负责页面渲染,Nodejs负责路由分配,后端提供API。忽视了大量关键工作,职责分配和细节处理没有相应文档规定,缓存机制、图片上传下载、数据校验、语言国际化等等并没有出具相应信息。另外,大量忽视了nodejs层的作用,仅仅把nodejs当成一个路由中转,这一方面也是对nodejs技术的不熟悉导致的,其实nodejs能负责很多事,除了复杂业务逻辑处理和数据操作由Java 负责,大量工作完全可以在nodejs层处理。(PS:还是基础不够导致的!)

  3、后端API是否Restful风格?

  很多公司采用了前后端分离模式后,后端API仍然采用以往的传统风格,这是不合理的,Restful风格的API应该是前后端分离的最佳实践。ResultFul推荐每个URL能操作具体的资源,而且能准确描述服务器对资源的处理动作,通常服务器对资源支持get/post/put/delete/等,用来实现资源的增删改查。前后端分离的话,这些api-url是对接的桥梁,采用resultFul接口地址含义才更清晰、见名知意。(PS:用了Spring4.x 竟然还不用rest风格,说不过去啊)

  4、前后端协作模式?

  前后端分离后,无论是API接口的对接还是测试工作,都涉及到前后端人员的沟通,很多公司采用前后端分离后,前后端协作模式配合力度底,互相等待,开发效率低下,反而不如传统的开发模式。例如:当后端 API 没有编写完成时,前端无法进行调试,这就导致了前端会被后端阻塞的情况。其实像这种互相等待的模式需要改进, Mock Server 可能可以解决一些问题。

如何前后端分离?

  怎么做前后端分离?大方向就是

  后端专注于:后端控制层(Restful API) & 服务层 & 数据访问层;

  前端专注于:前端控制层(Nodejs) & 视图层

  本人认为的前后端分离模式应该是这样,当然这不一定正确:

  1、项目设计阶段,前后端架构负责人将项目整体进行分析,讨论并确定API风格、职责分配、开发协助模式,确定人员配备;设计确定后,前后端人员共同制定开发接口。

  2、项目开发阶段,前后端分离是各自分工,协同敏捷开发,后端提供Restful API,并给出详细文档说明,前端人员进行页面渲染前台的任务是发送API请(GET,PUT,POST,DELETE等)获取数据(json,xml)后渲染页面。

  3、项目测试阶段,API完成之前,前端人员会使用mock server进行模拟测试,后端人员采用junit进行API单元测试,不用互相等待;API完成之后,前后端再对接测试一下就可以了,当然并不是所有的接口都可以提前定义,有一些是在开发过程中进行调整的。

  4、项目部署阶段,利用nginx 做反向代理,即Java + nodejs + nginx 方式进行。

编后语

  从经典的JSP+Servlet+JavaBean的MVC时代,到SSM(Spring + SpringMVC + Mybatis)和SSH(Spring + Struts + Hibernate)的Java 框架时代,再到前端框架(KnockoutJS、AngularJS、vueJS、ReactJS)为主的MV*时代,然后是Nodejs引领的全栈时代,技术和架构一直都在进步。虽然“基于NodeJS的全栈式开发”模式很让人兴奋,但是把基于Node的全栈开发变成一个稳定,让大家都能接受的东西还有很多路要走。创新之路不会止步,无论是前后端分离模式还是其他模式,都是为了更方便得解决需求,但它们都只是一个“中转站”。

  走过的“中转站”可能越来越多,但是不要渐行渐远才是。

转载来自:https://www.cnblogs.com/shanrengo/p/6397734.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

查询语句

1.基本查询语句 1.1 语法: SELECT 属性列表 FROM 表名或视图列表 WHERE 条件表达式1 GROUP BY 属性名1 | HAVING 条件表达式2 ORDER BY 属性名2 ASC DESC 2.单表查询 1.应用:查询表中所有的记录 2.查询指定字段:查询表中所有name字段的记录 …

Nodejs+Koa2+云服务ECS 开发微信公众号(一)之环境配置

硬件准备工作 1. 本人采用阿里云的云服务器,购买了入门级云服务ECS(293元每年); 2.针对服务器进行认证,设置个人服务器密码; 3.购买数据盘,并将其挂载于云服务器之上(建议挂载在/…

中文词频统计与词云生成

本次作业来源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2822 中文词频统计 1. 下载一长篇中文小说。 下载长篇小说《西游记》 本次作业小说保存在txt文档:xyj.txt 2. 从文件读取待分析文本。 xyj open(rF:/xyj.txt,r,encodingutf-8)…

java SWT Browser实现浏览器功能并运行JavaScript代码

一、创建简单的浏览器 import org.eclipse.swt.*; import org.eclipse.swt.browser.*; import org.eclipse.swt.layout.*; import org.eclipse.swt.widgets.*;public class Myswt3 {public static void main(String [] args) {Display display new Display();final Shell she…

[JZOJ5866]【NOIP2018模拟9.13】指引

Description Input Output Sample Input 6 3 2 0 3 1 1 3 4 2 0 4 5 5 Sample Output 2 Data Constraint Hint 贪心,把旅行者和出口的x坐标降序排序。 然后从前往后扫,如果是出口,就把y坐标插进set里,如果是旅行者,就查…

scrapy框架之递归解析和post请求

今日概要 递归爬取解析多页页面数据scrapy核心组件工作流程scrapy的post请求发送今日详情 1.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久化存储 - 需求分析:每一个页面对应一个url,则scrapy工程需…

SmartGit 过期解决方案之 非商业版本安装使用

作为前端开发的小伙伴一定有这样的困惑,自己在日常的团队协作配合时,提交代码和解决冲突是我们最头疼的问题,但是又不喜欢使用Eclipse或者IDEA这种超级占内存的编辑器,使用Git命令又是那么捉襟见肘,所以有一个好用的轻…

HDU6438 Buy and Resell 解题报告(一个有趣的贪心问题的严格证明)

写在前面 此题是一个很容易想到的贪心题目,但是正确性的证明是非常复杂的。然而,目前网上所有题解并未给出本题贪心算法的任何正确性证明,全部仅停留在描述出一个贪心算法。本着对算法与计算机科学的热爱(逃)&#xff…

Webpack不生成index.html

没有导出你的最后2个插件,并且没有指定html文件名dist,因为HtmlWebpackPlugin应该生成相对于path,下面是固定配置: var path require(path)var webpack require(webpack)var HtmlWebpackPlugin require(html-webpack-plugin);m…

CSS3笔记之定位篇(一)relative

知识点1:relative和absolute relative: 相对自身,并会限制内部absolute元素层叠 absolute: 相对容器,并受到父类容器relative的影响,比如:overflow:hidden/scroll fixed: 不受relative限制,只受z-index的…

洛谷P3066 [USACO12DEC]逃跑的BarnRunning Away From…

题面链接 一句话题意:给出以1号点为根的一棵有根树,问每个点的子树中与它距离小于等于l的点有多少个。 我:似乎并不好做啊。。。看了题解后大雾。。。 sol:考虑树上差分,对于一个点,在他那个位置&#xff0…

vue使用webPack打包发布后页面显示空白

今天笔者将打包后,进行访问,访问到index.html,但是出现的是空白页。 打包命令:npm run build,打包后的文件如下: 这是因为index.html中引入的css ,js 的路径不对:如下图 这个是因为webpack打包的时候引入…

第一次实验报告

c程序实验报告 姓名:黄志乾 实验地点:教学楼514教室 实验时间:3月19日实验项目: 1、字符与ASCII码 2、运算符与表达式的应用 3、顺序结构应用程序 4、数学函数的算法描述 5、鸡兔同笼的算法描述 6、确定坐标的算法描述…

Mac下Idea安装Git报错Xcrun问题的解决

使用过IDEA的小伙伴都知道,它和我们之前用过的Eclipse一样强大,或者比他更强大。当它配合的Mac使用时,就会变得更得心应手,少去很多环境配置的环节。其中最典型的就是Git 由于Mac自带就安装了git, 大家可以通过终端输入命令“git…

关于Django路由层简单笔记

Django—路由层 URL配置(URLconf)就像Django 所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表;你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代码对应执行。 1,简单的路由配置 from django.urls…

hdu 5183

hdu 5183(Hash处理区间问题) 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid5183 题意:给出一个n个元素的数组,现在要求判断 a1-a2a3-a4...../-an 中是否存在某个某个区间使得 ai-ai1ai2...(-1)j-iaj k?? 这个题要利用Hash就可以实现几乎在 O(n) 的时间内实现查找判断…

vue-cli,webpack安装

第一步应该下载node.js这是安装vue-cli的基础工具。官网下载快捷安全可:https://nodejs.org/en/ 第二步打开命令面板找到你要安装的位置 第三步就是安装全局vue-cli 命令操作 npm intatll -g vue-cli 安装完毕之后 可以检查安装版本即 vue -V 如下图 这还不算完&…

CSS3笔记之定位篇(二)z-index

知识点1&#xff1a;z-index基础 z-index&#xff1a;auto; 默认值 z-index: <integer> 整数 z-index: inherit 继承 不考虑css3 还有定位元素的z-index才有作用 知识点2&#xff1a;z-index与定位元素 无嵌套&#xff1a;后来居上&#xff0c;哪个大哪个上 //在没有…

JSP页面传值出现中文乱码的问题

在接收值的jsp页面代码的body里添加&#xff1a; <%request.setCharacterEncoding("utf-8"); %> //这里是设置utf-8为jsp页面的中文编码方式 jsp页面之间传值&#xff1a; 发送信息的jsp脚本&#xff1a; session.setAttribute("user",rs.getString…

【我所认知的BIOS】— uEFI AHCI Driver(8) — Pci.Read()

【我所认知的BIOS】—> uEFI AHCI Driver(8) — Pci.Read()LightSeed6/19/2014社会一直在变。不晓得是不是社会变的太苦开&#xff0c;而我没变所以我反而显得单纯了。办一个居住证。几年前办的以为最终能够一劳永逸的&#xff0c;后来续办的是发现确实不难了。尼玛&#xf…