基于SpringBoot和Vue3的博客平台的用户注册与登录功能实现

目录

• 1. 后端Spring Boot实现
• 1.1 创建Spring Boot项目
• 1.2 配置application.yml
• 1.3 实现后端API
• 1.3.1 创建User实体类
• 1.3.2 创建UserMapper接口
• 1.3.3 创建UserService接口及实现
• 2. 前端Vue3实现
• 2.1 创建Vue3项目
• 2.2 实现注册页面组件
• 2.3 实现登录页面组件
• 2.4 使用Vue Router配置路由
• 2.5 实现登录状态管理

本教程将指导您如何使用Spring Boot和Vue3实现用户注册与登录功能。我们将使用Spring Boot作为后端框架，Vue3作为前端框架，同时使用MySQL作为数据库。

1. 后端Spring Boot实现

首先，我们需要创建一个Spring Boot项目，并配置所需的依赖。

1.1 创建Spring Boot项目

通过Spring Initializr或者IDEA创建一个新的Spring Boot项目，选择以下依赖：

• Web
• MyBatis
• MySQL

1.2 配置application.yml

配置数据库连接信息、MyBatis配置等。

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/your_database?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC
    username: your_username
    password: your_password
  mybatis:
    mapper-locations: classpath:mapper/*.xml
    type-aliases-package: com.example.demo.entity
server:
  port: 8080

1.3 实现后端API

创建实体类、Mapper接口、Service接口及实现、Controller类。

1.3.1 创建User实体类

public class User {
    private Integer id;
    private String username;
    private String password;

    // Getter and Setter methods
}

1.3.2 创建UserMapper接口

@Mapper
public interface UserMapper {
    User findByUsername(String username);
    void insert(User user);
}

1.3.3 创建UserService接口及实现

public interface UserService {
    User findByUsername(String username);
    void register(User user);
}

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public User findByUsername(String username) {
        return userMapper.findByUsername(username);
    }

    @Override
    public void register(User user) {
        userMapper.insert(user);
    }
}

2. 前端Vue3实现

接下来，我们将使用Vue3实现前端部分。

2.1 创建Vue3项目

使用Vue CLI创建一个Vue3项目，并安装Element Plus、Axios等插件。

vue create my-project
cd my-project
vue add element-plus
npm install axios

2.2 实现注册页面组件

创建一个名为Register.vue的新组件，并添加以下内容：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";

export default {
  setup() {
    const form = reactive({ username: "", password: "" });

    const submitForm = async () => {
      try {
        await axios.post("/api/user/register", form);
        alert("注册成功");
      } catch (error) {
        alert("注册失败");
      }
    };

    return { form, submitForm };
  },
};
</script>

2.3 实现登录页面组件

创建一个名为Login.vue的新组件，并添加以下内容：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";

export default {
  setup() {
    const form = reactive({ username: "", password: "" });

    const submitForm = async () => {
      try {
        const response = await axios.post("/api/user/login", form);
        if (response.data.success) {
          alert("登录成功");
          // 保存登录状态
        } else {
          alert("登录失败");
        }
      } catch (error) {
        alert("登录失败");
      }
    };

    return { form, submitForm };
  },
};
</script>

2.4 使用Vue Router配置路由

安装Vue Router并配置路由：

vue add router

在src/router/index.js中添加注册和登录组件的路由：

import { createRouter, createWebHashHistory } from "vue-router";
import Register from "../views/Register.vue";
import Login from "../views/Login.vue";

const routes = [
  {
    path: "/register",
    name: "Register",
    component: Register,
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

现在，您可以在浏览器中通过访问/register和/login路由来查看注册和登录页面。

至此，您已经完成了基于Spring Boot和Vue3的用户注册与登录功能的实现。这个教

程仅作为一个简单示例，实际项目中可能还需要加入表单验证、错误处理、用户权限管理等功能。

接下来，我们将实现一个简单的登录状态管理。

2.5 实现登录状态管理

在src目录下创建一个名为store.js的文件，用于管理登录状态：

import { reactive } from "vue";

const state = reactive({
  user: null,
});

const setUser = (user) => {
  state.user = user;
};

const clearUser = () => {
  state.user = null;
};

export default {
  state,
  setUser,
  clearUser,
};

在登录页面组件中，将用户信息保存到store.js：

// 在Login.vue中导入store
import store from "../store";

// ...

const submitForm = async () => {
  try {
    const response = await axios.post("/api/user/login", form);
    if (response.data.success) {
      alert("登录成功");
      store.setUser(response.data.data);
      // 跳转到首页或其他页面
    } else {
      alert("登录失败");
    }
  } catch (error) {
    alert("登录失败");
  }
};

// ...

现在，您可以在其他组件中访问store.state.user来获取登录用户的信息。如果user为null，则表示用户尚未登录。

这是一个非常简单的登录状态管理实现。在实际项目中，您可以考虑使用更为复杂的状态管理库，如Vuex，以更好地管理应用程序的状态。

至此，您已经学会了如何使用Spring Boot和Vue3实现用户注册与登录功能，并简单实现了登录状态管理。希望本教程能对您的项目有所帮助！

到此这篇关于基于Spring Boot和Vue3的博客平台的用户注册与登录功能实现的文章就介绍到这了,更多相关Spring Boot Vue3文平台用户登录与注册内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！