大概花了两个月的时间学习了jsp+servlet,现在大概知道什么是servlet拦截器,servlet监听器。虽然现在还不能够为所欲为的肆意妄为,但渣渣程序猿还是做出了个简单的比赛报名系统。我写下这篇文章不是为了介绍我做的这个系统多厉害,其实一点都不厉害,很简单功能的几个页面。只是我在这个项目上用到了许多 jsp+servlet技术的知识,想在此记录总结下心得。
项目的背景是我们的指导老师打算做个报名系统供我们组织的计算机设计校内选拔赛使用,计算机设计比赛就像个比赛联盟,有很多比赛的类型,我们学校选拔赛总共有79个队伍,所以为了减少报名的一些繁琐的工作,开发个报名系统简化报名流程和方便管理是很有必要的。所以我(负责后台)和一个伙伴(负责前台)接手了这个项目。
首先,我们来看下最终效果图吧,好有个期待对后面的东西。
用参赛者账号的登录的话会进入报名表界面,用管理员账号登录会进入管理员界面。
首先是数据库设计,我们参考了大赛提供的需要提交的报名表,以及一些实际开发的需要,设计了两张表。数据库设计我真的没有去好好学,这次项目开发让我感受到的最大的知识欠缺就是数据库设计,这个项目的数据库设计其实我并不满意,我仅仅只是为了满足这次开发的需要而笼统的这样子设计了,其实我是不满意的。
用户表 user_role 0表示管理员,1表示参赛者,2表示该用户已经提交过作品。(2表示用户已经提交过作品这点,我不知道规不规范到底,但是这样设计是可以满足这个项目的需求的。)
所以数据库设计我就这样设计了,基本思路我打算是这样的,用户登录,判断用户表的user_role,如果是0,则跳到管理员界面,如果是1,则跳到参赛者界面,如果是2,表示已经提交作品,则跳转到作品表界面。在项目还没开始编码时,我是如此打算的。
前台表单验证
因为这是用于报名的一个网页,所以对于表单数据的正确性和规范都是有严谨的要求,所以前台的工作量主要在表单那里,如手机号的正则表达式,专业的数据绑定,用户输入空格问题,用户漏填问题,用户提示清晰度问题等,这些其实并不难,主要结合实际考虑和细心。
前台界面搭建好后,就开始了后台代码的编码。登录界面就没什么好讲的,跳过了。
上面说了那么多,都是讲述了一个背景,下面才是我这篇文章的重点,也是我最大的心得,这个真的是亲手去用jsp+servlet编码才能感受到。
下面来看下我的ProductionServlet 你就会发现非常苦逼。
提交表是一个 有34个Input的大表单,就是说我需要在servlet上去写上面那么多个request.getParameter请求,构造函数也是格外的长,格外繁琐,写到渣渣程序猿心好累。而且在数据表的增删查看上,数据也是特别的长。在后面的学习struts中,我才知道可以使用struts框架的话,能够减少这样子的冗余。这种就是框架的好处吧,struts+spring+hibernate的框架并不是说一种模板偷懒的方式,我觉得更多的是一种规范和管理。
在这个ProductionServelt上就已经实现了作品的提交后,在管理员模板上相应的作品查看也就能实现了,关于作品的增删查改就不在这里阐述。
下面介绍下用到的拦截器。
Servlet从JSP表单上获取值,如果是中文就需要在servlet设置好request.setCharacterEncoding("utf-8");可是在每个servlet上都要写上这个设置就很繁琐,这个时候可以写个拦截器,对每个jsp上进行拦截,进行编码设置。
其实在Struts中只需要一句话配置就可以了,这很尴尬。
同时,在防止用户未登陆的状态下进入作品提交页面上时,应该使用户返回到登录页面。
这样也可以设置监听器来实现这个功能。
一个场景:在用户未提交作品时,登录后跳转到作品提交页面,在用户已经提交作品的情况下,登录后跳转到作品信息页。这样,就防止了用户重复提交作品的情况。
解决:设置个拦截器,拦截message.jsp,去判断用户的状态user_role,如果是2的话,说明作品已经提交成功,则根据用户表上的user_id去查表production,然后将查找到的信息显示在prodution.jsp上。如果 user_role不是2的话,就放过拦截。
Ajax(阿贾克斯)的使用
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。因为当时刚好接触了Ajax编码,于是就顺便在这个项目上用了这个技术,纯粹是为了练手。
var username=document.getElementById("username");
var password_old=document.getElementById("password_old");
// alert(username);
var url="servlet/VaildateChange?username="+username.value+"&password="+password_old.value;
url=encodeURI(url); //要写两次,编码问题,具体没去理解
url=encodeURI(url);
//创建一个XMLHttpRequest对象req
if(window.XMLHttpRequest) {
//IE7, Firefox, Opera支持
req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
//IE5,IE6支持
req = new ActiveXObject("Microsoft.XMLHTTP");
}
/*
open(String method,String url, boolean )函数有3个参数
method参数指定向servlet发送请求所使用的方法,有GET,POST等
boolean值指定是否异步,true为使用,false为不使用。
我们使用异步才能体会到Ajax强大的异步功能。
*/
req.open("GET", url, true);
//onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
req.onreadystatechange = callback;
//send函数发送请求
req.send(null);
}
function callback() { if(req.readyState == 4 && req.status == 200) { var check = req.responseText; show (check); } }
function show(str) { if(str == "OK") { var show = "密码正确可以修改" + ""; document.getElementById("confirminfo").innerHTML = show; } else if( str == "NO") { var show = "密码错误请重新修改"; document.getElementById("confirminfo").innerHTML = show; } }
上面这个是Ajax在JSP上编码的一个例子,我用来测试 在用户修改密码时,用户输入原始密码后,能异步的查询数据库判断原始密码正确与否,可否 让其修改密码。Ajax这里我只是勉强看得懂,学会了怎么使用。但具体详细的渣渣程序猿还不是特别的理解深刻,所以在此就没法多介绍了。
总结:使用JSP+Servlet时,在前台表单数据非常多时,需要在servlet的dopost上写许多request.getParamter()的冗余函数,在一个业务逻辑中,如作品提交模块,一个“作品”可能需要建立多个servlet或者采用传参的方式,这样在开发和维护上不利于管理,所以学习Struts+Spring+Hibernate是有必要的,我觉得这是一种规范一种管理。