使用springboot和Vue实现一个登陆界面的前后端所有代码

很抱歉，由于篇幅限制，无法一次提供完整的前后端代码。但我可以给你一个基本的代码示例，供你参考：

后端代码（使用Spring Boot）：

// UserController.java

@RestController
@RequestMapping("/api")
public class UserController {
    
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
        // 验证用户名和密码逻辑
        // ...
        
        // 如果验证通过，生成JWT令牌
        String token = generateJwtToken(userDetails);
        
        // 返回成功登录的响应
        return ResponseEntity.ok(new LoginResponse(token));
    }
    
    private String generateJwtToken(UserDetails userDetails) {
        // 生成JWT令牌的逻辑
        // ...
    }
}

// LoginRequest.java

public class LoginRequest {
    private String username;
    private String password;
    
    // getter和setter方法
}

// LoginResponse.java

public class LoginResponse {
    private String token;
    
    public LoginResponse(String token) {
        this.token = token;
    }
    
    // getter方法
}

// SecurityConfig.java

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Autowired
    private UserDetailsService userDetailsService;
    
    @Autowired
    private JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;
    
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
    }
    
    @Bean
    public JwtAuthenticationFilter jwtAuthenticationFilter() {
        return new JwtAuthenticationFilter();
    }
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .authorizeRequests()
                .antMatchers("/api/login").permitAll()
                .anyRequest().authenticated()
                .and()
                .exceptionHandling().authenticationEntryPoint(jwtAuthenticationEntryPoint)
                .and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        
        http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
    }
    
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

前端代码（使用Vue）：

<!-- Login.vue -->

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      message: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .then(response => {
        // 登录成功，处理响应
        const token = response.data.token;
        // 保存token到本地存储或cookie等
        // ...
      })
      .catch(error => {
        // 处理登录失败的响应
        this.message = error.response.data.message;
      });
    }
  }
};
</script>

<!-- main.js -->

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

请注意，上述代码只提供了基本的登录逻辑和代码结构，实际项目中可能需要根据具体需求进行适当的修改和扩展。同时，也需要配置好前后端的环境和依赖项。希望这个示例能够帮助你开始构建登录界面。