springboot&vue打通前后端

后端

连接处

//设置api端点
@RestController
@RequestMapping("/api/user")//设定api路径,与前端axios获取的路径一致
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> getAll() {
        return userService.getAll();
    }
}

实体类

public class User {
    private int id;
    private String name;
    private int age;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }


    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + ''' +
                ", age=" + age +
                '}';
    }
}

mapper(操作数据库)

@Mapper
public interface UserMapper {
    @Select("select * from user")
    List<User> getAll();
}

service

@Service
@Log4j2
public class UserService {

    @Autowired
    private UserMapper userMapper;

    public List<User> getAll() {
        List<User> userList = userMapper.getAll();
        log.info("userList: " + userList);
        return userList;

    }
}

在浏览器通过8080端口查看到数据

前端向后端发送数据(controller调用service, service调用mapper)

controller部分

@PostMapping
public User addUser(@RequestBody User user) {
    // 假设你有一个方法保存用户数据
    return userService.addUser(user);
}

service

public User addUser(User user) {
    int rowsAffected = userMapper.save(user);
    if (rowsAffected > 0) {
        return user; // 插入成功，返回插入的用户对象
    } else {
        return null; // 插入失败
    }
}

mapper写入数据库

@Insert("INSERT INTO user(name, age) VALUES(#{name}, #{age})")
int save(User user);

前端部分

核心出装：axios（第23行）

<template>
    <div>
      <h1>用户列表</h1>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }} (Age: {{ user.age }})
        </li>
      </ul> 
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  
  export default {
    setup() {
      const users = ref([]); // 定义一个响应式变量来存储用户数据
  
      // 定义一个函数来获取用户数据
      const fetchUsers = async () => {
        try {
          const response = await axios.get('http://localhost:8080/api/user'); // 替换为你的后端API地址
          users.value = response.data; // 将响应的数据存储到users变量中
        } catch (error) {
          console.error('Failed to fetch users:', error); // 处理请求错误
        }
      };
  
      onMounted(() => {
        fetchUsers(); // 在组件挂载时调用fetchUsers函数
      });
  
      return {
        users // 将users返回，以便在模板中使用
      };
    }
  };
  </script>