《浅谈架构之路:前后端分离模式》 - 山人行 - 博客园

前言:分离模式

  对前后端分离研究了一段时间,恰逢公司有一个大项目决定尝试使用前后端分离模式进行,便参与其中。该项目从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的全栈开发变成一个稳定,让大家都能接受的东西还有很多路要走。创新之路不会止步,无论是前后端分离模式还是其他模式,都是为了更方便得解决需求,但它们都只是一个“中转站”。

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

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

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

相关文章

springboot快速集成swagger

今天技术总监说:小明,我们本次3.0改造,使用swagger2.0作为前后端分离的接口规范,它可以一键生成前后端的API,一劳永逸……小明:??? Spring Boot 框架是目前非常流行的微服务框架&…

php curl处理get和post请求

CURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP、FTP、TELNET等。最爽的是,PHP也支持 CURL 库。使用PHP的CURL 库可以简单和有效地去抓网页。你只需要运行一个脚本,然后分析一下你所抓取的网页&#xff0…

【Web】JavaWeb项目为什么我们要放弃jsp?为什么要前后端解耦?为什么要前后端分离?2.0版,为分布式架构打基础。 - CSDN博客

前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginxtomcat的方式(也可以中间加一个nodejs)有效的进行解耦, 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户…

MongoDB升级导致启动失败

起因 最近项目使用MongoDB,但是作为一个技术菜鸟,NoSQL数据库我还真不会用,于是我就在自己的阿里云服务器上安装了一个MongoDB4.0.9。 现象 但是当我使用yum -y update升级以后,MongoDB无法启动了,即使重装删除了MongDB的文件了还…

测者的测试技术手册:揭开java method的一个秘密--巨型函数

揭开java method的一个秘密:巨型函数 相信,很多人都不知道Java的Method的上限为64K。本文将超过这个上限的函数叫做巨型函数。 巨型函数的问题 1、如果代码超过了这个限制,Java编译器就报"Code too large to complier"的错误。 2、…

前端攻略系列(二) - 前端各种面试题

幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候,所以我们前端团队经过了超负荷的运转,终于坚持过了春节。春节以后就开始招人啦,这套题考察的目标就是基础基础再基础,嘿嘿。 事先声明&…

html 初识

一、web请求流程模拟 python编写的简易服务器应用程序 import socketserversocket.socket() ip_port (127.0.0.1,8080) server.bind(ip_port) server.listen()while 1:conn, addr server.accept()from_browser_msgconn.recv(1024)print(from_browser_msg)conn.send(bHTTP/1.1 …

Iframe的那些事

在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1、 格式:window.frames["iframe的name值"].document.getElementByIdx_x(…

异常处理try...catch...throw

C 引入了异常处理机制。其基本思想是:函数 A 在执行过程中发现异常时可以不加处理,而只是“拋出一个异常”给 A 的调用者,假定为函数 B。 拋出异常而不加处理会导致函数 A 立即中止,在这种情况下,函数 B 可以选择捕获 …

Makefile 中:= ?= += =的区别

是最基本的赋值: 是覆盖之前的值? 是如果没有被赋值过就赋予等号后面的值 是添加等号后面的值转载于:https://www.cnblogs.com/mingyunrangwozoudaoxianzai/p/10118039.html

原生JS写Ajax的请求函数

本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体的实现代码和详细的解释,希望对你有所帮助。 一、JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象&…

软件工程--第十三周学习进度

第十三周代码量258 所花时间 6h博客量 2篇了解到的知识点 在寻找“水王”程序编写时,学习了一种新的设计思想,两两删除法,最后剩下的就是水王。这种设计思想,感觉可以用到多种编程,感觉很有意思。转载于:https://www.c…

如何使用 tf object detection

# 如何使用 tf object detectionhttps://juejin.i m/entry/5a7976166fb9a06335319080https://towardsdatascience.com/how-to-train-your-own-object-detector-with-tensorflows-object-detector-api-bec72ecfe1d9https://towardsdatascience.com/building-a-toy-detector-with…

WEB文件上传之JQuery ajaxfileupload插件使用(二)

1.JQuery ajaxfileupload插件使用准备 下载地址: http://www.phpletter.com/DOWNLOAD/ 2.原理分析 ajaxfileupload也是利用iframe实现无刷新异步提交,与我的上一篇文章(WEB文件上传之apache common upload使用(一)&…

Navicat安装激活

有条件的同学麻烦不要使用下面的激活步骤,仅供个人学习使用 。。。。。。 。。。。。。 。。。。。。 。。。。。。 一、去官网下载最新Navicat软件https://www.navicat.com.cn/download/navicat-premium 二、去下载激活脚本https://github.com/DoubleLabyrinth/nav…

WEB文件上传之apache common upload使用(一)

文件上传一个经常用到的功能,它有许多中实现的方案。 页面表单 RFC1897规范 http协议上传 页面控件(flash/html5/activeX/applet) RFC1897规范 http协议上传 页面控件(flash/html5/activeX/applet) 自定义数据规范 http协议上传 页面控件(flash/html5/act…

前端CSS学习笔记

一 CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(超文本标记语言)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语…

自律以自救

在一次逻辑思维的跨年晚会上,罗胖曾以「帝王」来形容活在当下移动互联网世界的人们。一个手机 App 可以让你足不出户,享受上百名厨师团队的服务,中饭想吃啥菜式、样品,输入框中一应俱全,光论规格,可能已超过…

Validform使用入门

Validform使用入门 1、引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*以下部分是Validform必须的*/" 之后的部分是必须的)。之前发现有部分网友把整个style.css都引用在了页面…

Java爬取并下载酷狗音乐

本文方法及代码仅供学习,仅供学习。 案例: 下载酷狗TOP500歌曲,代码用到的代码库包含:Jsoup、HttpClient、fastJson等。 正文: 1、分析是否可以获取到TOP500歌单 打开酷狗首页,查看TOP500,发现存…