学生活动管理系统

背景
1.关于我的项目
我的项目呢，是上学期的JAVA大作业，题目是学生活动管理系统，主要实现的功能是登录，查询，注册的三个功能，其中用了MVC架构。JavaBean,JavaServlet, JSP(Java Server Pages)组成。我记得上课的时候JAVA老师说现在社会上的MVC架构还在用，但是已经不用Servlet作为控制层，用的最多的是Structs。不过没关系，作为学习Java前端开发入门的一个小项目练练手也是足够了。在实际应用中，我发现网页的注册功能出现了一定的问题，比如说，在用户注册时，用户输入的用户名密码长短不一，不符合一定的用户名密码长度规定的格式，并且网页也不能识别出来这种错误。因此如何让网页提醒用户输入规范的用户名及密码格式是我这次需要解决的问题。采用JavaScript技术解决。

2.分析MVC架构
简单回顾MVC架构，顾名思义分为三个层次；
M - Model层， Model层是由JavaBean来组成，用来封装数据，实际上我们推敲JavaBean的中文释义应该能够知道， Bean，就是豆子的意思，就是用来把数据包裹起来。
V - View层， View层是由JSP来组成，是供给浏览你的网页的人观看的界面，一个美观的界面能够为你抓住一大部分用户的心。
C - Control层， Control层就是用来控制整个网页的逻辑，是一种控制层。

由这个MVC架构图我们可以看到，用户输入的数据传送到Model，数据在model层中与数据库进行交互，确定数据需要进行的操作，随后根据合适的业务逻辑进入不同的JSP界面。简单来说就是这样。

3.代码修改：

因为需要完善用户注册功能，所以，我采用每次讲用户在注册界面的表单信息里的数据存储起来传输给Javascript定义的函数，函数会根据由表单信息传来的参数打印一些提示语句。比如说

<td><input type="text" name="username" id="username" value=""
                                   style="width: 180px;height: 20px;background-color: peachpuff  "onChange="onChang1(this)">

这段代码中的 onChange = onChange1(this) 就是将当前用户设定的用户名信息传递给函数Onchang1（）。

相应的onChange1（）函数的代码

function onChang1(obj) {
            var obValue=obj.value;
            if(obValue.length>8||obValue.length<3){
                document.getElementById("usName").innerHTML="<font name='usName' style='font-size:12px; color: black'>长度要求3-8位!</font>";
                flag=0;
            }else{
                document.getElementById("usName").innerHTML="<font name='usName' style='font-size:12px;color: black'>可以使用</font>";
                flag++;
            }
        }

意思是，如果用户输入的用户名长度小于三或者大于八，系统就会提示用户输入的用户名格式有误长度要求3-8位！。

如果用户名格式正确，系统就会提示“可以使用”的字样。

然后是密码的格式识别两部分代码：

<td><input type="password" name="userpass" id="userpass" value=""
                                   style="width: 180px;height: 20px;background-color: peachpuff" onChange="onChang2(this)">

function onChang2(obj){
            var obValue=obj.value;
            if(obValue.length>8||obValue.length<6){
                document.getElementById("usPass").innerHTML="<font name='usPass' style='font-size:12px;color: black'>长度要求6-8位!</font>";
                flag=0;
            }else{
                document.getElementById("usPass").innerHTML="<font name='usPass' style='font-size:12px;color: black'>可以使用</font>";
                flag++;
            }
        }

当然，还有验证用户第二次输入的密码与第一次输入的密码是否相同的代码，如果用户第二次输入的密码与第一次不同，系统同样也会提示用户请再次确认密码!，代码如下：

<input type="password" name="userpass1" id="userpass1" value=""
                                   style="width: 180px;height: 20px;background-color: peachpuff"onChange="onChang3(this)">

function onChang3(obj){
            var obValue=obj.value;
            var pass=document.getElementById("userpass").value;
            if(obValue!=pass){
                document.getElementById("usPass1").innerHTML="<font name='usPass1' style='font-size:12px;color: black'>请再次确认密码!</font>";
                flag=0;
            }else{
                document.getElementById("usPass1").innerHTML="<font name='usPass1' style='font-size:12px;color: black'>通过</font>";
                flag++;
            }
            }

完成以上三步以后，在使用过程中还会出现的问题是，有些用户可能数据还没输入完全就点击提交，也就是说，三行数据只输入了两行数据就早早点击注册。我通过设置一个flag变量，只有当onChang1（），onChang2（），onChang3（）三个函数都执行完以后flag变量的数值变为3，用户才能注册成功。

function sub(){
            var name=document.getElementById("username").value;
            var pass=document.getElementById("userpass").value;
            var pass1=document.getElementById("userpass1").value;
            if(name!=null&&pass!=null&&pass1!=null&&pass.equals("pass1")){
                if(flag==3){
                    document.register.submit();
                }else{
                    alert("请认真填写注册信息");
                    document.getElementById("username").value="";
                    document.getElementById("userpass").value="";
                    document.getElementById("userpass1").value="";
                    document.getElementById("usName").innerHTML="";
                    document.getElementById("usPass").innerHTML="";
                    document.getElementById("usPass1").innerHTML="";
                }
            }
        }

4.结语
本项目是一个JAVA框架编程入门练手的小项目，在当时觉得是一件绝对不可能完成的任务，但是着手以后遇到不会的问题就上百度去查，印象最深的是当时没学过数据库，也不知道怎么在JAVA程序中读取文档和编辑文档，也是废了一番功夫才学会。如今能够在原来做好的项目的基础上继续深造一些功能，也是觉得满意了。

欢迎关注我的CSDN博客，上面有更多的知识分享哦!
https://blog.csdn.net/xdg15294969271?spm=1000.2115.3001.5343