vue3+springboot+mybatis+mysql项目实践--简单登录注册功能实现

以下是一个简化的示例，展示了如何在Vue 3项目中实现一个简单的登录和注册功能。

前端（Vue 3）:

<template>
  <div>
    <h2>用户登录</h2>
    <form @submit.prevent="login">
      <input type="text" v-model="loginForm.username" placeholder="用户名">
      <input type="password" v-model="loginForm.password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
 
    <h2>用户注册</h2>
    <form @submit.prevent="register">
      <input type="text" v-model="registerForm.username" placeholder="用户名">
      <input type="password" v-model="registerForm.password" placeholder="密码">
      <button type="submit">注册</button>
    </form>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue';
import axios from 'axios';
 
const loginForm = reactive({
  username: '',
  password: ''
});
 
const registerForm = reactive({
  username: '',
  password: ''
});
 
const login = async () => {
  try {
    const response = await axios.post('/api/login', loginForm);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};
 
const register = async () => {
  try {
    const response = await axios.post('/api/register', registerForm);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};
</script>

后端（Spring Boot + MyBatis）:

@RestController
@RequestMapping("/api")
public class AuthController {
 
    @Autowired
        private UserService userService;
 
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody User user) {
        try {
            User dbUser = userService.login(user.getUsername(), user.getPassword());
            return ResponseEntity.ok(dbUser);
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(e.getMessage());
        }
    }
 
    @PostMapping("/register")
    public ResponseEntity<?> register(@RequestBody User user) {
        try {
            userService.register(user);
            return ResponseEntity.ok("注册成功");
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(e.getMessage());
        }
    }
}
 
@Service
public class UserService {
 
    @Autowired
    private UserMapper userMapper;
 
    public User login(String username, String password) {
        // 实现登录逻辑，返回用户信息或抛出异常
    }
 
    public void register(User user) {
        // 实现注册逻辑
    }
}
 
@Mapper
public interface UserMapper {
    User selectB