以下是一个简单的 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
@Request
Mapping("/api")
public class LoginController {
@Autowired
private UserService userService;
@Post
Mapping("/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 Hash
Map<>();
result.put("success", true);
return result;
} else {
// Login failed
Map<String, Object> result = new Hash
Map<>();
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 User
Mapper {
@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 User
Mapper user
Mapper;
@Override
public User login(String username, String password) {
return user
Mapper.findByUsernameAndPassword(username, password);
}
}
```
以上是一个简单的 Spring Boot +
MyBatis +
MySQL + Vue 登录页面的代码示例，仅供参考。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
