一、B/S 架构是什么?定义与核心特征
B/S 架构,全称 Browser/Server(浏览器 / 服务器)架构,是一种基于互联网的分布式计算架构。它的核心逻辑是:客户端仅需安装浏览器,所有业务逻辑、数据存储、计算处理均在服务器端完成,浏览器通过 HTTP/HTTPS 协议与服务器交互,实现数据的请求与展示。
1.1 与 C/S 架构的核心区别
为了更清晰理解 B/S 架构的优势,我们可以对比它的'前辈'——C/S(Client/Server,客户端 / 服务器)架构:
介绍 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