簡單登陸系統的小案例

2020年5月19日javascript

額,今天是520的前一天,雖然跟我沒啥關係 這幾天作了一個簡單的登陸系統css

一、初衷html

主要是測試本身對springBoot的理解和掌握(由於本身前段時間自學了這個springBoot因此想測試一下)還有就是對SSM的回顧前端

話很少說上代碼(Don't talk too much about code)html5


二、開發環境java

語言Java

2_一、開發工具mysql

基於IntelliJ IDEA 2019.3

2_二、技術選型jquery

前端(還沒學Vue)git

基礎的HTML5  CSS JavaScript

		JQuery

後端github

SpringBoot(2.3.0.RELEASE) 

		基礎的SpringMVC、Spring 5.x和MyBatis3

        templates

	    MySql5.7

項目管理工具

Maven(3.6.3)

	Git

	GitHub項目的地址 (https://github.com/hello9geg/sms-login)

短信API(騰訊雲) (若有不懂,自行百度)

重要的pom.xml文件

<properties>
        <java.version>1.8</java.version>
        <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
        <!-- 佈局功能的支持程序  thymeleaf3主程序  layout2以上版本 一個適配-->
        <!-- thymeleaf2   layout1-->
        <thymeleaf-layout-dialect.version>2.4.1</thymeleaf-layout-dialect.version>
    </properties>

    <dependencies>

        <!-- 引入web模塊 能夠暫時先把它當作springMvc -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 引入thymeleaf模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- 引入外部的jqueryJar-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

        <!--導入配置文件處理器,配置文件進行綁定就會有提示-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- 引入myBatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>

        <!-- 引入mysql驅動 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- 引入Druid數據池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.20</version>
        </dependency>

        <!-- 引入騰訊雲的Jar -->
        <dependency>
            <groupId>com.github.qcloudsms</groupId>
            <artifactId>qcloudsms</artifactId>
            <version>1.0.6</version>
        </dependency>

        <!-- 建立springBoot項目自帶的測試組件 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

    </dependencies>

    <build>
        <plugins>

            <!-- 建立springBoot項目自帶的插件(打War包) -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

        </plugins>
    </build>

</project>

三、Java後臺代碼

3_一、Controller:這個主要是對發短信的業務的處理

package com.springboot.smslogin.controller;

import com.github.qcloudsms.SmsSingleSender;
import com.github.qcloudsms.SmsSingleSenderResult;
import com.github.qcloudsms.httpclient.HTTPException;
import com.springboot.smslogin.entity.UserInfo;
import com.springboot.smslogin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Random;

/**
 * @author
 * @date
 * @description
 */
@Controller
@RequestMapping("/userController")
public class UserController {

    @Autowired
    private UserService userService;


    @RequestMapping("/sms")
    @ResponseBody   //由於後臺傳來的ajax因此要加這個註解
    //smsphone 前臺傳來的smsphone(鍵)
    public String smsCode(String smsphone){

        String json = null;
        //判斷手機號是否被註冊過
        boolean result = userService.findUserInfoByPhone(smsphone);

        if(result == false){
            json = "{\"message\":"+ false +"}";
            return json;
        }else{
            //發送短信 獲取返回值
            String sms = SMS(smsphone);
            json = "{\"message\":"+ true +",\"sms\":\""+ sms +"\"}";
            return json;
        }
    }



    //發送短信 返回發送的驗證碼
    private String SMS(String phone) {

        String phoneNumber = phone;

        //短信內容 templateId這個Id對應着短信內容
        int templateId = 200461;

        //驗證碼
        String[] params = new String[1];

        //生成一個隨機的驗證碼
        String code = "";
        Random r = new Random();
        for (int i = 1; i <=4 ; i++) {
            code += r.nextInt(10);
        }
        //存放隨機的一個驗證碼
        params[0] = code;

        System.out.println(code+"=====================");

        //簽名
        String sign = "tLain公衆號";

        //拿到發送短信的核心類
        SmsSingleSender sender  = new SmsSingleSender(1400142856,"21306d751cfdf61ed433e506da242522");
        //發送短信
        try {
            SmsSingleSenderResult result = sender.sendWithParam("86", phoneNumber, templateId, params, sign, "", "");
            //也能夠拿到返回值 這裏的返回值用於查看你的錯誤信息
            System.out.println(result);
        } catch (HTTPException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return code;
    }

    @RequestMapping("/register")
    public String register(UserInfo userInfo){
        boolean result = userService.register(userInfo);

        if(result){
            //重定向到登陸頁面
            return "redirect:/indexController/index";
        }else{
            return "redirect:/indexController/registered";
        }
    }

    @RequestMapping("/login")
    public String login(UserInfo userInfo, Model model, HttpSession session){
        boolean result = userService.login(userInfo);
        if (result){

            //註冊成功重定向到主頁面 順便把用戶存取到會話中, 防止表單重複提交,重定向到後臺頁面
            session.setAttribute("userInfo",userInfo);
            return "login_success";
        }else{
            model.addAttribute("message","用戶名或者密碼錯誤");
            return "index";
        }
    }

}

3_二、Dao (由於作的系統比較簡單,因此數據訪問層頁比較簡單)

@Insert("insert into userInfo(phone,password) values(#{phone}, #{password})")
    public abstract Integer saveUserInfo(UserInfo userInfo);

    @Select("select * from userInfo where phone = #{phone} and password = #{password}")
    public UserInfo findUserInfoByPhoneAndPwd(UserInfo userInfo);

    @Select("select * from userInfo where phone = #{phone}")
    public abstract UserInfo findUserInfoByPhone(String phone);

四、前臺代碼

4_一、HTML

4_1_一、註冊頁面

註冊頁面代碼(HTML和本身寫的Js)

<!doctype html>
<!-- 引入templates的命名空間 xmlns:th="http://www.thymeleaf.org" -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" >
    <link href="css/font-awesome.min.css" type="text/javascript" rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link href="css/bootsnav.css" type="text/css" rel="stylesheet" th:href="@{/css/bootsnav.css}">
    <link href="css/normalize.css" type="text/css" rel="stylesheet" th:href="@{/css/normalize.css}">
    <link href="css/css.css" rel="stylesheet" type="text/css" th:href="@{/css/css.css}">

    <script src="js/jquery-1.11.0.min.js" type="text/javascript" th:src="@{/js/jquery-1.11.0.min.js}"></script>
    <script src="js/jquery.step.js" th:src="@{/js/jquery.step.js}"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="js/bootsnav.js" type="text/javascript" th:src="@{/js/bootsnav.js}"></script>

    <script src="js/jquery.js" type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <!--[if IE]>
    <script src="js/html5.js"></script><![endif]-->
    <title>註冊</title>
</head>

<body class="logobg_style">
<div id="large-header" class="large-header login-page">
    <canvas id="demo-canvas" width="1590" height="711"></canvas>
    <div class="Retrieve_style">
        <div class="Retrieve-content step-body" id="myStep">
            <h1 class="title_name">用戶註冊</h1>
            <div class="step-header">
                <ul>
                    <li><p>輸入電話</p></li>
                    <li><p>確認密碼</p></li>
                    <li><p>成功</p></li>
                </ul>
            </div>
            <div class="step-content">
                <div class="step-list login_padding">

                    <!-- 大表單 -->
                    <form role="form" id="form_login" class="">

                        <div class="form-group clearfix">
                            <div class="input-group col-lg-8 col-md-8 col-xs-8">
                                <div class="input-group-addon"><i class="icon_phone"></i></div>

                                <!-- 輸入的手機號的框 -->
                                <input type="text" class="form-control text_phone" name="phone" id="phone"
                                       placeholder="你的手機號" autocomplete="off">
                            </div>

                            <!-- 獲取驗證碼的按鈕 -->
                            <div class="col-lg-4 col-md-4 col-xs-4 fl"><input type="button" id="sms-input" class="btn_mfyzm"
                                                                              value="獲取驗證碼" onclick="SendSMS()"/>
                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="icon_yanzhen"></i></div>

                                <!-- 輸入短信驗證碼的框 -->
                                <input type="text" class="form-control" name="Verification" id="sms-code"
                                       placeholder="短信驗證碼" autocomplete="off">
                            </div>
                        </div>
                        <div class="tishi"></div>
                    </form>

                        <div class="form-group">
                            <!-- 下一步按鈕 disabled="disabled" 若是沒輸入手機號和驗證碼是不容許點擊的 -->
                            <button class="btn btn-danger btn-block btn-login" id="applyBtn" disabled="disabled" >下一步</button>
                        </div>

                </div>

                <div class="step-list">

                    <form method="post" role="form" id="" class="login_padding">
                        <div class="form-group clearfix">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="icon_password"></i>
                                </div>

                                <!-- 第一個密碼框 -->
                                <input type="password" class="form-control" name="password" id="password"
                                       placeholder="輸入密碼" autocomplete="off">

                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="icon_password"></i>
                                </div>

                                <!-- 第二個密碼框 -->
                                <input type="password" class="form-control" name="confirmpwd" id="confirmpwd"
                                       placeholder="再次密碼" autocomplete="off">

                            </div>
                        </div>
                        <div class="tishis"></div>
                        <div class="form-group">
                            <a href="javascript:void(0);" type="submit" class="btn btn-danger btn-block btn-login"
                               id="submitBtn">註冊</a>
                        </div>
                    </form>
                </div>


                <div class="step-list">
                    <div class="ok_style center">
                        <h2><img src="images/ok.png" th:src="@{/images/ok.png}"></h2>

                        <!-- 寫一個定時器的效果(倒計時的效果)已完成在jquery.step.js下的28行-->
                        <h5 class="color2 mtb20">你已成功註冊會員<b id="Os">5</b>秒後跳轉到首頁</h5>
                    </div>
                </div>

                <!-- 本身寫一個隱藏表單 -->
                <form  hidden  id="sms_form" th:action="@{/userController/register}" method="post">
                    <input id="sms_userName" name="phone"/>
                    <input id="sms_password" name="password"/>
                </form>

            </div>
        </div>
    </div>
</div>
<script src="js/TweenLite/TweenLite.min.js" th:src="@{/js/TweenLite/TweenLite.min.js}"></script>
<script src="js/TweenLite/EasePack.min.js" th:src="@{/js/TweenLite/EasePack.min.js}"></script>
<script src="js/TweenLite/rAF.js" th:src="@{/js/TweenLite/rAF.js}"></script>
<script src="js/TweenLite/demo-1.js" th:src="@{/js/TweenLite/demo-1.js}"></script>


<!-- 引入layer js 這個腳本主要是作彈出層的效果很不錯-->
<script src="js/layer/layer.js" th:src="@{/js/layer/layer.js}"></script>

<!-- th:inline="javascript" 能夠在javascript使用thymeleaf語法 -->
<script type="text/javascript" th:inline="javascript">

    var tiem = 5;
    var InterValOjb;

    //用於存儲 回調函數的返回值
    var sms;

    function timer() {
        if(tiem == 0){
            $("#sms-input").val("從新獲取驗證碼");

            //爲何要在這裏設置爲又把tiem設置爲5呢?
            // 緣由就是爲下一次點擊按鈕作準備,若是下一次點擊按鈕那就是等於5了,就會走else了,
            //而後這樣不斷的循環,只要有人點按鈕就會觸發這個事件
            tiem = 5;

            //點擊完一次在設置爲false 這裏使用原生的Jquery
            document.getElementById("sms-input").disabled = false;

            //若是時間等於0秒的話,那就刪除定時器
            window.clearInterval(InterValOjb);
        }else{
            tiem --;
            $("#sms-input").val(tiem+"秒");
        }
    }

    //把按鈕隱藏30s的效果
    function SendSMS() {

        //獲取手機號,使用正則表達式來驗證手機號的正確與否
        var phone = $("#phone").val();
        if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){

            //發送Ajax請求 這裏雖然會顯示錯誤,可是不會影響程序的運行
            $.post([[@{~/userController/sms}]],{"smsphone":phone},function (data) {

                //若是該手機號已被註冊過的話那就不能註冊了
                if(data.message == false){
                    layer.msg("該手機號已被註冊");
                    return false;
                }else{
                    //把回調函數的結果 賦值給這個公共變量
                    sms = data.sms;
                    layer.msg("驗證碼發送成功,請注意查收");
                    //把用戶輸入的手機號 添加到隱藏表單手機號
                    $("#sms_userName").val(phone);
                }
            },"json");

            //設置按鈕的只讀屬性
            $("#sms-input").attr("disabled","true");

            //每隔一千毫秒(1秒)就調用一次這個timer方法
            InterValOjb = window.setInterval(timer,1000);
        }else{
            layer.msg("手機格式有誤");
            return false;
        }
    }

    //驗證碼的離焦事件(失去焦點) 判斷密碼是否正確
    $("#sms-code").blur(function () {
        //獲取用戶輸入的驗證碼
        var code = $("#sms-code").val();

        //獲取真正的驗證碼

        // 第一種方法(有誤):
        // 第一次是獲取不到值的 由於使用thymeleaf模板引擎第一次進入這個頁面它會自動渲染,(因此獲得的結果就是null)
        // 可是你的離焦事件啓動完了以後就會有值,只要你再次刷新頁面(從新渲染)那麼就會又有值了
        //var sms =  [[${session.sms}]];


        //第二種方法
        if(code == sms){
            layer.msg("驗證碼正確");
            $("#applyBtn").attr("disabled",null);
        }else{
            layer.msg("驗證碼輸入有誤,請從新輸入");
            $("#applyBtn").attr("disabled","disabled");
            return;
        }

    });
</script>

</body>
</html>

4_1_二、登陸頁面

登陸頁面代碼(HTML和本身寫的Js)

<!doctype html>
<!-- 引入templates的命名空間 xmlns:th="http://www.thymeleaf.org" -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" >
    <link href="css/font-awesome.min.css" type="text/javascript" rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link href="css/bootsnav.css" type="text/css" rel="stylesheet" th:href="@{/css/bootsnav.css}">
    <link href="css/normalize.css" type="text/css" rel="stylesheet" th:href="@{/css/normalize.css}">
    <link href="css/css.css" rel="stylesheet" type="text/css" th:href="@{/css/css.css}">

    <script src="js/jquery-1.11.0.min.js" type="text/javascript" th:src="@{/js/jquery-1.11.0.min.js}"></script>
    <script src="js/jquery.step.js" th:src="@{/js/jquery.step.js}"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="js/bootsnav.js" type="text/javascript" th:src="@{/js/bootsnav.js}"></script>

    <script src="js/jquery.js" type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <!--[if IE]>
    <script src="js/html5.js"></script><![endif]-->
    <title>註冊</title>
</head>

<body class="logobg_style">
<div id="large-header" class="large-header login-page">
    <canvas id="demo-canvas" width="1590" height="711"></canvas>
    <div class="Retrieve_style">
        <div class="Retrieve-content step-body" id="myStep">
            <h1 class="title_name">用戶註冊</h1>
            <div class="step-header">
                <ul>
                    <li><p>輸入電話</p></li>
                    <li><p>確認密碼</p></li>
                    <li><p>成功</p></li>
                </ul>
            </div>
            <div class="step-content">
                <div class="step-list login_padding">

                    <!-- 大表單 -->
                    <form role="form" id="form_login" class="">

                        <div class="form-group clearfix">
                            <div class="input-group col-lg-8 col-md-8 col-xs-8">
                                <div class="input-group-addon"><i class="icon_phone"></i></div>

                                <!-- 輸入的手機號的框 -->
                                <input type="text" class="form-control text_phone" name="phone" id="phone"
                                       placeholder="你的手機號" autocomplete="off">
                            </div>

                            <!-- 獲取驗證碼的按鈕 -->
                            <div class="col-lg-4 col-md-4 col-xs-4 fl"><input type="button" id="sms-input" class="btn_mfyzm"
                                                                              value="獲取驗證碼" onclick="SendSMS()"/>
                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="icon_yanzhen"></i></div>

                                <!-- 輸入短信驗證碼的框 -->
                                <input type="text" class="form-control" name="Verification" id="sms-code"
                                       placeholder="短信驗證碼" autocomplete="off">
                            </div>
                        </div>
                        <div class="tishi"></div>
                    </form>

                        <div class="form-group">
                            <!-- 下一步按鈕 disabled="disabled" 若是沒輸入手機號和驗證碼是不容許點擊的 -->
                            <button class="btn btn-danger btn-block btn-login" id="applyBtn" disabled="disabled" >下一步</button>
                        </div>

                </div>

                <div class="step-list">

                    <form method="post" role="form" id="" class="login_padding">
                        <div class="form-group clearfix">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="icon_password"></i>
                                </div>

                                <!-- 第一個密碼框 -->
                                <input type="password" class="form-control" name="password" id="password"
                                       placeholder="輸入密碼" autocomplete="off">

                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="icon_password"></i>
                                </div>

                                <!-- 第二個密碼框 -->
                                <input type="password" class="form-control" name="confirmpwd" id="confirmpwd"
                                       placeholder="再次密碼" autocomplete="off">

                            </div>
                        </div>
                        <div class="tishis"></div>
                        <div class="form-group">
                            <a href="javascript:void(0);" type="submit" class="btn btn-danger btn-block btn-login"
                               id="submitBtn">註冊</a>
                        </div>
                    </form>
                </div>


                <div class="step-list">
                    <div class="ok_style center">
                        <h2><img src="images/ok.png" th:src="@{/images/ok.png}"></h2>

                        <!-- 寫一個定時器的效果(倒計時的效果)已完成在jquery.step.js下的28行-->
                        <h5 class="color2 mtb20">你已成功註冊會員<b id="Os">5</b>秒後跳轉到首頁</h5>
                    </div>
                </div>

                <!-- 本身寫一個隱藏表單 -->
                <form  hidden  id="sms_form" th:action="@{/userController/register}" method="post">
                    <input id="sms_userName" name="phone"/>
                    <input id="sms_password" name="password"/>
                </form>

            </div>
        </div>
    </div>
</div>
<script src="js/TweenLite/TweenLite.min.js" th:src="@{/js/TweenLite/TweenLite.min.js}"></script>
<script src="js/TweenLite/EasePack.min.js" th:src="@{/js/TweenLite/EasePack.min.js}"></script>
<script src="js/TweenLite/rAF.js" th:src="@{/js/TweenLite/rAF.js}"></script>
<script src="js/TweenLite/demo-1.js" th:src="@{/js/TweenLite/demo-1.js}"></script>


<!-- 引入layer js (這個腳本主要是作彈出層的效果)很不錯-->
<script src="js/layer/layer.js" th:src="@{/js/layer/layer.js}"></script>

<!-- th:inline="javascript" 能夠在javascript使用thymeleaf語法 -->
<script type="text/javascript" th:inline="javascript">

    var tiem = 5;
    var InterValOjb;

    //用於存儲 回調函數的返回值
    var sms;

    function timer() {
        if(tiem == 0){
            $("#sms-input").val("從新獲取驗證碼");

            //爲何要在這裏設置爲又把tiem設置爲5呢?
            // 緣由就是爲下一次點擊按鈕作準備,若是下一次點擊按鈕那就是等於5了,就會走else了,
            //而後這樣不斷的循環,只要有人點按鈕就會觸發這個事件
            tiem = 5;

            //點擊完一次在設置爲false 這裏使用原生的Jquery
            document.getElementById("sms-input").disabled = false;

            //若是時間等於0秒的話,那就刪除定時器
            window.clearInterval(InterValOjb);
        }else{
            tiem --;
            $("#sms-input").val(tiem+"秒");
        }
    }

    //把按鈕隱藏30s的效果
    function SendSMS() {

        //獲取手機號,使用正則表達式來驗證手機號的正確與否
        var phone = $("#phone").val();
        if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){

            //發送Ajax請求 這裏雖然會顯示錯誤,可是不會影響程序的運行
            $.post([[@{~/userController/sms}]],{"smsphone":phone},function (data) {

                //若是該手機號已被註冊過的話那就不能註冊了
                if(data.message == false){
                    layer.msg("該手機號已被註冊");
                    return false;
                }else{
                    //把回調函數的結果 賦值給這個公共變量
                    sms = data.sms;
                    layer.msg("驗證碼發送成功,請注意查收");
                    //把用戶輸入的手機號 添加到隱藏表單手機號
                    $("#sms_userName").val(phone);
                }
            },"json");

            //設置按鈕的只讀屬性
            $("#sms-input").attr("disabled","true");

            //每隔一千毫秒(1秒)就調用一次這個timer方法
            InterValOjb = window.setInterval(timer,1000);
        }else{
            layer.msg("手機格式有誤");
            return false;
        }
    }

    //驗證碼的離焦事件(失去焦點) 判斷密碼是否正確
    $("#sms-code").blur(function () {
        //獲取用戶輸入的驗證碼
        var code = $("#sms-code").val();

        //獲取真正的驗證碼

        // 第一種方法(有誤):
        // 第一次是獲取不到值的 由於使用thymeleaf模板引擎第一次進入這個頁面它會自動渲染,(因此獲得的結果就是null)
        // 可是你的離焦事件啓動完了以後就會有值,只要你再次刷新頁面(從新渲染)那麼就會又有值了
        //var sms =  [[${session.sms}]];


        //第二種方法
        if(code == sms){
            layer.msg("驗證碼正確");
            $("#applyBtn").attr("disabled",null);
        }else{
            layer.msg("驗證碼輸入有誤,請從新輸入");
            $("#applyBtn").attr("disabled","disabled");
            return;
        }

    });
</script>

</body>
</html>

4_二、CSS

這個沒什麼好說的,就是下載的網頁的模板自帶的

4_三、JS

絕大部分使用的是模板自帶的

也有部分本身寫的

var step = $("#myStep").step({
        animate: true,
        initStep: 1,
        speed: 1000
    });
    $("#preBtn").click(function (event) {
        var yes = step.preStep();
    });

    $("#applyBtn").click(function (event) {

        var code = $.trim($("#Verification").val());
        var phone = /[1][3-9][0-9]{9,9}/;
        var phones = $.trim($("#phone").val());

        if ($.trim(phones) == "") {
            Tip('請填寫手機號碼!');
            $("#phone").focus();
            return;
        }

        var yes = step.nextStep();
        return;
    });


    $("#submitBtn").click(function (event) {
        var txtconfirm = $.trim($("#confirmpwd").val());
        var txtPwd = $("#password").val();

        if ($.trim(txtPwd) == "") {
            layer.msg("請輸入你要設置的密碼!");
            $("#txtPwd").focus();
            return;
        }
        if ($.trim(txtconfirm) == "") {
            layer.msg("請再次輸入密碼!");
            $("#txtconfirm").focus();
            return;
        }
        if ($.trim(txtconfirm) != $.trim(txtPwd)) {
            layer.msg("你輸入的密碼不匹配,請重新輸入!");
            $("#txtconfirm").focus();
            return;
        }

        // (若是兩次輸入的是正確的)
        $("#sms_password").val(txtconfirm);

        //倒計時效果
        var Os=document.getElementById("Os");
        var num=5;
        var timer=setInterval(function () {
            num--;
            Os.innerText=num;
            if(num==0){
                clearInterval(timer);
                window.location.href="/indexController/index";
                //5秒事後纔會提交隱藏表單 到數據庫
                $("#sms_form").submit();
            }
        },1000)

        var yes = step.nextStep();
        $(function () {
            setTimeout("lazyGo();", 1000);
        });

        function lazyGo() {
            var sec = $("#sec").text();
            $("#sec").text(--sec);
            if (sec > 0)
                setTimeout("lazyGo();", 1000);
            else
                window.location.href = "article_home.html";
        }
    });

五、遇到的困難

  1. 大意
  2. 由於寫Dao層的測試鏈接嘛,而後各類報錯,緣由很簡單 鏈接的數據庫不對,可是呢不一樣的數據庫又有相同的數據表,由於我寫的實體類是UserInfo嘛,而後另一個數據庫的表也是UserInfo 而後呢,我鏈接的是第二個數據庫
    可是我寫的實體類呢又是第一個數據庫的,因此就致使衝突了。 哈哈,很尷尬,我一直查找出錯的地方,沒想到居然是數據庫的鏈接信息寫錯了。哈哈,這讓我明白了一個道理,寫代碼,必定要細心

至於其餘的倒也沒了

六、總結OR收穫

  1. 先說收穫吧
    感受讓本身對SpringBoot的理解加深了一點,對templates語法也有一些其餘的認知吧,也同時對SSM的加深與鞏固
  2. 好比就是對下載好的模板的處理,Js的加深(其實腳本也挺好玩的),對隱藏表單的使用,對短信的發送也有了必定的理解吧
  3. 總結

雖然這只是一個小的登陸案例 可是呢,也讓本身對本身有了一個認知吧。知道本身哪裏缺什麼,該學什麼,

最後加油吧少年

相關文章
相關標籤/搜索