Springboot与手机的互动

使用手机号码的登录注册案例来简单了解下Springboot与手机的互动

pom.xml

要引入sms相关的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.3.RELEASE</version><relativePath /> <!-- lookup parent from repository --></parent><groupId>com.sikiedu</groupId><artifactId>ssm-login</artifactId><version>0.0.1-SNAPSHOT</version><name>ssm-login</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.3</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><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><!--引入腾讯短信SMS的jar包--><dependency><groupId>com.github.qcloudsms</groupId><artifactId>qcloudsms</artifactId><version>1.0.6</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

登录与注册页面以及配置文件

application.properties

#Tumeleaf编码
spring.thymeleaf.encoding=UTF-8
#热部署静态文件
spring.thymeleaf.cache=false
#使用HTML5标准
spring.thymeleaf.mode=HTML5#连接数据库
spring.datasource.url=jdbc:mysql://::1:3306/ssm-login?serverTimezone=UTC&characterEncoding=utf-8&useSSL=true
spring.datasource.username=login
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

login.html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<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">
<link href="css/font-awesome.min.css" type="text/javascript" rel="stylesheet">
<link href="css/bootsnav.css" type="text/css" rel="stylesheet">
<link href="css/normalize.css" type="text/css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootsnav.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></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="login-form"><div class="login-content"><h1 class="title_name">账户登录</h1><form th:action="@{~/userlogin}" method="post" role="form" id="form_login" class="login_padding"><div class="form-group clearfix"><div class="input-group"><div class="input-group-addon"><i class="icon_user"></i></div><!-- 手机号 --><input type="text" class="form-control" name="phone" id="username" 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="password" id="password" placeholder="密码" autocomplete="off"></div></div><div class=" textright"><a href="#" class="forget">忘记密码？</a></div><div class="tishi"></div><div class="form-group"><a href="javascript:;" type="submit" class="btn btn-danger btn-block btn-login" onClick="cliLogin()"><i class="fa fa-sign-in"></i>登录</a></div><div class=" textright"><a href="/register" class="forget">立即注册</a></div><!-- Implemented in v1.1.4 --><div class="form-group"></div></form></div></div></div><script src="js/TweenLite/TweenLite.min.js"></script><script src="js/TweenLite/EasePack.min.js"></script><script src="js/TweenLite/rAF.js"></script><script src="js/TweenLite/demo-1.js"></script><script type="text/javascript">function cliLogin() {$("#form_login").submit();}</script>
</body>
</html>

register.html（重要）

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<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">
<link href="css/font-awesome.min.css" type="text/javascript" rel="stylesheet">
<link href="css/bootsnav.css" type="text/css" rel="stylesheet">
<link href="css/normalize.css" type="text/css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.step.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootsnav.js" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></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"><!-- 下一步 --><button class="btn btn-danger btn-block btn-login" id="applyBtn">下一步</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="data:images/ok.png"></h2><h5 class="color2 mtb20">你已成功注册会员<b id="sec">5</b>秒后跳转到首页</h5><a href="JavaScript：ovid()" class="btn btn-danger">首页</a><a href="JavaScript：ovid()" class="btn btn-primary">从新注册</a></div></div><form hidden="hidden" th:action="@{~/userRegister}" id="lain_form"><input id="lain_username" name="phone"/><input id="lain_password" name="password"/></form></div></div></div></div><script src="js/TweenLite/TweenLite.min.js"></script><script src="js/TweenLite/EasePack.min.js"></script><script src="js/TweenLite/rAF.js"></script><script src="js/TweenLite/demo-1.js"></script><script src="js/layer/layer.js"></script><script type="text/javascript">var time = 6;var InterValObj;//页面加载完成时 就调用window.onload = function(){document.getElementById("applyBtn").disabled = true;}function timer(){if(time == 0){//layer.msg("成功");  time = 6;$('#sms-input').val("获取验证码");document.getElementById("sms-input").disabled=false;//删除定时器window.clearInterval(InterValObj);}else{time--;//layer.msg(time+"秒");$('#sms-input').val(time+"秒");}}var sms;function SendSMS(){//获取手机号var telephone = $('#phone').val();if(!(/^1(3|4|5|7|8)\d{9}$/.test(telephone))){ layer.msg("手机号码有误，请重填");  return; };//发送ajax请求$.post(//发送的url[[@{~/sms}]],//数据{"phone":telephone},//回调function(data){if(data.message){$('#lain_username').val(telephone);layer.msg("验证码发送成功请注意查收");sms = data.sms;}else{layer.msg("该手机号已经注册过");}  },//数据格式"json")//设置按钮不再点击$('#sms-input').attr("disabled","true");//每隔一千毫秒调用一次InterValObj = window.setInterval(timer,1000);};//验证码的离焦时间$('#sms-code').blur(function(){//判断验证码是否正确var smsCode = $('#sms-code').val();layer.msg(smsCode);//拿到真正的验证码if(smsCode == sms){layer.msg("成功");document.getElementById("applyBtn").disabled = false;}else{layer.msg("验证码输入有误");$("#sms-code").focus();}});</script>
</body>
</html>

后端代码逻辑

com.sikiedu.ssmlogin.controller

IndexController.java

package com.sikiedu.ssmlogin.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class IndexController {//接收并处理index请求@RequestMapping("/index")public String index() {return "index.html";}//显示login页面@RequestMapping("/login")public String login() {return "login.html";}//显示register页面@RequestMapping("/register")public String register() {return "register.html";}
}

UserController.java(重要)

package com.sikiedu.ssmlogin.controller;import java.io.IOException;
import java.util.Random;import javax.servlet.http.HttpSession;import org.json.JSONException;
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 com.github.qcloudsms.SmsSingleSender;
import com.github.qcloudsms.SmsSingleSenderResult;
import com.github.qcloudsms.httpclient.HTTPException;
import com.sikiedu.ssmlogin.entity.User;
import com.sikiedu.ssmlogin.service.UserService;@Controller
public class UserController {@Autowiredprivate HttpSession session;@Autowiredprivate UserService userService;//用户登录@RequestMapping("/userlogin")public String userLogin(User user,Model model) {System.out.println(user);boolean success = userService.findUserByPhoneAndPassword(user);if(success) {session.setAttribute("user", user);return "redirect:/index";         }else {model.addAttribute("error","用户名或者密码错误");return "login.html";}}//用户注册@RequestMapping("/userRegister")public String userRegister(User user) {System.out.println(user);userService.save(user);return "redirect:/login";}@RequestMapping("/sms")@ResponseBodypublic String smsCode(String phone) {System.out.println(phone);//保护机制 如果用户注册过就不发送短信/** 通过phone查找用户，如果查找到就把过程给掐断*/boolean success = userService.findUserByPhone(phone);//没有对象success为true  有对象success为falseString json = null;//该用户没有注册if(success) {//发送短信String sms = SMS(phone);json = "{\"message\":"+true+",\"sms\":\""+sms+"\"}";}else {json = "{\"message\":"+false+"}";}return json;}//发送短信private String SMS(String phone) {//手机String phoneNumber = phone;//短信的内容   [tLain公众号]该项目的验证码为:1234 如非本人操作请忽略本短信int templateId = 200461;//参数String[] params = new String[1];//验证码String code = "";Random r = new Random();for (int i = 0; i < 4; i++) {code += r.nextInt(10);}//将Code放入Session中session.setAttribute("sms", code);params[0] = code;//签名String sign = "tLain公众号";//拿到发送短信的核心类SmsSingleSender ssender = new SmsSingleSender(1400142856, "21306d751cfdf61ed433e506da242522");//发送短信try {SmsSingleSenderResult result = ssender.sendWithParam("86", phoneNumber, templateId, params, sign, "", "");System.out.println(result);} catch (HTTPException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (JSONException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return code;}}

com.sikiedu.ssmlogin.dao

UserMapper.java

package com.sikiedu.ssmlogin.dao;import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import com.sikiedu.ssmlogin.entity.User;@Mapper
public interface UserMapper {@Insert("insert into user(phone,password) values(#{phone},#{password})")void save(User user);@Select("select * from user where phone = #{phone} and password = #{password}")User findUserByPhoneAndPassword(User user);@Select("select * from user where phone = #{phone}")User findUserByPhone(String phone);}

com.sikiedu.ssmlogin.service

UserService.java

package com.sikiedu.ssmlogin.service;import com.sikiedu.ssmlogin.entity.User;public interface UserService {void save(User user);boolean findUserByPhoneAndPassword(User user);boolean findUserByPhone(String phone);
}

com.sikiedu.ssmlogin.service.impl

UserServiceImpl.java

package com.sikiedu.ssmlogin.service.impl;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.sikiedu.ssmlogin.dao.UserMapper;
import com.sikiedu.ssmlogin.entity.User;
import com.sikiedu.ssmlogin.service.UserService;
@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UserMapper userMapper;@Overridepublic void save(User user) {userMapper.save(user); }@Overridepublic boolean findUserByPhoneAndPassword(User user) {User temp = userMapper.findUserByPhoneAndPassword(user);return temp==null?false:true;}@Overridepublic boolean findUserByPhone(String phone) {User temp = userMapper.findUserByPhone(phone);//查找没有对象则返回true  有对象返回falsereturn temp==null?true:false;}}

com.sikiedu.ssmlogin.filter过滤器

IndexFilter.java

package com.sikiedu.ssmlogin.filter;import java.io.IOException;import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;@Component
public class IndexFilter implements Filter {@Autowiredprivate HttpServletRequest httpServletRequest;@Autowiredprivate HttpSession session;@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {System.out.println("拦截"+httpServletRequest.getServletPath());if(httpServletRequest.getServletPath().equals("/index")) {if(session.getAttribute("user") != null) {chain.doFilter(request, response);}else {//如果没有登录就不访问首页request.getRequestDispatcher("/login").forward(request, response);;}}else {//处理其他请求放行chain.doFilter(request, response);} }
}

com.sikiedu.ssmlogin.entity

User.java

package com.sikiedu.ssmlogin.entity;public class User {private Integer id;private String phone;private String password;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User [id=" + id + ", phone=" + phone + ", password=" + password + "]";}}

Springboot与手机的互动相关推荐

计算机毕业设计springboot基于Springboot的手机电商网站lmo47源码+系统+程序+lw文档+部署
计算机毕业设计springboot基于Springboot的手机电商网站lmo47源码+系统+程序+lw文档+部署计算机毕业设计springboot基于Springboot的手机电商网站lmo47源 ...
springboot向手机发送验证码
** springboot向手机发送验证码 ** 1.在腾讯云里面申请短信签名,短信模板在百度搜索腾讯云,进入到腾讯云里面,在产品里搜索短信然后找到国内短信创建签名和模板,创建签名可以用公众号. ...
十二个“一”，十二台手机（互动媒体技术作业）
十二个"一",十二台手机(互动媒体技术作业) 选题: A:VIVO NEX3 B:OPPO Reno系列 C:iPhone 11系列 D:三星 Note10 系列 E:8848钛金 ...
基于Springboot+mysql手机商城（带后台管理系统）
项目描述 Springboot+mysql手机商城(带后台管理系统) 运行环境 jdk8+mysql+IntelliJ IDEA+maven 项目技术 springboot+mysql+mybatis ...
android手机电视互动,安卓手机投屏酷开电视如何实现多屏互动这么玩
原标题:安卓手机投屏酷开电视如何实现多屏互动这么玩安卓手机投屏酷开电视的操作方法是什么?小编指出安卓手机都具备投屏功能,但是在进行投屏操作之前,需要大家确认自己的手机是否具有"无线显示& ...
Springboot实现手机短信服务
一.首先进入云之讯注册账户链接:https://office.ucpaas.com/. 进入开发者控制台,获取对应的请求地址.应用ID.用户ID和鉴权token 进行认证创建模板二.Spring ...
android手机电视互动,手机APP控制电视长虹智能机多屏互动体验(组图)
谁说手机只能打电话,乔布斯改变了这一切. 谁说手机又只能自己玩呢?未来它一定是电视机的遥控器.甚至是以电视机为显示终端,通过手机传送各种智能设备的内容.节目推送等等.通过这种方式大大地提升了电视机人机 ...
SpringBoot 实现手机发送短信验证码
手机发送短信内容一.手机发送短信 1. 前端界面代码 2. UserInfoController 控制器 3. application.properties 配置类文件 4. 具体实现总结内容 ...
使用SpringBoot将手机中的照片上传到电脑
苹果手机如果想要将手机相册中照片上传到笔记本或电脑上,需要下载iTunes,需要连接到电脑,不太好操作:作为一个程序员,将照片上传到个人电脑其实很简单, 本文介绍使用SpringBoot开发一个简单的 ...

Springboot与手机的互动

Springboot与手机的互动

pom.xml

登录与注册页面以及配置文件

application.properties

login.html

register.html（重要）

后端代码逻辑

com.sikiedu.ssmlogin.controller

IndexController.java

UserController.java(重要)

com.sikiedu.ssmlogin.dao

UserMapper.java

com.sikiedu.ssmlogin.service

UserService.java

com.sikiedu.ssmlogin.service.impl

UserServiceImpl.java

com.sikiedu.ssmlogin.filter过滤器

IndexFilter.java

com.sikiedu.ssmlogin.entity

User.java

Springboot与手机的互动相关推荐

最新文章

热门文章