SpringBoot+Vue实现增加功能

SpringBoot+Vue 实现 “增加” 功能，本质是通过 Vue 前端提交数据，SpringBoot 后端接收并处理，最终将数据存入数据库的完整流程。该模式是当前主流的前后端分离开发方案，职责划分清晰，便于维护。
一、核心流程拆解
整个 “增加” 操作分为 4 个关键步骤，前后端通过 HTTP 请求（通常是 POST）交互。
前端页面输入
用户在 Vue 搭建的表单页面中填写数据，例如新增用户的 “姓名”“年龄”“邮箱” 等信息。
前端数据提交
Vue 通过 Axios 等 HTTP 工具，将表单数据封装成 JSON 格式，发送 POST 请求到后端指定接口（如/api/user/add）。
后端接收与处理
SpringBoot 通过@PostMapping注解接收请求，使用@RequestBody将 JSON 数据绑定到实体类（如User），再调用 Service 层逻辑处理业务规则（如数据校验）。
数据持久化
Service 层调用 Dao 层（通常基于 MyBatis 或 JPA），执行 SQL 的INSERT语句，将数据存入 MySQL 等数据库，最后返回处理结果（成功 / 失败）给前端。
二、前后端关键代码示例

1. 前端（Vue）核心代码

需先确保项目已引入 Axios，主要实现表单绑定、数据提交和结果反馈。

<template>
  <!-- 新增用户表单 -->
  <div>
    <input v-model="user.name" placeholder="请输入姓名" />
    <input v-model="user.age" type="number" placeholder="请输入年龄" />
    <button @click="addUser">提交新增</button>
  </div>
</template>

<script>
import axios from 'axios' // 引入Axios

export default {
  data() {
    return {
      user: { name: '', age: '' } // 绑定表单数据的对象
    }
  },
  methods: {
    addUser() {
      // 发送POST请求到后端接口
      axios.post('/api/user/add', this.user)
        .then(response => {
          if (response.data.success) {
            alert('新增成功！')
            this.user = { name: '', age: '' } // 清空表单
          } else {
            alert('新增失败：' + response.data.msg)
          }
        })
        .catch(error => {
          console.error('请求出错：', error)
        })
    }
  }
}
</script>

1. 后端（SpringBoot）核心代码

需先配置数据库连接（如 application.yml 中配置 MySQL 地址、账号密码），再分层实现接口。
Entity 层（实体类）：映射数据库表结构
java
运行

// User.java
public class User {
    private Long id; // 主键（自增）
    private String name; // 姓名
    private Integer age; // 年龄
    // 省略getter、setter方法
}

Controller 层（接口层）：接收前端请求
java
运行

// UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserService userService; // 注入Service层

    // 处理新增请求，接收JSON数据
    @PostMapping("/add")
    public Result addUser(@RequestBody User user) {
        boolean flag = userService.addUser(user);
        if (flag) {
            return Result.success("新增成功"); // 自定义统一返回类
        }
        return Result.error("新增失败");
    }
}

Service 层（业务逻辑层）：处理业务规则
java
运行

// UserService.java（接口）
public interface UserService {
    boolean addUser(User user);
}

// UserServiceImpl.java（实现类）
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper; // 注入Dao层

    @Override
    public boolean addUser(User user) {
        // 可添加业务校验，如“年龄不能为负数”
        if (user.getAge() < 0) {
            return false;
        }
        // 调用Dao层插入数据
        return userMapper.insertUser(user) > 0;
    }
}

Dao 层（数据访问层）：操作数据库（以 MyBatis 为例）
java
运行

// UserMapper.java（接口）
@Mapper
public interface UserMapper {
    // 插入用户数据
    int insertUser(User user);
}
xml
<!-- UserMapper.xml（MyBatis映射文件） -->
<mapper namespace="com.example.demo.mapper.UserMapper">
    <insert id="insertUser" parameterType="com.example.demo.entity.User">
        INSERT INTO user (name, age) VALUES (#{name}, #{age})
    </insert>
</mapper>

三、关键注意事项
跨域问题前后端分离项目中，前端（如http://localhost:8080）和后端（如http://localhost:8081）端口不同会导致跨域。需在 SpringBoot 中配置跨域允许：
java
运行

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有接口
                .allowedOrigins("http://localhost:8080") // 允许前端地址
                .allowedMethods("GET", "POST") // 允许请求方法
                .allowCredentials(true); // 允许携带Cookie
    }
}

数据校验避免非法数据存入数据库，可使用 SpringBoot 的@Validated注解做参数校验，例如在实体类中添加：
java
运行

public class User {
    @NotBlank(message = "姓名不能为空") // 姓名非空校验
    private String name;
    @Min(value = 0, message = "年龄不能为负数") // 年龄最小值校验
    private Integer age;
    // 省略getter、setter
}

并在 Controller 层添加@Validated：
java
运行

@PostMapping("/add")
public Result addUser(@Validated @RequestBody User user) {
    // 业务逻辑...
}

统一返回格式后端应定义统一的返回类（如Result），包含success（是否成功）、msg（提示信息）、data（返回数据），确保前端能统一解析结果，避免格式混乱。以下是增加订单信息效果图。