springboot+html实现简单注册登录

已于 2023-11-15 16:08:03 修改
阅读量3.7k 收藏 60
点赞数 8
分类专栏： 功能栏 文章标签： spring boot html 后端
于 2023-10-16 14:26:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67930426/article/details/133849132
版权

目录

前端：

register.html

login.html

success.html

style.css 

 后端：

com.example.entity.User

数据库建表（user)

​编辑 com.example.mapper.UserMapper

 com.example.controller.UserController

注册逻辑：

登录逻辑：

application.properities

pom.xml 

调试：

注册：

登录：

前端：

register.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div class="control">
    <div class="item">
        <div class="active">注册</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <form action="/user/register" method="post">
            <p>用户名</p>
            <input type="text" placeholder="请输入用户名" name="username" />
            <p>密码</p>
            <input type="password" placeholder="请输入密码" name ="password"/>
            <br/>
            <input type="submit" value="注册"/>
            </form>
               <p>已注册，<a href="/user/login" target="top">去登录</a></p>

        </div>
    </div>
</div>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="/css/style.css"  type="text/css" rel="stylesheet">
    <script src="/static/js/change.js"></script>
</head>
<body>
<div class="control">
    <div class="item">
        <div class="active">登录</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <form action="/user/login" method="post">
            <p>账号</p>
            <input type="text" placeholder="请输入用户名" name="username"/>
            <p>密码</p>
            <input type="password" placeholder="请输入密码"  name="password"/>
            <br/>
            <input type="submit" value="登录"/>
            </form>
            <p>没有账号，<a href="/user/register" target="top">去注册</a></p>
        </div>
    </div>
</div>
</body>
</html>

success.html

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

style.css 

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f3f3f3;
}
.control{
    width: 340px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}
.item{
    width: 340px;
    height: 60px;
    background: #eeeeee;
}
.item div{
    width: 340px;
    height: 60px;
    display: inline-block;
    color: black;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}
.content{
    width: 100%;
}
.content div{
    margin: 20px 30px;
    display: none;
    text-align: left;
}
p{
    color: #4a4a4a;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}
.content input[type="submit"]{
    margin-top: 40px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: cyan;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;
}
.active{

    background: white;
}
.item div:hover{
    background: #f6f6f6;
}

 后端：

com.example.entity.User

@Data
@Accessors(chain = true)
@EqualsAndHashCode(callSuper = false)
@Table( "user")

public class User {

    private String username;
    private String password;

}

数据库建表（user)

 com.example.mapper.UserMapper

@Mapper
public interface UserMapper extends BaseMapper<User> {

    @Select(value = "select u.username,u.password from user u where u.username=#{username}")
    User findUserByName(@Param("username") String username);

}

 com.example.controller.UserController

@Controller
@RequestMapping("user")
public class UserController {
    @Autowired
    private UserMapper userMapper;
    @RequestMapping("/register")
    public String register(User user, Model m) {
        if (user.getUsername()!=null&&userMapper.findUserByName(user.getUsername()) == null) {
            //判断用户是否已经存在
           if (!user.getUsername().isEmpty()) {
                //注册的时候，用户名不能为空
                if (!user.getPassword().isEmpty()) {
                    //注册 的时候,密码不能为空*/
                    userMapper.insert(user);
                    return "html/login";
                } else {
                    m.addAttribute("msg", "用户名已经存在！");
                    return "html/register";
                }
            } else {
                m.addAttribute("msg", "用户名不能为空！");
                return "html/register";
            }
        } else {
            m.addAttribute("msg", "密码不能为空！");
            return "html/register";
        }
    }


    @RequestMapping("/login" )
    public String login(  User user, Model m){
        User exitUser=userMapper.findUserByName(user.getUsername());
        if(user.getUsername()==null||user.getUsername().isEmpty()){
            m.addAttribute("msg","用户名不能为空");
            return "html/login";
        }
        if(user.getPassword()==null||user.getPassword().isEmpty()){
            m.addAttribute("msg","密码不能为空");
            return "html/login";
        }
        if(exitUser==null){
            m.addAttribute("msg","该用户未注册");
            return "html/login";
        }
        if(!user.getPassword().equals(exitUser.getPassword())){
            m.addAttribute("msg","用户输入的密码有误");
            return "html/login";
        }else{

            m.addAttribute("msg","登录成功");
            return "html/success";
    }

    }

}

注册逻辑：

1.判断要创建的用户在数据库是否存在，如果不存在就注册

2.注册的时候用户名不能为空

3.注册的时候密码不能为空

登录逻辑：

1.判断要登录的用户在数据库是否存在，如果存在就登录

2.登录的时候，输入的密码要与数据库里对应的用户的密码保持一致

3.登录的时候，输入用户名与密码不能为空

application.properities

spring.datasource.url=jdbc:mysql://localhost:3306/springboot?serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=1234

pom.xml 

<?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.0</version>
       <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>register-login</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>register-login</name>
    <description>register-login</description>
    <properties>
       <java.version>1.8</java.version>
    </properties>
    <dependencies>
       <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-web</artifactId>
       </dependency>

       <dependency>
          <groupId>com.mysql</groupId>
          <artifactId>mysql-connector-j</artifactId>
          <version>8.0.33</version>
          <scope>runtime</scope>
       </dependency>
       <dependency>
          <groupId>org.projectlombok</groupId>
          <artifactId>lombok</artifactId>
          <optional>true</optional>
       </dependency>



       <dependency>
          <groupId>com.mybatis-flex</groupId>
          <artifactId>mybatis-flex-spring-boot-starter</artifactId>
          <version>1.6.4</version>
       </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-thymeleaf</artifactId>
       </dependency>
       <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-devtools</artifactId>
          <optional>true</optional>
       </dependency>



       <dependency>
       <groupId>com.mybatis-flex</groupId>
       <artifactId>mybatis-flex-spring-boot-starter</artifactId>
       <version>1.6.4</version>
       </dependency>
       <dependency>
          <groupId>com.mybatis-flex</groupId>
          <artifactId>mybatis-flex-spring-boot-starter</artifactId>
          <version>1.6.4</version>
       </dependency>


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


    </dependencies>

    <build>
       <plugins>
          <plugin>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-maven-plugin</artifactId>
             <configuration>
                <fork>true</fork>
                <excludes>
                   <exclude>
                      <groupId>org.projectlombok</groupId>
                      <artifactId>lombok</artifactId>
                   </exclude>
                </excludes>
             </configuration>
          </plugin>
       </plugins>
    </build>

</project>

调试：

注册：

如果注册的用户在数据库中不存在，且注册的时候，用户名与密码都不为空，则跳转到

登录界面，反之，任意一个条件都不满足的话就不会跳转到登录界面

登录：

如果登录的用户在数据库中存在，且登录的时候，用户名不为空，密码不为，则跳转到

成功界面（success.html),反之，任意一个条件都不满足的话就不会跳转到成功界面。

freedomSTUDENT
关注
  • 8
    点赞
  • 踩
  • 60
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Java中springboot搭建html
OGgBoom的博客
07-05 2703
Spring Boot简化了开发人员对Spring框架的应用程序的搭建和配置过程，提供了一套简单易用的开发工具和规范，使开发人员能够更专注于业务逻辑的开发，而无需过多关注繁琐的配置和细节。
使用springboot+mybatis+Vue2.0+elementUI实现简单的登录注册及用户信息获取。
07-09
本demo实现了简单的登录、注册、获取用户信息三个功能，其中包含密码加密，解决了前后端分离项目常见的跨域问题及session问题，界面清晰简单，后台分层清晰，逻辑清楚。 值得一看。 项目结构：ajax_test为后端项目，...
spring boot简单注册登陆页面
01-06
spring boot + mybatis +thymeleaf简单的注册登陆页面,其中设置密码加盐和哈希，用的是h2数据库，html5和js，jquery等，
Spring Boot + HTML5简单的前端验证登录功能实现
cjbyg的博客
02-19 2008
现在就需要编写服务端的处理方式了，创建如下的文件，impl文件夹用来对前端传来数据进行处理，在该文件夹下创建IUserService的接口和UserServiceImpl类，再创建一个文件夹util用来作为返回前端的结果。首先我们要清楚在数据库中我们需要存放什么内容，一般的登录信息就是账号+密码，再考虑密码加密的问题，一般来说是会用盐+md5进行密码加密，所以我们在数据库的表创建就需要创建账号、密码、盐值这三个实体。布局文件，在css文件夹下创建load的css文件。js文件夹下创建load的js文件。
SpringBoot+Mybatis实现简单的登录注册页面
m0_74212787的博客
05-11 640
SpringBoot+Mybatis实现简单的登录注册页面
springboot+html网页实现登录注册，可跨域，纯前端分页功能
最新发布
m0_62996549的博客
06-11 178
springboot+html网页实现登录注册，可跨域，纯前端分页功能
【JAVA程序设计】（C00100）基于Springboot+html的前后端分离停车场管理系统
mataodehtml的博客
01-11 1197
基于SpringBoot+html的前后端分离的停车场管理系统，本系统分为二种角色：管理员和收银员。1．登录：管理员可以通过系统分配的账号登录系统中，收银员用户可以通过管理员登录系统后录入系统账号后登录系统。2. 信息统计查看：管理员和收银员登录系统后在系统首页中可以通过图表清楚的看到停车场的收入营销情况，还能清楚的看到不同停车场的数据对比。3. 订单管理：对进入各个停车场的车辆进行监控，车辆出入以及车辆是否月卡等进行收费以及相关的记录。
SpringBoot实现登陆注册(附源码)
比时代快才是快，趁风使柁
05-30 4974
SpringBoot实现登陆注册(附源码)，前端由html+css+vue(发送请求)组成，后端由springboot进行处理请求,相关数据库操作语句选用的是mybatis-plus
基于SpringBoot+html超市进销存管理系统
qq_33037637的博客
05-24 2097
基于SpringBoot+html超市进销存管理系统一.获取源码二、系统介绍三、功能展示1.用户登陆2.进货管理(货物管理员)3.退货管理（货物管理员）4.商品销售、商品销售退货(商品管理员)5.管理商品、商品类别、供应商、客户（商品管理员）6.权限管理（管理员）7.角色管理（管理员）8.用户管理（管理员）9.统计分析（管理员）四、代码展示 一.获取源码 点击下载 基于SpringBoot+html超市进销存管理系统 二、系统介绍 环境：开发工具：idea，数据库：MySQL8.0 jdk1.8 架构：Sp
HTML实现简单注册登录页面
m0_57714421的博客
12-21 1万+
HTML实现注册登录
前端vue 后端springboot实现登录
qq_53632806的博客
10-25 625
vue+springBoot实现登录
html实现用户简单的注册登录
03-06
1.用户可以填写信息 2.单选，多选操作 3.下拉框选择 4.用户名和密码正则表达式校验 5.有任何一项未校验成功（包括空白）都无法注册或提交 6.注册成功后跳转到注册成功界面，注册成功后几秒后再次跳转到注册界面。
用SpringBoot整合MyBatis实现登录注册功能
12-04
这是SpringBoot整合MyBatis实现的简易登陆注册。这里所使用的开发环境是：IDEA、MySQL_8.0.17、Java8；其中用到了Druid数据库连接池。这个登录注册demo中，登录失败有两种情况：①账户不存在；②密码错误。注册失败...
springboot+vue前后端分离开发项目源码
01-02
开发者可以通过阅读源码，理解SpringBoot如何与Vue.js协作，学习如何实现登录验证、数据传输、错误处理以及前后端的交互流程。此外，还可以深入研究如何优化性能，如使用缓存策略、接口分页、异步处理等。这个项目...
SpringBoot+layui+Thymeleaf+Mybatis+Shiro后台管理系统脚手架
08-05
在SpringBoot应用中，Thymeleaf与SpringMVC结合，实现了视图层的渲染，使得开发者可以在HTML中直接写表达式，增强了模板的可读性和维护性。 4. **Mybatis**： Mybatis是一个持久层框架，它提供了方便的SQL映射功能...
SpringBoot+Vue实现人事管理系统.zip
08-05
1. 用户管理：包括用户注册、登录、权限管理等功能，可以使用Spring Security进行安全控制。 2. 员工信息管理：增删改查员工信息，涉及数据库操作，可以使用Spring Data JPA与MySQL等数据库配合。 3. 部门管理：创建...
HTML实现登录注册界面
m0_74135466的博客
11-01 5036
【代码】HTML实现登录注册界面。
SpringBoot实现登录注册功能【Demo】
热门推荐
laoyog
07-07 7万+
文末有下载链接 本文使用springboot+mybatis注解方式，完成简单的注册和登录功能。且前后端分离，向前端返回json字符串。 最终效果如下： 注册： 如果用户名重复：返回json串 {"msg":"用户名已存在","success":false,"detail":null} 如果正常：{"msg":"注册成功","success"...
springboot实现简单的注册登录功能
Java721的博客
02-22 2万+
spring官网 通过spring官网初始化SpringBoot项目 使用idea工具打开Springboot项目，项目结构 添加pom依赖 <!--springboot启动类--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId>
springboot+mybatis+html实现登录注册前后端交互
05-23
要实现登录注册的前后端交互，可以按照以下步骤： 1. 创建一个Spring Boot项目。 2. 添加依赖：spring-boot-starter-web、spring-boot-starter-thymeleaf、spring-boot-starter-jdbc、mysql-connector-java、mybatis-spring-boot-starter。 3. 配置数据库连接，可以在application.properties文件中添加以下内容： ``` spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 4. 创建数据库表，例如创建user表，包含id、username、password三个字段。 5. 创建User实体类，对应user表中的字段。 6. 创建Mapper接口和Mapper.xml文件，用于数据操作。 7. 创建Controller类，处理前端请求。 8. 创建html页面，用于用户输入信息和显示结果。 下面是一个简单的示例： 1. 创建Spring Boot项目。 2. 添加依赖：spring-boot-starter-web、spring-boot-starter-thymeleaf、spring-boot-starter-jdbc、mysql-connector-java、mybatis-spring-boot-starter。 ``` <dependencies> <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>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version> </dependency> </dependencies> ``` 3. 配置数据库连接，可以在application.properties文件中添加以下内容： ``` spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 4. 创建数据库表，例如创建user表，包含id、username、password三个字段。 ``` CREATE TABLE IF NOT EXISTS `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) DEFAULT NULL, `password` varchar(50) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 5. 创建User实体类，对应user表中的字段。 ``` public class User { private Integer id; private String username; private String password; // getter和setter方法省略 } ``` 6. 创建Mapper接口和Mapper.xml文件，用于数据操作。 ``` @Mapper public interface UserMapper { @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}") User getUser(@Param("username") String username, @Param("password") String password); @Insert("INSERT INTO user(username, password) VALUES(#{username}, #{password})") int addUser(User user); } ``` 7. 创建Controller类，处理前端请求。 ``` @Controller public class UserController { @Autowired private UserMapper userMapper; @GetMapping("/") public String index() { return "index"; } @PostMapping("/login") public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model) { User user = userMapper.getUser(username, password); if (user == null) { model.addAttribute("error", "用户名或密码错误"); return "index"; } else { model.addAttribute("username", user.getUsername()); return "success"; } } @PostMapping("/register") public String register(@RequestParam("username") String username, @RequestParam("password") String password, Model model) { User user = new User(); user.setUsername(username); user.setPassword(password); int result = userMapper.addUser(user); if (result == 1) { model.addAttribute("username", username); return "success"; } else { model.addAttribute("error", "注册失败"); return "index"; } } } ``` 8. 创建html页面，用于用户输入信息和显示结果。 index.html： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Login/Register</title> </head> <body> <h1>Login/Register</h1> <form action="/login" method="post"> <label>Username: </label><input type="text" name="username"/><br/> <label>Password: </label><input type="password" name="password"/><br/> <input type="submit" value="Login"/> <span th:text="${error}"></span> </form> <hr/> <form action="/register" method="post"> <label>Username: </label><input type="text" name="username"/><br/> <label>Password: </label><input type="password" name="password"/><br/> <input type="submit" value="Register"/> <span th:text="${error}"></span> </form> </body> </html> ``` success.html： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Success</title> </head> <body> <h1>Welcome, <span th:text="${username}"></span>!</h1> </body> </html> ``` 以上就是一个简单的登录注册前后端交互的示例。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值