写个vue+springboot+mybatis的登录功能
时间: 2023-07-27 10:07:40 浏览: 97
好的,下面是一个简单的 Vue + Spring Boot + MyBatis 登录功能的示例:
1. 创建数据库表
首先需要创建一个用户表,用于存储用户的登录信息,例如用户名和密码。下面是一个简单的创建用户表的 SQL 语句:
```sql
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(64) NOT NULL,
`password` varchar(64) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
2. 创建 Spring Boot 项目
使用 Spring Initializr 创建一个新的 Spring Boot 项目,在 pom.xml 中添加以下依赖:
```xml
<dependencies>
<!-- Spring Boot Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- MyBatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.1</version>
</dependency>
<!-- MySQL Connector -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.23</version>
</dependency>
</dependencies>
```
3. 配置数据库连接
在 application.properties 中添加数据库连接信息:
```
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
```
4. 创建实体类和 DAO 接口
创建 User 实体类和 UserMapper 接口,用于操作用户表。实体类中的属性要与表中的字段对应。
```java
public class User {
private Integer id;
private String username;
private String password;
// 省略 getter 和 setter
}
@Mapper
public interface UserMapper {
User findByUsername(String username);
}
```
5. 实现 DAO 接口
创建 UserMapper.xml 文件,实现 UserMapper 接口中的方法。在这里,我们使用 MyBatis 提供的注解方式实现 SQL 语句。
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper">
<select id="findByUsername" resultType="com.example.demo.entity.User">
SELECT id, username, password
FROM user
WHERE username = #{username}
</select>
</mapper>
```
6. 创建控制器
创建 LoginController 控制器,用于处理登录请求。在这里,我们使用 @RestController 注解,表示这个控制器返回的是 JSON 格式的数据。
```java
@RestController
public class LoginController {
@Autowired
private UserMapper userMapper;
@PostMapping("/login")
public Result login(@RequestBody User user) {
User dbUser = userMapper.findByUsername(user.getUsername());
if (dbUser == null) {
return Result.fail("用户不存在");
} else if (!dbUser.getPassword().equals(user.getPassword())) {
return Result.fail("密码错误");
} else {
return Result.success("登录成功");
}
}
}
```
7. 创建 Vue 组件
创建一个 Login 组件,用于显示登录页面和处理登录请求。在这里,我们使用 axios 库发送登录请求,根据服务器返回的结果来显示不同的提示信息。
```html
<template>
<div>
<h1>登录</h1>
<form @submit.prevent="login">
<div>
<label for="username">用户名:</label>
<input id="username" v-model="username">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password">
</div>
<div>
<button type="submit">登录</button>
</div>
</form>
<div v-if="message">{{ message }}</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: '',
message: ''
}
},
methods: {
login() {
axios.post('/login', {
username: this.username,
password: this.password
}).then(response => {
this.message = response.data.message
}).catch(error => {
this.message = error.response.data.message
})
}
}
}
</script>
```
以上就是一个简单的 Vue + Spring Boot + MyBatis 登录功能的示例。当然,这只是一个最基础的实现,实际项目中还需要考虑安全性、用户体验等方面的问题。