前端与数据库交互-编程阁

1. 前端角色：发起请求和处理响应

前端主要负责：

收集用户输入数据
通过HTTP请求调用后端API
处理响应并更新UI

2. 基础前端代码示例（使用Fetch API）

// API服务模块 class ApiService { constructor(baseURL) { this.baseURL = baseURL; } // 查询数据 async getItems() { try { const response = await fetch(`${this.baseURL}/api/items`); if (!response.ok) throw new Error('获取数据失败'); return await response.json(); } catch (error) { console.error('获取数据出错:', error); throw error; } } // 添加数据 async addItem(itemData) { try { const response = await fetch(`${this.baseURL}/api/items`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(itemData) }); if (!response.ok) throw new Error('添加失败'); return await response.json(); } catch (error) { console.error('添加数据出错:', error); throw error; } } // 更新数据 async updateItem(id, updateData) { try { const response = await fetch(`${this.baseURL}/api/items/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(updateData) }); if (!response.ok) throw new Error('更新失败'); return await response.json(); } catch (error) { console.error('更新数据出错:', error); throw error; } } // 删除数据 async deleteItem(id) { try { const response = await fetch(`${this.baseURL}/api/items/${id}`, { method: 'DELETE' }); if (!response.ok) throw new Error('删除失败'); return true; } catch (error) { console.error('删除数据出错:', error); throw error; } } } // 使用示例 const api = new ApiService('https://your-backend.com'); // 获取并显示数据 async function loadAndDisplayItems() { const items = await api.getItems(); // 更新UI显示数据 } // 添加新项目 async function handleAddItem() { const newItem = { name: document.getElementById('itemName').value, description: document.getElementById('itemDesc').value }; await api.addItem(newItem); await loadAndDisplayItems(); // 刷新数据 }

后端实现示例（Node.js + Express + MySQL）

了解后端如何实现可以帮助前端开发者更好地协作：

// 后端API示例 const express = require('express'); const mysql = require('mysql2/promise'); require('dotenv').config(); const app = express(); app.use(express.json()); // 创建数据库连接池（生产环境使用环境变量） const pool = mysql.createPool({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, waitForConnections: true, connectionLimit: 10 }); // 获取所有项目 app.get('/api/items', async (req, res) => { try { const [rows] = await pool.execute('SELECT * FROM items'); res.json(rows); } catch (error) { console.error('数据库查询错误:', error); res.status(500).json({ error: '服务器内部错误' }); } }); // 添加新项目 app.post('/api/items', async (req, res) => { try { const { name, description } = req.body; // 数据验证 if (!name || !description) { return res.status(400).json({ error: '缺少必要字段' }); } const [result] = await pool.execute( 'INSERT INTO items (name, description) VALUES (?, ?)', [name, description] ); res.status(201).json({ id: result.insertId, name, description }); } catch (error) { console.error('数据库插入错误:', error); res.status(500).json({ error: '服务器内部错误' }); } }); // 更新项目 app.put('/api/items/:id', async (req, res) => { // ... 类似实现 }); // 删除项目 app.delete('/api/items/:id', async (req, res) => { // ... 类似实现 }); app.listen(3000, () => { console.log('服务器运行在 http://localhost:3000'); });

现代前端数据管理方案

1. 使用状态管理库

// 以React + TanStack Query为例 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; function ItemList() { const queryClient = useQueryClient(); // 获取数据 const { data: items, isLoading } = useQuery({ queryKey: ['items'], queryFn: () => fetch('/api/items').then(res => res.json()) }); // 添加数据 const addMutation = useMutation({ mutationFn: (newItem) => fetch('/api/items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newItem) }).then(res => res.json()), onSuccess: () => { queryClient.invalidateQueries(['items']); // 刷新数据 } }); // 类似地实现更新和删除... }

2. 使用专门的HTTP客户端

Axios: 功能强大的HTTP客户端
SWR: React专用的数据获取库
RTK Query: Redux Toolkit的数据获取解决方案

实际项目中的最佳实践

1. 统一错误处理

// 错误处理中间件 const handleApiError = async (response) => { if (!response.ok) { const error = await response.json().catch(() => ({})); throw new Error(error.message || `HTTP错误: ${response.status}`); } return response.json(); }; // 使用示例 fetch('/api/items') .then(handleApiError) .then(data => console.log(data)) .catch(error => showErrorToast(error.message));

2. 请求拦截器（添加认证等）

// Axios示例 axios.interceptors.request.use(config => { const token = localStorage.getItem('auth_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); // 响应拦截器处理常见错误 axios.interceptors.response.use( response => response, error => { if (error.response?.status === 401) { // 跳转到登录页 window.location.href = '/login'; } return Promise.reject(error); } );