XFE 技术 生活 笔记 文集

我眼中的前后端分离

🔖 技术 👀 11 🕒 2019-02-22 👨‍🎓 XFE/Peter

前后端怎么分离

前后端分离,一般所指,前端独立开发并且部署前端代码,与API端服务分开部署,
前端代码只负责视图层的路由,视图层的逻辑处理等,后端代码负责处理主要的业务逻辑,数据安全
目前我了解的做法为三种,但是大体上分为两类

  • 不完全分离

    • 逻辑分离
      前端代码入口依然在API服务,前端代码与API服务代码部署在同一个WEB容器中
      API端会在首次进入或者刷新的时候,给予前端一些基础数据
      后期前端与API端的交互为Ajax的无刷新方式
      一般用户的状态信息托管于API端,前端与API端交互的时候也不需要考虑到跨域的问题
  • 完全分离

    • 物理分离
      前端代码完全部署在另外一个web容器中(nignx、apache),前端代码不依赖于任何后端服务
      前端与API端完全通过Ajax交互,交互式需要考虑跨域的问题(可通过配置WEB容器解决)
      视图层路由,用户交互等逻辑全部由前端完成
      与API端的数据安全一般通过Token、OAuth2等方式完成

    • 代理服务器
      前端代码部署在PHP或者nodeJS等WEB容器中,这里PHP或者nodeJS我们称之为中间件服务
      前端的ajax请求通过中间件代理,前端不在直接与API端交互,所有的数据请求都需要过一遍中间件服务
      前端可以通过中间件服务整合一些基础数据请求,可以将用户信息托管于中间件服务避免用户信息丢失
      前端可以通过最新的MVVM服务端渲染功能,完成代码的组件化并保留SEO特性,有效的提高MVVM开发方式的兼容性

为什么会有这个问题

技术基础

Web 2.0 时代,ajax在web开发中流行起来,cros 规范出来之后,ajax 跨域变得轻而易举。

环境推动

同时,移动端App并不能使用传统表单提交的方式,像服务器传递数据,服务端也没法通过模板渲染的方式来像App发送数据,于是API服务器流行起来

软件开发的选择

为了网站和APP的数据同步,也加上ajax技术运用成熟,使得WEB应用前后端分离,前端共用API服务器数据变成理所当然的事情。各方面根据各自的技术实力,际的需求,也就产生了上述三种前后端分离的方式