当前位置：首页 > VUE

vue实现java登录注册

2026-02-21 19:41:46VUE

实现 Vue 前端与 Java 后端的登录注册功能

前端 Vue 实现

安装必要的依赖（如 axios）

npm install axios

创建登录和注册组件

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="login">登录</button>
    <button @click="register">注册</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      axios.post('http://localhost:8080/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    },
    register() {
      axios.post('http://localhost:8080/api/register', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

Java 后端实现

创建 Spring Boot 项目并添加依赖

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
  </dependency>
  <dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
  </dependency>
</dependencies>

创建用户实体类

@Entity
public class User {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  @Column(unique = true)
  private String username;

  private String password;

  // getters and setters
}

创建用户仓库接口

public interface UserRepository extends JpaRepository<User, Long> {
  User findByUsername(String username);
}

创建控制器

@RestController
@RequestMapping("/api")
public class AuthController {

  @Autowired
  private UserRepository userRepository;

  @PostMapping("/register")
  public ResponseEntity<String> register(@RequestBody User user) {
    if (userRepository.findByUsername(user.getUsername()) != null) {
      return ResponseEntity.badRequest().body("用户名已存在");
    }
    userRepository.save(user);
    return ResponseEntity.ok("注册成功");
  }

  @PostMapping("/login")
  public ResponseEntity<String> login(@RequestBody User user) {
    User existingUser = userRepository.findByUsername(user.getUsername());
    if (existingUser == null || !existingUser.getPassword().equals(user.getPassword())) {
      return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");
    }
    return ResponseEntity.ok("登录成功");
  }
}

配置跨域支持

在 Spring Boot 应用中添加配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/")
      .allowedOrigins("http://localhost:8081") // Vue 应用地址
      .allowedMethods("GET", "POST", "PUT", "DELETE")
      .allowedHeaders("*");
  }
}

数据库配置

在 application.properties 中添加

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update