jQuery EasyUI入门

主要内容

• jQuery EasyUI介绍
• 管理系统需求分析
• 建立数据库
• 选择开发工具
• MyEclipse的语言配置
• 新建Web Project
• 安装Tomcat服务器
• 搭建SSH开发框架
• 搭建jQuery EasyUI开发环境

1.1　jQuery EasyUI介绍

作为一款开源前端插件集合，jQuery EasyUI已经非常强大了，跟EasyUI同时活跃在市场上的还有Bootstrap、Avalon等，可以说，这些前端插件各有各的好处。同时，学习这些知识也并不难，基本上学会一个，其他的都可以融会贯通。

学习jQuery EasyUI需要去的第一个地方就是官方网站http://www.jeasyui.com/（如图1-1所示）。在这里，可以查看jQuery EasyUI的最新动态，还有源代码，最主要的一点是可以学习Demo。在“Demo”菜单下，可以看到目前jQuery EasyUI实现的所有插件，用好这些插件，开发任务就可以轻松完成。

虽然官方网站的Demo很全面，但却不够细致。有时候，只是讲了一下基本功能，还有很多深层次的功能需要我们在实际开发中认真总结，甚至独创。毕竟，这是一款开源插件。

图1-1　jQuery EasyUI官方网站

从官方网站下载到jQuery EasyUI的源代码，还有需要引用的JavaScript文件，就可以着手搭建jQuery EasyUI的开发环境了。

在本书中，会讲一个管理系统的例子，与读者分享jQuery EasyUI的精妙之处。这个例子大体上需要从头到尾开发一遍，起到融会贯通的作用。其实，这个例子也可以算是学习jQuery EasyUI的典型，能够起到Demo的作用。只要牢固掌握了这个Demo，在以后的工作中，不论开发任务怎么变化，只要是jQuery EasyUI框架，就都可以复用。作者也曾想过，按照一般技术书的方式，一章一章地通过着重讲解功能来讲述jQuery EasyUI。但是，这样做有一个缺点，就是难以连贯，容易造成对知识的片面理解。毕竟，完全掌握jQuery EasyUI才能做到游刃有余，熟悉局部无法达到大师的水平。

1.2　管理系统需求分析

从管理系统开发的第一天开始讲起吧。

项目背景　张三是一个成功的商人，经商很多年了。他平时喜欢上网，从网上学到了很多新的知识。他认为，未来的世界是一个信息化的大数据时代。因此，张三觉得，经商这么多年自己积累的这些人脉、资源都可以进行管理，他想通过录入、分析来找出它们潜在的价值。于是，张三构思出了做一个管理系统的想法。他四处打听，经过一系列成本预算，与一家公司签订了开发管理系统的合同。

需求分析　该项目经理需要对整个项目进行设计，压力不言而喻。仔细分析一下，张三是一个商人，他所关注的无非是通过录入各种资源来分析客户消费行为，并在此基础上挖掘客户的潜在消费意向。明确了这一点，就掌握了项目开发的主旨。项目组经过和张三沟通，大致拟订了一个初步的开发方案。

首先，管理系统的重点是必须要有信息录入功能。其次，需要提供一些查询功能，通过对数据库中的数据进行整理和汇总，检索出符合要求的、有用的数据，并且通过报表的形式直观地呈现给客户。

张三的初始要求并不高，只要检索出有价值的数据即可，不用复杂的计算公式。通过直观的查看，加上自己的商业头脑，就可以分析出这组数据的大概结论。如果这个版本还算可以的话，用户可能会提出新的需求，并在支付一定的费用后，继续委托项目组开发。再有，张三特别提到，自己经商数十载，有很多惊心动魄的往事，希望在系统中可以有一些记事本、留言板之类的功能，最好还可以互动。

小组会议　拿到客户的需求后，项目组选择了有经验的开发人员，初步确定了投入的人力。大家经过一个下午的讨论，总算是确定了总体的开发方案：努力做好第一个版本，让张三满意的同时，也力争将管理系统做成一个成熟的产品。

虽然张三的初始要求并不高，但开发时间却很紧。因此，会议决定：管理系统的前端使用jQuery EasyUI来实现，后端使用Java语言来实现，数据库使用Oracle 10g来实现。争取在最短的时间内完成管理系统的开发。张三的需求很明确，前期并不需要特别多的沟通，因此这个项目的开发也可以算是瀑布模式的，但在具体的开发方面，还需要使用敏捷模式的那一套，如每日站会、及时反馈等。

1.3　建立数据库

打开Oracle10的“Database Configuration Assistant”功能，可以看到欢迎界面，单击“下一步”。这时，就正式进入了Oracle创建数据库的过程，具体创建数据库的过程是下面这样的。

（1）创建数据库，单击“下一步”。

（2）选择“一般用途”，单击“下一步”。

（3）“全局数据库名”输入manage。注意，“SID”一般需要和“全局数据库名”保持一致。这里，同样输入manage，然后单击“下一步”。

（4）数据库的“管理方式”可以保持默认配置，直接单击“下一步”。

（5）“数据库身份证明”，选择“所有账户使用同一口令”，输入manage，单击“下一步”。

（6）“存储选项”，选择“文件系统”，单击“下一步”。

（7）“数据库文件所在位置”保持默认配置，单击“下一步”。

（8）“恢复配置”，取消“制定快速恢复区”，单击“下一步”。

（9）“数据库内容”保持默认配置，单击“下一步”。

（10）“初始化参数”选择“典型”，“百分比”输入框中输入11，单击“下一步”。

（11）“数据库存储”保持默认配置，单击“下一步”。

（12）“创建选项”，单击“完成”，弹出对话框，列出了manage数据库的参数，单击“确定”，开始创建数据库。

（13）当数据库创建完成时，会弹出数据库账户锁定的提示信息对话框，单击“口令管理”，弹出对话框，可以看到，Oracle系统默认提供了很多账户，只有SYS、SYSTEM账户是没有被锁定的，其他的都已经被锁定。在这里，可以再次设定密码。因为之前已经设置过，所以此处不再设置，单击“确定”，关闭对话框，再单击“退出”。

建立Oracle数据库的过程中的第2步如图1-2所示。

图1-2　建立Oracle数据库

此时，Oracle的manage数据库已经被创建好了。因为manage只是单纯地用来为项目存储数据，初期不用太过于考虑性能和安全问题（项目上线之前会做压力测试）。所以，在很多设置上面都采用了默认配置和最低配置。这样的设置有一个好处，就是可以最大限度地减少数据库对系统资源的占用，做到轻量级。毕竟，本书的主要内容是讲开发的，而不是讲数据库维护的。再者，采用这种方式创建数据库，在以后的维护中，也可以通过实践来检测数据库哪方面不足，然后对数据库进行有针对性的优化，对比优化前和优化后的效果，这也不失为一种学习数据库的好方法。

建好了数据库实例，接下来，需要建立监听服务。打开Oracle的“Net Manager”功能，选择“监听程序”，单击左边的加号，在弹出的对话框中输入监听程序名LISTENER，单击“确定”。一般，配置监听位置就可以了，单击“添加地址”，“协议”选择“TCP/IP”，“主机”填127.0.0.1，“端口”填1521。因为manage数据库和项目程序都在本机上，所以在配置监听程序的时候，主机要填127.0.0.1，也就是代表本机的IP，或者填localhost，填计算机名称也可以。

当监听服务配置好后，就可以通过PLSQL来操作Oracle数据库了。一般来说，Oracle的服务只需要启动OracleOraDb10g_home1TNSListener监听程序，还有OracleServiceMANAGE就可以了，这样就具备进入PLSQL的条件了。最好把这些服务的启动方式设置为手动。如果是专门有一台计算机作为服务器的话，就需要设置为自动。简而言之，这里涉及计算机优化的问题，一般在开发环境中，也就是我们的本地计算机中，设置为手动更方便我们做到控制管理。在程序发布的正式环境中，一般是服务器上，也就是面对客户的版本，就需要设置为自动，保证24小时运行。

以下是Oracle的服务介绍，可以根据需要来设置它们的启动方式，以起到节省系统资源的作用。

• (SID)均指数据库安装时所指定的SID名称，(HOME_NAME)指安装时ORACLE_HOME指定值的最后Oracle安装名。Oracle在一台机器上可以有多个实例存在，如果使用多实例，关于SID和HOME_NAME的服务会成倍数存在，对系统的资源占用很大。
• 在建立一个数据库时，这些服务只会出现一次。可以根据具体的情况，选择开启和停止，并设置合适的启动方式。这样，把数据库的活动监控和管理起来远比什么都自动化好。
• OracleDBConsole(SID)是采用浏览器方式的Oracle企业管理器，即访问https://localhost:1158/em要用到的服务。
• Oracle(HOME_NAME) iSQL*Plus是iSQL*Plus的服务，要使用iSQL*Plus，应该开启该服务。
• OracleService(SID)是数据库主服务，该服务决定着数据库的启动和停止。服务进程为ORACLE.EXE，也就是Windows任务管理器进程中的运行项。
• Oracle(HOME_NAME)TNSListener是监听器服务，要使用PLSQL管理数据库，必须开启此服务。一般来说，数据库需要远程访问时都需要此服务（不管是通过另一台机器还是在本地通过SQL*Net网络协议）。

一般来说，只需要特别关注OracleService(SID)和Oracle(HOME_NAME)TNSListener就可以了。Service服务保证数据库启动，TNS保证PLSQL可以顺利连接。其他的服务可以酌情关闭，以节省系统资源。

在这里，有一个地方需要注意，如果采用手动方式来启动服务，可能会出现以下问题：如果长时间开启服务，或者不使用数据库，在某天需要使用的时候会发现实例开启了不起作用。通过Database Configuration Assistant来管理数据库的时候，竟然会发现原来建好的数据库都不存在了。其实，造成这个问题的原因是，现在的电脑都装有一些系统优化软件，这些软件在做优化的时候，容易把Oracle的一些注册表信息更改了，造成找不到相应的数据库。在这里，可以通过以下命令来重新建立数据库实例，然后，重启服务，就可以恢复正常。在命令行模式下直接执行：

oradim -NEW -SID manage -PFILE D:\oracle\product\10.2.0\admin\manage\pfile\init.ora 

此时，按理说，重启了服务，即可正常运行。但是，如果还是不能运行的话，就需要启动Database Configuration Assistant，单击“下一步”。这时候，因为之前已经重新建立过实例，程序会自动识别数据库，选择“配置数据库”选项，单击“下一步”。这时可以看到，数据库选项栏中出现了manage，选中它，单击下一步，当页面中出现了数据库组件页签时，就说明Oracle已经读取到了manage。此时，只要再次重启服务即可恢复正常。

本书并不会讲解太多数据库维护方面的知识，读者可以参考专业数据库方面的书籍。一般来说，软件工程师很少会兼顾数据库管理员（DBA）的角色，基本上每个公司都会有专门负责数据库维护的人员。这些人的工作就是做日常维护，包括数据库的调优、备份等。

1.4　选择开发工具

常用的Java Web开发工具有NetBeans、JBuilder、Eclipse等。在开发工具的选择上，这里不做太多的赘述。在国内Java Web开发领域，基本上都是以Eclipse为主流开发工具的，就连Java培训班也是。

但是，如果选择Eclipse作为开发工具，又存在一个问题：到底是用Eclipse还是用MyEclipse呢？其实，这个问题是值得去研究的，如果要做出最好的选择，就需要了解这两款软件的区别。

Eclipse是一个开源的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。

最初，是没有MyEclipse的。Eclipse的发展目标是包容万象，不但支持Java开发，也要支持其他语言的开发，它的功能扩展，是基于插件来完成的。这样的目标虽然让Eclipse显得很全面，但却使其没有了针对性。这时候，MyEclipse就应运而生了。

MyEclipse是在Eclipse基础上加上自己的插件开发而成的企业级集成开发环境，主要用于Java、Java EE以及移动应用的开发。MyEclipse的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持。

MyEclipse企业级工作平台（MyEclipse Enterprise Workbench）是对Eclipse IDE的扩展，利用它我们可以在数据库和JavaEE的开发、发布以及应用程序服务器的整合方面极大地提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML、Struts、JSP、CSS、JavaScript、Spring、SQL、Hibernate。

通过这两段引自官方的描述，可以大概了解这两个工具的区别。简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE集成开发环境，支持代码编写、配置、测试以及除错，MyEclipse 5.5以前的版本需先安装Eclipse，原来它并不是独立的。自MyEclipse 5.5起，安装时不再需要安装Eclipse，也就是说，直到这个版本的发布，MyEclipse才真正意义上成长起来，之前都是依靠Eclipse的。

其实，用Eclipse和MyEclipse都是可以的。这一点，在软件开发中，更倾向于自己的喜好。MyEclipse支持的插件很多，包括Java Web中很多常用的插件。毫无疑问，使用MyEclipse会更节省时间。

综合起来说，MyEclipse更适合Java Web领域的开发，因为它对Java Web开发中经常使用的框架（如Struts、Spring、Hibernate等）进行了集成，使用户经过简单的配置就可以使用。

在本书的管理系统项目中，我们选择使用MyEclipse 10作为开发工具。为了规避项目开发过程中的一些问题，大家最好都安装MyEclipse 10。当然，这个办法被证实有效，却并不提倡，每个人都有自己的喜好，不应该把自己的理念强加给别人。

1.5　MyEclipse的语言配置

一般来说，在开发软件的时候，使用IDE主要有英文和中文这两个选择（对日开发除外）。究竟使用英文版还是使用中文版呢？在这个问题上，很多新手很困扰。使用英文版，显得专业，但如果英文不好，很难对IDE的各种选项进行设置，更不要说是精通了。也许，使用了几年英文版，对IDE的熟悉程度还始终停留在初级阶段。使用中文版，可以直观地对IDE进行设置，不会有语言障碍，也不会因为设置错误导致不能恢复，影响开发。但这样开发者可能会有一个顾虑，会不会让别人议论，说自己不专业呢？其实，根据作者多年的开发工作，还有作者接触过的一些公司来看，无论是大公司还是小公司，他们对IDE的语言并没有限制，他们关心的只是分配给开发者的任务是否完成，完成的质量如何，甚至连华为这样的大公司，也没有对此做出限制（华为公司之前统一过bug处理系统的语言，认为国际化公司就应该有英文范儿）。

打消了这个顾虑就可以自由选择语言版本了。这里选择英文版来开发。为了方便英语不好的读者，下面先来介绍中英文版本的切换。

首先选择中文版的MyEclipse。MyEclipse和Eclipse一样，都是引用插件来扩展功能的。当引用了中文插件后，如果想切换到英文，只需要更改一下配置文件即可。这样一来，程序员就可以使用中文版进行开发，不用担心覆盖英文版的问题了。

• 首先，登录Eclipse的官方网站，下载中文语言包。
• 然后，进入MyEclipse的根目录，在根目录下创建language文件夹，将eclipse文件夹复制到这里。
• 最后，在根目录下创建links文件夹，创建language.link，路径为path=d:\\eclipse\\language，也就是MyEclipse的安装路径。

这样，当再次打开MyEclipse的时候，它就已经是中文版的了。

如果想取消中文版，在MyEclipse的目录下找到eclipse.ini文件，在最后面加上-Duser.language=en就可以了。如果需要恢复中文，可以加上-Duser.language=zh，也可以直接删除刚才的设置。还有一种恢复英文的方法就是，在language.link文件中删除引用路径，不再引用中文语言包插件。

实际上，作者通过实验发现，只需要把language文件夹复制到MyEclipse的安装目录下的dropins文件夹下即可，连引用文件都可以不用新建，MyEclipse会自动加载该文件夹下的内容。其实，在MyEclipse中，很多内容都是插件化的，例如，需要某个插件，可以安装它，也可以卸载它。什么都可以控制，不强加给用户，这样的软件才是好软件。

MyEclipse的中文开发界面如图1-3所示。

图1-3　MyEclipse的中文开发界面

1.6　新建Web Project

打开MyEclipse 10可以看到它的整个开发界面。选择“File”→“New”→“Web Project”，在弹出的对话框中可以看到“Create a Web Project”的具体设置。一般来说，Java比较适合企业级开发，而现在软件开发流行的趋势就是Web方式，所以创建项目的时候，一般也是新建Web Project。

Project Name输入manage，会自动产生Context root URL，其他的不用改变，保持默认设置。这里需要注意的一点是，一般来说，J2EE Specification Level的选项有Java EE 6.0、Java EE 5.0、J2EE 1.4、J2EE 1.3，应该选择哪一项呢？对于新手来说，肯定会有这样的疑问，因为这个选择直接决定着整个项目的统一规范。例如，如果选择了Java EE 6.0，那么就应该选择JDK 6.0，这样做才能保持一致。

新建Web Project成功，项目名为manage。这时候，可以看到包资源管理器下出现了一个项目manage。manage下面有以下几个组成部分。

• Src：用于存放Java文件。
• JRE System Library[Sun JDK 1.6.0_13]：Sun公司提供的JDK，位于MyEclipse目录下。
• Java EE 5 Libraries：Java EE 5.0针对于开发Web Project提供的JAR文件。
• WebRoot：用于存放JSP文件。

至此，管理系统manage的Web Project就初步建好了。这只是搭了一个基本的框架，后面还需要引进Struts2、Spring、Hibernate等框架来对该项目进行扩展，不断增强项目功能，优化项目代码。

一般来说，新建完项目之后，MyEclipse会自动提供一个JDK，也就是安装MyEclipse的时候自带的JDK。但是，从作者多年的开发经验来看，基本上每个项目都不用默认的JDK，而是手动再安装一个JDK。这是为什么呢？作者也曾一度很困惑这个问题。后来作者终于想明白了。其实，这两个JDK是完全一样的，只不过是安装路径不一样。选择手动安装一个JDK是为了方便在环境变量里设置。用自己手动安装的JDK，可以方便操作，很清晰直观地使用，而不是混杂在MyEclipse目录中。同时，使用自己手动安装的JDK也可以方便在DOS中进行操作。针对这种情况，最好还是手动安装一个JDK吧。从网上下载好JDK 1.6，进入安装界面，接受许可协议，选择安装路径，完成安装。接下来，就该配置环境变量了。

在计算机的环境变量中设置以下变量。

• 变量名CLASSPATH
• 变量值.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
• 变量名JAVA_HOME
• 变量值D:\Program Files\Java\jdk1.6.0_10
• 变量名Path
• 变量值;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

这样，manage这个项目就初步建立好了。

MyEclipse的开发界面如图1-4所示。

图1-4　MyEclipse的开发界面

1.7　安装Tomcat服务器

Tomcat从诞生到现在已经推出了很多个版本。对于Web开发，并不需要很高的版本，因为Web服务器是非常需要稳定的。虽然最新版本支持很多新的特性，但同时也带来了更多的风险。与其选择最新的，不如选择最稳定的，而且这种稳定是经过长时间的实践证明的，实在没有必要冒险。本书的管理系统设计选择了Tomcat6。

首先，登录http://tomcat.apache.org/，选择“Tomcat6”，进行下载。然后，在本地打开安装文件，进行安装操作。把Tomcat6安装到本地后，还需要在MyEclipse中进行服务器配置。在窗口下拉菜单中，选择“Preferences”，依次选择“MyEclipse”→“Servers”→“Tomcat”→“Tomcat 6.x”。

在这个对话框中，把“Tomcat 6.x server”的单选项选择为Enable，启用它。然后，依次设置Tomcat的目录配置，最后单击“应用”。这样，Tomcat就配置好了，通过工具栏选择Tomcat 6.x的Start，就可以启动Tomcat。

这时候，控制栏会输出Tomcat的启动信息，说明Tomcat配置成功。此时，只需要把管理系统添加到Tomcat中，就可以进行日常的开发工作了。

选择manage，单击右键，选择MyEclipse下的“Add and Remove Project Deployments”，可以看到，当前的项目是manage，单击“Add”，在弹出的对话框中，把“Server”选择为“Tomcat 6.x”，这时，“Deploy Location”中会自动列出manage的目录，单击“完成”。这时候，管理系统就在Tomcat 6.x下正式发布成功了。

打开浏览器，在地址栏中输入http://localhost:8080/manage/，可以看到页面上出现了“This is my JSP page.”这句英文，如图1-5所示。这就标志着，manage启动成功，它的第一个JSP已经被Tomcat顺利解析，并且展示到了页面中。

图1-5　项目调试成功

1.8　搭建SSH开发框架

工欲善其事，必先利其器。在Java Web开发中，之所以采用MyEclipse，并且采用最流行的MVC架构来开发，就是因为MyEclipse的扩展性。它可以说是无限扩展的，需要什么就安装什么，这些来自第三方的插件，可以非常方便地为项目服务，提供强大的功能。而Tomcat也可以成功解析这些插件。这样，既可以为程序员开发提供便利，又可以节省开发成本，何乐而不为呢？

在manage项目中，需要搭建一个SSH开发框架。SSH是Struts+Spring+Hibernate的一个集成框架，是目前较流行的一种Web开发模式。

首先，需要去网上下载这些框架。具体的下载方法就不赘述了，基本上在百度搜索它们，都可以搜索到符合条件的下载地址。可以到这些框架的官方网站下载，官方网站不但提供JAR包，还会提供源代码和参考文档。如果英文不好，可以选择在CSDN下载。

• Struts官方网站：http://struts.apache.org/
• Spring官方网站：http://spring.io/
• Hibernate官方网站：http://hibernate.org/orm/

1.8.1　Struts2的集成

第一种集成方式是将Struts 2.x包里需要的JAR包导入/WebRoot/WEB-INF/lib目录下，再新建一个struts.xml配置文件到src目录下即可。使用这种方式集成Struts2会让所有的JAR文件都集成在Web App Libraries这个库文件夹下。如果还要集成其他JAR包的话，那么随着JAR包集成得越来越多，这个库文件夹下的文件也会越来越多，这样非常不利于管理，也会显得凌乱。

第二种集成方式是打开项目的“BuildPath”，配置“Build Path”，选择“Add Library”→“MyEclipse Libraries”，此时，会列出所有MyEclipse自带的JAR库。从列表中，找到“Struts2 Core Libraries”，单击“完成”。此时，MyEclipse会自动生成一个Struts2 Core Libraries库文件夹来管理这些JAR文件。从项目的构建路径可以看到，单独把一些JAR文件放到一个库文件夹中管理非常有条理，也显得很专业。受到了这种启发，我们会想，如何让自己手动导入的JAR文件，也可以做到这样呢？

第三种集成方式是打开项目的“Build Path”，配置“Build Path”，选择“Add Library”。此时，会弹出一个新的对话框，从列表中选择“User Library”。再次弹出一个新对话框，单击“User Libraries”按钮。此时，就可以新建用户库了。

单击“New”按钮，输入名称Struts2。

单击“Add JARs”，找到Struts2文件夹，选中需要添加的文件，单击“确定”。

此时，我们手动添加的JAR文件也可以被统一放到Struts2文件夹中管理了。一般来说，初学者可能更倾向于第一种集成方式，但作为一个成熟的开发人员，最好还是把一类JAR文件放入一个文件夹中管理。

不论以哪种方式集成Struts2，都需要在src目录下建立一个struts.xml文件，用于配置Struts的业务逻辑。在web.xml里需要配置Struts2用到的核心过滤器：

<filter><filter-name>struts2</filter-name><filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class></filter> 
<filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping> 

1.8.2　Spring3的集成

第一种方式是打开项目的“Build路径”，配置“Build路径”，选择“Add Library”→“MyEclipse Libraries”，此时，会列出所有MyEclipse自带的JAR库。从列表中，找到“Spring 3.0 Core Libraries”，单击完成。

在src目录下建立一个applicationContext.xml文件，用于配置。在web.xml里需要配置Spring用到的监听器：

<listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener> 

添加Struts2和Spring整合的插件struts2-spring-plugin-2.0.12.jar。如果不使用这个插件，则需要在struts.xml里加入一些配置：

<constant name="struts.objectFactory" alue="org.apache.struts2.spring.StrutsSpring ObjectFactory"></constant> 

如果采用第一种方式集成Spring3，其实已经完成了Struts2和Spring3搭配的过程，但如果需要再搭配Hibernate，就需要采用第二种方式了。

将鼠标定位到manage项目名称上，单击右键，依次选择菜单“MyEclipse”→“Add Spring Capabilities…”，在弹出的对话框里勾选“Spring 3.0 AOP”“Spring 3.0 Core”“Spring 3.0 Persistence Core”“Spring 3.0 Persistence JDBC”“Spring 3.0 Web”等5个核心库，注意将它们复制到/WebRoot/WEB-INF/lib目录下，再单击“Next”，配置存放Spring配置文件的路径与名称，将JAR包放在WebRoot/WEB-INF/lib下，配置文件放在src下即可，配置文件名为applicationContext.xml。

创建数据源，切换到“MyEclipse Database Explorer”窗口。在左边“DB Browser”的窗口里，右击选择“New”，新建一个数据源。在弹出的窗口中，根据自己项目所建的数据库来选择配置，引入连接驱动JAR包。

sshDriver 
jdbc:oracle:thin:@localhost:1521:manage 

配置好之后，单击“Test Driver”来测试配置连接是否成功。成功了再进行下一步操作。

“Schema Details”选择连接映射的数据库，没必要将全部数据库连接进来。根据用户名选择需要连接的数据库，连接成功后可以查看表结构。

配置好以后，选中它，将它的“Open connection”打开看一看，看能否将数据连接过来。

1.8.3　Hibernate的集成

搭建好了Struts2和Spring3这两个框架，可以很好地帮助我们控制项目的请求转向和管理实体类。现在，让我们搭建项目数据通道的最后一层——持久层Hibernate，搭建好这一层，目前业内最流行的SSH框架就建立起来了。

（1）将鼠标定位到Web Project项目名称上，单击右键，依次选择菜单“MyEclipse”→“Add Hibernate Capabilities…”。

（2）选择“Hibernate 3.3”，注意将库复制到/WebRoot/WEB-INF/lib目录下。　

（3）在对话框中选择“Spring configuration file”，表示希望将Hibernate托管给Spring进行管理，这是将Hibernate与Spring进行整合的基础。然后单击“Next”。

（4）在出现的对话框中选择“Existing Spring configuration file”。因为之前已经添加了Spring的配置文件，所以这里选择的是已存在的配置文件。MyEclipse会自动找到存在的那个文件。然后在“SessionFactory Id”中输入Hibernate的SessionFactory在Spring配置文件中的Bean ID的名字，这里输入sessionFactory即可。然后单击“Next”。

（5）在出现的对话框中的“Bean ID”里面输入数据源在Spring中的Bean ID的名字，这里输入dataSource。然后在“DB Driver”里面选择刚刚配置好的ssh，MyEclipse会将其余的信息自动填写到表格里面。然后单击“Next”。

（6）在出现的对话框中取消“Create SessionFactory class”，单击“Finish”即可。

Hibernate的主要作用就是跟数据库建立联系，通过配置的方式，在项目中生成以类的方式来管理表的形式，方便在开发过程中直接使用，不用手动去写。但如果数据库中的表过多，Hibernate会在项目文件夹下生产过多的映射文件，也就是.hbm.xml文件，这算是一个美中不足吧。总之，我们只是事先把Hibernate框架集成到项目当中，至于用不用，是另外一回事。到这里，整个项目的框架搭建就算是初步成形了。

Hibernate Reverse Engineering反向生成Pojo类，自动生成映射关系。

（1）再次进入“MyEclipse Database Explorer”视图，全选所有的表，右击选择“HibernateReverse Engineering…”操作。

（2）单击“Java src folder”右边的“Browse…”选项，设置到自己新建好的包下面。

（3）再选择*.hbm.xml和POJO映射，建议不用选择“Create abstract class”。不然，会生成大量抽象类文件。

（4）下一步再选择“Id Generator”的生成策略，选择“native”。

（5）接下来，保持默认选项，直接单击“Finish”完成这项操作。

（6）最后回到“MyEclipse JavaEnterprise”视图，查看是否已成功生成映射文件。

到这里，已经将SSH整合的所有操作都做好了，接下来就是进行编码工作，修改相应的XML配置文件，直到最后完成整个项目的开发。发布Web项目，启动Tomcat服务器，可以测试之前的配置工作是否成功。如果成功的话，直接访问地址http://localhost:8080/manage/会解析成功，显示页面的内容；如果失败了，可以留意一下控制台输出的错误信息，并根据错误信息来定位问题。

1.9　搭建jQuery EasyUI开发环境

jQuery EasyUI开发环境的搭建比较简单。因为jQuery EasyUI属于前端插件，所以只需要在写前端页面的时候引入它们的JavaScript文件即可，其余不用什么复杂的配置。相比之下，前端开发环境的配置要比后端简单得多。

如果不引用相应的JavaScript文件，直接在页面中写入代码，会报前台JavaScript错误，一般都是缺少对象。

为了管理方便，我们需要在WebRoot目录下建立一个jquery文件夹，统一存放使用jQuery所需要的JavaScript文件。同样的，也需要在WebRoot目录下建立一个easyui文件夹，用于存放EasyUI所需要的JavaScript文件。

引入jQuery的代码如下：

<script src="scripts/jquery.js" type="text/javascript"></script> 

引入EasyUI的代码如下：

<link rel="stylesheet" type="text/css" href="../themes/default/EasyUI.css"> 
<link rel="stylesheet" type="text/css" href="../themes/icon.css"> 
<link rel="stylesheet" type="text/css" href="demo.css"> 
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="../jquery.EasyUI.min.js"></script> 

因为EasyUI引入的文件比较多，所以一般直接复制EasyUI提供的文件夹即可。引入的时候，要合理安排目录结构。这样，可以做到让引入的文件清晰明了，不会让人迷茫。在确定目录结构之后，在后面的开发过程中，只要写前端页面都要引入这段代码，所以合理安排目录结构有着不同寻常的意义。

至此，整个管理系统的开发框架，还有前端插件的引用都已经完成了。下面就可以正式进行开发了。

本文摘自：《jQuery EasyUI开发指南》