简单登录系统的小案例
2020年5月19日
额，今天是520的前一天，虽然跟我没啥关系 这几天做了一个简单的登录系统
1、初衷
主要是测试自己对springBoot的理解和掌握(因为自己前段时间自学了这个springBoot所以想测试一下)还有就是对SSM的回顾
话不多说上代码(Don't talk too much about code)
2、开发环境
语言Java
2_1、开发工具
基于IntelliJ IDEA 2019.3
2_2、技术选型
前端(还没学Vue)
基础的HTML5 CSS JavaScript
JQuery
后端
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文件
<java.version>1.8</java.version>
<thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.4.1</thymeleaf-layout-dialect.version>
3、Java后台代码
3_1、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_2、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、前台代码
4_1、HTML
4_1_1、注册页面
注册页面代码(HTML和自己写的Js)
<!doctype html>
用户注册
输入电话
确认密码
成功
你已成功注册会员5秒后跳转到首页
4_1_2、登录页面
登录页面代码(HTML和自己写的Js)
<!doctype html>
用户注册
输入电话
确认密码
成功
你已成功注册会员5秒后跳转到首页
4_2、CSS
这个没什么好说的，就是下载的网页的模板自带的
4_3、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";
}
});
5、遇到的困难
- 大意
- 因为写Dao层的测试连接嘛,然后各种报错,原因很简单 连接的数据库不对，但是呢不同的数据库又有相同的数据表，因为我写的实体类是UserInfo嘛,然后另外一个数据库的表也是UserInfo 然后呢，我连接的是第二个数据库
但是我写的实体类呢又是第一个数据库的,所以就导致冲突了。 哈哈，很尴尬，我一直查找出错的地方,没想到竟然是数据库的连接信息写错了。哈哈，这让我明白了一个道理,写代码，一定要细心
至于其他的倒也没了
6、总结OR收获
- 先说收获吧
感觉让自己对SpringBoot的理解加深了一点，对templates语法也有一些其他的认知吧，也同时对SSM的加深与巩固 - 比如就是对下载好的模板的处理，Js的加深(其实脚本也挺好玩的)，对隐藏表单的使用，对短信的发送也有了一定的理解吧
- 总结
虽然这只是一个小的登录案例 但是呢，也让自己对自己有了一个认知吧。知道自己哪里缺什么，该学什么，
最后加油吧少年
浙公网安备 33010602011771号