当前位置：首页 > 数据库 > 正文

前端如何直接操作数据库？

前端通过HTTP请求向后端API发送数据或查询，后端连接数据库执行增删改查操作，处理后将结果返回前端展示

基础架构：三层分离模型

graph LR A[前端 UI] --> B[后端 API] B --> C[数据库] C --> B B --> A

前端发起请求
用户填写表单点击登录，前端通过 fetch 或 axios 发送请求：

axios.post('/api/login', { username: 'user123', password: '******' });
后端接收并处理
后端验证数据，生成数据库查询（Node.js + Express 示例）：
app.post('/api/login', (req, res) => { const { username, password } = req.body; // 数据库查询（使用SQL防载入） db.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, hash(password)], (error, results) => {...}); });
数据库执行操作
- MySQL 执行查询并返回结果
- MongoDB 使用 db.collection.find() 检索文档
后端返回响应
根据数据库返回的数据生成 JSON：

{ "success": true, "user": { "name": "John", "role": "admin" } }
前端更新界面
前端接收响应后更新 DOM：
if (response.success) { document.getElementById('welcome').innerText = `欢迎, ${response.user.name}!`; }

方式	协议	特点	适用场景
RESTful API	HTTP	无状态、资源导向，使用 GET/POST/PUT/DELETE	通用数据操作
GraphQL	HTTP	按需查询，单端点接收自定义数据结构	复杂关联数据查询
WebSocket	TCP	双向实时通信	即时聊天、实时推送

最佳实践：RESTful 用于基础 CRUD 操作，GraphQL 优化复杂查询性能。

SQL 载入防御
使用参数化查询（如占位符）替代字符串拼接：

// 危险方式（易被载入） db.query(`SELECT * FROM users WHERE email='${email}'`); // 安全方式 db.query('SELECT * FROM users WHERE email=?', [email]);
敏感数据保护
- HTTPS 加密传输
- 密码哈希存储（bcrypt/scrypt）
- JWT 令牌代替 session 认证
跨域策略（CORS）
后端配置白名单,限制非法域名访问：
app.use(cors({ origin: ['https://yourdomain.com'] }));
XSS 防御
前端对渲染内容转义：

// React/Vue 自动转义文本 <div>{ userInput }</div>

Serverless 架构
使用 AWS Lambda/Firebase 函数处理 API 请求,自动扩展后端资源。
ORM/ODM 工具
如 Sequelize（SQL）或 Mongoose（MongoDB），避免手写 SQL 语句： // Mongoose 查询示例 UserModel.find({ role: 'admin' }).exec();
数据缓存策略
Redis 缓存高频查询数据,减轻数据库压力。