基于JSP+MySQL实现用户注册登录及短信发送功能

用户注册信息存入数据库

内容介绍

此项目是前台用户的登录和注册，,这部分包括两个子部分:其中一个为新用户注册，在这里我们可以通过注册浏览更多信息;另一个是用户登录，用户登录系统是一.般 Web 网站都有的子系统,其作用是限制该网站某些资源的使用,只有通过身份确认后的用户才可以访问系统为其设置的使用功能,从而为用户提供了安全的访问和数据操作，防止非法用户进入系统。
登录用到的技术有: ( jsp+servlet+mysq1)首先在网站首页页面下创建一个表单，表单 form、form1 在 ValidateServlet 中进行了具体定义，表单被提交到 /ValidateServlet 映射中,通过在 dbservlet 包中的 ValidateServlet. Java 类 中的 validatelogin (request, response)方法，获得登陆用户的相关信息，最后 在显示页面显示登录是否成功，如果成功登陆，进入 login. JSP 页面;如果不成功，进入 index. JSP 重新登录。

一、设计思路

用户运行登录界面，如果用户没有注册可以单击“注册”按钮跳转到会员注册页面，在用户注册页面分别输入用户名、密码、电话号码、手机验证码，而且对用户名、电话和短信进行了具体的验证，如果输入的具体信息不符合，则不会注册新用户，否则注册成功。

以下是流程图:

二、数据库设计

本数据采用 MySQL 数据库，只有一个表：数据表 userinfoinfo 用来存储后台会员名称，密码和基本资料。

2.1 用户信息表

下面是用户信息表表的具体内容：

用于保存用户注册基本信息，包括电话号码、短信验证、密码和确认密码。表设计结构如图：

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存放，这里使用的是阿里的fastjson
            HttpSession session = request.getSession();
            json = new JSONObject();
            json.put("mobile", mobile);
            json.put("verifyCode", verifyCode);
            json.put("createTime", System.currentTimeMillis());
            // 将认证码存入SESSION
            request.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.系统的功能不够完善。