java web课程设计报告

1、实验完成情况记录学号201108030309姓名郭耀中联系方告文档的标题保存成：学号_姓名.docx所有web design 融合到几个简单页面中,并且填写下表内容要求（1）注册表单完成情况序号内容要求1)用户名：不能为空（支持中文，通过servlet过滤器实现编码转换）2)密码：不能为空，且大于4位，小于6位3)密码验证：不能为空，且与密码必须一致4)电话号码：不能为空，符合电话号码格式5)邮件地址：不能为空，且符合邮件基本格式（*.*）6)表单数据要存放到对应数据库中（ODBC）7)支持用户定义头像，头像上传后统一保存在页面根目录下的image文件夹内，头像图像大

2、小约束为200k，头像文件的名称和用户创建时间以及用户的ID相关，如zhangsan创建的头像：zhangsan_201402028)所有的注册信息由servlet完成注册操作内容要求（1）完成情况截图1.1用户注册1.2 1.3 1.4 1.5 下面是客户端验证（上面的这个没有使用客户端验证，故写了一个单独的jsp来完成要求）服务器端验证（struts2的验证框架）1.6 使用hibernate完成用户注册，下面是UserDao中注册用户的方法1.7 现在贴出相应（采用struts1.x实现，实在是忘了servlet如何上传了）1.8用struts2完成register信息添加到数据库中内容

3、要求（2）用户信息存储完成情况序号内容要求1)用户通过注册表单填写的注册信息，需要存放到对应的数据库中，采用ODBC的简单存储方式，通过传统的JDBCODBC代码实现内容要求（2）完成情况截图2.1 简单的mvc 结构，每一个领域对象对应一个servince,然后dao层用统一一个sqlhelper来辅助完成User领域对象对应servince类中的注册服务方法Dao层内容要求（3）用户登录完成情况序号内容要求1)如果用户未登录，访问任何页面都会弹出登录提示。（session）2)用户登录时，通过DAOVO进行用户的身份验证3)用户登录的时候会显示验证码，单击验证码会更新4)根据用户的登录选项

4、：保存密码2周。在客户端生成Cookie，2周内用户访问网站不要求其登录5)用户登录以后可以看到弹出窗口显示的欢迎信息，欢迎信息中显示当前的在线用户人数（application）内容要求（3）完成情况截图3.1 截图显示在没有登录的情况下访问主界面拦截器代码3.2 身份验证（UserServince）DAO层（SQLHelper）3.3具体代码如下/对应的servlet3.4 记住密码3.5 显示在线人数（原来是处理 查看在线用户的姓名）在main.jsp 中填上这么一句话，即可显示在线用户人数在线用户：<s:property value=”#application. onlineLis

5、t.length”/> 位内容要求（4）购物车完成情况序号内容要求1)用户登录后可以看到一些商品信息（该商品信息可以保存在数据库中提取，也可以是直接显示在页面上）2)用户可以选择商品，加入购物车内容要求（4）完成情况截图4.1 用户登录、显示购物大厅拿到拿到数据库中所有书籍4.2 购物车内容要求（5）算命游戏&计算器完成情况序号内容要求1)通过用户输入出生年月日来判断用户的星座，从而给出一个该星座的算命结论（当然，同学们要另外开发算命，算人品，算英俊潇洒值，都可以！）2)计算器要求加减乘除3)算命游戏存为js文件，通过加载进行添加4)计算器直接做成JSP页面内容要求（5）完成情况

6、截图5.1 5.25.3 外放js文件内容要求（6）底部LOGO完成情况序号内容要求1)所有页面底部都要有开发者的姓名、学号、联系方式的LOGO信息（include指令实现）内容要求（6）完成情况截图6.1上面图片的代码（main.jsp）：课程要求（7）Report： ajax的research report1. 什么是ajax框架Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服务进行通

7、信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。 术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户

8、甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：2. 为什么需要

9、ajax框架传统的Web应用模型采用同步交互模式，客户端首先向服务器端发送请求，服务器端接到客户端请求后进行相关的处理，并把结果返回给客户端，而在服务器处理的过程中，客户端不能进行任何其他操作，只能等待。得到服务器响应数据后，进行处理，再重新发送新的请求并等待响应。这是一种不连贯的用户体验。如果交互的数据不多，而服务器的处理速度足够快，响应时间足够短，则该种交互模式没有什么太大的问题。但一旦交互数据比较大，由于服务器的业务比较大，处理响应时间比较长，则客户端等待响应时间相对较长，而往往客户面对的是空白的屏幕（白屏现象）。如果时间太长（大于4秒），客户是没有耐心去等待的；更糟糕的是，等待相当长的

10、时间后，最终的结果却是连接服务器超时，这是不可忍受的。此外，用户在某些时候只需要更新页面中的部分数据，而在传统Web模式下，他不得不刷新页面，或重新装载该页面。同时，在传统Web模式下，若服务器端页面有更新，客户为了实时地得到最新的信息，不得不重复刷新页面，而不能在不刷新页面的前提下只更新目标页面中需要更新的内容。对于这些问题，Ajax能给出很好的解决方法，所以我们需要ajax来解决这些问题。3. 目前流行的ajax框架有哪些 现在最流行的可以说是：Jquery和extjs了 Jquery：Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容

11、CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 Extjs: 功能丰富，无人能出其右。

12、无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。其实从ext3开始就支持各种方式的统计，且有控件支持excel导出。4. Ex

13、tjs的学习应用：要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。仅仅

14、有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Component即可实现相关数据展示及交互等，而 Com

15、ponent是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如：var view=new Ext.Viewport();/创建了一个组件Componentview.el.setOpacity(.5);/调用Element的setOpacity方法view.el.dom.innerHTML="Hello Ext"/通过Element的dom属性操作DOM对象再看下面的代码：va