0基础搭建前后端分离项目：实现数据库账号密码登录

以下为具体实现方式✅ 前后端分离✅ 前端Vue2 Element UI✅ 后端Java Spring Boot MySQL✅ 功能注册 / 登录基于数据库校验✅ 使用 JWT推荐做法一、数据库设计MySQLCREATE DATABASE user_db CHARACTER SET utf8mb4; USE user_db; CREATE TABLE user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP );✅密码使用 BCrypt 加密存储二、后端Spring Boot1️⃣ 项目结构user-service ├── controller │ └── AuthController.java ├── service │ └── UserService.java ├── serviceImpl │ └── UserServiceImpl.java ├── mapper │ └── UserMapper.java ├── entity │ └── User.java ├── dto │ └── LoginDTO.java │ └── RegisterDTO.java ├── security │ └── JwtUtil.java └── UserApplication.java2️⃣ 实体类UserData public class User { private Long id; private String username; private String password; private LocalDateTime createTime; }3️⃣ DTOLoginDTOData public class LoginDTO { private String username; private String password; }RegisterDTOData public class RegisterDTO { private String username; private String password; }4️⃣ MapperMyBatisMapper public interface UserMapper { User findByUsername(String username); void insert(User user); }select idfindByUsername resultTypeUser SELECT * FROM user WHERE username #{username} /select insert idinsert useGeneratedKeystrue keyPropertyid INSERT INTO user(username, password) VALUES (#{username}, #{password}) /insert5️⃣ Servicepublic interface UserService { String login(LoginDTO dto); void register(RegisterDTO dto); }Service public class UserServiceImpl implements UserService { Autowired private UserMapper userMapper; Autowired private PasswordEncoder passwordEncoder; Override public String login(LoginDTO dto) { User user userMapper.findByUsername(dto.getUsername()); if (user null) { throw new RuntimeException(用户不存在); } if (!passwordEncoder.matches(dto.getPassword(), user.getPassword())) { throw new RuntimeException(密码错误); } return JwtUtil.generateToken(user.getUsername()); } Override public void register(RegisterDTO dto) { User exist userMapper.findByUsername(dto.getUsername()); if (exist ! null) { throw new RuntimeException(用户名已存在); } User user new User(); user.setUsername(dto.getUsername()); user.setPassword(passwordEncoder.encode(dto.getPassword())); userMapper.insert(user); } }6️⃣ ControllerRestController RequestMapping(/api/auth) public class AuthController { Autowired private UserService userService; PostMapping(/login) public MapString, Object login(RequestBody LoginDTO dto) { String token userService.login(dto); return Map.of(code, 200, token, token); } PostMapping(/register) public MapString, Object register(RequestBody RegisterDTO dto) { userService.register(dto); return Map.of(code, 200, msg, 注册成功); } }7️⃣ JWT 工具类public class JwtUtil { private static final String SECRET jwt-secret-key; public static String generateToken(String username) { return Jwts.builder() .setSubject(username) .setExpiration(new Date(System.currentTimeMillis() 3600_000)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } }8️⃣ 跨域配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) .allowedMethods(*) .allowedHeaders(*); } }三、前端Vue2 Element UI1️⃣ 登录页面template el-form :modelform label-width80px el-form-item label用户名 el-input v-modelform.username / /el-form-item el-form-item label密码 el-input typepassword v-modelform.password / /el-form-item el-button typeprimary clicklogin登录/el-button el-button clickgoRegister注册/el-button /el-form /template script import axios from axios export default { data() { return { form: { username: , password: } } }, methods: { async login() { const res await axios.post(http://localhost:8081/api/auth/login, this.form) localStorage.setItem(token, res.data.token) this.$message.success(登录成功) }, goRegister() { this.$router.push(/register) } } } /script2️⃣ 注册页面template el-form :modelform label-width80px el-form-item label用户名 el-input v-modelform.username / /el-form-item el-form-item label密码 el-input typepassword v-modelform.password / /el-form-item el-button typeprimary clickregister注册/el-button /el-form /template script import axios from axios export default { data() { return { form: { username: , password: } } }, methods: { async register() { await axios.post(http://localhost:8081/api/auth/register, this.form) this.$message.success(注册成功) this.$router.push(/login) } } } /script四、运行流程前端输入账号密码 ↓ POST /api/auth/login ↓ 后端查数据库 ↓ BCrypt 校验密码 ↓ 返回 JWT Token ↓ 前端保存 Token五、你可以继续扩展的功能✅ 登录拦截器Axios 统一携带 Token✅ Spring Security 权限控制✅ 密码强度校验✅ 邮箱 / 手机注册✅ 记住我 / 自动登录