springboot vue前后端 增删改查

### 使用 Spring Boot 和 Vue 实现 CRUD 操作

#### 一、项目搭建
为了创建一个完整的全栈应用程序，可以采用Spring Boot作为后端框架，Vue.js作为前端框架。这不仅能够提供强大的服务器支持，还能构建响应迅速的用户界面[^1]。

#### 二、配置MyBatis用于数据库操作
在Spring Boot环境中引入MyBatis来进行数据持久化层的操作非常便捷。通过向`pom.xml`文件中加入特定依赖项来安装必要的库，从而简化了SQL映射过程并提高了开发效率[^2]。

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.0</version>
</dependency>

#### 三、前后端交互设计
对于前端部分，在Vue组件内部利用Axios发起HTTP请求至指定URL地址以获取所需的数据资源；而后端则负责处理这些请求并将查询结果返回给客户端显示出来。具体来说就是当页面加载完成后立即调用`load()`方法从服务端拉取最新记录列表，并将其赋值给表格展示变量`tableData`以便渲染到界面上[^3]。

// 前端发送分页参数及筛选条件给后台API接口
request.get("http://localhost:9090/user/selectPage", {
    params: {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.username,
        email: this.email,
        address: this.address
    }
}).then(response => {
    // 将接收到的结果集保存起来供后续视图更新使用
    this.tableData = response.data.records;
    this.total = response.data.total;
});

#### 四、实现增删改查功能
- **新增**：收集表单输入的信息并通过POST方式提交给服务器；
- **删除**：确认要移除的目标ID之后再发出DELETE命令通知对方执行相应动作；
- **修改**：先读取出待编辑对象详情填充入模态框内让用户调整完毕后再PUT回去覆盖旧版本；
- **查询**：按照设定好的过滤器模式匹配符合条件的所有条目呈现于当前视窗之中。

以上便是基于Spring Boot与Vue技术组合下的一套简易版CRUD应用实例介绍。