当前位置：首页 > VUE

springboot vue实现登录

2026-01-18 16:23:24VUE

Spring Boot 和 Vue 实现登录功能

后端（Spring Boot）

创建 Spring Boot 项目
使用 Spring Initializr 创建一个项目，添加以下依赖：
- Spring Web
- Spring Security
- Spring Data JPA
- MySQL Driver

配置数据库
在 application.properties 或 application.yml 中配置数据库连接：

spring.datasource.url=jdbc:mysql://localhost:3306/your_database
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.jpa.hibernate.ddl-auto=update

创建用户实体和 Repository
定义用户实体类：

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    // Getters and Setters
}

创建 JPA Repository：

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

实现 Spring Security 配置
创建安全配置类：

springboot vue实现登录

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/auth/").permitAll()
            .anyRequest().authenticated();
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService()).passwordEncoder(passwordEncoder());
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

创建登录 API
实现登录接口：

@RestController
@RequestMapping("/api/auth")
public class AuthController {
    @Autowired
    private AuthenticationManager authenticationManager;

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
        try {
            Authentication authentication = authenticationManager.authenticate(
                new UsernamePasswordAuthenticationToken(
                    loginRequest.getUsername(),
                    loginRequest.getPassword()
                )
            );
            SecurityContextHolder.getContext().setAuthentication(authentication);
            return ResponseEntity.ok("Login successful");
        } catch (Exception e) {
            return ResponseEntity.status(401).body("Login failed");
        }
    }
}

前端（Vue）

创建 Vue 项目
使用 Vue CLI 创建项目：
```
vue create vue-login
```
安装 Axios
用于发送 HTTP 请求：
```
npm install axios
```

创建登录页面
在 src/views/Login.vue 中实现登录表单：

<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="username" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:8080/api/auth/login', {
          username: this.username,
          password: this.password,
        });
        alert(response.data);
      } catch (error) {
        alert('Login failed');
      }
    },
  },
};
</script>

配置路由
在 src/router/index.js 中配置登录页路由：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '../views/Login.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
  ],
});

运行项目
启动 Vue 项目：
```
npm run serve
```

跨域问题解决

在 Spring Boot 中配置跨域支持：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/")
            .allowedOrigins("http://localhost:8081")
            .allowedMethods("*")
            .allowedHeaders("*");
    }
}