springboot结合vue实现登录和注册功能

以下是一个简化的Spring Boot后端和Vue前端的登录和注册功能的实现示例。

Spring Boot后端:

// UserController.java
@RestController
@RequestMapping("/api")
public class UserController {
 
    @PostMapping("/register")
    public ResponseEntity<?> registerUser(@RequestBody User user) {
        // 实现用户注册逻辑
        // ...
        return ResponseEntity.ok("User registered successfully.");
    }
 
    @PostMapping("/login")
    public ResponseEntity<?> loginUser(@RequestBody User user) {
        // 实现用户登录逻辑
        // ...
        return ResponseEntity.ok("User logged in successfully.");
    }
}
 
// User.java
public class User {
    private String username;
    private String password;
    // 省略getter和setter
}

Vue前端:

<!-- Login.vue -->
<template>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="Username">
    <input type="password" v-model="loginForm.password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    login() {
      axios.post('/api/login', this.loginForm)
        .then(response => {
          // 处理登录成功的响应
          console.log(response.data);
        })
        .catch(error => {
          // 处理登录失败的情况
          console.error(error);
        });
    }
  }
};
</script>

<!-- Register.vue -->
<template>
  <div>
    <input type="text" v-model="registerForm.username" placeholder="Username">
    <input type="password" v-model="registerForm.password" placeholder="Password">
    <button @click="register">Register</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    register() {
      axios.post('/api/register', this.registerForm)
        .then(response => {
          // 处理注册成功的响应
          console.log(response.data);
        })
        .catch(error => {
          // 处理注册失败的情况
          console.error(error);
        });
    }
  }
};
</script>

确保你的Spring Boot应用配置了CORS（跨源资源共享），以便Vue应用能够从不同的域进行请求。

这个示例展示了如何使用Spring Boot和Vue.js创建简单的登录和注册功能。在实际应用中，你需要加入更复杂的逻辑，例如密码加密、处理错误信息、实现用户验证等。