簡單的登錄注冊模塊的實現（一）

本文轉載自查看原文 2019-06-10 18:47 1613 登錄注冊/ java框架/ springboot

　　代碼地址：https://github.com/Aprilfi/Cube.git

　　一、用到的框架
　　　　1）SpringBoot

　　　　2）Spring Data JPA

　　　　3）thymeleaf
　　　 4）jq，js，css等

　　二、在開始實現功能前，首先要做的自然是設計數據庫表，這里由於只做登錄注冊，所以只做了兩張表，表結構如下：

id	用戶id
userName	用戶昵稱
realName	用戶真實姓名
sex	用戶性別
old	用戶年齡
idCard	身份證
ip	ip
status	封禁狀態
loginTime	登錄時間
registerTime	注冊時間
email	用戶郵箱
phoneNumber	用戶手機號碼
passWord	密碼
salt	隨即鹽

　　要值得注意的是，在創建表字段時，字段的數據類型要盡可能要適合場景，如賬號的封禁狀態，用char(1)就夠了。

　　三、代碼實現

　　　　后台：

import cn.lovepi.config.MainContext;
import cn.lovepi.controller.Handler;
import cn.lovepi.pojo.user.User;
import cn.lovepi.service.UserService;
import cn.lovepi.utils.MD5Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * @author Wuhl
 * @date 2019-05-08 16:17
 * @function 登錄、注冊
 */
@Controller
@RequestMapping("/user")
public class UserController extends Handler {

    @Autowired
    private UserService userService;


    @RequestMapping("/login.htm")
    public String login() {
        super.log.error(this.toString());
        return "user/login.html";
    }

    @RequestMapping("/register.htm")
    public String register() {
        return "user/register.html";
    }

    /**
     * @function 注冊驗證，驗證碼發送
     * @param user
     * @param request
     * @param map
     * @return login
     */
    @RequestMapping("/register")
    public String registerSubmit(User user, HttpServletRequest request, ModelMap map) {
        user.setSalt(MD5Util.getSaltMD5(user.getPassWord()));

        if(isEmail(user.getEmail())) {
            //發送郵箱驗證碼
        }else{
            //發送手機驗證碼
        }

        user.setIp(request.getRemoteAddr());
        user.setRegisterTime(super.getTime());
        user.setStatus(MainContext.USER_STATUS);
        super.setUser(request, user);
        userService.save(user);

        map.addAttribute("userName", user.getUserName());
        return "user/login.html";
    }

    /**
     * @function 登錄驗證
     * @param user
     * @param map
     * @return login
     */
    @RequestMapping("/login")
    public String loginSubmit(User user, ModelMap map) {
        List<User> users = userService.findByUserName(user.getUserName());
        if(users.size() < 1) {
            map.addAttribute("exist", true);
            return "/user/login.html";
        }else if(!MD5Util.getSaltverifyMD5(user.getPassWord(), users.get(0).getSalt())) {
            map.addAttribute("pasError", true);
            return "user/login.html";
        }
        //更新用戶最后登錄時間
        users.get(0).setLoginTime(super.getTime());
        userService.save(users.get(0));

        map.addAttribute("user", users.get(0));

        return "index.html";
    }

    @RequestMapping("/isUserName")
    @ResponseBody
    public String isUserName(String userName) {
        List<User> users = userService.findByUserName(userName);
        if(users.size() > 0) return "0";
        return "1";
    }

}

　　　　　　前端頁面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/sidebar/style.css"/>
    <link rel="stylesheet" type="text/css" href="/dist/css/barrager.css">
    <style>
        body input{
            height: 25px;
        }
        header {
            padding-top: 10%;
            width: 100%;
            text-align: center;
            margin-bottom: 5%;
        }

        #re_form {
            width: 40%;
            height: auto;
            margin: 0 auto;
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            border-radius: 10px;
            padding: 0 100px;
        }

        .form_input {
            height: 70px;
        }

        .form_input input {
            width: 100%;
            padding-left: 10px;
        }

        .submit {
            float: right;p
            margin-right: 5%;
            margin-bottom: 50px;
            border-radius: 5px;
            padding: 5px;
            width: 70px;
            height: 35px;
            border: 1px solid #6b6b6b;
        }
        .danger {
            color: red;
            text-align: center;
        }
        #skip_register {
            font-size: 25px;
            color: #1b1e21;
            position: fixed;
            right: 0;
            top: 0;
            opacity: 0.6;
            background-color: #9e9e9e;
            padding: 8px;
        }
    </style>
</head>
<body>
<header>
    <h1>L o  g i n</h1>
</header>
<div id="main">
<form action="/user/login" method="post" id="login_form">
    <table id="re_form">
        <tr class="form_input">
            <td>昵稱：</td>
            <td><input type="text" name="userName" id="userName" th:value="${userName}"/></td>
        </tr>
        <tr class="form_input">
            <td>密碼：</td>
            <td><input type="password" name="passWord" id="passWord"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="login" class="submit"/>
            </td>
        </tr>
    </table>
    <p class="danger" th:if="${exist}">用戶不存在</p>
    <p class="danger" th:if="${pasError}">用戶名與密碼不匹配</p>
</form>
</div>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript" src="/dist/js/jquery.barrager.min.js"></script>
<script>
    // 在鍵盤按下並釋放及提交后驗證提交表單
    $("#login_form").validate({
        rules: {
            userName: {
                required: true
            },
            passWord: {
                required: true
            }
        }
    });
    
    //注冊頁面跳轉
    $('#skip_register').click(function () {
        location.replace("/user/register.htm")
    });

    var item={
        img:'static/heisenberg.png', //圖片
        info:'test', //文字
        href:'wwe.baidu.com', //鏈接
        close:true, //顯示關閉按鈕
        speed:6, //延遲,單位秒,默認6
        color:'#fff', //顏色,默認白色
        old_ie_color:'#000000', //ie低版兼容色,不能與網頁背景相同,默認黑色
    }

    var itemJson = [];

    var index = 0;
    var length = itemJson.length - 1;

    console.log(length)
    function consoleLog(){
        $('body').barrager(itemJson[index]);
        if (index < length)  index ++;
        else if (index == length) index = 0;
        console.log(index)
    }
    var ref = setInterval(function(){
        consoleLog(index);
    },2000);



</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery/jquery-1.10.2.js"></script>
    <title>Title</title>
    <style>
        body input{
            height: 25px;
        }
        header {
            padding-top: 80px;
            width: 100%;
            text-align: center;
            margin-bottom: 5%;
        }

        #re_form {
            width: 40%;
            height: auto;
            margin: 0 auto;
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            border-radius: 10px;
            padding: 0 100px;
        }

        .form_input {
            height: 70px;
        }

        .form_input input {
            width: 100%;
            padding-left: 10px;
        }

        .submit {
            float: right;
            margin-right: 5%;
            margin-bottom: 50px;
            border-radius: 5px;
            padding: 5px;
            width: 70px;
            height: 35px;
            border: 1px solid #6b6b6b;
        }
        #skip_login {
            font-size: 25px;
            color: #1b1e21;
            position: fixed;
            right: 0;
            top: 0;
            opacity: 0.6;
            background-color: #9e9e9e;
            padding: 8px;
        }
    </style>
</head>
<body>
    <form action="/user/register" method="post" id="register_form">
        <table id="re_form">
            <tr class="form_input">
                <td>昵稱：</td>
                <td><input type="text" name="userName" class="username"/></td><span style="color: red;" id="username">*</span>
            </tr>
            <tr class="form_input">
                <td>郵箱/手機：</td>
                <td><input type="text" name="email" placeholder="郵箱地址或手機號碼"/></td>
            </tr>
            <tr class="form_input">
                <td>密碼：</td>
                <td><input type="password" name="passWord"/></td>
            </tr>
            <tr class="form_input">
                <td>確認密碼：</td>
                <td><input type="password" name="readPas" id="realPassword"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="register" class="submit"/>
                </td>
            </tr>
        </table>
    </form>

    <div id="skip_login">
        L o  g i n
    </div>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
    $('.username').bind('input propertychange',function () {
        $.ajax({
            type: 'post',
            data:{userName:$('.username').val()},
            dataType: 'text',
            url: "/user/isUserName",
            success: function (data) {
                $('#username').show();
                if (data == '0')
                    $('#username').css({'color':'red'})
                else
                    $('#username').css({'color':'green'})
            },
            error: function (data) {
            }
        });
    });

    //注冊頁面跳轉
    $('#skip_login').click(function () {
        location.replace("/user/login.htm")
    });

    // 在鍵盤按下並釋放及提交后驗證提交表單
    $("#register_form").validate({
        rules: {
            userName: {
                required: true
            },
            email: {
                required:true
            },
            passWord: {
                required: true
            },
            readPas: {
                required: true
            }
        }
    });
</script>

</body>
</html>

免責聲明！

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

猜您在找 django簡單實現注冊登錄模塊登錄注冊功能的簡單實現 Tornado實現簡單登錄注冊基於SSM框架實現簡單的登錄注冊 flask接口入門實現簡單的登錄注冊（一） Python 實現簡單的登錄注冊界面 JAVA簡單實現用戶登錄注冊 JavaWeb 實現簡單登錄、注冊功能 Springboot簡單登錄注冊功能實現 HTML登錄注冊頁面簡單實現