介绍 B/S 架构定义、特征及与 C/S 区别。阐述三层架构模型，分析主流前后端技术栈。通过用户登录案例演示搭建流程，涵盖数据库、后端接口及前端开发。总结 B/S 架构优势、局限及微服务化、云原生等趋势。
B/S 架构，全称 Browser/Server（浏览器 / 服务器）架构，是一种基于互联网的分布式计算架构。它的核心逻辑是：客户端仅需安装浏览器，所有业务逻辑、数据存储、计算处理均在服务器端完成，浏览器通过 HTTP/HTTPS 协议与服务器交互，实现数据的请求与展示。
为了更清晰理解 B/S 架构的优势，我们可以对比它的'前辈'——C/S（Client/Server，客户端 / 服务器）架构：
| 对比维度 | B/S 架构 | C/S 架构 |
|---|
| 客户端要求 | 仅需浏览器，无需安装专用软件 | 需安装定制客户端程序 |
| 跨平台性 | 极佳，Windows、Mac、Linux、移动端浏览器均可访问 | 较差，不同系统需开发对应客户端 |
| 维护成本 | 低，仅需维护服务器端 | 高，需同时维护服务器和多个客户端版本 |
| 部署方式 | 服务器端部署后，客户端'零部署'，刷新即可用 | 需逐个客户端安装、升级 |
| 适用场景 | 互联网公开应用（博客、电商、官网）、轻量级管理系统 | 局域网高交互应用（ERP、游戏客户端、工业控制软件） |
瘦客户端，胖服务器
客户端（浏览器）只负责界面渲染、用户交互，不承担复杂计算；服务器端负责数据存储、业务逻辑处理、权限控制等核心工作，是整个架构的'大脑'。
实际开发中，B/S 架构通常采用三层架构设计，通过分层解耦，提升代码的可维护性、可扩展性。三层架构从上到下依次为：
SELECT * FROM user WHERE username = ? → 返回用户信息给业务逻辑层。搭建一个 B/S 架构的应用，需要选择合适的技术栈组合。以下是主流的技术栈搭配方案，适用于不同场景：
| 技术类型 | 推荐技术 | 适用场景 |
|---|---|---|
| 基础技术 | HTML + CSS + JavaScript | 所有前端场景，是框架的基础 |
| 前端框架 | Vue.js | 中小型应用、快速开发，上手门槛低 |
| 前端框架 | React | 大型复杂应用、组件复用要求高 |
| 工程化工具 | Vite、Webpack | 前端项目打包、构建、优化 |
| 状态管理 | Pinia（Vue）、Redux（React） | 复杂应用的全局状态管理 |
| 技术类型 | 推荐技术 | 适用场景 |
|---|---|---|
| 后端语言 / 框架 | Spring Boot（Java） | 企业级应用、高并发、稳定性要求高 |
| 后端语言 / 框架 | Django/Flask（Python） | 快速开发、数据分析类应用 |
| 后端语言 / 框架 | Gin（Go） | 高性能、高并发场景（如 API 网关） |
| 接口风格 | RESTful API | 大多数 Web 应用，简洁通用 |
| 接口风格 | GraphQL | 前端按需获取数据，减少请求次数 |
| 技术类型 | 推荐技术 | 适用场景 |
|---|---|---|
| 关系型数据库 | MySQL、PostgreSQL | 数据结构固定、事务一致性要求高（如电商订单、用户系统） |
| 非关系型数据库 | MongoDB、Redis | 数据结构灵活（MongoDB）、缓存 / 会话存储（Redis） |
| 中间件 | Nginx | 反向代理、负载均衡、静态资源缓存 |
| 中间件 | RabbitMQ、Kafka | 异步通信、消息队列，削峰填谷 |
为了让大家更直观地理解 B/S 架构的工作流程，我们以 '用户登录查询个人信息' 为例，搭建一个极简的 B/S 应用。
数据库操作（数据访问层） 编写 MyBatis 映射文件，查询用户表数据。
<select id="getUserByUsername" parameterType="String" resultType="User">
SELECT * FROM user WHERE username = #{username}
</select>
后端接口开发（业务逻辑层） 使用 Spring Boot 编写登录接口，接收前端参数，调用数据访问层校验用户信息，生成 Token。
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/login")
public Result login(@RequestBody User user) {
boolean isValid = userService.checkUser(user.getUsername(), user.getPassword());
if (isValid) {
String token = JwtUtil.generateToken(user.getUsername());
return Result.success("登录成功", token);
}
return Result.error("账号或密码错误");
}
}
前端页面开发（表现层） 编写登录页面，包含账号密码输入框和登录按钮。通过 Axios 发送 POST 请求到后端接口 /api/login。
<div id="app">
<input v-model="username" placeholder="请输入账号">
<input v-model="password" type="password" placeholder="请输入密码">
<button @click="login">登录</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const { createApp } = Vue.createApp({
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
const res = await axios.post('/api/login', {
username: this.username,
password: this.password
});
alert(res.data.message);
}
}
}).mount('#app');
</script>
随着云计算、微服务、人工智能技术的发展，B/S 架构也在不断演进：
B/S 架构以其跨平台、易维护、低成本的特性，成为 Web 应用开发的主流选择。从三层架构的分层设计，到前后端分离的技术栈搭配，再到微服务、云原生的未来演进，B/S 架构始终在适应互联网技术的发展。
对于开发者而言，掌握 B/S 架构的核心原理和技术栈，是构建高质量 Web 应用的基础。无论是开发个人博客、企业管理系统，还是大型电商平台，B/S 架构都是值得深入学习和实践的技术方向。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online