B/S 架构核心原理与实战指南

2.3 数据访问层（Data Access Layer）

• 作用：负责与数据库交互，实现数据的增删改查（CRUD）。
• 核心技术：SQL、MySQL、PostgreSQL、MongoDB 等数据库，以及 MyBatis、Hibernate 等 ORM 框架。
• 职责边界：不涉及业务逻辑，仅根据业务逻辑层的指令对数据库进行操作，返回原始数据。
• 示例：业务逻辑层需要校验账号密码 → 数据访问层执行 SELECT * FROM user WHERE username = ? → 返回用户信息。

三层架构优势

• 解耦：各层之间通过接口通信，修改某一层的代码不会影响其他层。
• 复用性高：业务逻辑层可以被多个前端应用调用（如网页端、小程序端共用一套后端接口）。
• 便于维护：问题定位更精准，团队分工更清晰。

三、核心技术栈选型

搭建一个 B/S 应用，需要选择合适的技术栈组合。

3.1 前端技术栈

3.2 后端技术栈

3.3 数据库与中间件

四、实战：从零搭建一个简单的 B/S 应用

为了让大家更直观地理解工作流程，我们以 '用户登录查询个人信息' 为例，搭建一个极简的 B/S 应用。

4.1 技术栈选择

• 前端：HTML + Vue.js + Axios
• 后端：Spring Boot
• 数据库：MySQL

4.2 核心流程步骤

1. 部署与访问

后端项目打包成 Jar 包，部署到服务器；前端页面放在 Nginx 静态资源目录。用户在浏览器输入服务器 IP/域名，即可访问登录页面，完成交互。

2. 数据库操作（数据访问层）

编写 MyBatis 映射文件，查询用户表数据。这里要注意参数占位符的使用，防止 SQL 注入。

<select id="getUserByUsername" parameterType="String" resultType="User">
    SELECT * FROM user WHERE username = #{username}
</select>

3. 后端接口开发（业务逻辑层）

使用 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("账号或密码错误");
    }
}

4. 前端页面开发（表现层）

编写登录页面，包含账号密码输入框和登录按钮。通过 Axios 发送 POST 请求到后端接口 /api/login。这里利用 Vue 的响应式特性绑定数据，简化了 DOM 操作。

<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 架构的优势与局限性

5.1 优势

1. 跨平台性强：无需考虑客户端操作系统，只要有浏览器就能访问。
2. 维护成本低：所有更新都在服务器端完成，用户无需下载安装补丁。
3. 扩展性好：通过增加服务器节点，可轻松实现负载均衡。
4. 开发效率高：前后端分离架构下，前端和后端可并行开发。

5.2 局限性

1. 对网络依赖性高：如果网络中断，客户端无法与服务器交互。
2. 安全性相对较弱：数据传输依赖 HTTP/HTTPS，存在被劫持风险，需加强加密和验证。
3. 客户端性能受限：复杂的界面渲染会占用浏览器资源，可通过 SSR 缓解。

六、未来发展趋势

随着技术发展，B/S 架构也在不断演进：

1. 微服务化：将单体应用拆分为独立微服务，便于独立部署。
2. 云原生部署：基于 Docker 容器化、Kubernetes 编排，实现弹性伸缩。
3. 低代码/无代码开发：通过可视化拖拽降低开发门槛。
4. 智能化集成：将 AI 能力融入应用，提升用户体验。

七、总结

B/S 架构以其跨平台、易维护、低成本的特性，成为 Web 应用开发的主流选择。从三层架构的分层设计，到前后端分离的技术栈搭配，再到微服务、云原生的未来演进，B/S 架构始终在适应互联网技术的发展。对于开发者而言，掌握其核心原理和技术栈，是构建高质量 Web 应用的基础。无论是个人博客、企业管理系统，还是大型电商平台，这都是值得深入学习和实践的方向。