JavaWeb-SpringBoot_使用H2數據庫實現用戶注冊登錄

本文轉載自查看原文 2019-01-27 22:58 714 【Spring全家桶】

　　使用Gradle編譯項目　　傳送門

　　前端資源同：使用MySQL數據庫實現用戶管理_demo　　傳送門

　　H2：SpringBoot內置持久化數據庫

使用H2數據庫實現用戶注冊登錄

　　用戶可以在index.html點擊“注冊”按鈕將信息存儲到h2數據庫中，當點擊“登錄”按鈕時，如果用戶輸入的是正確的賬號密碼，跳轉到welcome.html頁面，用戶輸入賬號密碼與和h2數據庫中的不匹配時，重定向到index.html頁面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">


<head>
<meta charset="utf-8">

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css" />
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        //打開會員登錄 
        $("#Login_start_").click(function() {
            $("#regist_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left : '350px',
                height : '520px',
                width : '400px'
            }, 500, function() {
                $("#login_container").show(500);
                $("#_close").animate({
                    height : '40px',
                    width : '40px'
                }, 500);
            });
        });
        //打開會員注冊
        $("#Regist_start_").click(function() {
            $("#login_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left : '350px',
                height : '520px',
                width : '400px'
            }, 500, function() {
                $("#regist_container").show(500);
                $("#_close").animate({
                    height : '40px',
                    width : '40px'
                }, 500);
            });
        });
        //關閉
        $("#_close").click(function() {

            $("#_close").animate({
                height : '0px',
                width : '0px'
            }, 500, function() {
                $("#_close").hide(500);
                $("#login_container").hide(500);
                $("#regist_container").hide(500);
                $("#_start").animate({
                    left : '0px',
                    height : '0px',
                    width : '0px'
                }, 500);
            });
        });
        //去 注冊
        $("#toRegist").click(function() {
            $("#login_container").hide(500);
            $("#regist_container").show(500);
        });
        //去 登錄
        $("#toLogin").click(function() {
            $("#regist_container").hide(500);
            $("#login_container").show(500);
        });
    });
</script>
</head>

<body style="background-color: #DCDCDC;">

    <a id="Login_start_" class="btn btn-danger" style="width: 100px; height: 40px; border-radius: 0;">登陸</a>
    <a id="Regist_start_" class="btn btn-success" style="width: 100px; height: 40px; border-radius: 0;">注冊</a>

    <!-- 會員登錄  -->
    <!--<div id='Login_start' style="position: absolute;" >-->
    <div id='_start'>
        <div id='_close' style="display: none;">
            <span class="glyphicon glyphicon-remove"></span>
        </div>
        <br />
        <!--登錄框-->
        <div id="login_container">
            <div id="lab1">
                <span id="lab_login">登錄</span>
                <span id="lab_toRegist">
                    &emsp;還沒有賬號&nbsp;
                    <span id='toRegist' style="color: #EB9316; cursor: pointer;">立即注冊</span>
                </span>
            </div>
            <div style="width: 330px;">
                <span id="lab_type1">手機號/賬號登陸</span>
            </div>
        
    <form action="" th:action="@{~/user/login.action}"    method="POST">
            <div id="form_container1">
                <br />    
                    <input type="text" class="form-control" placeholder="手機號/用戶名" id="login_number" value="Gary" name="username"/>
                    <input type="password" class="form-control" placeholder="密碼" id="login_password" name="password" />
                    <input type="submit" value="登錄" class="btn btn-success" id="login_btn" />
                <span id="rememberOrfindPwd">
                    <span>
                        <input id="remember" type="checkbox" style="margin-bottom: -1.5px;" />
                    </span>
                    <span style="color: #000000"> 記住密碼&emsp;&emsp;&emsp;&emsp; </span>
                    <span style="color: #000000"> 忘記密碼 </span>
                </span>
            </div>
        </form>
        
            <div style="display: block; width: 330px;">
                <span id="lab_type2">使用第三方直接登陸</span>
            </div>
            <div style="width: 330px; height: 100px; border-bottom: 1px solid #FFFFFF;">
                <br />
                <button id="login_QQ" type="button" class="btn btn-info">
                    <img src="img/qq32.png" style="width: 20px; margin-top: -4px;" />
                    &emsp;QQ登錄
                </button>
                <button id="login_WB" type="button" class="btn btn-danger">
                    <img src="img/sina32.png" style="width: 20px; margin-top: -4px;" />
                    &emsp;微博登錄
                </button>
            </div>
        </div>
        <!-- 注冊 -->
        <form action="" th:action="@{~/user/register.action}"  method="POST">
        <div id='regist_container' style="display: none;">
            <div id="lab1">
                <span id="lab_login">注冊</span>
                <span id="lab_toLogin">
                    &emsp;已有賬號&nbsp;
                    <span id='toLogin' style="color: #EB9316; cursor: pointer;">立即登錄</span>
                </span>
            </div>
        
                <div id="form_container2" style="padding-top: 25px;">

                    <input type="text" class="form-control" value="Gary" placeholder="用戶名" id="regist_account" name="username" />
                    <input type="password" class="form-control" placeholder="密碼" id="regist_password1" name="password" />
                    <input type="password" class="form-control" placeholder="確認密碼" id="regist_password2" />
                    <input type="text" class="form-control" placeholder="手機號" id="regist_phone" name="telephone" />
                    <input type="text" class="form-control" placeholder="驗證碼" id="regist_vcode" />
                    <!--<button id="getVCode" type="button" class="btn btn-success" >獲取驗證碼</button>-->
                    <input id="getVCode" type="button" class="btn btn-success" value="點擊發送驗證碼" onclick="sendCode(this)" />

                </div>
                <input type="submit" value="注冊" class="btn btn-success" id="regist_btn" />
        </div>
        </form>
    </div>

</body>
<script type="text/javascript">
    var clock = '';
    var nums = 30;
    var btn;
    function sendCode(thisBtn) {
        btn = thisBtn;
        btn.disabled = true; //將按鈕置為不可點擊
        btn.value = '重新獲取（' + nums + '）';
        clock = setInterval(doLoop, 1000); //一秒執行一次
    }

    function doLoop() {
        nums--;
        if (nums > 0) {
            btn.value = '重新獲取（' + nums + '）';
        } else {
            clearInterval(clock); //清除js定時器
            btn.disabled = false;
            btn.value = '點擊發送驗證碼';
            nums = 10; //重置時間
        }
    }

    $(document).ready(function() {
        $("#login_QQ").click(function() {
            alert("暫停使用！");
        });
        $("#login_WB").click(function() {
            alert("暫停使用！");
        });
    });
</script>

</html>

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>登錄成功！</h1>
</body>
</html>

welcome.html

#Tymeleaf 編碼
spring.thymeleaf.encoding=UTF-8
#熱部署靜態文件
spring.thymeleaf.cache =false
#使用HTML5標准
spring.thymeleaf.mode=HTML5

#使用h2控制台
spring.h2.console.enabled=true

application.properties

package com.Gary.userlogin;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class UserloginApplication {

    public static void main(String[] args) {
        SpringApplication.run(UserloginApplication.class, args);
    }

}

UserloginApplication.java

package com.Gary.userlogin.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

//    設置一個主鍵id    主鍵自增策略
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String telephone;
    
    protected User() {
        
    }
    
    public User(Long id,String username,String password,String telephone) {
        this.id=id;
        this.password=password;
        this.username=username;
        this.telephone=telephone;
    }
    
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    
}

User.java

package com.Gary.userlogin.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import com.Gary.userlogin.domain.User;
import com.Gary.userlogin.repository.UserRepository;

@RestController
public class UserController {

    @Autowired
    private UserRepository UserRepository;
    
    //模型視圖
    @RequestMapping("/index.action")
    public ModelAndView index() {
        
        return new ModelAndView("/index.html");
    }
    
    @RequestMapping("/user/register.action")
    public ModelAndView register(User user) {
        UserRepository.save(user);
        return new ModelAndView("redirect:/index.action");
    }
    
    @RequestMapping("/user/login.action")
    public ModelAndView login(User user) {
        
        //獲得用戶登錄名和密碼
        User loginUser = UserRepository.findByUsernameAndPassword(user.getUsername(),user.getPassword());
        if(loginUser == null) {
            return new ModelAndView("redirect:/index.action");
        }else {
            return new ModelAndView("/welcome.html");
        }
        
    }
    
}

UserController.java

package com.Gary.userlogin.repository;

import org.springframework.data.repository.CrudRepository;

import com.Gary.userlogin.domain.User;

//用戶注冊登錄接口
public interface UserRepository extends CrudRepository<User,Long>{
    
    //遵循spring data jpa命名標准
    User findByUsernameAndPassword(String username,String password);
    
}

UserRepository.java

　　目錄結構

　　分注冊和登錄兩部分實現

　　各個功能模塊的默認配置文件application.properties　　傳送門

#Tymeleaf 編碼
spring.thymeleaf.encoding=UTF-8
#熱部署靜態文件
spring.thymeleaf.cache =false
#使用HTML5標准
spring.thymeleaf.mode=HTML5

#使用h2控制台
spring.h2.console.enabled=true

H2數據庫中注冊用戶

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">


<head>
<meta charset="utf-8">

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css" />
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        //打開會員登錄 
        $("#Login_start_").click(function() {
            $("#regist_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left : '350px',
                height : '520px',
                width : '400px'
            }, 500, function() {
                $("#login_container").show(500);
                $("#_close").animate({
                    height : '40px',
                    width : '40px'
                }, 500);
            });
        });
        //打開會員注冊
        $("#Regist_start_").click(function() {
            $("#login_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left : '350px',
                height : '520px',
                width : '400px'
            }, 500, function() {
                $("#regist_container").show(500);
                $("#_close").animate({
                    height : '40px',
                    width : '40px'
                }, 500);
            });
        });
        //關閉
        $("#_close").click(function() {

            $("#_close").animate({
                height : '0px',
                width : '0px'
            }, 500, function() {
                $("#_close").hide(500);
                $("#login_container").hide(500);
                $("#regist_container").hide(500);
                $("#_start").animate({
                    left : '0px',
                    height : '0px',
                    width : '0px'
                }, 500);
            });
        });
        //去 注冊
        $("#toRegist").click(function() {
            $("#login_container").hide(500);
            $("#regist_container").show(500);
        });
        //去 登錄
        $("#toLogin").click(function() {
            $("#regist_container").hide(500);
            $("#login_container").show(500);
        });
    });
</script>
</head>

<body style="background-color: #DCDCDC;">

    <a id="Login_start_" class="btn btn-danger" style="width: 100px; height: 40px; border-radius: 0;">登陸</a>
    <a id="Regist_start_" class="btn btn-success" style="width: 100px; height: 40px; border-radius: 0;">注冊</a>

    <!-- 會員登錄  -->
    <!--<div id='Login_start' style="position: absolute;" >-->
    <div id='_start'>
        <div id='_close' style="display: none;">
            <span class="glyphicon glyphicon-remove"></span>
        </div>
        <br />
        <!--登錄框-->
        <div id="login_container">
            <div id="lab1">
                <span id="lab_login">會員登錄</span>
                <span id="lab_toRegist">
                    &emsp;還沒有賬號&nbsp;
                    <span id='toRegist' style="color: #EB9316; cursor: pointer;">立即注冊</span>
                </span>
            </div>
            <div style="width: 330px;">
                <span id="lab_type1">手機號/賬號登陸</span>
            </div>
            <div id="form_container1">
                <br />
                <form action="" th:action="@{~/login.action}">
                    <input type="text" class="form-control" placeholder="手機號/用戶名" id="login_number" value="admin" name="username"/>
                    <input type="password" class="form-control" placeholder="密碼" id="login_password" name="password" />
                    <input type="submit" value="登錄" class="btn btn-success" id="login_btn" />
                </form>
                <span id="rememberOrfindPwd">
                    <span>
                        <input id="remember" type="checkbox" style="margin-bottom: -1.5px;" />
                    </span>
                    <span style="color: #000000"> 記住密碼&emsp;&emsp;&emsp;&emsp; </span>
                    <span style="color: #000000"> 忘記密碼 </span>
                </span>
            </div>

            <div style="display: block; width: 330px;">
                <span id="lab_type2">使用第三方直接登陸</span>
            </div>
            <div style="width: 330px; height: 100px; border-bottom: 1px solid #FFFFFF;">
                <br />
                <button id="login_QQ" type="button" class="btn btn-info">
                    <img src="img/qq32.png" style="width: 20px; margin-top: -4px;" />
                    &emsp;QQ登錄
                </button>
                <button id="login_WB" type="button" class="btn btn-danger">
                    <img src="img/sina32.png" style="width: 20px; margin-top: -4px;" />
                    &emsp;微博登錄
                </button>
            </div>
        </div>
        <!-- 注冊 -->
        <form action="" th:action="@{~/user/register.action}"  method="POST">
        <div id='regist_container' style="display: none;">
            <div id="lab1">
                <span id="lab_login">注冊</span>
                <span id="lab_toLogin">
                    &emsp;已有賬號&nbsp;
                    <span id='toLogin' style="color: #EB9316; cursor: pointer;">立即登錄</span>
                </span>
            </div>
        
                <div id="form_container2" style="padding-top: 25px;">

                    <input type="text" class="form-control" value="Gary" placeholder="用戶名" id="regist_account" name="username" />
                    <input type="password" class="form-control" placeholder="密碼" id="regist_password1" name="password" />
                    <input type="password" class="form-control" placeholder="確認密碼" id="regist_password2" />
                    <input type="text" class="form-control" placeholder="手機號" id="regist_phone" name="telephone" />
                    <input type="text" class="form-control" placeholder="驗證碼" id="regist_vcode" />
                    <!--<button id="getVCode" type="button" class="btn btn-success" >獲取驗證碼</button>-->
                    <input id="getVCode" type="button" class="btn btn-success" value="點擊發送驗證碼" onclick="sendCode(this)" />

                </div>
                <input type="submit" value="注冊" class="btn btn-success" id="regist_btn" />
        </div>
        </form>
    </div>

</body>
<script type="text/javascript">
    var clock = '';
    var nums = 30;
    var btn;
    function sendCode(thisBtn) {
        btn = thisBtn;
        btn.disabled = true; //將按鈕置為不可點擊
        btn.value = '重新獲取（' + nums + '）';
        clock = setInterval(doLoop, 1000); //一秒執行一次
    }

    function doLoop() {
        nums--;
        if (nums > 0) {
            btn.value = '重新獲取（' + nums + '）';
        } else {
            clearInterval(clock); //清除js定時器
            btn.disabled = false;
            btn.value = '點擊發送驗證碼';
            nums = 10; //重置時間
        }
    }

    $(document).ready(function() {
        $("#login_QQ").click(function() {
            alert("暫停使用！");
        });
        $("#login_WB").click(function() {
            alert("暫停使用！");
        });
    });
</script>

</html>

index.html

#Tymeleaf 編碼
spring.thymeleaf.encoding=UTF-8
#熱部署靜態文件
spring.thymeleaf.cache =false
#使用HTML5標准
spring.thymeleaf.mode=HTML5

#使用h2控制台
spring.h2.console.enabled=true

application.properties

package com.Gary.userlogin.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

//    設置一個主鍵    主鍵自增策略
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String telephone;
    
    protected User() {
        
    }
    
    public User(Long id,String username,String password,String telephone) {
        this.id=id;
        this.password=password;
        this.username=username;
        this.telephone=telephone;
    }
    
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    
}

User.java

package com.Gary.userlogin.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

//    設置一個主鍵    主鍵自增策略
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String telephone;
    
    protected User() {
        
    }
    
    public User(Long id,String username,String password,String telephone) {
        this.id=id;
        this.password=password;
        this.username=username;
        this.telephone=telephone;
    }
    
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    
}

UserController.java

package com.Gary.userlogin.repository;

import org.springframework.data.repository.CrudRepository;

import com.Gary.userlogin.domain.User;

//用戶注冊登錄接口
public interface UserRepository extends CrudRepository<User,Long>{
    
    
    
}

UserRepository.java

　　注冊表單：用戶點擊注冊后發送請求到"@{~/user/register.action}"

<!-- 注冊 -->
        <form action="" th:action="@{~/user/register.action}"  method="POST">
        <div id='regist_container' style="display: none;">
            <div id="lab1">
                <span id="lab_login">注冊</span>
                <span id="lab_toLogin">
                    &emsp;已有賬號&nbsp;
                    <span id='toLogin' style="color: #EB9316; cursor: pointer;">立即登錄</span>
                </span>
            </div>
        
                <div id="form_container2" style="padding-top: 25px;">

                    <input type="text" class="form-control" value="Gary" placeholder="用戶名" id="regist_account" name="username" />
                    <input type="password" class="form-control" placeholder="密碼" id="regist_password1" name="password" />
                    <input type="password" class="form-control" placeholder="確認密碼" id="regist_password2" />
                    <input type="text" class="form-control" placeholder="手機號" id="regist_phone" name="telephone" />
                    <input type="text" class="form-control" placeholder="驗證碼" id="regist_vcode" />
                    <!--<button id="getVCode" type="button" class="btn btn-success" >獲取驗證碼</button>-->
                    <input id="getVCode" type="button" class="btn btn-success" value="點擊發送驗證碼" onclick="sendCode(this)" />

                </div>
                <input type="submit" value="注冊" class="btn btn-success" id="regist_btn" />
        </div>
        </form>

　　創建一個User.java作為存儲User的實體

//    設置一個主鍵id    主鍵自增策略
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String telephone;

　　通過Spring提供的JPA Hibernate實現將用戶注冊的信息快速放入h2中，進行快速CRUD操作

　　讀取數據庫的方法封裝在CrudRepository中，UserRepository繼承CrudRepository<User,Long>接口

//用戶注冊接口
public interface UserRepository extends CrudRepository<User,Long>{
    
}

　　UserController,java中@RequestMapping("/user/register.action")接受用戶提交的表單請求並實現用戶注冊模塊【控制邏輯】

    @RequestMapping("/user/register.action")
    public ModelAndView register(User user) {
        
        UserRepository.save(user);
        return new ModelAndView("redirect:/index.action");
    }

H2數據庫中用戶登錄

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">


<head>
<meta charset="utf-8">

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css" />
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        //打開會員登錄 
        $("#Login_start_").click(function() {
            $("#regist_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left : '350px',
                height : '520px',
                width : '400px'
            }, 500, function() {
                $("#login_container").show(500);
                $("#_close").animate({
                    height : '40px',
                    width : '40px'
                }, 500);
            });
        });
        //打開會員注冊
        $("#Regist_start_").click(function() {
            $("#login_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left : '350px',
                height : '520px',
                width : '400px'
            }, 500, function() {
                $("#regist_container").show(500);
                $("#_close").animate({
                    height : '40px',
                    width : '40px'
                }, 500);
            });
        });
        //關閉
        $("#_close").click(function() {

            $("#_close").animate({
                height : '0px',
                width : '0px'
            }, 500, function() {
                $("#_close").hide(500);
                $("#login_container").hide(500);
                $("#regist_container").hide(500);
                $("#_start").animate({
                    left : '0px',
                    height : '0px',
                    width : '0px'
                }, 500);
            });
        });
        //去 注冊
        $("#toRegist").click(function() {
            $("#login_container").hide(500);
            $("#regist_container").show(500);
        });
        //去 登錄
        $("#toLogin").click(function() {
            $("#regist_container").hide(500);
            $("#login_container").show(500);
        });
    });
</script>
</head>

<body style="background-color: #DCDCDC;">

    <a id="Login_start_" class="btn btn-danger" style="width: 100px; height: 40px; border-radius: 0;">登陸</a>
    <a id="Regist_start_" class="btn btn-success" style="width: 100px; height: 40px; border-radius: 0;">注冊</a>

    <!-- 會員登錄  -->
    <!--<div id='Login_start' style="position: absolute;" >-->
    <div id='_start'>
        <div id='_close' style="display: none;">
            <span class="glyphicon glyphicon-remove"></span>
        </div>
        <br />
        <!--登錄框-->
        <div id="login_container">
            <div id="lab1">
                <span id="lab_login">登錄</span>
                <span id="lab_toRegist">
                    &emsp;還沒有賬號&nbsp;
                    <span id='toRegist' style="color: #EB9316; cursor: pointer;">立即注冊</span>
                </span>
            </div>
            <div style="width: 330px;">
                <span id="lab_type1">手機號/賬號登陸</span>
            </div>
        
    <form action="" th:action="@{~/user/login.action}"    method="POST">
            <div id="form_container1">
                <br />    
                    <input type="text" class="form-control" placeholder="手機號/用戶名" id="login_number" value="Gary" name="username"/>
                    <input type="password" class="form-control" placeholder="密碼" id="login_password" name="password" />
                    <input type="submit" value="登錄" class="btn btn-success" id="login_btn" />
                <span id="rememberOrfindPwd">
                    <span>
                        <input id="remember" type="checkbox" style="margin-bottom: -1.5px;" />
                    </span>
                    <span style="color: #000000"> 記住密碼&emsp;&emsp;&emsp;&emsp; </span>
                    <span style="color: #000000"> 忘記密碼 </span>
                </span>
            </div>
        </form>
        
            <div style="display: block; width: 330px;">
                <span id="lab_type2">使用第三方直接登陸</span>
            </div>
            <div style="width: 330px; height: 100px; border-bottom: 1px solid #FFFFFF;">
                <br />
                <button id="login_QQ" type="button" class="btn btn-info">
                    <img src="img/qq32.png" style="width: 20px; margin-top: -4px;" />
                    &emsp;QQ登錄
                </button>
                <button id="login_WB" type="button" class="btn btn-danger">
                    <img src="img/sina32.png" style="width: 20px; margin-top: -4px;" />
                    &emsp;微博登錄
                </button>
            </div>
        </div>
        <!-- 注冊 -->
        <form action="" th:action="@{~/user/register.action}"  method="POST">
        <div id='regist_container' style="display: none;">
            <div id="lab1">
                <span id="lab_login">注冊</span>
                <span id="lab_toLogin">
                    &emsp;已有賬號&nbsp;
                    <span id='toLogin' style="color: #EB9316; cursor: pointer;">立即登錄</span>
                </span>
            </div>
        
                <div id="form_container2" style="padding-top: 25px;">

                    <input type="text" class="form-control" value="Gary" placeholder="用戶名" id="regist_account" name="username" />
                    <input type="password" class="form-control" placeholder="密碼" id="regist_password1" name="password" />
                    <input type="password" class="form-control" placeholder="確認密碼" id="regist_password2" />
                    <input type="text" class="form-control" placeholder="手機號" id="regist_phone" name="telephone" />
                    <input type="text" class="form-control" placeholder="驗證碼" id="regist_vcode" />
                    <!--<button id="getVCode" type="button" class="btn btn-success" >獲取驗證碼</button>-->
                    <input id="getVCode" type="button" class="btn btn-success" value="點擊發送驗證碼" onclick="sendCode(this)" />

                </div>
                <input type="submit" value="注冊" class="btn btn-success" id="regist_btn" />
        </div>
        </form>
    </div>

</body>
<script type="text/javascript">
    var clock = '';
    var nums = 30;
    var btn;
    function sendCode(thisBtn) {
        btn = thisBtn;
        btn.disabled = true; //將按鈕置為不可點擊
        btn.value = '重新獲取（' + nums + '）';
        clock = setInterval(doLoop, 1000); //一秒執行一次
    }

    function doLoop() {
        nums--;
        if (nums > 0) {
            btn.value = '重新獲取（' + nums + '）';
        } else {
            clearInterval(clock); //清除js定時器
            btn.disabled = false;
            btn.value = '點擊發送驗證碼';
            nums = 10; //重置時間
        }
    }

    $(document).ready(function() {
        $("#login_QQ").click(function() {
            alert("暫停使用！");
        });
        $("#login_WB").click(function() {
            alert("暫停使用！");
        });
    });
</script>

</html>

index.html

#Tymeleaf 編碼
spring.thymeleaf.encoding=UTF-8
#熱部署靜態文件
spring.thymeleaf.cache =false
#使用HTML5標准
spring.thymeleaf.mode=HTML5

#使用h2控制台
spring.h2.console.enabled=true

application.properties

package com.Gary.userlogin.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

//    設置一個主鍵id    主鍵自增策略
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String telephone;
    
    protected User() {
        
    }
    
    public User(Long id,String username,String password,String telephone) {
        this.id=id;
        this.password=password;
        this.username=username;
        this.telephone=telephone;
    }
    
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getTelephone() {
        return telephone;
    }
    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
    
}

User.java

package com.Gary.userlogin.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import com.Gary.userlogin.domain.User;
import com.Gary.userlogin.repository.UserRepository;

@RestController
public class UserController {

    @Autowired
    private UserRepository UserRepository;
    
    //模型視圖
    @RequestMapping("/index.action")
    public ModelAndView index() {
        
        return new ModelAndView("/index.html");
    }
    
    @RequestMapping("/user/register.action")
    public ModelAndView register(User user) {
        UserRepository.save(user);
        return new ModelAndView("redirect:/index.action");
    }
    
    @RequestMapping("/user/login.action")
    public ModelAndView login(User user) {
        
        //獲得用戶登錄名和密碼
        User loginUser = UserRepository.findByUsernameAndPassword(user.getUsername(),user.getPassword());
        if(loginUser == null) {
            return new ModelAndView("redirect:/index.action");
        }else {
            return new ModelAndView("/welcome.html");
        }
        
    }
    
}

UserController.java

package com.Gary.userlogin.repository;

import org.springframework.data.repository.CrudRepository;

import com.Gary.userlogin.domain.User;

//用戶注冊登錄接口
public interface UserRepository extends CrudRepository<User,Long>{
    
    //遵循spring data jpa命名標准
    User findByUsernameAndPassword(String username,String password);
    
}

UserRepository.java

　　登錄表單：用戶點擊登錄后發送請求到"@{~/user/login.action}"

<form action="" th:action="@{~/user/login.action}"    method="POST">
            <div id="form_container1">
                <br />    
                    <input type="text" class="form-control" placeholder="手機號/用戶名" id="login_number" value="Gary" name="username"/>
                    <input type="password" class="form-control" placeholder="密碼" id="login_password" name="password" />
                    <input type="submit" value="登錄" class="btn btn-success" id="login_btn" />
                <span id="rememberOrfindPwd">
                    <span>
                        <input id="remember" type="checkbox" style="margin-bottom: -1.5px;" />
                    </span>
                    <span style="color: #000000"> 記住密碼&emsp;&emsp;&emsp;&emsp; </span>
                    <span style="color: #000000"> 忘記密碼 </span>
                </span>
            </div>
        </form>

　　添加Spring Data JPA中CrudRepository方法

　　//遵循spring data jpa命名標准
    User findByUsernameAndPassword(String username,String password);

　　同理注冊

    @RequestMapping("/user/login.action")
    public ModelAndView login(User user) {
        
        //獲得用戶登錄名和密碼
        User loginUser = UserRepository.findByUsernameAndPassword(user.getUsername(),user.getPassword());
        if(loginUser == null) {
            return new ModelAndView("redirect:/index.action");
        }else {
            return new ModelAndView("/welcome.html");
        }
    }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaWeb-SpringBoot_使用MySQL數據庫實現用戶管理_demo jsp+servlet+Tomcat+mysql實現用戶注冊、登錄、查看、修改實例之——數據庫設計 Django實現用戶注冊登錄 Django實現用戶注冊登錄利用PHP連接數據庫——實現用戶登錄注冊功能以及管理員對用戶注冊的審核功能使用Servlet實現用戶注冊 swing 實現用戶登錄注冊界面（不使用數據庫） django實現用戶注冊、登錄、退出 Java用io流來實現用戶注冊和登錄功能 Lumen實現用戶注冊登錄認證