AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

SpringBoot实现登录注册

2022-12-29 812
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
RDS MySQL Serverless 高可用系列，价值2615元额度，1个月
云数据库 RDS PostgreSQL，高可用系列 2核4GB
简介： SpringBoot实现登录注册

话不多说，一个小小登录注册的案例向你展示SpringBoot的魅力


1 设计数据库

1.1表结构


去.png


1.2属性


id自增主键，name非空约束，唯一约束，password


2 IDEA配置

2.1 pom文件


<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency> 
<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.14</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.39</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>1.2.0</version>
    </dependency>
</dependencies>
<resources>
    <resource>
        <directory>src/main/java</directory>
        <includes>
            <include>**/*.xml</include>
            </includes>
    </resource>
</resources>


2.2 yml文件配置


spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    url:jdbc:mysql://localhost:3306/user?characterEncoding=utf8&useUnicode=true
    username: root
    password: 1234
mvc:
  static-path-pattern: /static/**  #配置静态路径
mybatis:
  type-aliases-package: day2.demo.test.bean
  mapper-locations: classpath:day2/demo/test/mapper/*.xml

3 bean层

3.1 项目结构

为.png



3.2 user实体类


package day2.demo.test.bean;
public class User {
    private int id;
    private String name;
    private String password;
    public  User(){
    }
    public User(int id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}


4 mapper层

4.1 usermapper


package day2.demo.test.mapper;
import day2.demo.test.bean.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper {
    public User selectUserById(int id);
    public User selectUserByName(String name);
    public int insertUser(User user);
}

4.2 usermapper.xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="day2.demo.test.mapper.UserMapper">
    <select id="selectUserById" resultType="User" parameterType="int">
        SELECT * from u where id = #{id}
    </select>
    <select id="selectUserByName" resultType="User" parameterType="String">
        SELECT * from u where NAME = #{NAME}
    </select>
    <insert id="insertUser" parameterType="User">
        insert into  u(name,password) values(#{name},#{password})
    </insert>
</mapper>

5 service层

package day2.demo.test.service;
import day2.demo.test.bean.User;
import day2.demo.test.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserService {
    @Autowired
    UserMapper userMapper;
    public User selectUserById(int id){
        return userMapper.selectUserById(id);
    }
    public boolean login(User user){
        String name = user.getName();
        String password = user.getPassword();
        User u1 =  userMapper.selectUserByName(name);
        if(u1==null){
            return false;
        }else{
            if(u1.getPassword().equals(password)){
                return true;
            }else{
                return false;
            }
        }
    }
    public boolean zhuCe(User user){
        int x = userMapper.insertUser(user);
        if(x>0){
            return true;
        }else {
            return false;
        }
    }
}

6 controller层

package day2.demo.test.controller;
import com.sun.deploy.net.HttpResponse;
import day2.demo.test.bean.User;
import day2.demo.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Controller
public class UserController {
    @Autowired
    UserService userService;
 //-----------------------------登录注册功能
    //登录：
    @RequestMapping("/Login")
    public String login(){
        return "Login";
    }
    @GetMapping("/result")
    public String result(HttpServletRequest req, HttpServletResponse resp){
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        User user = new User();
        user.setName(username);
        user.setPassword(password);
        boolean flag = userService.login(user);
        if(flag==true){
            return "Success";
        }else {
            return "Middle";
        }
    }
    @GetMapping("/middle")
    public String middle(){
        return "Login";
    }
    //注册：
    @GetMapping("/zhuCe")
    public String zhuCe(){
        return "ZhuCe";
    }
    @GetMapping("/end")
    public String end(HttpServletRequest req, HttpServletResponse resp){
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        User user = new User();
        user.setName(username);
        user.setPassword(password);
        boolean flag = userService.zhuCe(user);
        if(flag==true){
            return "End1";
        }else{
            return "End2";
        }
    }
}


7 html页面

请.png


7.1 login页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
   <!-- <link rel="stylesheet" type="text/css" th:href="@{../../static/css/Login.css}" />-->
    <!--<script type="text/javascript" src="../../static/js/jquery-1.11.3.min.js"></script>-->
    <style>
        #s1{
            float: left;
            margin: 50px 0px 0px 100px;
        }
        #s2{
            float: left;
            margin: 50px 0px 0px 50px;
        }
    </style>
    <script type="text/javascript">
        function f1(){
            //1-5个汉字
            var regx = /^[\u4e00-\u9fa5]{1,5}$/;
            var username = document.getElementById("username").value;
            if(regx.test(username)){
                document.getElementById("d1").style.color = "green";
                document.getElementById("d1").innerHTML="√";
                return true;
            }else{
                document.getElementById("d1").style.color = "red";
                document.getElementById("d1").innerHTML="×";
                return false;
            }
        }
        function f2(){
            //5-12个字母或汉字
            var regx = /^[a-zA-Z0-9]{5,12}$/;
            var password = document.getElementById("password").value;
            if(regx.test(password)){
                document.getElementById("d2").style.color = "green";
                document.getElementById("d2").innerHTML="√";
                return true;
            }else{
                document.getElementById("d2").style.color = "red";
                document.getElementById("d2").innerHTML="×";
                return false;
            }
        }
        function subForm(){
            if(f1()&&f2()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<div>
    <form action="/result" method="get" onsubmit="return subForm()">
        <table>
            <tr>
                <td><span>用户名：</span></td>
                <td><input id="username" type="text" name="username" placeholder="请输入1-5个汉字" onblur="f1()"><span id="d1"></span></td>
            </tr>
            <tr>
                <td>
                    <span>密码：</span>
                </td>
                <td><input id="password" type="password" name="password" placeholder="请输入5-12个字母或数字" onblur="f2()"><span id="d2"></span></td>
            </tr>
        </table>
        <input id="s1" type="submit" value="登录">
    </form>
    <form action="/zhuCe" method="get" >
        <input id="s2" type="submit" value="注册" onclick="zhuCe()">
    </form>
</div>
</body>
</html>


7.2 middle页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5;url=/middle" />
    <title>登录失败</title>
    <script type="text/javascript" src="../../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        window.onload = function f() {
            var i =5;
            var a = setInterval(function () {
                i--;
                if(i<=0){
                    document.getElementById("p1").innerHTML = "登录失败，返回登录界面";
                    //$("#i1").prop("disabled",false);
                    clearInterval(a);
                    location = "/middle";
                }else {
                    document.getElementById("p1").innerHTML = "登录失败,还有"+i+"秒跳转回登录界面";
                    return false;
                }
            },1000)
        }
    </script>
</head>
<body>
    <p id="p1">登录失败,还有5秒跳转回登录界面</p>
   <!-- <form action="/middle" method="get">
        <input id="i1" type="submit" value="确认" disabled="disabled">
    </form>-->
</body>
</html>


7.3 success页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>登录成功</p>
</body>
</html>

7.4 zhuce页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- <link rel="stylesheet" type="text/css" th:href="@{../../static/css/Login.css}" />
     <script type="text/javascript" src="../../static/js/jquery-1.11.3.min.js"></script>-->
    <style type="text/css">
        #s1{
            float: left;
            margin: 50px 0px 0px 120px;
        }
    </style>
    <script type="text/javascript">
        function f1(){
            //1-5个汉字
            var regx = /^[\u4e00-\u9fa5]{1,5}$/;
            var username = document.getElementById("username").value;
            if(regx.test(username)){
                document.getElementById("d1").style.color = "green";
                document.getElementById("d1").innerHTML="√";
                return true;
            }else{
                document.getElementById("d1").style.color = "red";
                document.getElementById("d1").innerHTML="×";
                return false;
            }
        }
        function f2(){
            //5-12个字母或汉字
            var regx = /^[a-zA-Z0-9]{5,12}$/;
            var password = document.getElementById("password").value;
            if(regx.test(password)){
                document.getElementById("d2").style.color = "green";
                document.getElementById("d2").innerHTML="√";
                return true;
            }else{
                document.getElementById("d2").style.color = "red";
                document.getElementById("d2").innerHTML="×";
                return false;
            }
        }
        function subForm(){
            if(f1()&&f2()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<form action="/end" method="get" onsubmit="return subForm()">
    <table>
        <tr>
            <td> <span>用户名：</span></td>
            <td><input id="username" type="text" name="username" placeholder="请输入1-5个汉字" onblur="f1()"><span id="d1"></span></td>
        </tr>
        <tr>
            <td>
                <span>密码：</span>
            </td>
            <td><input id="password" type="password" name="password" placeholder="请输入5-12个字母或数字" onblur="f2()"><span id="d2"></span></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="s1" type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
</html>

7.5 end1页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功</title>
    <script type="text/javascript" src="../../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        window.onload = function f() {
            var i =5;
            var a = setInterval(function () {
                i--;
                if(i<=0){
                    document.getElementById("p1").innerHTML = "注册成功，返回登录界面";
                    clearInterval(a);
                    location = "/Login";
                }else {
                    document.getElementById("p1").innerHTML = "注册成功,还有"+i+"秒跳转回登录界面";
                    return false;
                }
            },1000)
        }
    </script>
</head>
<body>
    <p id="p1">注册成功,还有5秒跳转回登录界面</p>
</body>
</html>

7.6 end2页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册失败</title>
    <script type="text/javascript" src="../../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        window.onload = function f() {
            var i =5;
            var a = setInterval(function () {
                i--;
                if(i<=0){
                    document.getElementById("p1").innerHTML = "注册失败，返回登录界面";
                    clearInterval(a);
                    location = "/Login";
                }else {
                    document.getElementById("p1").innerHTML = "注册失败,还有"+i+"秒跳转回登录界面";
                    return false;
                }
            },1000)
        }
    </script>
</head>
<body>
    <p id="p1">注册失败,还有5秒跳转回登录界面</p>
</body>
</html>


大功告成，哈哈


文章标签：
云数据库 RDS MySQL 版
Java
数据库
关键词：
Spring Boot登录
Spring Boot登录注册
相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发，帮助IT从业者们通过“阿里云Web应用上云解决方案”，了解一个企业级Web应用上云的常见架构，了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品：云数据库RDS MySQL 版 阿里云关系型数据库RDS（Relational Database Service）是一种稳定可靠、可弹性伸缩的在线数据库服务，提供容灾、备份、恢复、迁移等方面的全套解决方案，彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
游客yno6xv7miabmw
目录
相关文章
小z1
|
缓存 前端开发 Java
【二十八】springboot之通过threadLocal+参数解析器实现同session一样保存当前登录信息的功能
【二十八】springboot之通过threadLocal+参数解析器实现同session一样保存当前登录信息的功能
小z1
386 1
百色彭于晏
|
SQL Java 测试技术
在Spring boot中 使用JWT和过滤器实现登录认证
在Spring boot中 使用JWT和过滤器实现登录认证
百色彭于晏
810 0
wanderInk
|
8月前
|
存储 Java 数据库
Spring Boot 注册登录系统：问题总结与优化实践
在Spring Boot开发中，注册登录模块常面临数据库设计、密码加密、权限配置及用户体验等问题。本文以便利店销售系统为例，详细解析四大类问题：数据库字段约束（如默认值缺失）、密码加密（明文存储风险）、Spring Security配置（路径权限不当）以及表单交互（数据丢失与提示不足）。通过优化数据库结构、引入BCrypt加密、完善安全配置和改进用户交互，提供了一套全面的解决方案，助力开发者构建更 robust 的系统。
wanderInk
260 0
wljslmz
|
安全 Java 数据安全/隐私保护
如何使用Spring Boot进行表单登录身份验证：从基础到实践
如何使用Spring Boot进行表单登录身份验证：从基础到实践
wljslmz
355 5
游客i66wb7w7cg4tk
|
Java 测试技术 数据库
基于SpringBoot+HTML实现登录注册功能模块
基于SpringBoot+HTML实现登录注册功能模块
游客i66wb7w7cg4tk
2279 0
明弟有理想
|
Java API Spring
springBoot:注解&封装类&异常类&登录实现类 (八)
本文介绍了Spring Boot项目中的一些关键代码片段，包括使用`@PathVariable`绑定路径参数、创建封装类Result和异常处理类GlobalException、定义常量接口Constants、自定义异常ServiceException以及实现用户登录功能。通过这些代码，展示了如何构建RESTful API，处理请求参数，统一返回结果格式，以及全局异常处理等核心功能。
明弟有理想
153 1
爱你三千遍斯塔克
|
存储 NoSQL Java
大事件后端项目34_登录优化----redis_SpringBoot集成redis
大事件后端项目34_登录优化----redis_SpringBoot集成redis
爱你三千遍斯塔克
161 1
大事件后端项目34_登录优化----redis_SpringBoot集成redis
如夜了我衣衫太薄便归家靠路灯
|
小程序 安全 Java
springboot 微信小程序 实现获取手机号登录
springboot 微信小程序 实现获取手机号登录
如夜了我衣衫太薄便归家靠路灯
1770 3
如夜了我衣衫太薄便归家靠路灯
|
JSON 安全 Java
springboot 整合 spring security，自定义登录接口
springboot 整合 spring security，自定义登录接口
如夜了我衣衫太薄便归家靠路灯
1395 2
热爱技术的小郑
|
SQL Java 数据库连接
springboot+mybatis+shiro项目中使用shiro实现登录用户的权限验证。权限表、角色表、用户表。从不同的表中收集用户的权限、
这篇文章介绍了在Spring Boot + MyBatis + Shiro项目中，如何使用Shiro框架实现登录用户的权限验证，包括用户、角色和权限表的设计，以及通过多个表查询来收集和验证用户权限的方法和代码实现。
热爱技术的小郑
588 0
springboot+mybatis+shiro项目中使用shiro实现登录用户的权限验证。权限表、角色表、用户表。从不同的表中收集用户的权限、

热门文章

最新文章

  • 1
    基于springboot的宠物领养系统
  • 2
    基于springboot的大学生兼职系统
  • 3
    SpringBoot启动时连接Redis报错：ERR This instance has cluster support disabled - 如何解决？
  • 4
    SpringBoot+kafka+ELK分布式日志收集
  • 5
    博客|基于Springboot的个人博客系统设计与实现(源码+数据库+文档)
  • 6
    springboot整合 thymeleaf 案例
  • 7
    在Spring Boot中使用iTextPDF创建动态PDF文档
  • 8
    SpringBoot接口幂等性实现的4种方案！
  • 9
    Springboot+vue的旅游信息推荐系统设计与实现（有报告）。Javaee项目，springboot vue前后端分离项目。
  • 10
    SpringBoot是如何实现自动配置的？--SpringBoot源码（四）
  • 1
    基于Java 17 + Spring Boot 3.2 + Flink 1.18的智慧实验室管理系统核心代码
    344
  • 2
    Spring boot 使用mybatis generator 自动生成代码插件
    1039
  • 3
    较为完整的SpringBoot项目结构
    3726
  • 4
    Java 21 与 Spring Boot 3.2 微服务开发从入门到精通实操指南
    677
  • 5
    📨 Spring Boot 3 整合 MQ 构建聊天消息存储系统
    609
  • 6
    SpringBoot之异步调用@Ansyc
    474
  • 7
    SpringBoot2.3.1集成Knife4j接口文档
    567
  • 8
    springboot+redis互联网医院智能导诊系统源码，基于医疗大模型、知识图谱、人机交互方式实现
    428
  • 9
    JPA简介：Spring Boot环境下的实践指南
    221
  • 10
    Spring Boot 可视化监控
    1009

    • 相关课程

    更多
  • 微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）
  • SpringBoot实战教程
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Springboot项目云开发快速迁移

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格