前后端分离

Posted 斑驳了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离相关的知识,希望对你有一定的参考价值。

概况

  1. 后端渲染-前端渲染

  2. 后端控制路由-前端控制路由

mvc开发架构

  1. 前端人员负责静态页面设计

  2. 后台人员负责套前端模板

-技术问题

  1. 后台控制路由,返回到客户端的html是经过后端渲染( jsp-servlet-html)的, 性能问题

  2. 后端人员需要编写编写的前端代码,导致 前后端强耦合

  3. 前端人员只负责静态页面,导致前端人员在项目中的 比重低,话语权低

  4. 前端人员后期开发需要依赖服务器环境,才能跑得动,后端人员也需要前端人员的页面才能继续开发,工作任务 同步阻塞, 联调开发

  5. 前端模板文件依赖服务器环境, 服务器压力大,无法使用nginx上的负载均衡等技术

  6. 页面交互逻辑,数据交互逻辑由后端人员负责

ps:

  • web服务器:一般指像nginx,apache这类的服务器,他们一般只能解析静态资源。

  • 应用服务器:一般指像tomcat,jetty,resin这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有web服务器好。

(一般都是只有web服务器才能被外网访问,应用服务器只能内网访问。)

-开发意义问题

  1. 沟通成本高

  2. 维护成本高

  3. 联调成本高

  4. 无法正确且快速的响应变化

  5. 总工作量的增加

前后端分离

前后端分离并非仅仅只是前后端开发的分工,而是在开发期进行代码存放分离、前后 端开发职责分离,前后端能够独立进行开发测试;在运行期进行应用部署分离,前后 端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比,能为我们 提升开发效率、增强代码可维护性,让我们有规划地打造一个前后端并重的精益开发 团队,更好地应对越来越复杂多变的Web应用开发需求。

实现方法一:ajax-RESTful风格编程

静态资源文件(js,css,html)放在nginx静态资源机上,由ajax调用应用服务器(java、tomcat)上的api接口,取得json格式的数据,无中间件。

可能出现的问题:

  1. 出现性能问题、白屏问题、网络环境差体验差问题

  2. 前端的校验后端仍须做一次

  3. 前端请求的api后端未必存在

  4. seo不良好

实现方法二:nodejs-web中间件

nodejs作为客户端和服务器的中间件,前端请求数据的方式通过nodejs请求应用服务器获取的并进行 一定的处理再返回给客户端。

特点:

  1. 负责把请求转发给后台服务器

  2. 跑在 服務器上的JS

  3. 转发数据,串接服务

  4. 路由设计,控制逻辑

  5. 渲染页面,体验优化

  6. 前端熟悉的语言,學習成本低

  7. 都是JS,可以前后端复用

  8. 体质适合:事件驱动、非阻塞I/O

  9. 适合 IO密集型业务

  10. 执行速度也不差

  11. 实现跨终端

其它问题

  • mock:只要规定好api接口,前端使用mock假数据来进行开发,无须同步后端开发进度

  • 首屏问题:当首屏的时候,就在nodejs里面生成HTML(也属于前端渲染),不是首屏的时候,就AJAX过来在浏览器端渲染展示

参考网站

  • 淘宝中途岛

  • 伯乐在线的文章

  • b站的前端之路

  • 前后端分离实践


以上是关于前后端分离的主要内容,如果未能解决你的问题,请参考以下文章

谈谈前后端分离及认证选择

大前端 前后端分离带来的好处

微信小程序前后端分离怎么实现

前后端分离方案以及技术选型

推荐 9 个 yyds 前后端分离项目

前后端分离与不分离,一点点理解