B/S 架构核心原理与实战指南
Web 应用、管理系统、在线工具,几乎都构建在 B/S 架构 之上。凭借跨平台、易维护、低成本的优势,它已成为互联网时代的主流范式。本文将从核心概念、架构模型到技术选型,结合实战案例,带你彻底吃透 B/S 架构。
一、B/S 架构是什么?
B/S 架构,全称 Browser/Server(浏览器 / 服务器)架构。其核心逻辑很简单:客户端仅需安装浏览器,所有业务逻辑、数据存储、计算处理均在服务器端完成。浏览器通过 HTTP/HTTPS 协议与服务器交互,实现数据的请求与展示。
1.1 与 C/S 架构的对比
为了更清晰理解 B/S 的优势,我们可以看看它的'前辈'——C/S(Client/Server)架构:
| 对比维度 | B/S 架构 | C/S 架构 |
|---|---|---|
| 客户端要求 | 仅需浏览器,无需安装专用软件 | 需安装定制客户端程序 |
| 跨平台性 | 极佳,Windows、Mac、Linux、移动端均可访问 | 较差,不同系统需开发对应客户端 |
| 维护成本 | 低,仅需维护服务器端 | 高,需同时维护服务器和多个客户端版本 |
| 部署方式 | 服务器端部署后,客户端'零部署',刷新即可用 | 需逐个客户端安装、升级 |
| 适用场景 | 互联网公开应用、轻量级管理系统 | 局域网高交互应用、工业控制软件 |
1.2 核心特征
瘦客户端,胖服务器 客户端只负责界面渲染和用户交互,不承担复杂计算;服务器端则是整个架构的'大脑',负责数据存储、业务逻辑处理和权限控制。
- 基于标准协议通信:浏览器与服务器之间通过 HTTP/HTTPS 协议 通信,遵循请求 - 响应模型。客户端发送请求(如 GET 获取数据),服务器处理后返回响应(HTML 页面、JSON 数据等)。
- 无状态性:HTTP 协议本身是无状态的,服务器不会记住客户端的历史请求。为了实现登录状态保持等功能,衍生出了 Cookie、Session、Token 等状态管理技术。
二、三层架构模型
实际开发中,B/S 架构通常采用三层架构设计,通过分层解耦提升可维护性和扩展性。
2.1 表现层(Presentation Layer)
- 作用:直接与用户交互,负责数据展示和指令接收。
- 核心技术:HTML、CSS、JavaScript、Vue、React 等前端框架。
- 职责边界:不处理业务逻辑,仅将服务器返回的数据渲染成页面,或将用户输入封装后发送给服务器。
- 示例:用户在浏览器输入账号密码点击登录 → 前端校验格式后,通过 Axios 发送 POST 请求到服务器。
2.2 业务逻辑层(Business Logic Layer)
- 作用:架构的核心,负责处理业务规则、数据校验、权限判断等。

