springboot+mybatis+mysql+vue登陆页面代码

以下是一个简单的 Spring Boot + MyBatis + MySQL + Vue 登录页面的代码示例：

1. 前端Vue代码

<template>
  <div class="login">
    <h1>Login</h1>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button @click.prevent="login">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        alert('Please enter username and password');
        return;
      }

      axios.post('/api/login', {
        username: this.username,
        password: this.password,
      })
      .then(response => {
        if (response.data.success) {
          alert('Login successful');
          // Redirect to home page
          this.$router.push('/');
        } else {
          alert(response.data.message);
        }
      })
      .catch(error => {
        console.log(error);
        alert('Login failed');
      });
    },
  },
};
</script>

2. 后端Spring Boot代码

@RestController
@RequestMapping("/api")
public class LoginController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public Map<String, Object> login(@RequestBody LoginRequest request) {
        User user = userService.login(request.getUsername(), request.getPassword());
        if (user != null) {
            // Login successful
            Map<String, Object> result = new HashMap<>();
            result.put("success", true);
            return result;
        } else {
            // Login failed
            Map<String, Object> result = new HashMap<>();
            result.put("success", false);
            result.put("message", "Invalid username or password");
            return result;
        }
    }
}

@Data
class LoginRequest {
    private String username;
    private String password;
}

3. 数据库表结构

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

4. MyBatis Mapper接口

public interface UserMapper {
    @Select("SELECT * FROM user WHERE username = #{username} AND password = #{password}")
    User findByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
}

5. UserService实现

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public User login(String username, String password) {
        return userMapper.findByUsernameAndPassword(username, password);
    }
}

以上是一个简单的 Spring Boot + MyBatis + MySQL + Vue 登录页面的代码示例，仅供参考。