springboot+vue+mybatis-plus实现用户登陆注册
时间: 2023-10-05 16:14:35 浏览: 141
本文将介绍如何使用Spring Boot、Vue和MyBatis-Plus实现用户登录和注册功能。
1. 创建Spring Boot项目
首先,我们需要创建一个Spring Boot项目。可以使用Spring Initializr来创建基础项目。在创建项目时,需要添加Web、MyBatis、MySQL等依赖项。
2. 配置数据库连接
在src/main/resources/application.properties文件中,添加以下代码来配置数据库连接:
```
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
```
其中,url、username和password分别是数据库的连接地址、用户名和密码。
3. 创建数据库表
在MySQL数据库中创建一个名为user的表,包含以下字段:
```
id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL,
PRIMARY KEY (id)
```
4. 创建实体类和Mapper接口
创建一个名为User的实体类,并添加以下属性和方法:
```
public class User {
private Integer id;
private String username;
private String password;
// getter和setter方法
}
```
同时,创建一个名为UserMapper的Mapper接口,并添加以下方法:
```
public interface UserMapper extends BaseMapper<User> {
User selectByUsername(String username);
}
```
其中,selectByUsername方法用于根据用户名查询用户信息。
5. 创建Service和Controller类
创建一个名为UserService的Service类,并添加以下方法:
```
public interface UserService {
User login(String username, String password);
boolean register(User user);
}
```
创建一个名为UserController的Controller类,并添加以下方法:
```
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/login")
public Result<User> login(@RequestBody User user) {
User loginUser = userService.login(user.getUsername(), user.getPassword());
if (loginUser != null) {
return Result.success(loginUser);
} else {
return Result.error("用户名或密码错误");
}
}
@PostMapping("/register")
public Result<Boolean> register(@RequestBody User user) {
boolean success = userService.register(user);
if (success) {
return Result.success(true);
} else {
return Result.error("用户名已存在");
}
}
}
```
其中,login方法用于处理用户登录请求,register方法用于处理用户注册请求。
6. 创建Vue项目
使用Vue CLI创建一个名为user-management的Vue项目:
```
vue create user-management
```
7. 配置请求代理
在vue.config.js文件中,添加以下代码来配置请求代理:
```
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
```
其中,target指定了后端的地址和端口号。
8. 创建登录和注册页面
在src/views目录下,创建Login.vue和Register.vue两个组件,分别用于显示登录和注册页面。在这两个组件中,可以使用axios库来发送请求。
9. 测试
启动后端服务和Vue应用,访问http://localhost:8080和http://localhost:8080/api/user/login可以测试登录功能,访问http://localhost:8080/api/user/register可以测试注册功能。