MinIO分布式存储从0到Vue+SpringBoot整合开发 视频教程 下载

《Vue+SpringBoot 整合开发实战：从环境搭建到前后端交互全流程（附完整代码）》

核心代码片段

1. SpringBoot 后端接口（用户查询示例）

java

运行

// 实体类 User.java
@Data
@TableName("t_user")
public class User {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String nickname;
}

// Mapper接口 UserMapper.java
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

// 服务层 UserService.java
@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    // 查询所有用户
    public List<User> getAllUsers() {
        return userMapper.selectList(null);
    }
}

// 控制器 UserController.java
@RestController
@RequestMapping("/api/user")
@CrossOrigin // 解决前端跨域问题
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/list")
    public Result<List<User>> getAllUsers() {
        List<User> userList = userService.getAllUsers();
        return Result.success(userList);
    }
}

// 统一响应结果 Result.java
@Data
public class Result<T> {
    private Integer code; // 1成功，0失败
    private String msg;
    private T data;

    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.setCode(1);
        result.setMsg("成功");
        result.setData(data);
        return result;
    }
}

2. Vue 前端交互（用户列表展示）

vue

<!-- UserList.vue 组件 -->
<template>
  <div class="user-list">
    <el-table :data="userList" border stripe>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const userList = ref([]);

// 初始化获取用户列表
const getUserList = async () => {
  try {
    const res = await axios.get('http://localhost:8080/api/user/list');
    if (res.data.code === 1) {
      userList.value = res.data.data;
    }
  } catch (error) {
    console.error('获取用户列表失败：', error);
  }
};

onMounted(() => {
  getUserList();
});
</script>

<style scoped>
.user-list {
  width: 80%;
  margin: 20px auto;
}
</style>