Vue3+SpringBoot全栈开发：从零实现增删改查与分页功能

 

前言

在现代化Web应用开发中，前后端分离架构已成为主流。本文将详细介绍如何使用Vue3作为前端框架，SpringBoot作为后端框架，实现一套完整的增删改查(CRUD)功能，包含分页查询、条件筛选等企业级特性。

技术栈介绍

• 前端：Vue3 + Element Plus + Axios

• 后端：SpringBoot + MyBatis-Plus

• 构建工具：Vite (前端) + Maven (后端)

一、环境准备与项目搭建

1.1 前端项目初始化

bash

复制

下载

npm init vue@latest vue3-springboot-crud
cd vue3-springboot-crud
npm install axios element-plus --save

1.2 后端项目搭建

使用Spring Initializr创建项目，添加以下依赖：

• Spring Web

• MyBatis Framework

• Lombok

• MySQL Driver

二、核心功能实现

2.1 跨域解决方案

前后端分离开发首要解决跨域问题，SpringBoot后端配置如下：

java

复制

下载

@Configuration
public class CrossConfig {private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("*");config.addAllowedHeader("*");config.addAllowedMethod("*");config.setMaxAge(MAX_AGE);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

2.2 前端Axios封装

javascript

复制

下载

import axios from "axios";
import { ElMessage } from 'element-plus'const http = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 50000
})// 请求拦截器
http.interceptors.request.use(config => {config.headers['Content-Type'] = "application/json;charset=utf-8"const user = JSON.parse(localStorage.getItem("user") || '{}')if (user.token) {config.headers['Authorization'] = `Bearer ${user.token}`}return config
})// 响应拦截器
http.interceptors.response.use(response => {if (response.data.code !== 200) {ElMessage.error(response.data.message)}return response.data
}, error => {ElMessage.error(error.message)return Promise.reject(error)
})export default http

三、分页查询实现

3.1 后端分页逻辑

java

复制

下载

@PostMapping("/list_page")
public Result<PageResult<User>> listPage(@RequestBody PageQuery<User> query) {QueryWrapper<User> wrapper = new QueryWrapper<>();if (StringUtils.isNotBlank(query.getEntity().getName())) {wrapper.like("name", query.getEntity().getName());}int total = userMapper.selectCount(wrapper);PageHelper.startPage(query.getCurrentPage(), query.getPageSize());List<User> list = userMapper.selectList(wrapper);return Result.success(new PageResult<>(total, list));
}

3.2 前端分页组件

vue

复制

下载

<template><div class="pagination-container"><el-paginationv-model:current-page="queryParams.currentPage"v-model:page-size="queryParams.pageSize":page-sizes="[10, 20, 50, 100]"layout="total, sizes, prev, pager, next":total="total"@size-change="handleQuery"@current-change="handleQuery"/></div>
</template><script setup>
import { reactive, ref } from 'vue'
import http from '@/utils/request'const queryParams = reactive({currentPage: 1,pageSize: 10,name: ''
})const total = ref(0)
const tableData = ref([])const handleQuery = async () => {const res = await http.post('/user/list_page', queryParams)tableData.value = res.data.listtotal.value = res.data.total
}
</script>

四、完整CRUD实现

4.1 新增数据

java

复制

下载

@PostMapping("/add")
public Result<String> addUser(@RequestBody User user) {user.setCreateTime(LocalDateTime.now());userMapper.insert(user);return Result.success("添加成功");
}

4.2 更新数据

java

复制

下载

@PostMapping("/update")
public Result<String> updateUser(@RequestBody User user) {user.setUpdateTime(LocalDateTime.now());userMapper.updateById(user);return Result.success("更新成功");
}

4.3 删除数据

java

复制

下载

@PostMapping("/delete")
public Result<String> deleteUser(@RequestBody List<Long> ids) {if (ids != null && !ids.isEmpty()) {userMapper.deleteBatchIds(ids);}return Result.success("删除成功");
}

五、前端界面优化

5.1 表格与表单组件

vue

复制

下载

<template><div class="app-container"><!-- 查询表单 --><el-form :inline="true" class="search-form"><el-form-item label="用户名"><el-input v-model="queryParams.name" clearable @clear="handleQuery" /></el-form-item><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button><el-button @click="resetQuery">重置</el-button></el-form-item></el-form><!-- 操作按钮 --><div class="operation-buttons"><el-button type="primary" @click="handleAdd">新增</el-button><el-button type="danger" @click="handleBatchDelete">批量删除</el-button></div><!-- 数据表格 --><el-tablev-loading="loading":data="tableData"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column prop="name" label="姓名" /><el-table-column prop="age" label="年龄" /><el-table-column label="操作" width="200"><template #default="scope"><el-button size="small" @click="handleEdit(scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页组件 --><paginationv-show="total > 0":total="total"v-model:page="queryParams.currentPage"v-model:limit="queryParams.pageSize"@pagination="handleQuery"/><!-- 新增/编辑对话框 --><el-dialog v-model="dialogVisible" :title="dialogTitle"><el-form :model="form" :rules="rules" ref="formRef"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" /></el-form-item><el-form-item label="年龄" prop="age"><el-input-number v-model="form.age" :min="0" /></el-form-item></el-form><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submitForm">确定</el-button></template></el-dialog></div>
</template>

六、性能优化建议

1. 后端优化：

   • 使用MyBatis-Plus的分页插件替代手动分页

   • 添加Redis缓存高频访问数据

   • 对大数据量查询添加索引

2. 前端优化：

   • 使用防抖处理频繁查询

   • 添加表格加载状态

   • 实现数据懒加载

javascript

复制

下载

// 防抖处理示例
import { debounce } from 'lodash-es'const debouncedQuery = debounce(handleQuery, 500)

七、常见问题解决

1. 跨域问题：确保后端正确配置CORS，前端请求地址正确

2. 分页失效：检查分页参数是否正确传递，后端SQL是否正确拼接

3. 数据更新不及时：在增删改操作后重新查询数据

4. 批量操作失败：检查后端是否支持批量操作，参数格式是否正确

结语

本文详细介绍了基于Vue3和SpringBoot的全栈CRUD开发流程，涵盖了从基础查询到复杂分页的实现，以及前后端交互的最佳实践。读者可以根据实际需求扩展更多功能，如表单验证、文件上传、权限控制等。欢迎交流。