搜索
计算机软件工程专业09级实训汇报班级：软件092学号：2009111124姓名：林燕电话：15054187340内容提要•实训目的/目标•实训内容及要求•实训内容实现•实训演示•实训总结jQuery上传、信息修改•jQuery的定义•Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。实训目的/目标•使用jquery.form插件实现文件上传，使用jquery.tools.min.js插件实现tab页显示•通知表的信息包括：通知编号、标题、内容、附件文件地址、发布时间、发布人。上传文件存放在项目目录下的uploadfiles文件夹下实训内容及要求•1.认识选择符$要求：了解$()、CSS选择符、XPath选择符、自定义选择符的含义，学会使用这些选择符以及$(document).ready()方法。•2.事件要求：理解事件的绑定，熟练使用常用的事件：click、toggle、hover、show、hide、trigger•3.效果——为操作添加艺术性要求：熟练使用各种效果•4.DOM操作要求：能够熟练的使用jquery提供的方法灵活地操作DOM元素•5.ajax追加文件要求：使用jquery方法追加html文件•6.ajax实现表单提交要求：使用jquery.form插件实现表单提交•7.综合实验要求:使用jquery.form插件实现文件上传，使用jquery.tools.min.js插件实现tab页显示实训内容实现•1.jQuery代码实现•scripttype=text/javascript•$(document).ready(function(){•loadXmlDoc();•});•functionloadXmlDoc(){•$.get(../servlet/GetServlet,{flag:1},function(data){•varnoticearray=eval(data);•$('#mytabletr:gt(0)').remove();•$.each(noticearray,function(index,item){•$('#mytable').append(•trtd+item.id+/tdtd+item.title+/tdtd+item.content+/tdtd+item.annex+/tdtd+item.time+/tdtd+item.owner+/tdtdahref='javascript:delnotice(+item.id+)'删除/a/td/tr);•});•});•}•/script•scripttype=text/javascript•functiondelnotice(vsno){•if(confirm(确定要删除学号为+vsno+的记录吗？)==true){•$.get(../servlet/DeleteServlet,{•id:vsno•},functioncall(){•loadXmlDoc();•});•}•}•/script•scripttype=text/javascript•functionaddnotice(){•$('#addform').ajaxSubmit({•dataType:'json',•success:function(data){•//新增/修改后接着查询结果•loadXmlDoc();•cleartext();•}•});•}•/script•scripttype=text/javascript•functioncleartext(){•$('#title').val();•$('#content').val();•alert($('#annex').val());•}•/script•2、tabshow功能实现•body•ulclass=tabs•li•ahref=#发布通知/a•/li•li•ahref=#通知列表/a•/li•/ul•divclass=panes•div•formid=addformaction=../servlet/UploadServletmethod=post“enctype=multipart/form-data•标题：inputtype=textid=titlename=title/p•内容：textareaid=contentname=content/textareap•文件：inputtype=fileid=annexname=annex/p•inputtype=buttonvalue=提交onclick=addnotice()/•/form•/div•div•tableid=mytable•tr•tdwidth=80px•通知编号•/td•tdwidth=80px•标题•/td•tdwidth=120px•內容•/td•tdwidth=250px•附件地址•/td•tdwidth=160px•发布时间•/td•tdwidth=60px•发布人•/td•tdwidth=40px•管理•/td•tdwidth=40px•/td•/tr•/table•/div/div/body3.Servlet实现上传功能•publicclassUploadServletextendsHttpServlet{•protectedvoiddoGet(HttpServletRequestrequest,•HttpServletResponseresponse)throwsServletException,IOException{•//TODOAuto-generatedmethodstub•response.setContentType(text/html;charset=UTF-8);•response.setHeader(Cache-Control,no-cache);•Stringstrresult=上传成功！;•try{•DiskFileUploadfu=newDiskFileUpload();•fu.setHeaderEncoding(UTF-8);//解决中文乱码关键•//设置允许用户上传文件大小,单位:字节•fu.setSizeMax(10*1024*1024);•//设置最多只允许在内存中存储的数据,单位:字节•fu.setSizeThreshold(4096);•//设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录•//fu.setRepositoryPath(D:\\Tomcat);•//开始读取上传信息•ListfileItems=fu.parseRequest(request);•//依次处理每个上传的文件•Iteratoriter=fileItems.iterator();•Stringtempdir=System.getProperty(user.dir).replace(bin,webapps);•System.out.println(tempdir);•Stringtitle=null;•Stringcontent=null;•FilesavedFile=null;•while(iter.hasNext()){•FileItemitem=(FileItem)iter.next();•//忽略其他不是文件域的所有表单信息•if(!item.isFormField()){•Stringname=item.getName();•FilefullFile=newFile(item.getName());•//user.dir为D:/resin•savedFile=newFile(tempdir+/Notice/uploadfiles/,fullFile.getName());•System.out.println(savedFile);•item.write(savedFile);•}else{•Stringname0=item.getFieldName();•if(name0.equals(title)&&item.getString()!=null){•title=item.getString();•}•if(name0.equals(content)&&item.getString()!=null){•content=item.getString();•}•}•}•Entityentity=newEntity();•System.out.println(title=+title+,+content=+content);•entity.setTitle(title);•entity.setContent(content);•entity.setAnnex(savedFile.toString());•booleanflag=entity.register();•if(flag!=false){•strresult=上传成功;•request.getSession().setAttribute(entity,entity);•}•}catch(Exceptione){•strresult=e.getMessage();•}•request.setCharacterEncoding(gbk);•Gsongson=newGson();•Stringjson=gson.toJson(strresult);•response.getWriter().write(json);•}•protectedvoiddoPost(HttpServletRequestrequest,•HttpServletResponseresponse)throwsServletException,IOException{•//TODOAuto-generatedmethodstub•doGet(request,response);•}•}实训演示•图一、通知列表•图二、tabshow页面显示实训总结•在这一次实训中对jQuery开发方面取得了一定的了解，对于使用servlet实现了文件的上传功能也取得了进步。同时我也认识到要熟练的掌握好jQuery，并将之运用于实践中仍需要继续努力，不断丰富自己的经验才行。这次实训是对我们三年学习的一个检验，虽然项目中很多知识我们在日常的学习中都没有遇到，这同时提醒我：要想成为一个合格的程序员就有具备一种自学能力，在工作中会遇到很多从未接触过的问题，当有了问题时要去解决，在你不断努力，寻找答案的过程中，自己的能力也在潜移默化的提升。有时遇到问题时可能有很多想法但却不知道那个正确，这就让我们不断地去探索，不断地尝试。我相信通过这一次的实训，获得的知识和实践经验将会对我终身受益。网店•网店是基于asp.net的三层架构•“三层”应用结构：数据访问层、业务逻辑层（领域层）、表示层•分层的设计：–结构清晰、耦合度低–便于系统的扩展。–利于开发任务同步进行。–降低了一定的性能。实训内容•数据库搭建•使用SqlserverManagementStudio建立数