基于SpringBoot+Vue实现基础登录注册功能模块（超详细）

已于 2024-06-21 08:16:13 修改
阅读量899 收藏 18
点赞数 15
文章标签： spring boot 后端 java 前端框架 vue.js ajax
于 2024-05-24 23:29:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JYT20031003/article/details/139183136
版权

一.登录注册实现思路

实现注册功能分为以下几个步骤：

  1. 设计数据库用户表：包含，用户ID，用户名，用户密码等字段。
  2. 创建SpringBoot项目：使用https://start.spring.io/官网创建或者Idea里面直接创建，并添加相关依赖，如：MySQL Driver，Spring Web 。
  3. 编写实体类：根据数据库表结构编写相应的实体类，用于映射数据库表。
  4. 编写Controller：创建Controller来处理用户的登录和注册请求。Controller接收请求参数，调用Service层方法完成相应的业务逻辑。
  5. 编写Service层：创建一个Service层，包含业务逻辑，比如验证用户登录，注册新用户等。在这个层次你可以加入密码加密、验证等逻辑。
  6. 编写Mapper接口：创建Controller来处理用户的登录和注册请求。Controller接收请求参数，调用Service层方法完成相应的业务逻辑。
  7. 编写前端vue3页面:创建Vue页面用于用户登录和注册。可以使用表单来收集用户信息，并通过Axios来发送数据到后端。

二.后端具体实现步骤

1.设计并创建数据库表

ac37231f6e10482e97f4bf24b30a5bea.png

2. 创建SpringBoot项目

158c0a3565324fc8a43f9dd3d870844a.png

3.在pom.xml添加依赖 

<!--    web依赖-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

<!--    mybatis依赖-->
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>3.0.0</version>
    </dependency>

<!--    mysql驱动依赖-->
    <dependency>
      <groupId>com.mysql</groupId>
      <artifactId>mysql-connector-j</artifactId>
    </dependency>

<!--      lombok依赖,可将实体类getter,setter,toString,equals,hashCode自动生成-->
      <dependency>
          <groupId>org.projectlombok</groupId>
          <artifactId>lombok</artifactId>
      </dependency>

4.连接数据库 

将项目中的application.properties文件改成application.yml ，并添加如下配置连接数据库

 0c70e3c8a8c14d8c91e6a5083c2f4e6c.png

5.编写实体类 

package com.example.demo.pojo;
import lombok.Data;
@Data       // 自动生成getter/setter/toString/hashCode/equals等方法
public class User {
    private Integer id;
    private String username;
    private String password;
}

6. 创建统一返回结果类

package com.example.demo.Result;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class Result<T> {
    private Integer code;
    private String message;
    private T data;

    public static <E> Result<E> success (E data) {
        return new Result<>(0,"操作成功",data);
    }

    public static Result success() {
        return new Result(0,"操作成功",null);
    }

    public static Result error(String message) {
        return new Result(1,message,null);
    }


}

7.创建Controller  

@RestController
@RequestMapping("/user")
@CrossOrigin //解决跨域问题
public class UserController {
    //注入userService
    @Autowired
    private UserService userService;

    /**
     * 用户注册接口
     * @param user 包含用户名和密码的用户对象，通过RequestBody接收前端传来的JSON数据
     * @return 返回注册结果，如果用户名不存在，则返回注册成功结果；否则返回错误信息
     * 对参数没有进行验证，仅用于演示
     */
    @PostMapping("/register")
    public Result register (@RequestBody User user) {
        String uname = user.getUsername();
        String psw = user.getPassword();
        User byuser =  userService.findByUser(uname);
        //查询数据库判断该用户是否存在
        if (byuser == null){
            //不存在则注册成功，将用户名和密码添加到数据库中
            userService.register(uname,psw);
            return Result.success("注册成功！");
        }
        return Result.error("用户名已被占用！");
    }

    /**
     * 用户登录接口
     * @param user 包含用户名和密码的用户对象，通过RequestBody接收前端传来的JSON数据
     * @return 返回登录结果，如果用户名正确且密码匹配，则返回登录成功结果；否则返回错误信息
     * 此登陆接口没有涉及对密码的加密，因此仅用于演示，在实际应用中应使用加密技术保护密码
     * 也没有设计token，因此登录成功后，用户无法退出，需要手动关闭浏览器或重新打开浏览器
     */
    @PostMapping("/login")
    public Result log(@RequestBody User user){
        // 提取用户名和密码
        String uname = user.getUsername();
        String pword = user.getPassword();
        // 根据用户名查找用户
        User byUser = userService.findByUser(uname);
        if (byUser == null){
            // 如果用户名不存在，则返回用户名错误信息
            return Result.error("用户名错误");
        }
        if (pword.equals(byUser.getPassword())){
            // // 如果密码匹配，则登录成功
            return Result.success();
        }
        // 如果密码不匹配，则返回密码错误信息
        return Result.error("密码错误！");
    }
}

 

8.创建service层接口 

public interface UserService {
    //根据用户名查询数据库
    User findByUser(String uname);
    //注册  将用户名和密码添加到数据库中
    void register(String uname, String psw);
}

9.创建servicelmpl接口实现类

@Service
public class UserServiceimpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public User findByUser(String uname) {
        User u = userMapper.findByUser(uname);
        return u;
    }

    @Override
    public void register(String uname, String psw) {
        userMapper.add(uname,psw);
    }
}

10.编写Mapper接口

@Mapper
public interface UserMapper {
    //查询
    @Select("select * from users where username = #{uname}")
    User findByUser(String uname);
    //新增
    @Insert("insert into users(username, password)" +"values  (#{uname},#{psw})")
    void add(String uname, String psw);
}

三.前端实现步骤

1.创建Vue项目，安装axios，具体安装如下

使用 npm:

npm install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

推荐使用npm安装

2.前端具体代码如下 

前端部分没有做过多页面效果，仅用于演示功能部分

注册： 

<script setup>
import { ref } from "vue";
// 导入axios
import axios from "axios";
import {ElMessage } from "element-plus";

const formModel = ref({
  username: "",
  password: "",
});

const form = ref();

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 10, message: "用户名必须是 5-10位 的字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { message: "密码必须是 6-15位 的非空字符", trigger: "blur" },
  ],
};

const reset = () =>{
    formModel.value.username='',
    formModel.value.password=''
}

const onSubmit = async () => {
  console.log(1111);
  await form.value.validate()
  const res =  await axios.post('http://localhost:8080/user/register', formModel.value)
  if(res.data.code == 0){
        ElMessage.success("注册成功！")
        reset()
    }else{
        ElMessage.error(res.data.message)
    }
}
</script>

<template>
  <div style="width: 400px">
    <el-form
      :model="formModel"
      :rules="rules"
      ref="form"
      size="large"
      autocomplete="off"
      label-width="50px"
    >
      <el-form-item>
        <h1 style="margin: 0 auto">注册</h1>
      </el-form-item>
      <el-form-item prop="username" label-width="50px">
        <el-input
          v-model="formModel.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formModel.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
</style>

登录：

<script setup>
import { ref } from "vue";
// 导入axios
import axios from "axios";
import {ElMessage } from "element-plus";

const formModel = ref({
  username: "",
  password: "",
});

const form = ref();

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 10, message: "用户名必须是 5-10位 的字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { message: "密码必须是 6-15位 的非空字符", trigger: "blur" },
  ],
};

const reset = () =>{
    formModel.value.username='',
    formModel.value.password=''
}

const onSubmit = async () => {
  console.log(1111);
  await form.value.validate()
  const res =  await axios.post('http://localhost:8080/user/login', formModel.value)
  if(res.data.code == 0){
        ElMessage.success("登录成功！")
        reset()
    }else{
        ElMessage.error(res.data.message)
    }
}
</script>

<template>
  <div style="width: 400px">
    <el-form
      :model="formModel"
      :rules="rules"
      ref="form"
      size="large"
      autocomplete="off"
      label-width="50px"
    >
      <el-form-item>
        <h1 style="margin: 0 auto">登录</h1>
      </el-form-item>
      <el-form-item prop="username" label-width="50px">
        <el-input
          v-model="formModel.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formModel.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
</style>

！！！注意：Vue3前端在页面中一定要进行axios的导入 import axios from "axios"

后端整体项目结构如下

99247b202da4400ea97cc7030a0c932c.png

 

 

Foreveres@
关注
  • 15
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot 3 + Vue 3实战：实现用户登录功能
howard2005的专栏
01-14 2676
该实战通过前后端分离方式，构建基于Vue.js与Spring Boot的登录系统。前端完成项目创建、页面组件开发和路由配置；后端搭建Spring Boot服务，设计实体类并实现登录控制器。整合阶段测试用户登录功能，确保前后端交互正常。
搭建博客平台:基于Spring Boot和Vue3的用户注册与登录功能实现
sybh的博客
04-05 1161
但见一个属于自己的博客平台:本教程将指导您如何使用Spring Boot和Vue3实现用户注册与登录功能。我们将使用Spring Boot作为后端框架，Vue3作为前端框架，同时使用MySQL作为数据库。
微服务系列文章之 Springboot+Vue实现登录注册
Coder_Boy_的博客
08-14 3280
分为三个包，分别为controller，service， dao以及resource目录下的xml文件。User.java （我安装了lombok插件）配置cnpm仓库，下载的时候可以快一些。输入账号密码，实现简单的注册，登录功能。安装node，npm，配置环境变量。创建springBoot项目。修改项目文件，按照如下结构。数据库需要建相应得到表。
手把手帮助你通过Vue+Springboot+MybatisPlus实现一个简单的登录注册页面，0基础
m0_51497018的博客
03-20 2996
Vue+Springboot+MybatisPlus实现一个简单的登录注册页面，0基础
Spring Boot实现简单的登录注册功能
最新发布
weixin_73850357的博客
05-14 1619
我们需要用到的SQL语句（可复制备用）。首先打开IDEA配置数据源，选择自己的数据库软件（以MySQL为例）。填写用户名和密码，数据库名可不填，在sql语句中会帮我们创建一个名为big_event的数据库，填写完成后可点击测试连接看输入的用户名和密码是否有误。弹出下图即表示成功，可点击确定。在弹出的console界面将准备好的SQL语句粘贴进去，点击左上角运行，即可成功创建数据库和表。
实战11:SpringBoot和Vue实现登录、注册和异常处理
shieryue_2016的博客
12-09 1012
【代码】实战11:SpringBoot和Vue实现登录、注册和异常处理。
SpringBoot实现基本的用户登录功能
hl1233的博客
08-10 919
判断请求不为空后，则开始判断传输过来的账号和密码是否为空，空则抛出异常， 若不为空，则进入service层进入下一步操作，若登录成功，会返回一个脱敏的用户类LoginUserVo，然后再将其包装在返回工具类ResultUtils类中返回给前端。UserLoginVo类是为了给用户脱敏，因为不能返回给用户返回一些比较关键的属性，如用户id，因此需要对User类进行一些删减，生成一个新的不带重要信息的类返回给前端。用户登录只需传输用户账号和密码，将其封装成一个请求类。集成了MP后，不需要自己操作了。
springboot实现简单的注册登录功能
热门推荐
Java721的博客
02-22 2万+
spring官网 通过spring官网初始化SpringBoot项目 使用idea工具打开Springboot项目，项目结构 添加pom依赖 <!--springboot启动类--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId>
Vue+SpringBoot项目开发：登录页面美化，登录功能实现（三）
u010679782的博客
08-11 2275
上一章写了这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联，实现一个登陆的功能，跳转到首页现在前端项目的一个结构目录。
springboot项目注册登录功能
nlhkfcdxb的博客
09-27 930
springboot
基于spring-boot和vue的项目实现登录与注册功能
m0_74769555的博客
05-12 462
通过本次的学习，大概掌握了注册和登录的功能的实现，但是只是看会了，在之后的学习中要自己创建属于自己的项目，到时候再进行查缺补漏。
springboot+mybatis整合实现注册登录
01-21
springboot+mybatis整合，利用配置文件生成实体类以及操作数据库的方法，实现后台接收验证码，注册登录功能
idea+springboot+MySQL+jdk1.8实现简单的注册登录功能
02-06
idea+springboot+MySQL+jdk1.8实现简单的注册登录功能，本代码从最简单的spring boot架构实现登录注册，适合新手拿去练手！
springboot的一个简单注册登录demo
03-18
springboot的一个简单注册登录demo，新手随便写的，也给新手参考下。
java基于springboot+vue的博客网站论文
06-08
java基于springboot+vue的博客网站论文 目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 B/S架构 4 2.2 Java技术介绍 6 2.3 mysql...
基于springboot+vue的旅游管理系统源码+数据库（毕业设计）
04-23
基于springboot+vue的旅游管理系统源码+数据库.zip已获导师指导并通过的高分项目。下载即可使用，无需修改，确保可以直接运行！ 本项目是一套基于springboot+vue的旅游管理系统，主要针对计算机相关专业的正在做毕设...
基于Springboot+vue+mysql的人力资源管理系统设计与实现（源码+文档）.zip
04-27
资源名字：基于Springboot+vue+mysql的人力资源管理系统设计与实现（源码+文档）.zip 资源内容：项目全套源码+完整文档 源码说明： 全部项目源码都是经过测试校正后百分百成功运行。 包含模块： 第4章系统实现 4.1...
Java毕业设计：基于SpringBoot+Vue前后分离的社区健康疫情防控系统源码.zip
05-23
基于SpringBoot+Vue前后分离的社区健康疫情防控系统。系统前台使用了优秀的移动端UI框架Vant进行界面的美化，非常适合在移动端设备上进行操作。系统后台使用Shiro进行权限的管理，可动态分配管理权限。 1. 项目说明 ...
基于Springboot+mybatis+mysql+vue实现企业注册模块功能
07-05
系统介绍 该系统实现简单的企业信息注册，保存后，提示注册成功 详情：https://blog.csdn.net/qq_33037637/article/details/125613097
基于SpringBoot+vue留守儿童捐赠平台的功能模块及业务
03-31
流程 1. 用户注册登录模块：用户通过注册登录功能，可以成为平台的注册用户，注册成功后可以使用平台提供的其他功能。 2. 捐赠信息发布模块：用户可以发布自己的捐赠信息，包括捐赠的物品、数量、地点等信息，平台会将这些信息展示在捐赠信息列表中，供其他用户浏览。 3. 捐赠信息查看模块：用户可以浏览平台上其他用户发布的捐赠信息，了解当前需要捐赠的物资和地点，方便做出自己的捐赠决策。 4. 捐赠信息管理模块：平台管理员可以对用户发布的捐赠信息进行管理，包括审核、修改、删除等操作。 5. 捐赠记录模块：用户可以查看自己的捐赠记录，了解自己的捐赠历史和对社会做出的贡献。 6. 捐赠流程模块：当用户确定要捐赠物品时，平台会提供捐赠流程指引，包括捐赠物品的准备、捐赠物品的送达、捐赠物品的验收等步骤，让用户了解捐赠的流程和注意事项。 7. 捐赠统计模块：平台会对捐赠记录进行统计，包括捐赠物品的种类和数量、捐赠物品的地点和时间等信息，为平台管理员提供决策参考。 8. 捐赠反馈模块：用户可以在捐赠完成后对捐赠体验进行反馈，让平台了解用户的意见和建议，以便提升服务质量。 9. 捐赠公益活动模块：平台会定期组织公益活动，让用户参与其中，了解留守儿童的生活和需要，提高社会责任感和爱心。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值