菜单 搜索
首页 前端知识 springboot html实现简单注册登录

springboot html实现简单注册登录

2024-05-08 10:05:04 前端知识 前端哥 181 322 我要收藏

目录

前端：

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),反之，任意一个条件都不满足的话就不会跳转到成功界面。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/7502.html
标签
后端
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

localStorage.setItem()、localStorage.getItem()、JSON.stringify()、 JSON.parse()；的使用

2024-05-12 17:05:02

vue elementUI XLSX.utils.sheet_to_json实现复杂表头的导入功能

2024-05-12 17:05:00

HuTool工具使用(JSONUtil JSONObject JSONArray)

2024-05-12 17:05:59

(全网最详细) FastJson解析器JsonPath的使用

2024-05-12 17:05:58

java循环遍历无规则json的三种方式：gson、fastjson、orgjson

2024-05-12 17:05:58

jackson、gson、fastjson和json-lib四种主流json解析框架对比

2024-05-12 17:05:58

关于fastjson版本报错write javaBean error, fastjson version 1.2.62, fieldName : 8

2024-05-12 17:05:57

JSON parse error: Cannot deserialize value of type `java.util.ArrayList＜java.lang.Long＞` from Object

2024-05-12 17:05:57

【JavaScript】 发送 POST 请求并带有 JSON 请求体的几种方法

2024-05-12 17:05:57

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
1

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
2

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
3

UE4.27支持HTML5

2024-05-07 13:05:261000
4

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
5

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
6

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
7

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
8

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
9

移动端css布局大全

2024-02-06 15:02:421000
10

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！