简单登陆系统的小案例
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. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 简单的用户登陆案例
- 2. 简单实现自动登陆(案例)
- 3. Servlet学习之简单登陆案例
- 4. 简单的登陆系统（java+JFrame+Mysql）
- 5. 多系统实现单点登陆方案：SSO 单点登陆
- 6. Servlet登陆小案例
- 7. Struts2 登陆小案例
- 8. Hibernate简单登陆例子
- 9. 简单用户登陆系统
- 10. 一个简单的Hibernate登陆实例