用SpringBoot + Vue打造前后端分离系统：用户注册登录实战指南

2024-02-18 04:01:49

前言

构建前后端分离应用无疑是我们每个人开发路上都必经的一门必修课，市面上也有很多成熟的前后端框架，我们完全可以选择自己喜欢的框架上手试一试。
当然想要将一个完整的前后端应用开发出来，我们需要做好准备，为了帮助大家进一步理解如何搭建SpringBoot+Vue的前后端分离项目，我们会在这里演示如何构建用户注册和登录的功能，希望能帮助大家对前后端分离系统搭建过程有更好的认知。

用户注册

对于用户注册，我们先来分析一下，用户注册需要哪些信息，在实际生产环境中，用户注册一般需要收集以下信息：

用户名
密码
邮箱
手机号码
验证码

为了方便演示，我们先来一个简化版的，只收集用户需要收集的两个信息：用户名和密码，当然，实际情况肯定会更加的复杂，需要收集的信息也会更加的多，需要你自己去扩展。

准备工作说完了，我们就可以开始编写代码了，这里我们假设大家已经会Java和JavaScript，所以我们会直接上代码，不会过多去介绍代码本身的含义，而是更加注重在功能讲解。

我们先来看一看后端的代码，这是我们User类的代码：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    // getters and setters
}

这是我们UserRepository的代码：

public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}

这是我们UserService的代码：

public interface UserService {
    User register(User user);
}

这是我们UserServiceImpl的代码：

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepository userRepository;

    @Override
    public User register(User user) {
        User existingUser = userRepository.findByUsername(user.getUsername());
        if (existingUser != null) {
            throw new RuntimeException("Username already exists");
        }
        return userRepository.save(user);
    }
}

这是我们 UserController的代码：

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public User register(@RequestBody User user) {
        return userService.register(user);
    }
}

前端代码，我们使用Vue.js来构建用户注册页面，这是我们的代码：

<template>
  <div class="register-page">
    <form @submit.prevent="register">
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="username">
      <label for="password">密码</label>
      <input type="password" id="password" v-model="password">
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    register() {
      this.$axios.post('/api/users/register', {
        username: this.username,
        password: this.password
      }).then(() => {
        this.$router.push('/login')
      })
    }
  }
}
</script>

用户登录

用户注册功能开发完了，我们再来看看用户登录应该怎么做，和注册过程类似，我们先来分析一下，用户登录需要哪些信息，在实际生产环境中，用户登录一般需要收集以下信息：

用户名
密码

当然，为了更加安全，我们也可以通过发送短信验证码的方式来实现登录。

同样的，我们先来一个简化版的，只收集用户需要收集的两个信息：用户名和密码，实际情况肯定会更加的复杂，需要收集的信息也会更加的多，需要你自己去扩展。

我们先来看一看后端的代码，这是我们User类的代码：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    // getters and setters
}

这是我们UserRepository的代码：

public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}

这是我们UserService的代码：

public interface UserService {
    User login(String username, String password);
}

这是我们UserServiceImpl的代码：

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepository userRepository;

    @Override
    public User login(String username, String password) {
        User user = userRepository.findByUsername(username);
        if (user == null) {
            throw new RuntimeException("User not found");
        }
        if (!user.getPassword().equals(password)) {
            throw new RuntimeException("Password is incorrect");
        }
        return user;
    }
}

这是我们 UserController的代码：

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public User login(@RequestBody LoginRequest loginRequest) {
        return userService.login(loginRequest.getUsername(), loginRequest.getPassword());
    }
}

前端代码，我们使用Vue.js来构建用户登录页面，这是我们的代码：

<template>
  <div class="login-page">
    <form @submit.prevent="login">
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="username">
      <label for="password">密码</label>
      <input type="password" id="password" v-model="password">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import { LoginRequest } from '@/api/dto/login-request'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      const loginRequest = new LoginRequest(this.username, this.password)
      this.$axios.post('/api/users/login', loginRequest).then(() => {
        this.$router.push('/')
      })
    }
  }
}
</script>