Vue.js通过调用后端RESTful API实现数据库数据的增删改查，增（Create）时，使用axios发送POST请求，表单数据通过v-model绑定，提交后更新视图；删（Delete）需携带数据ID发送DELETE请求，成功后刷新列表；改（Update）先获取数据到表单，修改后发送PUT/PATCH请求，同步更新数据库与视图；查（Read）通过GET请求获取数据列表，利用v-for渲染到页面，Vue的响应式数据绑定确保操作后视图自动更新，实现前后端数据交互与动态展示。
Vue.js与数据库交互：实现前端数据增删改查的完整指南
在现代化前端开发领域,Vue.js凭借其响应式数据绑定机制、组件化开发范式和易于上手的特性，已成为构建动态单页应用（SPA）的主流框架，在实际业务场景中，前端应用通常需要与后端数据库进行交互，以实现对数据的增删改查（CRUD）操作，本文将系统性地介绍如何使用Vue.js结合后端API，完成对数据库中数据的完整CRUD操作流程，涵盖环境搭建、代码实现、错误处理机制及最佳实践。
准备工作：前后端交互基础
Vue.js本身运行在浏览器端，无法直接操作数据库，需通过后端接口（如RESTful API）与数据库通信，实现CRUD操作需明确以下前提：
技术栈选择
- 前端：Vue 3（组合式API）+ Vue Router + Axios（HTTP请求库）+ Pinia（状态管理）
- 后端：Node.js（Express/Koa）或 Java（Spring Boot）等，提供RESTful API接口
- 数据库：MySQL、PostgreSQL、MongoDB等（根据后端选择）
- 开发工具：VS Code、Postman（API测试）
后端API设计
假设后端已提供以下RESTful接口（以用户数据为例）：
| 操作 | HTTP方法 | 路径 | 说明 |
|---|---|---|---|
| 查询所有 | GET | /api/users | 获取用户列表，支持分页 |
| 查询单个 | GET | /api/users/:id | 根据ID获取用户详情 |
| 创建 | POST | /api/users | 新增用户，需验证数据完整性 |
| 更新 | PUT | /api/users/:id | 根据ID更新用户信息 |
| 删除 | DELETE | /api/users/:id | 根据ID删除用户 |
| 批量删除 | DELETE | /api/users/batch | 批量删除多个用户 |
环境搭建
-
安装Vue CLI：
npm install -g @vue/cli
-
创建Vue项目：
vue create vue-crud-demo
-
安装必要依赖：
cd vue-crud-demo npm install axios pinia
-
创建项目结构：
src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── components/ # 组件 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── views/ # 页面视图 └── App.vue # 根组件
前端实现：Vue.js中的CRUD操作
API请求封装
首先创建API请求封装,统一处理请求拦截、响应拦截和错误处理：
// src/api/index.js
import axios from 'axios';
// 创建axios实例
const api = axios.create({
baseURL: 'http://localhost:3000/api',
timeout: 10000, // 请求超时时间
headers: {
'Content-Type': 'application/json'
}
});
// 请求拦截器
api.interceptors.request.use(
config => {
// 从localStorage获取token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
api.interceptors.response.use(
response => {
// 处理响应数据
return response.data;
},
error => {
// 统一错误处理
if (error.response) {
switch (error.response.status) {
case 401:
// 未授权，跳转到登录页
router.push('/login');
break;
case 404:
console.error('请求的资源不存在');
break;
case 500:
console.error('服务器内部错误');
break;
default:
console.error('请求失败:', error.response.data.message);
}
} else if (error.request) {
// 请求已发出但没有响应
console.error('网络错误，请检查网络连接');
} else {
// 请求配置出错
console.error('请求配置错误:', error.message);
}
return Promise.reject(error);
}
);
export default api;
查询数据（Read）
功能描述
页面加载时从后端获取用户列表,支持分页、搜索和排序功能，并渲染到表格中。
代码实现
<!-- src/components/UserList.vue -->
<template>
<div class="user-list">
<h2>用户列表</h2>
<!-- 搜索和筛选区域 -->
<div class="filters">
<input
v-model="searchQuery"
type="text"
placeholder="搜索用户名或邮箱..."
@input="handleSearch"
/>
<select v-model="sortBy" @change="handleSort">
<option value="name">按姓名排序</option>
<option value="email">按邮箱排序</option>
<option value="createdAt">按创建时间排序</option>
</select>
</div>
<!-- 分页控制 -->
<div class="pagination">
<button
:disabled="currentPage === 1"
@click="changePage(currentPage - 1)"
>
上一页
</button>
<span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
<button
:disabled="currentPage === totalPages"
@click="changePage(currentPage + 1)"
>
下一页
</button>
</div>
<!-- 数据表格 -->
<div v-if="loading" class="loading">
<div class="spinner"></div>
<p>加载中...</p>
</div>
<table v-else-if="users.length">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ formatDate(user.createdAt) }}</td>
<td>
<button class="btn-edit
