一、注册
1.后端
在pom.xml文件中加入
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-crypto</artifactId>
</dependency>lombok依赖
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>创建一个用户实体类（User）来存储用户信息.
package com.test.pojo;
//使用lombok需要导入依赖
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
}创建一个用于注册的接口（RegisterController），在该接口中，将接收到的密码进行bcrypt加密后保存到数据库中。
package com.test.controller;
import com.test.pojo.User;
import com.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class RegisterController {
@Autowired
private UserService userService;
@PostMapping("/register")
public String register(@RequestBody User user) {
// 创建bcrypt密码编码器
BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
// 对密码进行bcrypt加密
String encryptedPassword = passwordEncoder.encode(user.getPassword());
// 更新用户对象的密码为加密后的密码
user.setPassword(encryptedPassword);
// 保存用户到数据库
userService.save(user);
return "注册成功";
}
}前端
<template>
<div>
<input type="text" v-model="username" placeholder="Username">
<input type="password" v-model="password" placeholder="Password">
<button @click="register">Register</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
register() {
// 发送注册请求到后端
axios.post('http://localhost:8080/register', {
username: this.username,
password: this.password
})
.then(response => {
console.log(response.data);
// 注册成功的处理逻辑
})
.catch(error => {
console.error(error);
// 注册失败的处理逻辑
});
}
}
};
</script>运行结果
二.登录
后端
package com.test.controller;
import com.test.pojo.User;
import com.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class LoginController {
@Autowired
private UserService userService;
@PostMapping("/login")
public String login(@RequestBody User user) {
// 根据用户名从数据库中获取用户信息
User storedUser = userService.findByUserName(user.getUsername());
if (storedUser == null) {
return "User not found";
}
// 创建bcrypt密码编码器
BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
// 对用户输入的密码与数据库中的密码进行比对
if (passwordEncoder.matches(user.getPassword(), storedUser.getPassword())) {
return "Login successful";
} else {
return "Invalid credentials";
}
}
}前端
<template>
<div>
<input type="text" v-model="username" placeholder="Username">
<input type="password" v-model="password" placeholder="Password">
<button @click="login">Login</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 发送登录请求到后端
axios.post('http://localhost:8080/login', {
username: this.username,
password: this.password
})
.then(response => {
console.log(response.data);
// 登录成功的处理逻辑
})
.catch(error => {
console.error(error);
// 登录失败的处理逻辑
});
}
}
};
</script>
运行结果
注:若SpringBoot和Vue前后端无法实现交互，请看:SpringBoot与Vue前后端交互问题