Ajax技术在用户信息管理系统中的应用与研究.doc

目录第一章 前 言111 课题背景112 研究意义及目的2121研究目的2122研究意义213 论文结构3第二章 需求分析及概要设计4211 业务需求分析4212 概要设计4第三章 核心技术介绍631 Spring架构6311 Spring开发平台6312 DAO数据访问对象632 开发环境7321 Eclipse开发平台7322 Tomcat 应用服务器7323 Oracle数据库833 前台页面技术8331 JSP技术8332 HTML技术9333 CSS934 AJAX9341 AJAX与传统Web应用比较9342 AJAX包含的关键技术11343 利用AJAX技术的优势分析11344 AJAX技术框架ExtJS11第四章 方案设计及实现1341 系统开发环境及配置1342 功能详细设计1343 登陆模块14431 流程图14432 数据结构15433 页面请求15434 代码举例16435 界面描述1844 模块功能详细设计19441 流程图19442 EXT表格控件grid19443 EXT数据存储单元Record20444 EXT表单控件form21445 EXT中数据处理23446 数据结构26447 数据查询27448 界面描述29第五章 总结3151 容错检测及测试3152 存在的问题及未来的解决方案33521 存在问题33522 未来解决方案3353 项目开发收获33参考文献36致谢37附录38 第一章 前 言11 课题背景随着计算机技术、网络技术和数据库技术的飞速发展，全球进入了一个信息化社会的时代，这对我国的各中小企业的管理提出了严峻的挑战。产业信息化是信息社会的一个重要标志，将信息技术引入企业的生产管理各个方面，不但可以提高企业的现代化水平，而且能够提高企业的生产力和办事效率，从而为企业节省人力、物力，进而增强企业的竞争力。客户对于企业来说，其重要性是不言而喻的。随着企业的发展，业务范围的扩大，客户的数量动态的变化着。对于企业而言，和客户之间建立稳固的业务关系是很重要的，因此，企业必须要有一种管理客户信息的有效方式。目前市面上已经有了客户关系管理系统即CRM（customer relationship management），可以帮助企业进行用户信息的管理。但是在国内的现状是已有的CRM功能不一，SAP、oracle等大公司的CRM系统基于国外的市场经验，不一定符合国内企业，国内的众多CRM软件商要么经验不足，要么软件开发能力不足，要么采用的技术比较落后不能与世界接轨，不能满足高速发展的网络信息技术的优势。清华同方计算机系统本部远程服务事业部经营的是“e达无忧服务”。“e达无忧服务”是利用互联网技术远程为用户维护电脑设备的一种新的服务模式，属远程服务管理系统。只要用户可以上网，安装了无忧服务的客户端，就可以在电脑出现问题时随时与工程师取得联系，进行问题修复。由于面向所有使用电脑的用户，导致服务客户种类繁多，客户与公司之间的关系复杂，因此管理客户资料对于本公司来说是一件繁琐的工作。而且该项目刚刚上市一年多，在国内也是刚刚起步的新鲜电脑服务行业，它的服务流程也在逐步完善中。基于远程的服务模式，就使它和我们的传统的与用户面对面提供服务的模式不同，要求工程师通过远程与用户沟通后，迅速了解用户的服务信息。而用户的所有信息都是来自于网上，包括用户注册时的基本信息、历史服务维修信息等。用户的信息很多，如何进行有效的管理，使工程师迅速查到有用信息，如何让业务部门方便快捷的统计出需要的信息就成了一个问题。因此，部门研发部就为此需要自己开发出一套业务操作支撑系统，我的课题用户信息管理就是此次开发项目的一部分。39 12 研究意义及目的121研究目的客户是企业得以生存的关键，无忧服务是一种新型的服务，刚刚上市一年多，急需开拓市场、开发客源，培养客户的忠诚度，树立其在市场中的竞争力。因此通过一系列的管理模式建立与客户的友好关系迫在眉睫。通过建立对用户信息的管理，可以帮助企业更清楚的了解哪些功能性要求是用户所需求的，利于分析用户的消费趋势，帮助其开拓市场并在市场中站稳脚步。如果只是机械的统计每天的用户量、用户基本信息，而没有对其进行有效的管理（存储、分析、分类等），企业所做的努力只会得到治标不治本的效果。借助用户信息管理系统对用户信息进行有效的管理，可以帮助部门解决上述问题，带来如下益处：1. 建立良好的品牌形象；2. 拉近与消费者的距离，建立双向的沟通渠道，掌握消费趋势；3. 提供消费咨询，生活提案等多元化服务，使消费生活丰富化，增加消费频率，并开发新客源；4. 掌握消费者动态，培养长期用户；5. 作为服务行业，通过用户信息的管理，可以公平公正的处理客户投诉问题，减少客户投诉量，增加用户满意度；6. 建立用户坚实的向心力和忠诚度。122研究意义用户信息管理系统关注的是市场与客户，现在的客户有了比以往更多的对产品和服务进行选择和比较的机会与权利，客户的需求越来越个性化。所以用户信息管理的作用主要在与客户直接接触的部门，它主要针对的是企业的市场、销售、服务部门，包括管理整个客户生命周期的各个阶段，为企业提供了对客户及所购产品的统计、跟踪和服务等信息化手段和功能。用户信息管理系统的具体目标可归结为“提高客户满意度、降低客户流失率。通过用户信息管理系统，企业可以集成柜台、电话、Emajl、短信等多种渠道，将客户在接触、采购、送递及服务方面的信息在各个部门之间共享，并以此为基础，对客户进行分析，把客户的需求进行归纳，把客户的群体进行分类，从而采取个性化的服务，以从长期的发展中获得价值。用户信息管理价值突出体现在：通过对用户信息资源的整合，在企业内部达到资源共享，从而为客户提供更快速周到的优质服务，吸引和保持更多的客户；通过对业务流程的重新设计，更有效地管理客户关系，降低企业成本。用户信息管理的核心是客户的资源价值管理：通过满足客户的个性需求，提高客户的忠诚度和保有率，从而全面提升企业的盈利能力和竞争力；根据对客户特征、购买行为和价值取向的深入分析，为企业的决策提供科学、量化的指导，使企业在市场上保持稳定持续的发展能力。113 论文结构本文在第一章前言中首先介绍了论文的项目背景，分析了做用业务操作支撑的原因，重点是用户信息管理及其的意义和目的。第二章介绍了此次开发课题的需求分析以及总体的概要设计。第三章就业务操作支撑系统中的用户管理模块涉及的相关技术进行了简要介绍，重点对于使用的Ajax技术及其框架ExtJS进行了详细介绍，并阐述了采用此技术进行开发的原因。为下一章节的设计实现讲解奠定了基础。第四章对用户信息管理模块的详细设计进行了介绍。首先结合代码举例讲解了管理员登陆功能的设计及实现。最后对于基本模块（用户消费基本信息和服务单明细）的实现则以用户消费基本信息为例，结合代码讲解了其设计实现过程。第五章对此次项目的容错检测进行了展示，从进展进度和研究成果方面对论文进行了总结。第二章 需求分析及概要设计 211 业务需求分析“无忧服务”是利用互联网技术远程为您维护电脑。无论您在任何时间、任何地点遇到电脑系统故障或软件应用问题，都无需担忧，马上寻求“无忧服务”。 无忧服务的远程工程师就会通过互联网瞬时“送”到您的身边，他们会以最专业的技术，最优质的服务，在第一时间解决您的电脑问题。经过和业务部门进行沟通，得到了业务部门的需求：用户账号管理功能：要求其可以对于企业用户（大客户）的基本信息，如企业名称、企业联系人、企业描述等信息进行查询对于其他类型的用户基本信息（用户姓名、联系方式、email等）同样可以进行查询。客户满意度：要求其显示所有投诉的案例的关联信息，如服务日期，服务工程师，客户投诉意见等，并可以对于投诉案例进行处理等。对于用户每次服务完成后的满意度调查可以查询用户给出的评价、意见和建议等。以上两个功能还可以针对服务工程师、时间段来进行查询，利于对工程师进行绩效管理。客户消费：对于客户消费的通体情况进行统计，如用户登陆次数、消费次数、及服务卡的基本信息等进行查询。客户统计：要求对于用户注册用户数、远程服务量、用户登陆量进行统计，并可以按照时间段、服务卡类型、账号段、用户组别等来进行查询。服务明细：对于用户与工程师的服务信息进行跟踪记录，可以根据服务工程师、用户账号、时间段、服务单状态等条件进行查询。服务卡：对于部门开出的账户进行查看和根据开账号时间等条件进行查询，利于部门统计账号信息。212 概要设计通过分析业务部门需求，并考虑研发部门实际开发实现功能的难度，最终确立了业务操作支撑系统实现的功能，主要分成了客户管理、工程师管理、服务卡管理，维修服务管理和系统管理等模块（参见图2-1，业务操作支撑系统模块分配）。客户管理，就是我所研究的用户信息管理，它又细分为客户账号管理、客户满意度、客户消费、客户统计、服务明细和服务卡等小模块（参加图2-2，用户信息管理模块分配）。图2-1业务操作支撑系统模块分配图图2-2用户信息管理模块分配图整个开发项目利于Ajax技术进行，基于EXT+spring架构，结合Java语言进行开发。开发平台选择eclipse3.2，web服务器使用tomcat，数据库使用Oracle。第三章 核心技术介绍31 Spring架构311 Spring开发平台Spring是一个优秀的J2EE框架, 它提供了一种轻量级的控制反转（inversion of control，IoC）容器, 由该容器来创建（JavaBean）应用组件和管理组件之间的关系, 而非传统的通过硬编码的方式将各组件藕合在一起, 大大降低了各组件的藕合性。除了核心的IoC容器, sping的数据访问对象（data access object, DAO）模块提供了数据访问的支持, 对象关系映射（object/relation mapping， ORM）模块提供了对hibernate的支持, 面向方面编程（aspect oriented programming,AOP）模块提供了面向方面编程的支持。2312 DAO数据访问对象DAO模式是标准的J2EE设计模式之一，开发人员使用数据访问对象（DAO）设计模式把底层的数据访问逻辑和高层的商务逻辑分开。实现DAO模式能够更加专注于编写数据访问代码。DAO的设计采用了J2EE核心设计模式中描述的DAO设计模式，将数据库操作单独提取出来成为独立的一层，从信息系统的角度来讲可以把它作为数据库服务层，所有的数据库操作都要通过它来实现。本项目中DAO的创建采用了另一个设计模式：工厂模式。这个工厂比较特殊，通过传入DAO实现类的信息，得到的不是这个类本身而是它的一个代理，这样做有两个好处：1，方便以后很好的控制DAO的生成。假设有另一个优秀的团队采用更好的技术编写了更好的DAO实现，只需要在工厂作一下修改即可。而采用spring的反转注入(IoC)，甚至工厂类本身的代码都不需要修改，因为一切配置都放到了xml配置文件中，系统升级所要做的就是修改一下配置文件。2，通过DAO得到的是一个代理，这就意味着所有的操作都要通过这个代理进行，因此我们可以利用这个代理实现程序的“拦截”，从而在真正调用系统功能前做一些手脚，比如写一个log，判断用户的权限如果用户没有相关权限则不调用该函数等，而商业逻辑代码本身对此一无所知。事实上，这是spring的AOP技术的一个实现。32 开发环境321 Eclipse开发平台Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括 Java 开发工具（Java Development Tools，JDT）。Eclipse 还包括插件开发环境（Plug-in Development Environment，PDE），这个组件主要针对希望扩展 Eclipse 的软件开发人员，因为它允许他们构建与 Eclipse 环境无缝集成的工具。由于 Eclipse 中的每样东西都是插件，对于给 Eclipse 提供插件，以及给用户提供一致和统一的集成开发环境而言，所有工具开发人员都具有同等的发挥场所。单纯的一个eclipse是不可以和tomcat集成使用的，它需要使用相关的插件才能够用来开发tomcat Web应用。MyEclipse是Eclipse的插件，也是一款功能强大的J2EE集成开发环境，安装上这个插件后基本上就不用再安装其他插件了。3MyEclipse企业级工作平台（MyEclipse Enterprise Workbench ，简称MyEclipse）是对Eclipse IDE的扩展，利用它我们可以在数据库和J2EE的开发、发布，以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的J2EE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML、Struts、 JSF、 CSS、 Javascript、 SQL、Hibernate等。322 Tomcat 应用服务器Tomcat是一个免费的开源的Serlvet容器，也可以说tomcat是一个JSP和Servlet的运行平台。它有以下几个主要特点：1、 部署简单在Tomcat中，应用程序的部署很简单，你只需将你的WAR放到Tomcat的Webapps三目录下，Tomcat会自动检测到这个文件，并将其解压。2、易于操作基于tomcat的开发其实主要是JSP和Servlet的开发，开发JSP和servlet非常简单，可以用普通的文本编辑器或者IDE，然后将其打包成WAR即可。3、 集成方便Tomcat可以与其他一些软件集成起来实现更多的功能，如JBOSS、eclipse、WebSphere application studio、JBuilder等IDE软件。这些IDE软件在开发中能够自由的配置指向tomcat的安装路径，可以随意选择tomcat的不同安装版本，在开发环境中即可嵌入tomcat运行环境，进行集成调试。Eclipse使用tomcat进行开发为当前许多的开发人员所应用，本课题的开发环境也是选用的eclipse开发平台。4、与Apache完美结合Tomcat也具有传统的Web服务器的功能：处理Html页面。但是与Apache相比，它的处理静态Html的能力就不如Apache。我们可以将Tomcat和Apache集成到一块，让Apache处理静态Html，而Tomcat处理JSP和Servlet。这种集成只需要修改一下Apache和Tomcat的配置文件即可。4Tomcat是目前非常流行的Web服务器软件，不仅仅因为其免费，轻量级、功能强大，更因为其开放性，越来越收到人们的重视。323 Oracle数据库Oracle数据库系统是世界上最早商品化的关系型数据库管理系统，是数据库专业厂商Oracle公司的核心产品。Oracle 是以高级结构化查询语言(SQL)为基础的大型关系数据库，通俗地讲它是用方便逻辑管理的语言操纵大量有规律数据的集合。是目前最流行的客户/服务器(CLIENT/SERVER)体系结构的数据库之一也是目前应用最广泛、功能最强大、可用性最高的数据库系统。Oracle10g数据库提供了许多新的工具，它们帮助DBA更高效地工作。Oracle10g提供了第一个完整集成的软件基础架构来实现网格计算。它还具有可传输的表空间、回滚监视、闪回版本查询等特性。533 前台页面技术331 JSP技术JSP技术是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。此次毕设设计过程中，在用户登陆和注销涉的实现中使用了该技术。332 HTML技术HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。6333 CSSCSS是Cascading Style Sheets(层叠样式表)的简称。 CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行(属于浏览器解释型语言)。 在标准网页设计中CSS负责网页内容(XHTML)的表现。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀，可以通过简单的更改CSS文件，改变网页的整体表现形式,可以减少我们的工作量，所以她是每一个网页设计人员的必修课，CSS是由W3C的CSS工作组产生和维护的。34 AJAX341 AJAX与传统Web应用比较目前，开发Web的主要技术有JSP、ASP、PHP等，这些技术主要是基于传统的动态页面技术。传统的Web应用采用同步交互过程(见图2-1)，这种情况下，用户首先向Http服务器发出一个请求。反过来，服务器执行某些任务。再向发出请求的用户返回页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。7与传统的Web开发不同，Ajax 的核心是Ajax 引擎，它是一种支持异步请求的技术。Ajax 引擎使得客户端程序可以使用JavaScript 向服务器提出请求并处理响应，而不需要离开当前的页面。当用户需要获取信息的时候，由Ajax 提交一个客户端的请求到服务器，而用户可以继续停留在当前页面处理其他事务。服务器接收到客户端的请求并处理之后，将数据发回客户端进行显示。在整个服务器客户端的交互过程中，用户并没有离开当前页面，也没有感觉到页面的刷新（实际上页面中有部分内容已经被刷新），网络传输的数据只是被刷新的那一部分数据，无论是对服务器而言还是对网络而言，其压力已大大降低。对于用户本身而言，几乎感觉不到后台的传输、处理过程，从而获得了最新的信息，这就是俗称的“用户零响应体验”。图3-1AJAX应用与传统的Web应用的区别主要在3个地方：（1）、不刷新整个页面，在页面内与服务器通信；（2）、使用异步方式与服务器通信，无需打断用户操作，具有更迅速的响应能力；（3）、应用仅由少量页面组成。大部分交互在页面内完成，不需要切换整个页面。由此可见，AJAX使得Web应用更加动态，带来了更高的智能。AJAX是符合真正的Web标准的开发方式并且提供了表现能力丰富的AJAX UI组件，极大地改善了Web应用的可用性和用户的交互体验，使得B/S方式的Web开发焕发了新的活力。342 AJAX包含的关键技术AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。实际上，它并不是一种技术，而是由几种技术以新的方式组合而成。7（1）、用XHTML和CSS标准化呈现页面；（2）、使用DOM 实现动态显示和交互；（3）、使用XMLHttpRequest进行异步数据读取；（4）、使用JavaScript绑定和处理所有数据。客户端向服务器发出一个HTTP请求时，先将所需要的参数整合成一个XML 文件，再将这个XML文件发送到服务器端，服务器对该XML文件进行解析，取出所需的参数，将参数传递给后台页面处理程序，运行业务逻辑，读取数据库等，然后将执行结果也以XML数据格式返回到客户端，同时，还可以返回一份以XSL排版样式的文档，转换显示工作由客户端浏览器的JavaScript和DOM 控制来完成。所以说，在Ajax 中采用的是一系列已有的甚至是老旧的技术，把它们重新锻造、延伸，超越其原有的概念，以便可以应付客户端程序所要面对的复杂情况。Ajax 的工作原理相当于在用户和服务器之间加了一个中间层，来处理客户端的请求，使得用户操作与服务器响应异步化。343 利用AJAX技术的优势分析1、减轻服务器的负担。因为AJAX的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；2、无刷新更新页面，减少用户实际和心理等待时间，提供更好的用户体验；3、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；4、AJAX可以调用外部数据；5、基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序。总之，使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。344 AJAX技术框架ExtJS与所有优秀技术一样，Ajax已经催生出大量框架。框架实质上就是一组组件，供程序员选用，用于完成需要的程序功能。也就是说使用别人预定义好的功能模块。一个框架就是一个可以重用的设计组件，其规定了应用的体系结构，阐明了整个设计、协作组件之间的依赖关系、责任分配和控制流程。因此通过使用已有的框架，可以减少写Ajax的工作量、避免很多繁琐的操作。要强调一点，Ajax还很新，而且还在发展，框架领域也同样如此。几乎每天都有新来者。有些框架基于客户端，有些基于服务器端；有些专门为特定语言设计，另外一些则与语言无关。其中绝大多数都有开源实现，但也有少数是专用的。考虑纯JavaScripty库，目前主要使用的是Dojo和ExtJS。结合功能需求，部门研发人员采用了ExtJS框架进行开发。ExtJS是一种JavaScript开发框架,这种强大的JavaScript库提供了可重用的对象和部件, 简化了Ajax开发和丰富了客户端界面效果,通过使用该框架可以使Web层的开发使用到面向对象的特性,比如可复用性和可继承性等。该框架的核心思想是通过JavaScript来动态创建页面的标记元素,从而使得页面更灵活。而且该框架完全基于纯HTML/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用。9Ext JS提供大量用户界面元素,这些元素包括表单、对话框、选项卡、树和网格、页面布局等,用户可以直接使用这些元素来快速开发自己的页面,同时也可以扩展自己的页面元素以供使用。通过EXT技术可以使页面效果达到桌面应用程序的风格,给用户提供一个友好的人机交互界面,同时可以提高其操作的方便性。发展至今，Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。基于以上原因，本系统采用了Ext作为构建和美化页面的主要工具。第四章 方案设计及实现41 系统开发环境及配置1、系统开发环境表4-1 系统开发环境项目内容操作系统Windows XP开发技术AjaxAjax框架Extjs标记语言HTML样式语言CSS数据库软件OracleWeb平台Tomcat开发集成软件Eclipse客户端IE6.0及以上（适应Ajax等的应用）2、系统配置在安装JDSK时，需要我们配置环境变量java_home，值为D:jdsk，即JDSK在电脑中的位置。在安装Oracle时，则需要我们配置环境变量path，值为D:oracleproduct10.2.0db_1bin;D:jdskbin和PERL5LIB，值为D:oracleproduct10.2.0db_1perl5.8.3libMSWin32-x86;D:oracleproduct10.2.0db_1perl5.8.3lib;D:oracleproduct10.2.0db_1perl5.8.3libMSWin32-x86;D:oracleproduct10.2.0db_1perlsite5.8.3;D:oracleproduct10.2.0db_1perlsite5.8.3lib;D:oracleproduct10.2.0db_1sysmanadminscripts。42 功能详细设计此次系统开发，需要完成的功能很多，我主要负责完成的是：1、系统登录，主要完成给予管理员用户名密码进行身份校验后，判断其是否可以进入系统，若未通过校验，提示相应错误信息。2、客户消费中的客户消费统计功能，主要完成的功能是分块显示用户的基本消费信息，并能够进行相应的查询： 第一部分：用户账号、客户所属类别、登陆次数、消费次数； 第二部分：用户账号，消费次数，消费总额，卡号，联系电话，注册时间，购买时间，卡类型，绑定次数，激活时间，有效时间； 第三部分：查询功能，可根据用户账号、统计起始时间、统计截至时间来查询。3、服务明细中的服务单明细查询功能，主要完成的功能是对每个用户的每一单服务的消费情况进行详细记录和统计，并能够进行相应的查询：第一部分：用户账号，工程师账号，开始时间，结束时间，挂起时间，预扣时间，状态，故障，方案，聊天记录；第二部分：查询功能，可根据用户账号、工程师账号、开始起始时间、开始截至时间、挂起起始时间、挂起结束时间来查询。43 登陆模块431 流程图 图4-1 登陆流程图如图4-1所示，用户输入管理员用户名和密码，提交表单，系统判断用户的请求是页面请求，就根据提交的用户名和密码查询数据库，并验证密码的正确性，返回查询结果告知用户登陆成功或失败，若登陆成功跳转到相应权限所允许的页面；若失败则提示相关错误信息，如“用户名错误”、“密码错误”等。若用户需要以其他身份进行查看业务操作支撑系统，可通过“注销”来进行重新登陆。点击“注销”后，返回到登陆界面。可选择登陆的身份，是工程师还是管理员。基于管理员的登录部分功能可涵盖工程师部分，结合时间和难度的考虑，只做了管理员登陆功能。432 数据结构表4-2 t_popedom_user数据结构字段含义主键数据类型说明user_id用户idYnumber主键user_name用户名varchar(20)password用户密码varchar(40)Email用户电子邮箱varchar(255)Reg_time账号注册时间timestamp (6)时间格式该表主要记录管理员的基本信息，是每个管理员用户都必须具备的信息，每一个管理员占用一条记录，分配一个存储空间。其中user_id是主键，在用户注册的时候自动生成，作为区分每个管理员用户的标志。其他信息都是管理员的基本信息，但是账号注册时间Reg_time是由系统根据系统时间自动更新到数据库里的，不需要用户填写，也不会显示。433 页面请求一般在页面载入时，使用的就是JSP页面请求。本系统的登录功能就是通过JSP技术实现的。具体实现过程如下：（1）、 用户请求JSP页面(HTTP请求)。（2）、 Web Server中的Servlet容器发现URL中有JSP后缀, 就调用JSP容器来处理。（3）、如果此页面是第一次被请求, JSP容器要定位JSP页面文件并解释它,解释的过程包括：将JSP源文件处理成Servlet代码(java), 以及编译java文件生成Servlet的call文件。（4）、JSP容器运行页JSP页面实例, 此时Servlet (即JSP页面实例)就会出来HTTP请求, 生成对于的HTTP响应并传回给客户端。如果此页面不是第一次被请AJAX求, 则跳过（3）, 直接跳到（4）。多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。10434 代码举例/* loginServlet */public void doPost(HttpServletRequest request, HttpServletResponse response)throws IOException, ServletException HttpSession session = request.getSession(true);response.setContentType(text/html);response.setCharacterEncoding(UTF-8);PrintWriter out = response.getWriter();UserSessionInfo usi = (UserSessionInfo) session.getAttribute(Constant.USER_SESSION_INFO_KEY);if (usi != null) / loginedlog.debug(用户已登录： + usi + );/ request.getRequestDispatcher(/newmain.html).forward(request,response);response.sendRedirect(request.getContextPath();return; else / check request formString submit = request.getParameter(submit);if (submit != null) / 检查是否提交表单String userName = request.getParameter(userName);String password = request.getParameter(password);request.setAttribute(userName, userName);PopedomManager popedom = (qh.module.popedom.PopedomManager) ctx.getBean(popedom);try usi = popedom.userLogin(userName, password);session.setAttribute(Constant.USER_SESSION_INFO_KEY, usi); catch (ValidateFailure e) ValidateResult validateResult = e.getValidateResult();request.setAttribute(validateResult, validateResult);request.getRequestDispatcher(/login.jsp).forward(request,response);return;response.sendRedirect(request.getContextPath();return;request.getRequestDispatcher(/login.jsp).forward(request,response);该函数有两个重要参数，一个是HttpServletRequest方法类型的request参数，一个是HttpServletResponse方法类型的 response参数。首先，程序通过HttpServletRequest的getParameter方法得到变量action的值，然后判断该值是否为空，如果为空不执行任何操作，直接返回，如果该值不为空，表示请求有效，执行下一步操作。一旦请求有效，接下来利用察看用户是否登陆usi是否为空，如果不为空，则说明用户已经登陆成功，请求转发到系统显示界面路径；若为空，说明该用户为新用户登陆，则需要查看其登陆信息表单是否提交，即submit 是否为null，并需要校验用户名密码。如果submit不是null，说明用户已经提交用户名密码，就需要通过HttpServletRequest的getParameter方法得到输入的username和password的值，通过popedom的userLogin方法到数据库进行检验，查看是否有该用户存在，存在则通过请求重定向至系统显示界面即进入系统；不存在则提示相应错误信息。如果表单未提交，则请求转发到登陆界面，即login.jsp。435 界面描述图4-2 登陆界面业务操作支撑系统平台的登陆页面。用户需要选择登陆身份为“管理员”，并输入相应的登陆用户名和密码，点击登陆，校验通过后，即可进入系统，跳转到系统信息显示页面。图4-3 系统信息显示页面44 模块功能详细设计441 流程图图4-4 Extjs处理时序图首先载入页面，进行页面初始化，这个初始化过程，这个过程其实是请求页面的过程，接下来的动作就是调用封装好JS文件创建XMLHttpRequest对象。用户一旦单击复选框，发生onClick事件，就触发了XMLHttpRequest请求，系统会同样调用封装好JS文件向服务器发送异步请求，系统会判断用户的请求是AJAX请求，会根据传来的时间参数，查询数据库，Extjs接收到了服务器端返回的封装好的数据，通过store的load方法载入数据，通过Ext.onReady渲染页面，动态更新当前页面。442 EXT表格控件grid/*EXT表格grid的列设置 */var cm = new QH.CustomerConsumeStatistic.CustomerCardGrid.ColumnModel(rn, sm);QH.CustomerConsumeStatistic.CustomerCardGrid.ColumnModel = function(rn, sm) return new Ext.grid.ColumnModel(rn, sm, id : USER_ACCOUNT, / 可以使用自动伸展列属性header : 客户账号,dataIndex : USER_ACCOUNT,sortable : true,width : 100, / 其他列设置header : 激活时间,dataIndex : D_BEGIN_CARD,width : 140,sortable : true,renderer : function formatDate(value) return value ? value.dateFormat(Y-m-d H:i:s) : ;,);EXT中的ColumModel，简称cm，它是整个表格的列模型。每列的header表示列的名称，dataIndex是每列的索引，sortable是设置该列是否可以进行排列，width则是根据每列显示数据大小设置的宽度，如果需要列宽自动伸展，则可以使用autoExpandColum，但是它只能指定一列的id，本表格中就将格式不固定的用户账号设置为列自动伸展，因此它的列设置多设置了一个id。对于显示数据为时间格式的，则还需要设置时间格式，通过render就可以实现了，它有固定的格式，是EXT提供的格式化方法，这就是使用框架的好处，使我们不用去写格式化函数了。设置好后的客户消费统计表格grid效果为：图4-5443 EXT数据存储单元RecordExt.data.Record其实就相当于表中的一行数据。在EXT的表格控件中使用的数据都存放在record类中，Record类中包含了记录的各个列字段的定义信息如字段列的名称、字段列类型等，同时Record类中又包含了每一行详细的数据信息，也就是每一个字段的值。代码举例如下：QH.CustomerConsumeStatistic.Record = function() return Ext.data.Record.create(name : USER_ID,type : int, name : CONSUME_SUM,type : int);444 EXT表单控件form/*EXT中表单form的设置*/QH.CustomerConsumeStatistic.CustomerConsumeSearchForm = function(config) var form = new Ext.FormPanel(id : suspend_search_form,url : ,frame : true,title : 高级搜索,defaultType : textfield,iconCls : query,items : / 设置form输入框属性fieldLabel : 客户账号,name : USER_ACCOUNT,labelWidth : 30,disabled : false,anchor : 100%, / 其他form输入框属性设置fieldLabel : 统计截至时间,name : CONSUME_DATE_END,labelWidth : 30,disabled : false,readOnly : false,xtype : datefield,format : Y-m-d,anchor : 100%,buttons : / 设置form需要的按钮text : 查询,handler : function() if (!form.getForm().isValid() return;, text : 清空,handler : function() form.getForm().reset(););return form;针对管理员需要自己输入信息进行查询，EXT提供了form表单输入控件。通过title设置表单名称，需要输入的