运用vue+springboot写一个登陆功能

好的，下面是一个简单的登录功能的实现。

首先，我们需要创建一个前端界面，使用Vue框架实现。在Vue组件中，我们可以使用v-model指令来绑定表单中的数据，使用axios库向后端发送请求。

<template>
  <div>
    <form>
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="button" @click="login">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

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

接下来，我们需要创建一个后端接口，使用Spring Boot框架实现。在后端代码中，我们可以使用@RequestBody注解将前端发送的JSON数据转换为Java对象，使用@RestController注解来标记Controller类。

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

  @PostMapping("/login")
  public ResponseEntity<?> login(@RequestBody LoginForm loginForm) {
    // 检查用户名和密码是否正确，这里省略实现
    if (loginForm.getUsername().equals("admin") && loginForm.getPassword().equals("admin123")) {
      return ResponseEntity.ok().body("登录成功");
    } else {
      return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用户名或密码错误");
    }
  }

}

最后，我们需要创建一个LoginForm类来保存前端发送的用户名和密码。

public class LoginForm {

  private String username;
  private String password;

  // 省略Getter和Setter方法

}

这样，我们就完成了一个简单的登录功能的实现。当用户点击登录按钮时，前端会向后端发送一个POST请求，后端会检查用户名和密码是否正确，然后返回相应的结果。如果登录成功，前端可以根据返回的结果进行相应的跳转或其他操作。