名词百科
什么是前后端分离?
一句话定义
前后端分离是把界面展示与业务逻辑拆成两个独立部分开发的架构方式:前端负责页面与交互,后端提供接口与数据。两者通过 HTTP 接口通信。
它到底是什么
分离的判据不是「用了框架」,而是后端还渲不渲染页面。前端独立部署、只消费接口,是分离;后端用模板引擎拼好 HTML 再返回,就不是。
它带来两个直接后果:前端可以做单页应用与多端复用(同一套接口服务网页、小程序、App);同时接口成为契约,字段与错误码的稳定性直接决定协作效率。
怎么运作的
接口契约:前后端先约定路径、入参、返回结构、错误码,再各自开发。契约变更需要同步,否则前端拿到的是空数据。
鉴权:常见方案是 token(登录后下发,随请求头携带)。跨域场景需要配置 CORS 或同源代理,cookie 方案还涉及 SameSite 设置。
部署:前端产物是静态文件,可放 CDN 或独立服务;后端独立扩容。两端发布节奏解耦,是分离架构的主要收益之一。
SEO 处理:纯前端渲染不利于爬虫抓取,需要服务端渲染或预渲染补齐。这是分离架构最常见的代价。
容易混的几个概念
- SPA:单页应用,是前端的一种实现形态,与前后端是否分离不必然绑定。
- 服务端渲染(SSR):前端在服务端生成 HTML,仍属分离架构,只是补上了首屏与 SEO。
- 微服务:后端的拆分方式,与前后端分离不在同一维度。
- BFF:为前端定制的中间层,聚合多个后端接口,属于分离架构的延伸。
常见问题
前后端分离一定更好吗?
不是。需要多端复用、前端交互复杂、团队分工明确时收益明显;以内容展示为主且重视 SEO 的站点,服务端渲染的传统模式更简单直接。
分离后接口变了怎么办?
靠版本管理。常见做法是接口路径带版本号,旧版本保留一段时间,等所有客户端升级完再下线。App 场景尤其需要,因为用户不会立刻升级。
B 前端终端 · 同组词条
PWAPWA(Progressive Web App,渐进式网页应用)是在普通网页基础上增加离线缓存、桌面安装入口和消息推送能力的网页应用形态。它仍然运行在浏览器中,不需要应用商店。SPASPA(单页应用)是页面切换不重新加载文档的前端架构,由 JavaScript 接管路由与渲染;SSR(服务端渲染)是在服务端先渲染出 HTML 再返回,首屏更快且利于爬虫抓取。跨平台开发跨平台开发是用一套代码构建多个平台应用的方式,代表框架有 uni-app、Flutter、React Native、Taro。它降低重复开发成本,但平台差异仍需单独适配。微前端微前端是把一个大型前端应用拆成多个可独立开发、独立部署的小应用,再在运行时或构建时组合成一个整体的架构方式。公众号开发公众号开发是在微信公众平台的框架内,围绕图文推送、自定义菜单、用户消息和网页授权等能力进行的开发工作。它属于内容与消息载体,不是应用容器。UI设计UI 设计关注界面的视觉呈现(色彩、排版、控件样式);UX 体验设计关注用户完成任务的整体感受与路径效率。前者管「看起来怎样」,后者管「用起来顺不顺」。企业官网企业官网建设是围绕企业展示、品牌传达和获客转化搭建官方网站的工作,通常包含信息架构设计、视觉设计、前端实现、内容管理和基础 SEO 配置。可视化搭建可视化搭建是用拖拽、配置的方式组装页面或应用的技术,用户无需写代码即可完成布局与内容编排。常见于建站工具、活动页生成和后台装修器。