开发者

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

开发者 https://www.devze.com 2023-04-11 11:02 出处:网络 作者: SYBH.
目录1. 后端Spring Boot实现1.1 创建Spring Boot项目1.2 配置application.yml1.3 实现后端API1.3.1 创建User实体类1.3.2 创建UserMapper接口1.3.3 创建UserService接口及实现2. 前端vue3实现2.1 创建Vue3项目2.2 实现
目录
  • 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 创建Vuwww.devze.come3项目

            使用Vue CLI创建一个Vue3项目,并js安装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("注册失败"python);
                  }
                };
             
                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&开发者_开发学习gt;
            </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.http://www.devze.comuser = 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("登录失败");
              }
            };
             
            // ...

            现在,您可以在其他组件中访问st编程客栈ore.state.user来获取登录用户的信息。如果user为null,则表示用户尚未登录。

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

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

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

            0

            精彩评论

            暂无评论...
            验证码 换一张
            取 消

            关注公众号