1.前后端分离开发模式

2018/4/10
今天是一个特殊的日子,我做为一个实习生,终于有机会接触到公司的代码,和大佬交谈了一会,知道了现如今的开发模式!

接着上网查了一些资料,写了这篇博客。

1.为什么分离

这个问题就涉及到web应用的发展历史了,说起来就太远了,感兴趣自己看博客
https://github.com/lifesinger/blog/issues/184

2.前后端分离

在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。

前端:

将浏览器中为用户进行页面展示的部分


后端:

运行在服务器,为前端提供业务逻辑和数据准备的所有代码

由于前后端分离这个概念相对来说刚出现不久,很多人都是只闻其声,不见其形,所以可能会对它产生一些误解,误以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。

其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。

前后端分离大概可以从四个方面来理解:

1.交互形式
2.代码组织方式
3.开发模式
4.数据接口规范流程

2.1交互形式


浏览器----(请求接口)-----服务器

在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。

2.2代码的组织方式

这里写图片描述

代码的彻底分离:
前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。

2.3开发模式

  • 产品经历/领导/客户提出需求
  • UI做出设计图
  • 前后端约定接口&数据&参数
  • 前后端并行开发(无强依赖,可– 前后端并行开发,如果需求变更,只要接口&参数不变,就不用两边都修改代码,开发效率高)
  • 前后端集成
  • 前端页面调整
  • 集成成功
  • 交付

2.4接口规范流程

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,这个步骤是前后端分离最为重要的!
1.前端工程师再开发完成之后可以独自进行mock测试。
2.后端也可以使用接口测试平台进行接口自测
然后前后端一起进行功能联调并校验格式,最终进行自动化测试。

这里写图片描述

3.线上部署

4.总结

前后端分离并非仅仅只是一种开发模式,而是一种架构模式。
千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了。


需要区分前后端项目
前端项目与后端项目是两个项目,放在两个不同的服务器,需要独立部署,两个不同的工程,两个不同的代码库,不同的开发人员。

前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。
前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值