当前位置: 首页 > news >正文

前后端分离,千万别再搞错了!

你是小阿巴,刚入职的全栈程序员。

所谓全栈,就是 全干,整个网站项目的后端和前端都由你一个人负责开发。

当用户打开一个网站,能直观看到、可交互操作的界面,就是前端。

而当用户点击操作按钮后,触发的操作验证、数据查询、业务逻辑处理等种种 “看不到” 的操作,都由后端来完成。

 

本文对应视频版:https://bilibili.com/video/BV1AasqzWEj5

 

你使用的开发技术是比你年龄都大的 JSP,它的特点是把前端 HTML 网页代码和后端 Java 代码混在一起写。

 

刚开始项目代码不多的时候,你写的很舒服。

但随着项目越做越大,更多同事加入了这个项目的开发,你也渐渐发现了几个问题。

 

  1. 代码混乱难维护:前端后端代码纠缠在一起,不利于阅读,也不利于排查 Bug。

  2. 团队协作困难:你在改前端样式,同事在改后端逻辑,经常改着改着就冲突了。

  3. 人员要求更高:开发人员必须同时学习前端和后端技术,今天写 CSS 调样式,明天写 SQL 查数据库,根本忙不过来。

  4. 部署效率低下:由于前端后端写在一起,哪怕改个按钮颜色都要重新编译部署整个项目。

 

受这些问题的影响,项目开发效率越来越低,Bug 却越来越多,你压力山大、发如雨下。

老板看出了你毛儿的不易,给公司请来了一位新的技术导师,号称 “全栈冤种” 的鱼皮。

鱼皮看了看你的项目,摇了摇头:连前后端分离都不做么?

你疑惑地问:前后端分离?没听说过。

这时,你的同事阿土申插嘴道:我知道啊!我们现在把前端静态文件放在 static 文件夹,JSP 代码放在 jsp 文件夹,这不就是前后端分离吗?

 

鱼皮皱眉:那只是文件夹分离,不是真正的前后端分离。

阿土申不服:鱼皮老狗,那你说说用什么技术才算是前后端分离?

鱼皮笑道:前后端分离可不是某种特定的技术,而是一种 架构 思想。

看看你们现在的项目,用户访问网站时,是由后端服务器接收请求,然后在后端查询数据并拼接到 HTML 网页模板中,生成完整的网页,最后再返回给用户。

 

显然,后端承受了太多!

而如果改造为前后端分离:

  • 前端专注于用户界面的呈现和交互逻辑

  • 后端专注于数据处理和业务逻辑,不涉及界面代码和网页生成

  • 用户在前端进行操作时,前端通过 API 接口 向后端发送请求,由后端处理操作并返回数据给前端,由前端完成数据的最终展示。

 

你不明觉厉:可是这样做有什么好处呢?

鱼皮指着你之前列出的问题说:前后端分离就是专门解决这些痛点的!

1)首先是 代码分离:将前端代码和后端代码完全分开,最好是 2 个独立的项目

2)代码分离后,就可以 开发分离:前端和后端程序员可以同时干活,互不干扰。

3)还可以 部署分离:前端和后端项目各自独立部署,后端出了问题或者修改了逻辑,不用重新部署前端。

4)做到前面 3 个分离后,我们便能实现前后端分离的本质 —— 职责分离,专业的人干专业的事情,各自发挥特长,整体效率自然更高。当然最主要的是,后端出了问题,前端不用背锅。

 

听着鱼皮滔滔不绝,你双眼放光:前后端分离这么厉害,是不是还能提升网站性能呢?

鱼皮摇摇头:不一定,而且有时前后端分离可能更慢!因为用户访问网站时,浏览器需要先加载前端页面,然后执行 JavaScript 脚本请求后端数据,这比传统的后端直接返回完整页面多了一次网络请求。

 

但是也别灰心,前后端分离后,前端和后端都可以分别进行优化,更灵活。

 

你点了点头:原来如此,看来前后端分离的主要目的是 提升开发效率和代码维护性,而不是提升性能。

于是你带领团队开始重构项目,前端用 React 框架重写了整个界面,打包成静态文件部署到 CDN 加速网络上;后端则专门提供 API 接口,返回 JSON 数据,部署在独立的服务器上,互不影响。

几个月后,你感受到了前后端分离的优势:

  • 团队成员各司其职

  • 前端技术灵活选择

  • 后端服务多端复用

 

虽然前端和后端对接的过程中偶尔会斗嘴打架,但你也通过自己总结的一套前后端分离的实战经验完美解决。

 

你兴奋地对鱼皮说:前后端分离也太爽了吧!

鱼皮笑着问:那我问你,前后端分离一定比不分离更好么?

你不假思索:那当然了!你看看这盛世岂不如你所愿?

鱼皮摇摇头:小阿巴你要记住,没有最好的架构,只有相对更合适的架构!是否采用前后端分离,要根据团队项目规模、项目实际需求、团队技术能力等综合决定。

你:我明白了,抛开实际场景谈架构都是耍流氓~

鱼皮:最后问个问题,用了 React 框架一定就是前后端分离么?

朋友,说说你的看法吧。

 

更多编程学习资源

  • Java前端程序员必做项目实战教程+毕设网站

  • 程序员免费编程学习交流社区(自学必备)

  • 程序员保姆级求职写简历指南(找工作必备)

  • 程序员免费面试刷题网站工具(找工作必备)

  • 最新Java零基础入门学习路线 + Java教程

  • 最新Python零基础入门学习路线 + Python教程

  • 最新前端零基础入门学习路线 + 前端教程

  • 最新数据结构和算法零基础入门学习路线 + 算法教程

  • 最新C++零基础入门学习路线、C++教程

  • 最新数据库零基础入门学习路线 + 数据库教程

  • 最新Redis零基础入门学习路线 + Redis教程

  • 最新计算机基础入门学习路线 + 计算机基础教程

  • 最新小程序入门学习路线 + 小程序开发教程

  • 最新SQL零基础入门学习路线 + SQL教程

  • 最新Linux零基础入门学习路线 + Linux教程

  • 最新Git/GitHub零基础入门学习路线 + Git教程

  • 最新操作系统零基础入门学习路线 + 操作系统教程

  • 最新计算机网络零基础入门学习路线 + 计算机网络教程

  • 最新设计模式零基础入门学习路线 + 设计模式教程

  • 最新软件工程零基础入门学习路线 + 软件工程教程https://www.code-nav.cn/post/1640648711119892481

http://www.hskmm.com/?act=detail&tid=40328

相关文章:

  • 通用知识手册
  • 写给26届文科大学应届生的秋招求职建议 - jobleap.cn助你找到满意的工作
  • 2025年10月烤火炉推荐:知名榜单全维度选择方案
  • 2025年10月烤火炉推荐:主流品牌口碑排行榜与避坑指南
  • 【金融行业案例】基于Vaadin全栈Java框架重构内部系统,全面提升开发效率与用户体验
  • 2025年10月烤火炉推荐:对比排行榜助你轻松选
  • 2025 年中压离心泵,高压离心泵,清水离心泵,立式离心泵厂家最新推荐,聚焦资质、案例、售后的五家企业深度解读
  • BOS中设置实际精度为6位小数,前端显示1位小数
  • 2025年60BYGH步进电机厂家权威推荐榜单:42BYGHL步进电机/20BYGH步进电机/57BYGH步进电机源头厂家精选
  • 2025年克拉玛依旅游团综合实力TOP3排行榜:阿勒泰旅游/新疆喀纳斯旅游/新疆旅游服务商精选。
  • 2025 年最新推荐西安路灯厂家排行榜:市政 / LED / 智慧 / 太阳能 / 农村路灯企业权威测评指南
  • time-ode项目结构
  • 2025 年长沙美食餐厅最新推荐榜,食材溯源与管理创新双维度下的品质品牌解析
  • 2025年新疆电线电缆厂家综合实力TOP3排行榜:耐火电缆/矿用电缆/高温电缆源头厂家精选。
  • php反序列化
  • 2025 年北京湖南菜餐厅最新推荐榜,食材溯源与烹饪实力及市场口碑深度解析
  • layui动态模板详解
  • 2025 年铝塑膜源头厂家最新推荐榜,技术实力与市场口碑深度解析,覆盖多场景包装需求真空包装 / 出口海运 / 导轨包装 / 电气包装 / 镀铝编织铝塑膜公司推荐
  • docker中mysql异常关闭
  • 2025年度钢结构加工厂综合实力TOP3排行榜:H型钢/彩钢压型板/钢结构厂房源头厂家精选。
  • 2025 年北京湘菜餐厅最新推荐榜,食材品质与服务体验及市场口碑深度解析
  • 高性能 低门槛|H200 GPU 正式上线 OpenCSG 社区和三峡传神社区!
  • 从零开始制作 MyOS(三)
  • 2025年知名的防火包裹卷材陶瓷纤维行业内知名厂家排行榜
  • 2025年真空连续干燥机厂家权威推荐榜单:真空耙式干燥机/真空冷冻干燥机/方形真空干燥机源头厂家精选
  • 2025年质量好的热镀锌钢销售厂家
  • 2025年广东中小学网课学习机服务商TOP3权威实力榜单:小学英语学习机/智能ai学生学习机/网课平板学习机服务商精选
  • 2025年知名的涂料光触媒行业内口碑厂家排行榜
  • 2025 年阳台光伏厂家最新推荐榜,技术实力与市场口碑深度解析:含逆变器、储能及光伏板优质企业
  • Linux CentOS7 安装源更新-IUS源