实现前后端分离的心得

标签: IT技术 前端 后端 | 发表时间:2017-07-02 15:46 | 作者:(●'◡'●)
出处:http://blog.jobbole.com

实现前后端分离的心得

对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢?

为什么选择前后端分离

  • 在以前传统的网站开发中,前端一般扮演的只是切图的工作,只是简单地将UI设计师提供的原型图实现成静态的HTML页面,而具体的页面交互逻辑,比如与后台的数据交互工作等,可能都是由后台的开发人员来实现的,或者是前端是紧紧的耦合后台。比如,以前淘宝的Web基本上都是基于MVC框架webx,架构决定了前端只能依赖后端。所以他们的开发模式依然是,前端写好静态demo,后端翻译成VM模版,这种模式的问题就不说了,被吐槽了很久。
  • 而且更有可能后台人员直接兼顾前端的工作,一边实现API接口,一边开发页面,两者互相切换着做,而且根据不同的url动态拼接页面,这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢,而且代码难以维护。而前后端分离的话,则可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,比如提供API接口,进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器,直接在本地开发,然后通过一些插件来将api请求转发到后台,这样就可以完全模拟线上的场景,并且与后台解耦。前端可以独立完成与用户交互的整一个过程,两者都可以同时开工,不互相依赖,开发效率更快,而且分工比较均衡。

如何做到前后端分离

(以下的内容都是基于我们的电影购票网站来讨论的)
前端的技术框架是: vue全家桶+nodejs+express(实现的是单页面(SPA)应用)
首先,先分清楚前后端的工作

  • 前端的工作:实现整一个前端页面以及交互逻辑,以及利用ajax与nodejs服务器(中间层)交互
  • 后端的工作:提供API接口,利用redis来管理session,与数据库交互

我们项目的整一个架构如下:

这里写图片描述

接下来进入正题,如何实现前后端分离

  1. 一般来说,要实现前后端分离,前端就需要开启一个本地的服务器来运行自己的前端代码,以此来模拟真实的线上环境,并且,也是为了更好的开发。因为你在实际开发中,你不可能要求每一个前端都去搭建一个java(php)环境,并且在java环境下开发,这对于前端来说,学习成本太高了。但如果本地没有开启服务器的话,不仅无法模拟线上的环境,而且还面临到了跨域的问题,因为你如果写静态的html页面,直接在文件目录下打开的话,你是无法发出ajax请求的(浏览器跨域的限制),因此,你需要在本地运行一个服务器,可是又不想搭建陌生而庞大的java环境,怎么办法呢?nodejs正好解决了这个问题。在我们项目中,我们利用nodejs的express框架来开启一个本地的服务器,然后利用nodejs的一个http-proxy-middleware插件将客户端发往nodejs的请求转发给真正的服务器,让nodejs作为一个中间层。这样,前端就可以无忧无虑的开发了
  2. 由于前后端分离后,前端和后台同时开发时,就可能遇到前端已经开发好一个页面了,可是却等待后台API接口的情况。比如说A是负责前端,B是负责后台,A可能用了一周做好了基本的结构,并且需要API接口联调后,才能继续开发,而此时B却还没有实现好所需要的接口,这种情况,怎么办呢?在我们这个项目里,我们是通过了mock来提供一些假数据,我们先规定好了API接口,设计出了一套API文档,然后我们就可以通过API文档,利用mock( http://mockjs.com)来返回一些假数据,这样就可以模拟发送API到接受响应的整一个过程,因此前端也不需要依赖于后端开发了,可以独立开发,等到后台的API全部设计完之后,就可以比较快速的联调

为什么要引入nodejs作为中间层

前面的我发的项目结构图中,已经表明,在这个项目里,我们将nodejs作为中间层,那么,为什么我们要特地引入nodejs呢?直接用java做不就行了吗?

  • 我觉得引入nodejs主要是为了分层开发,职责划分,nodejs作为前端服务器,由前端开发人员负责,前端开发人员不需要知道java后台是如何实现的,也不需要知道API接口是如何实现的,我们只需要关心我们前端的开发工作,并且管理好nodejs前端服务器,而后台开发人员也不需要考虑如何前端是如何部署的,他只需要做好自己擅长的部分,提供好API接口就可以;
  • nodejs本身有着独特的异步、非阻塞I/O的特点,这也就意味着他特别适合I/O密集型操作,在处理并发量比较大的请求上能力比较强,因此,利用它来充当前端服务器,向客户端提供静态文件以及响应客户端的请求,我觉得这是一个很不错的选择。

前端服务器如何部署

nodejs前端服务器的职责

  1. 作为静态文件服务器,当用户访问网站的时候,将index.html以及其引入的js、css、fonts以及图片返回给用户
  2. 负责将客户端发来的ajax请求转发给后台服务器

其实前端服务器的部署工作是算比较简单的,具体有以下两个点:

  1. 将开发完的前端代码,利用webpack打包成静态压缩文件
  2. 在服务器上,利用pm2负载均衡器来执行以下的代码来开启服务器:

评论区有人提到有一个不错的文章,我看了下觉得写得确实很详细,大家也可能看一下: https://segmentfault.com/a/1190000009329474?_ea=2038402 (感觉这就是业务与专业的区别哈哈)
(PS:其实也有一个做法,就是用nginx来做反向代理,负责转发请求,根据客户端访问的url把这个请求转发到不同的服务,比如访问/api/*的请求,就转发到后台服务,访问其它的请求,就转发到nodejs服务)
以上,就是我对于前后端分离的一些看法,以及一些实践,如果大家有什么好的想法,欢迎交流。

本次项目代码的地址为: https://github.com/chenjigeng/filmshopping

实现前后端分离的心得,首发于 文章 - 伯乐在线

相关 [后端 分离的心] 推荐:

实现前后端分离的心得

- - 文章 – 伯乐在线
对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢. 那么,为什么要选择前后端分离呢. 前后端分离对实际开发有什么好处呢?. 在以前传统的网站开发中,前端一般扮演的只是切图的工作,只是简单地将UI设计师提供的原型图实现成静态的HTML页面,而具体的页面交互逻辑,比如与后台的数据交互工作等,可能都是由后台的开发人员来实现的,或者是前端是紧紧的耦合后台.

后端基础知识

- Kings - 潘魏增
在团队内部做了一次《后端基础知识》的技术分享,这里也公开出来,希望对一些朋友有用. 前端工程师所必备的技能之中,后端知识的重要性显而易见,它会影响前端工程师的大局观,会直接影响分析解决问题的效率和准确度,在了解系统架构、调试以及排查故障的时候特别有用. 后端基础知识掌握得越透彻,解决问题的能力就越强.

小厂后端十连问

- - 掘金后端本月最热
大家好,我是捡田螺的小男孩. 最近一位朋友去面试,分享了一份面试真题,我整理了一下答案给大家. 如果有不正确的,欢迎指出哈,一起进步. Redis的key和value可以存储的最大值分别是多少. 怎么利用Redis实现数据的去重. Redis什么时候需要序列化. MySQL的B+树的高度怎么计算. 获取多线程并发执行结果的方式有哪些.

Firefox 实现 HTML5 音视频 GStreamer 后端

- - LinuxTOY
得益于 GStreamer 后端的实现,未来 Firefox 将可以使用系统内置解码器实现 HTML5 音视频的解码和播放工作. 根据 该 Mozilla Bugzilla 上的追踪,目前用于 HTML5 音视频标签播放的 GStreamer 后端支持已经实现并且得到合并许可. 此举意味着 Firefox 将可以通过 GStreamer 作为中介,使用操作系统已经具备的解码包完成 HTML5 音视频的处理工作,带来了如下好处:.

18.app后端如何实现LBS

- - CSDN博客推荐文章
移动互联网,除了一直在线这个特点外,还有一个重要特点,能定位到手机的位置. 查找附近的人,附近的餐馆等服务,以及大量的o2o应用, 都需要使用LBS(Location Based Services). 1.如何获取用户的地理坐标.   现在,基于手机来获取用户的地理坐标,主要是下面两种方法:.   (1)使用手机上的GPS模块.

前后端分离了,然后呢?

- - ITeye资讯频道
前后端分离已经是业界所共识的一种开发/部署模式了. 关于前后端开发的另一个讨论可以参考这里. 即使通过API来解耦前端和后端开发过程,前后端通过RESTFul的接口来通信,前端的静态内容和后端的动态计算分别开发,分别部署,集成仍然是一个绕不开的问题 — 前端/后端的应用都可以独立的运行,但是集成起来却不工作.

14.app后端如何设计api

- - CSDN博客推荐文章
app和后端的交互,一般都是通过后端提供的api实现. api的设计,估计很多刚进入app后端的小伙伴会一无头绪,不知道怎么入门. 下面根据自己3年的app后端经验,总结出下几个api设计原则,给小伙伴参考.   这个问题在以前发表的文章“7.app和app后端的通讯”中其实已经回答了,这里再重复一次.

前后端分离的优缺点

- - Web前端 - ITeye博客
WEB 前后端分离三个最大的优点在于:1:最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小2:后台错误不会直接反映到前台,错误接秒较为友好3:由于后台是很难去探知前台页面的分布情况,而这又是JS的强项,而JS又是无法独立和服务器进行通讯的. 所以单单用后台去控制整体页面,又或者只靠JS完成效果,都会难度加大,前后台各尽其职可以最大程度的减少开发难度.

前后端分离接口规范

- -
随着互联网的高速发展,前端页面的展示、交互体验越来越灵活、炫丽,响应体验也要求越来越高,后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻,从而导致前后端研发各自专注于自己擅长的领域深耕细作. 然而带来的另一个问题:前后端的对接界面双方却关注甚少,没有任何接口约定规范情况下各自干各自的,导致我们在产品项目开发过程中,前后端的接口联调对接工作量占比在30%-50%左右,甚至会更高.

前后端分离的陷阱 (insights.thoughtworks.cn)

- - IT瘾-jianshu
不管你设计的系统架构是怎么样,最后都是你的组织内的沟通结构胜出. 这个观点一直在组织内不断地被证明,但也不断地被忽略. 近几年,随着微服务架构风格的引入、前后端生态的快速发展、多端产品化的出现,前后端分离已经成为行业的普遍实践,也是大型企业级分布式架构的缺省选择. 前后端分离也给软件技术人员的职业发展和协作方式带来了新的变化,分别出现了前端工程师、后端工程师、前端开发团队以及后端开发团队.