vue java实现登录,vue 登录

要实现 Vue 和 Java 的登录功能，需要进行前后端分离的开发。以下是一个简单的示例代码：

前端 Vue 代码：

<template>
  <div>
    <form @submit.prevent="login">
      <label>用户名</label>
      <input type="text" v-model="username">
      <label>密码</label>
      <input type="password" v-model="password">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      const data = {
        username: this.username,
        password: this.password
      };
      axios.post('/api/login', data)
        .then(response => {
          // 登录成功，跳转到首页
          this.$router.push('/');
        })
        .catch(error => {
          // 登录失败，显示错误信息
          console.log(error.response.data);
        });
    }
  }
};
</script>

后端 Java 代码：

@PostMapping("/api/login")
public ResponseEntity<String> login(@RequestBody LoginRequest request) {
  // 验证用户名和密码是否正确，这里只是一个示例
  if ("admin".equals(request.getUsername()) && "123456".equals(request.getPassword())) {
    return ResponseEntity.ok("登录成功");
  } else {
    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");
  }
}

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

需要注意的是，这只是一个简单的示例代码，实际开发中还需要对用户名和密码进行加密处理，以提高安全性。另外，需要在后端进行跨域配置，以允许前端访问后端接口。