SpringBoot+Vue实现修改

SpringBoot+Vue 实现 “修改” 功能的核心逻辑是：前端通过表单展示待修改数据，用户编辑后提交更新，后端接收并验证数据，最终更新数据库中对应记录。整体流程与 “增加” 类似，但需先获取原始数据并基于主键（如 ID）定位修改对象。
一、核心流程拆解
获取待修改数据
前端通过 ID（如点击列表中的 “编辑” 按钮携带 ID）发送请求，后端根据 ID 查询数据库，返回原始数据给前端。
前端展示与编辑
Vue 将后端返回的原始数据填充到表单中，用户修改部分字段后提交更新请求。
后端接收与更新
SpringBoot 接收包含 ID 和修改后数据的请求，验证数据合法性，调用数据库UPDATE语句更新对应记录。
返回结果与前端反馈
后端返回修改成功 / 失败的结果，前端提示用户并刷新数据列表。
二、前后端关键代码示例

1. 前端（Vue）核心代码

需实现 “回显原始数据” 和 “提交修改” 两个核心操作。

<template>
  <div>
    <!-- 编辑表单：回显数据并允许修改 -->
    <input v-model="user.name" placeholder="姓名" />
    <input v-model="user.age" type="number" placeholder="年龄" />
    <button @click="updateUser">保存修改</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: { id: '', name: '', age: '' } // 包含ID的用户对象
    }
  },
  created() {
    // 页面加载时，根据URL参数中的ID获取原始数据（假设ID从路由参数获取）
    const userId = this.$route.params.id;
    this.getUserById(userId);
  },
  methods: {
    // 1. 查询原始数据（用于回显）
    getUserById(id) {
      axios.get(`/api/user/${id}`)
        .then(response => {
          this.user = response.data.data; // 回显数据到表单
        })
        .catch(error => {
          console.error('查询失败：', error);
        });
    },
    // 2. 提交修改
    updateUser() {
      axios.put(`/api/user/update`, this.user) // 用PUT请求表示更新
        .then(response => {
          if (response.data.success) {
            alert('修改成功！');
            this.$router.push('/userList'); // 跳回列表页
          } else {
            alert('修改失败：' + response.data.msg);
          }
        })
        .catch(error => {
          console.error('修改请求出错：', error);
        });
    }
  }
}
</script>

1. 后端（SpringBoot）核心代码

基于分层架构，重点实现 “查询原始数据” 和 “更新数据” 两个接口。
Entity 层：复用User实体类（需包含id字段作为主键）。
Controller 层：新增查询和更新接口
java
运行

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserService userService;

    // 1. 根据ID查询用户（用于前端回显）
    @GetMapping("/{id}")
    public Result getUserById(@PathVariable Long id) {
        User user = userService.getUserById(id);
        return Result.success(user); // 返回原始数据
    }

    // 2. 处理修改请求（接收包含ID的用户对象）
    @PutMapping("/update")
    public Result updateUser(@Validated @RequestBody User user) {
        // 校验ID是否存在（避免修改不存在的记录）
        if (user.getId() == null) {
            return Result.error("ID不能为空");
        }
        boolean flag = userService.updateUser(user);
        return flag ? Result.success("修改成功") : Result.error("修改失败");
    }
}

Service 层：实现查询和更新逻辑
java
运行

// 接口
public interface UserService {
    User getUserById(Long id); // 查询原始数据
    boolean updateUser(User user); // 更新数据
}

// 实现类
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public User getUserById(Long id) {
        return userMapper.selectById(id); // 调用Dao层查询
    }

    @Override
    public boolean updateUser(User user) {
        // 可添加业务校验（如年龄范围）
        if (user.getAge() < 0) {
            return false;
        }
        // 调用Dao层执行更新（根据ID定位记录）
        return userMapper.updateById(user) > 0;
    }
}

Dao 层（MyBatis 示例）：
java
运行

@Mapper
public interface UserMapper {
    // 查询原始数据
    User selectById(Long id);
    // 更新数据（根据ID）
    int updateById(User user);
}
xml
<!-- UserMapper.xml -->
<mapper namespace="com.example.demo.mapper.UserMapper">
    <!-- 查询 -->
    <select id="selectById" parameterType="java.lang.Long" resultType="com.example.demo.entity.User">
        SELECT id, name, age FROM user WHERE id = #{id}
    </select>
    <!-- 更新 -->
    <update id="updateById" parameterType="com.example.demo.entity.User">
        UPDATE user 
        SET name = #{name}, age = #{age} 
        WHERE id = #{id} <!-- 关键：通过ID定位要修改的记录 -->
    </update>
</mapper>

三、关键注意事项
数据回显的准确性前端必须先通过 ID 查询原始数据，确保表单中展示的是数据库当前最新值，避免覆盖其他用户的修改（可结合乐观锁进一步优化）。
请求方法的规范推荐使用PUT请求表示 “更新” 操作（符合 RESTful 风格），与 “增加” 的POST、“查询” 的GET、“删除” 的DELETE区分开。
乐观锁防并发当多用户同时修改同一条数据时，可能出现覆盖问题。可在数据库表中添加version字段，更新时校验版本号：
xml

<!-- MyBatis更新语句添加版本号校验 -->
<update id="updateById" parameterType="com.example.demo.entity.User">
    UPDATE user 
    SET name = #{name}, age = #{age}, version = version + 1
    WHERE id = #{id} AND version = #{version}
</update>

若版本号不匹配，更新失败，需提示用户 “数据已被修改，请刷新后重试”。
部分字段更新若只需修改部分字段（如只改姓名不改年龄），可通过
@JsonInclude(Include.NON_NULL)注解忽略null值，或在 SQL 中只更新非空字段：
xml

<update id="updateById" parameterType="com.example.demo.entity.User">
    UPDATE user 
    <set>
        <if test="name != null">name = #{name},</if>
        <if test="age != null">age = #{age},</if>
    </set>
    WHERE id = #{id}
</update>

通过以上流程，即可实现 SpringBoot+Vue 的 “修改” 功能，核心是基于 ID 定位记录、回显原始数据、验证并执行更新。