簡單登陸系統的小案例
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";
}
});
五、遇到的困難
- 大意
- 由於寫Dao層的測試鏈接嘛,而後各類報錯,緣由很簡單 鏈接的數據庫不對，可是呢不一樣的數據庫又有相同的數據表，由於我寫的實體類是UserInfo嘛,而後另一個數據庫的表也是UserInfo 而後呢，我鏈接的是第二個數據庫
可是我寫的實體類呢又是第一個數據庫的,因此就致使衝突了。 哈哈，很尷尬，我一直查找出錯的地方,沒想到居然是數據庫的鏈接信息寫錯了。哈哈，這讓我明白了一個道理,寫代碼，必定要細心
至於其餘的倒也沒了
六、總結OR收穫
- 先說收穫吧
感受讓本身對SpringBoot的理解加深了一點，對templates語法也有一些其餘的認知吧，也同時對SSM的加深與鞏固 - 好比就是對下載好的模板的處理，Js的加深(其實腳本也挺好玩的)，對隱藏表單的使用，對短信的發送也有了必定的理解吧
- 總結
雖然這只是一個小的登陸案例 可是呢，也讓本身對本身有了一個認知吧。知道本身哪裏缺什麼，該學什麼，
最後加油吧少年
相關文章
- 1. 簡單的用戶登陸案例
- 2. 簡單實現自動登陸(案例)
- 3. Servlet學習之簡單登陸案例
- 4. 簡單的登陸系統（java+JFrame+Mysql）
- 5. 多系統實現單點登陸方案：SSO 單點登陸
- 6. Servlet登陸小案例
- 7. Struts2 登陸小案例
- 8. Hibernate簡單登陸例子
- 9. 簡單用戶登陸系統
- 10. 一個簡單的Hibernate登陸實例
- 更多相關文章...
- • 系統定義的TypeHandler - MyBatis教程
- • C# Windows 文件系統的操作 - C#教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 簡單的用戶登陸案例
- 2. 簡單實現自動登陸(案例)
- 3. Servlet學習之簡單登陸案例
- 4. 簡單的登陸系統（java+JFrame+Mysql）
- 5. 多系統實現單點登陸方案：SSO 單點登陸
- 6. Servlet登陸小案例
- 7. Struts2 登陸小案例
- 8. Hibernate簡單登陸例子
- 9. 簡單用戶登陸系統
- 10. 一個簡單的Hibernate登陸實例