用户注册信息存入数据库
内容介绍
此项目是前台用户的登录和注册，,这部分包括两个子部分:其中一个为新用户注册，在这里我们可以通过注册浏览更多信息;另一个是用户登录，用户登录系统是一.般 Web 网站都有的子系统,其作用是限制该网站某些资源的使用,只有通过身份确认后的用户才可以访问系统为其设置的使用功能,从而为用户提供了安全的访问和数据操作，防止非法用户进入系统。
登录用到的技术有: ( jsp+servlet+mysq1)首先在网站首页页面下创建一个表单，表单 form、form1 在 ValidateServlet 中进行了具体定义，表单被提交到 /ValidateServlet 映射中,通过在 dbservlet 包中的 ValidateServlet. Java 类 中的 validatelogin (request, response)方法，获得登陆用户的相关信息，最后 在显示页面显示登录是否成功，如果成功登陆，进入 login. JSP 页面;如果不成功，进入 index. JSP 重新登录。
一、设计思路
用户运行登录界面，如果用户没有注册可以单击“注册”按钮跳转到会员注册页面，在用户注册页面分别输入用户名、密码、电话号码、手机验证码，而且对用户名、电话和短信进行了具体的验证，如果输入的具体信息不符合，则不会注册新用户，否则注册成功。
以下是流程图:
二、数据库设计
本数据采用 MySQL 数据库，只有一个表：数据表 userinfoinfo 用来存储后台会员名称，密码和基本资料。
2.1 用户信息表
下面是用户信息表表的具体内容：
用于保存用户注册基本信息，包括电话号码、短信验证、密码和确认密码。表设计结构如图：
| 字段 | 类型 | 长度 | 说明 |
| Username | Varchar | 50 | 用户名（主键） |
| Phone | Varchar | 50 | 电话 |
| note | Varchar | 50 | 短信验证 |
| Pwd | Varchar | 50 | 密码 |
| Password | Varchar | 50 | 确认密码 |
2.2 项目结构代码
三、用户注册登录
如果是新用户，那么在登录之前需要先注册为本系统会员。详细步骤如下:
(1)在主页上单击“注册”按钮，则进入用户注册界面。
(2)如果填错，则可以单击“重置”按钮，那么填入的信息被清空。回到刚开始的界面。
(3)填好信息之后，可以单击“提交”按钮，那么信息会被保存到数据库表中。
3.1 注册板块及代码
(1)输入用户名，单击“检测而用户名”按钮，检测用户名是否存在。
(2)如存在则重新输入用户名用该用户登录。
(3)若不存在则输入其他信息，验证过通过后点击“注册用户”按钮，完成注册。
代码如下：
@WebServlet("/register.do")
public class RegisterServlet extends HttpServlet {private static final long serialVersionUID = 1L;public RegisterServlet() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {Map<String,Object> map=new HashMap<String, Object>();String mobile = request.getParameter("mobile");String verifyCode = request.getParameter("verifyCode");String pwd=request.getParameter("pwd");System.out.println(mobile);System.out.println(verifyCode);JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode");if(json == null){map.put("answer", "验证码错误");renderData(response, map);return ;}if(!json.getString("mobile").equals(mobile)){map.put("answer", "电话号码错误");renderData(response, map);return ;}if(!json.getString("verifyCode").equals(verifyCode)){map.put("answer", "验证码错误");renderData(response, map);return ;}if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 1){map.put("answer", "验证码已过期");renderData(response,map);return ;}//其他业务代码map.put("answer", "success");UserDao.insertUser(mobile,pwd);renderData(response, map);}protected void renderData(HttpServletResponse response,Map<String,Object> map){try {response.setContentType("text/plain;charset=UTF-8");response.getWriter().write(new Gson().toJson(map));} catch (Exception e) {e.printStackTrace();}}
}3.2 实现的界面
3.3 短信验证注册代码
var moblie_info=false;
var code_info=false;
var pwd_info=false;
var repwd_info=false;
$(function(){//短信验证码倒计时var countdownHandler = function(){var $button = $(".sendVerifyCode");var number = 60;var countdown = function(){if (number == 0) {$button.attr("disabled",false);$button.html("发送验证码");number = 60;return;} else {$button.attr("disabled",true);$button.html(number + "秒重新发送");number--;}setTimeout(countdown,1000);}setTimeout(countdown,1000);}$("#tele").on("blur",function(){var $mobile = $("input[name=mobile]");var data = {};data.mobile = $.trim($mobile.val());if(data.mobile ==''){$("#err1").text("请输入手机号码").css("color","red");return;}var reg = /^1\d{10}$/;if(!reg.test(data.mobile)){$("#err1").text("请输入合法的手机号码").css("color","red");return ;}else{$("#err1").text("√").css("color","green");moblie_info=true;}});$("#tele").on("focus",function(){$("#err1").text("");});$("#code").on("blur",function(){var $code = $("input[name=verifyCode]");var data = {};data.code = $.trim($code.val());if(data.code ==''){$("#err2").text("请输入验证码码").css("color","red");return;}else{$("#err2").text("√").css("color","green");code_info=true;}});$("#code").on("focus",function(){$("#err2").text("");});$("#pwd").on("blur",function(){var $pwd = $("input[name=pwd]");var data = {};data.pwd = $.trim($pwd.val());if(data.pwd ==''){$("#err3").text("请输入密码").css("color","red");return;}if(data.pwd.length<8||data.pwd.length>20){$("#err3").text("请输入8-20位字符").css("color","red");return ;}else{$("#err3").text("√").css("color","green");pwd_info=true;}});$("#pwd").on("focus",function(){$("#err3").text("");});$("#repwd").on("blur",function(){var $repwd = $("input[name=repwd]");var data = {};data.repwd = $.trim($repwd.val());if(data.repwd ==''){$("#err4").text("请输入确认密码").css("color","red");return;}if(data.repwd!=$("input[name=pwd]").val()){$("#err4").text("两次密码不一致").css("color","red");return ;}else{$("#err4").text("√").css("color","green");repwd_info=true;}});$("#repwd").on("focus",function(){$("#err4").text("");});//发送短信验证码$(".sendVerifyCode").on("click", function(){var $mobile = $("input[name=mobile]");var data = {};data.mobile = $.trim($mobile.val());if(data.mobile ==''){alert('请输入手机号码');return;}var reg = /^1\d{10}$/;if(!reg.test(data.mobile)){alert('请输入合法的手机号码');return ;}$.ajax({url:"sendSms.do",//async : true,type: "post",dataType: "json",data: {mobile:data.mobile},success: function (response) {if(response.answer == 'success'){countdownHandler();return ;}alert(response.answer);}});})//提交$(".sub-btn").on("click", function(){var data = {};data.mobile = $.trim($("input[name=mobile]").val());data.verifyCode = $.trim($("input[name=verifyCode]").val());data.pwd=$.trim($("input[name=pwd]").val());data.repwd=$.trim($("input[name=repwd]").val());if(data.mobile == ''){alert("请输入手机号");return ;}if(data.verifyCode == ''){alert("请输入验证码");return ;}if(data.pwd == ''){alert("请输入密码");return ;}if(data.repwd == ''){alert("请输入确认密码");return ;}if(!$("#check").get(0).checked){alert("请同意阅读协议");return ;}$.ajax({url:"register.do",// async : true,type: "post",dataType: "json",data: {mobile:data.mobile,verifyCode: data.verifyCode,pwd:data.pwd,repwd:data.repwd},success: function (response) {if(response.answer == 'success'){alert("注册成功");return ;}alert(response.answer);}});})
});3.4 登录代码
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>注册</title> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="js/function.js"></script>
</head>
<body> 手机号码:<input type="text" id="tele" name="mobile"/><span id="err1"></span><br/>验证码:<input type="text" name="verifyCode" id="code"/><button type="button" class="sendVerifyCode">获取短信验证码</button><span id="err2"></span><br/>登录密码:<input type="text" id="pwd" name="pwd"/><span id="err3"></span><br/>确认密码:<input type="text" id="repwd" name="repwd"/><span id="err4"></span><br/><input type="checkbox" id="check"/>已阅读协议<br/><input type="button" value="立即注册" class="sub-btn" /><br/>
</body>
</html>四、系统实现
4.1 注册短信用户系统
4.2 登录短信用户系统
4.3 发送短信验证码
$(".sendVerifyCode").on("click", function(){var $mobile = $("input[name=mobile]");var data = {};data.mobile = $.trim($mobile.val());if(data.mobile ==''){alert('请输入手机号码');return;}var reg = /^1\d{10}$/;if(!reg.test(data.mobile)){alert('请输入合法的手机号码');return ;}$.ajax({url:"sendSms.do",//async : true,type: "post",dataType: "json",data: {mobile:data.mobile},success: function (response) {if(response.answer == 'success'){countdownHandler();return ;}alert(response.answer);}});})4.3.1 实现界面
4.3.2 短信发送成功
4.4 获取验证码代码
@WebServlet("/sendSms.do")
public class SendSmsServlet extends HttpServlet {private static final long serialVersionUID = 1L;//短信平台相关参数private String apiUrl = "https://sms_developer.zhenzikj.com";private String appId = "107471";private String appSecret = "376f8bc4-e000-4d81-bd39-f63c95920bcb";public SendSmsServlet() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}/*** 短信平台使用的是榛子云短信(smsow.zhenzikj.com)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("进入该servlet");request.setCharacterEncoding("utf-8");Map<String,Object> map=new HashMap<String, Object>();try {String mobile = request.getParameter("mobile");System.out.println(mobile);JSONObject json = null;//生成6位验证码String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);//发送短信ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);Map<String, Object> params = new HashMap<String, Object>();params.put("number", mobile);params.put("templateId", "2726");String[] templateParams = new String[2];templateParams[0] = verifyCode;templateParams[1] = "1分钟";//发送短信params.put("templateParams", templateParams);String result =client.send(params);//client.send(mobile, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次!");System.out.println(result);json = JSONObject.parseObject(result);if(json.getIntValue("code") != 0){//发送短信失败map.put("answer", "fail");renderData(response, map);return;}//将验证码存到session中,同时存入创建时间//以json存放，这里使用的是阿里的fastjsonHttpSession session = request.getSession();json = new JSONObject();json.put("mobile", mobile);json.put("verifyCode", verifyCode);json.put("createTime", System.currentTimeMillis());// 将认证码存入SESSIONrequest.getSession().setAttribute("verifyCode", json);map.put("answer", "success");renderData(response, map);return ;} catch (Exception e) {e.printStackTrace();}map.put("answer", "fail");renderData(response, map);}protected void renderData(HttpServletResponse response, Map<String,Object> map){try {response.setContentType("text/plain;charset=UTF-8");response.getWriter().write(new Gson().toJson(map));} catch (Exception e) {e.printStackTrace();}}
}4.4.1 获取成功
五、总结
本次设计我的收获如下:
1.熟悉的 Java Web 开发的过程，Jsp+JDBC+Tomcat+Servlet 的组合，虽然没有用到更加高级的如 Struts,Hibernate 等框架，但是从基础的开始,让我更加熟悉了整个 Web 开发的业务流程.
2.在开发过程中难免会遇到这样或那样的问题，具体问题如下:
1）Servlet 的配置过程中，路径总是搞不清，通过查阅资料才明白如何配置 Servlet,调用 Servlet.
2）JDBC 数据库代码的编写的过程中，对数据库的操作总会出现这样或那样的异常，经过调试，查阅资料才得以解决.
3）JSP 页面操作的时候，由于对 HTML 语言的不熟悉，总是出现页面异常,通过本次设计,加大我对 HTML 语言的熟悉程度.
4）JSTL 标签库应用时，forEach 标签的应用时后，没有加入 JSTL.jar 包,总.是出现错误.
3.在 JavaWeb 开发的过程中,编写的代码也可能会出现各种难以找出的 Bug,而 Web 程序的调试不想 C++C 语言程序那样，程序的运行流程很清晰.所以在调试 Web 程序的过程中会有一些技巧.比如，将一些变量打印到控制台!
系统不足的地方:
1.没有处理中文乱码问题，上传中文名的文件，会出现乱码。
2.没有很好的异常处理，可能会由于用户的错误操作导致系统崩溃。
3.系统的功能不够完善。
