SpringBoot实现登陆注册(附源码)

这篇具有很好参考价值的文章主要介绍了SpringBoot实现登陆注册(附源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

此项目前端由html+css+vue(发送请求)组成,后端由springboot进行处理请求,相关数据库操作语句选用的是mybatis-plus

        先看看我的项目总结吧:

先说完美的吧,因为前端登陆注册界面是之前的,这次就复制了一下,在前端部分仅书写了一些vue,使用v-model绑定username以及password,发送axios请求,后端那部分因为使用的是mybatis-plus,也没有编写一些sql语句,当然,这些sql语句也不是很复杂的,有时间的小伙伴可以直接试着编写,或在我这基础上进行修改,controller层的话,就是一些逻辑语句,例如:登陆时先判断数据库中是否存在该用户,若存在再进行密码比对,注册时则是先判断用户是否已经注册,存在数据库中,若不存在再让其进行注册。总而言之,此项目花费不到四十分钟,总体还是不错对于新手小白来说,我认为困难的部分则是在前后端交互那个地方,存在一些差异,二者的数据格式不统一。

        不足的地方,就是界面过于简单,没有啥js效果,效果非常直接,以及vue发送请求需要多加练习。

先看项目运行后主界面效果:

登陆界面如下:

springboot登录注册功能,spring boot,java,mybatis

注册界面如下:

springboot登录注册功能,spring boot,java,mybatis

 

项目目录结构如下:

springboot登录注册功能,spring boot,java,mybatis

 

1.数据库中表的设计

1.1 创建一个表其中有两个字段一个用户名(varcahr类型,primary key)一个密码(varchar类型)

1.2 表结构如下所示

springboot登录注册功能,spring boot,java,mybatis

2.需要导入的jar包(pom.xml文件)以及相关配置设置(数据库信息以及端口)

2.1文件具体相关代码如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wz</groupId>
    <artifactId>LogAndRegister</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>LogAndRegister</name>
    <description>LogAndRegister</description>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.2数据库信息以及端口

server:
  port: 81
spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/logandregister
      username: root
      password: 111111

3.后端相关代码的编写

 3.1 后端返回给前端的信息封装在R类中



@Data
public class R<T> {

    private Integer code; //编码:1成功,0和其它数字为失败

    private String msg; //错误信息

    private T data; //数据

    private Map map = new HashMap(); //动态数据

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }

}

3.2 User实体类(即用户的信息(账号密码))


@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

3.3 Controller(控制层相关代码,处理前端发送的请求)


@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {

    @Autowired
    private UserService userService;
    @PostMapping("/login")
    public R<String> login(@RequestBody User user){
        log.info("user:{}",user);
        LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();
        lqw.eq(User::getUsername,user.getUsername());
        User one = userService.getOne(lqw);
        System.out.println(one);
        // 查询不到用户
        if (one == null){
            return R.error("用户账号不存在");
        }
        // 密码错误
        if(!one.getPassword().equals(user.getPassword())){
            return R.error("密码错误");
        }
        return R.success("登陆成功");
    }
    @PostMapping("/register")
    public R<String> register(@RequestBody User user){
        log.info("user:{}",user);
        // 判断前端传来的数据是否正常
        if (user==null){
            return R.error("请输入注册信息");
        }
        // 判断账号是否存在
        String username = user.getUsername();
        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(User::getUsername,username);
        User one = userService.getOne(lambdaQueryWrapper);
        if (one!=null){
            return R.error("用户账号已注册");
        }
        // 二者都满足则以下
        userService.save(user);
        return R.success("注册成功");

    }

}

3.4 Mapper层相关代码


@Mapper
public interface UserMapper extends BaseMapper<User> {
}

3.5 定义的Service接口代码


public interface UserService extends IService<User> {
}

3.6实现Service接口的实现类

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

4.前端相关代码

4.1 登陆界面login.html(包含vue发送请求)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form  id="form" >
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text" v-model="userName"></p>
        <p>Password:<input id="password" name="password" type="password" v-model="passWord"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up" @click="login">
            <input type="reset" class="button" value="reset" >
            <a href="register.html">没有账号?点击注册</a>
        </div>
    </form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#loginDiv",
        data: {
            userName: "",
            passWord: "",
        },
        methods: {
            login:function (){
                console.log(this.userName,this.passWord);
                axios.post('http://localhost:81/user/login',
                    {
                    username: this.userName,
                    password: this.passWord,
                }).then( resp=> {
                    console.log(resp)
                    if (resp.data.code == '1') {
                        window.location.href = 'loginSuccess.html';
                    }else {
                        alert("账号或密码错误");
                        this.userName='';
                        this.passWord='';
                        }
                    })
                }
        }
    })
</script>
</body>
</html>

4.2 注册界面register.html(包含vue发送请求)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号?</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" v-model="userName">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" v-model="passWord">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn" @click="register">
        </div>
        <br class="clear">
    </form>

</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#reg-form",
        data: {
            userName: "",
            passWord: "",
        },
        methods: {
            register: function () {
                console.log(this.userName, this.passWord);
                axios.post('http://localhost:81/user/register',
                    {
                        username: this.userName,
                        password: this.passWord,
                    }).then(resp => {
                    console.log(resp)
                    if (resp.data.code == '1') {
                        alert(resp.data.data);
                        window.location.href = 'login.html';
                    } else {
                        console.log(resp.data.data);
                        alert(resp.data.data);
                        this.userName = '';
                        this.passWord = '';
                    }
                })
            }
        }
    })
</script>
</body>
</html>

5.项目完毕总结

        先说完美的吧,因为前端登陆注册界面是之前的,这次就复制了一下,在前端部分仅书写了一些vue,使用v-model绑定username以及password,发送axios请求,后端那部分因为使用的是mybatis-plus,也没有编写一些sql语句,当然,这些sql语句也不是很复杂的,有时间的小伙伴可以直接试着编写,或在我这基础上进行修改,controller层的话,就是一些逻辑语句,例如:登陆时先判断数据库中是否存在该用户,若存在再进行密码比对,注册时则是先判断用户是否已经注册,存在数据库中,若不存在再让其进行注册。总而言之,此项目花费不到四十分钟,总体还是不错对于新手小白来说,我认为困难的部分则是在前后端交互那个地方,存在一些差异,二者的数据格式不统一。

        不足的地方,就是界面过于简单,没有啥js效果,效果非常直接,以及vue发送请求需要多加练习。

有需要的小伙伴可以后台私信我发源码哦,码文不易,小伙伴可以点个赞哦!!!

        文章来源地址https://www.toymoban.com/news/detail-679191.html

到了这里,关于SpringBoot实现登陆注册(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Springboot实现登录注册

    功能:1、实现用户的登录 2、实现用户的注册以及重名的判断 LoginControl: RegisterControl: UserInfDaoInterface: UserInf: UserInfService: UserInfServiceInterface: DemoApplication: application.properties: login.jsp login_success.jsp login_failure register.jsp register_success.jsp register_failure register_failure_user pom.

    2024年02月03日
    浏览(34)
  • SpringBoot + layui 框架实现一周免登陆功能

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:SpringBoot 框架从入门到精通 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:SpringBoot +

    2024年02月10日
    浏览(28)
  • Vue+SpringBoot项目开发:后台登陆功能的实现(二)

    项目搭建传送门:从零开始,SpringBoot项目快速搭建 在本地mysql数据库新建库,库名:vue_demo,(数据库名字可自行更改,更改完记得在pom.xml中也同步更改) 项目结构 下面是具体文件的代码 pom.xml 返回实体类封装ResultBody ResultBody.java 用户实体类 User.java 登录方法入参 LoginReq.

    2024年02月13日
    浏览(44)
  • springboot使用 WxJava 实现 微信小程序(uniapp开发)的登陆功能

    前端使用uniapp来开发微信小程序 后端springboot中使用WxJava来做服务端( WxJava是微信服务端开发 的Java SDK ) 该图来源于微信小程序官方文档 根据uniapp的官网直接通过它提供的第三方 登陆api直接使用,代码如下 直接根据WxJava的官方demo (1) yml配置 (2)两个配置文件 (3)contro

    2024年02月15日
    浏览(51)
  • 【业务功能篇96】微服务-springcloud-springboot-认证服务-登录注册功能-Auth2.0-分布式session

      通过最基础的登录操作来完成登录处理 登录页面处理 认证服务的处理 会员中心的认证逻辑 service中的具体认证处理   OAuth2.0是OAuth协议的延续版本,但不向前兼容OAuth 1.0(即完全废止了OAuth1.0)。 OAuth 2.0关注客户端开发者的简易性。要么通过组织在资源拥有者和HTTP服务商

    2024年02月09日
    浏览(54)
  • 手把手教你制作登录、注册界面 SpringBoot+Vue.js(cookie的灵活运用,验证码功能)

    实现思路:用户在界面输入用户名和密码传入变量。用post方法传输到后端,后端接收整个实体对象。将用户名提取出。在dao层方法中通过select注解查询,返回数据库对应的数据对象。如果返回为空则return false。不为空则通过比对数据库返回的密码和用户输入的密码,如果二者

    2024年02月03日
    浏览(52)
  • 微服务系列文章之 Springboot+Vue实现登录注册

    一、springBoot 创建springBoot项目   分为三个包,分别为controller,service, dao以及resource目录下的xml文件。 添加pom.xml 依赖 UserController.java   UserService.java   User.java (我安装了lombok插件)   UserMapper.java   UserMapper.xml   主干配置 application.yaml   数据库需要建相应得到表 1 2 3 4 CREA

    2024年02月13日
    浏览(36)
  • springboot+vue+elementsUI 实现分角色注册登录界面

    一、项目简介 一共分为三个角色:管理员、用户、设计师 登录功能:账号+密码+身份选择,登录成功后跳转到各身份对应的页面 注册功能:只允许用户和设计师注册,用户可以直接注册成功,设计师提交材料后注册需要管理员审核成功后方可注册成功。 注册页面要求必填:

    2024年02月07日
    浏览(40)
  • springboot实现登录功能

    springboot实现登录功能需完成以下步骤: 实现springboot启动器 使用maven下载相应的包 配置resources目录下的application.yaml文件 编写数据库entity实体层、service业务层 实现公共函数result 编写controller控制层 springboot启动类 使用idea创建的springboot项目,会自动生成启动类,有 @SpringBoot

    2024年02月15日
    浏览(29)
  • SpringBoot+Vue实现一个系统登录功能

    1. 创建一个Spring Boot项目,添加Web和Security依赖。 2. 创建一个User实体类,用于存储用户信息。 3. 创建一个UserDetailsService接口的实现类,用于加载用户信息。 4. 创建一个WebSecurityConfig类,继承WebSecurityConfigurerAdapter,并重写configure方法,配置SpringSecurity。 5. 在Vue项目中创建一个

    2024年01月15日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包