jQuery EasyUI开发指南

978-7-115-40621-7
作者: 王波
译者:
编辑: 杨海玲

图书目录:

详情

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。本书主要讲述EasyUI各种插件的用法,以及前端插件开发思想,带领读者走入插件开发的世界。在本书中,读者不但可以学到搜索框、进度条、提示框等功能性插件,还可以掌握布局,以及强大的数据网格和分页等插件。

图书摘要

版权信息

书名:jQuery EasyUI开发指南

ISBN:978-7-115-40621-7

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。


王波,软件工程师。毕业于西安外事学院。从业多年,成功地开发过基于通信、电商、数据管理相关业务的项目,在Java Web领域拥有丰富的经验。擅长搭建以Struts、Spring为基础的项目架构,并且擅长在此基础上选择合适的持久层框架。在开发过程中,坚持认为一个好的程序员应该同时兼顾前端与后端开发,以前端为辅、后端为主,才可以更好地将客户的需求用计算机语言描述出来。在软件行业未来的发展中,认为Java Web领域的开发仍将秉持MVC模式,并且在此基础上不断演化,而前端的开发则更加依赖于插件,需要插件化开发的理念。

博客地址:http://www.cnblogs.com/makerule/

源码下载地址:http://www.epubit.com.cn/book/details/4037

本书卖点

jQuery EasyUI是最近几年流行的一种前端开发技术,它主要是将软件开发中的前端部分,以不同插件的形式展示出来,以供开发人员选择。如果没有这些插件,前端开发会寸步难行。正是这些简单、易用、轻量级的特点使其成为了广大软件公司的选择。

本书通俗易懂,通过讲述管理系统的完整开发过程,把jQuery EasyUI的各种插件,无缝融合到项目当中,让读者从基础开始,逐步过渡到深入理解的层面。书中主要讲述了jQuery EasyUI插件、Ajax传递、Java处理、编程规范、MVC、数据导出等热门技术。本书的主旨在于让读者在一个完整项目框架下,学习到jQuery EasyUI插件的同时,还能够熟练掌握Java技术、数据库常用操作等内容,以及软件项目开发的一般流程。

通过阅读本书,读者的开发能力会得到整体的提升,而不是强调片面。书中的例子都尽量做到简洁高效,没有太多冗余代码,既适合刚入行的新手,也适合具有一定工作经验的读者。

本书主要涵盖以下内容:


本书从项目开发的实际情况出发,带领读者从零开始,一步步领略Java插件化开发的理念,并且结合实战,完美地诠释了管理系统这个企业级应用的典型案例。通过阅读本书,读者不但可以学到jQuery EasyUI开发插件的使用,还可以学习到很多项目实际开发中的经验。

——赵伟,资深Java软件工程师

阅读本书不但可以学到jQuery EasyUI的开发插件,降低前端开发的难度,还可以体会到作者的匠心独运。作者从第1章开始就将理论与实践结合起来,深入浅出,带领读者漫步在Java插件化开发的海洋。书中更是穿插了很多工作中经常用到却又不常提起的内容,如Java开发中的前端和后端调试。作者从工作中的细处着手,逐步分享企业级开发的经验,非常适合新手阅读,也适合有一定工作经验的朋友参考。

——朱红涛,软通动力项目经理

用一句话概括这本书:一个完整的项目,一次标准的开发流程,做到了从需求分析到代码实践,以及项目收尾的整个过程。本书的管理系统非常适合敏捷开发,尽管作者主要讲述了插件化开发和Java技术,但我从书中可以体会到作者对项目的理解,以及对需求合理的WBS分解,尤其是讲到项目交付的时候,真正体现了一个项目经理应该具有的远见卓识。

——张智喨,现代卓越首席PMP讲师

如果你热爱Java开发,强烈推荐你阅读本书。因为本书会告诉你,如何从复杂的需求中解脱出来,那就是在攻克一个又一个难关之后,学会代码的积累和重用。作者倡导的插件化开发理念就是如此。前端开发是Java项目开发中不能回避的问题,如何选择适合项目的UI是一个棘手的问题,选择得当就会事半功倍。本书从基础入手,用朴实的语言,鲜明的例子,讲述了Ajax、Java三层架构、数据导出等近几年流行的技术。

——赵子奇,中服软件CTO


使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。本书主要讲述EasyUI各种插件的用法以及前端插件开发思想,带领读者走入插件开发的世界。在本书中,读者不但可以学到搜索框(searchbox)、进度条(progressbar)、提示框(tooltip)等功能性插件,还可以掌握布局(layout),以及强大的数据网格(datagrid)和分页(pagination)等插件。

本书适合想要学习Java开发的技术人员阅读,尤其适合Java Web开发领域的从业人员阅读。


我们都知道,Java语言本身有专注于后端的特点。如果使用Java语言来开发项目,可以把Java代码嵌入前端中来。但实际上,专业人士并不提倡这么做。因为前端的开发就应该由前端语言来做,后端的开发就应该由后端语言来做,这样可以降低耦合性,也能防止代码混乱产生的问题。

在前端开发方面,现在诞生了很多开发框架。一般来说,前端开发工程师需要掌握的技能有HTML、CSS、JavaScript等,以及符合W3C规则的编程规范,但掌握了这些技能还是远远不够的,尤其是在Web技术迅猛发展、日新月异的今天。

为什么说掌握这些技能还不够呢?回想Web技术刚刚起步的年代,所谓的网站,无非就是一些非常简单的元素的拼凑,界面粗糙、功能僵化。可正是有了这样的开始,才让Web技术发展起来,一直走到了现在。随着时代的发展,企业和市场都对软件工程师这一职业提出了越发严格的要求。

该学什么?不该学什么?哪些是必备的,需要精通的?哪些是可以忽略的,知道梗概就可以的?这些疑问不但困扰着刚迈入计算机领域的学生,也困扰着一些刚刚步入职场的新人。

本人拥有多年的软件开发经验,前端和后端都做。没有办法,企业和市场都对开发人员的要求越来越高了,这种压力迫使我不断地学习,不断地进步,才在Web领域有了自己的一些见解。但是,因为能力和时间有限,我只专注于Java Web开发领域,也就是常说的J2EE。我觉得,在工作中,专注于一方面,成为这方面的专家,才是应该做的,如果涉猎过多,反而会陷入迷茫,这也会点儿,那也会点儿,到头来什么也做不好,更无法成为项目组中的技术专家。

本书结合实际、深入浅出,阐述了本人多年来在Java Web开发方面的经验。市场上基于MVC开发模式、基于SSH框架进行开发的书很多,但涉及插件开发的却没有。所以,我决定结合这么多年自己在程序开发上的实际经验,写一本基于当前最为流行的前端插件集合EasyUI的插件化开发的书。

本书特别适合Java Web领域的开发人员以及正在学习Java Web的读者。同时,本书通俗易懂,并穿插了一些实战经验,也适合于步入职场的新手。每份代码结束的时候都会做代码解析,方便读者领会代码的含义。通过对整个示例管理系统的开发,读者可以对Java Web领域的项目开发有一个基本的大局观,更能从整体上理解同类项目的开发思路。

首先,我认为作为Java软件工程师,应该掌握的技能有下面这些。

前端方面,HTML、JavaScript是基础。jQuery可以操作DOM、表单、表格,发送Ajax请求,传递数据到后端,是必须要不断学习和强化的。虽然JavaScript也可以完成这样的工作,但JavaScript毕竟是一款比较老的传统脚本语言。JavaScript的特点是基础、稳定,这也决定了它可以作为大厦的根基,保障我们项目的质量。但在开发中,不是时刻要讲究效率吗?所以,精通jQuery,用最少的时间、最简洁的代码完成工作不正是我们追求的吗?从事软件开发这么多年,我发现,就连网站最基本的表单提交代码都有减少的趋势,被大量的Ajax请求所代替,这种趋势提醒我们必须把握Java Web开发的方向,才不会被市场淘汰。

后端方面,我们只要专注于Java开发就可以了,不断地积累经验,在项目中完善自身的能力。

数据库方面,一般来说,大公司为了稳定、安全都会采用Oracle。只要掌握Oracle的基础知识,并且可以在PLSQL Developer的环境下操作Oracle就可以了,在这个环境下,需要掌握的还是大量的常规SQL。

现在,是时候介绍一下本书的主角EasyUI了。EasyUI本身是一个插件集合,有着强大的功能,如解析器(parser)、分页(pagination)、面板(panel)、布局(layout)、菜单(menu)、表单(form)、数据网格(datagrid)、树(tree)等。可以说,这些插件的功能极大地减少了Web开发方面的工作量,也让程序员更加专注于整体,而不是细节的描述。以前,为了开发这些功能,必须使用HTML、JavaScript甚至Dreamweaver,并且组合若干图片元素,才可以达到这些效果。现在,有了EasyUI,一切就变得方便多了,只要学会使用它就可以做出具有专业水平、风格统一的Web项目。这样,程序员会从枯燥的前端中解脱出来,极大地降低工作量,也不再纠结于细节。开发任务不再艰巨了,程序员才可以放手去做一些优化代码、处理bug的工作。

正因为EasyUI有着如此强大的功能,它才会跟jQuery结合在一起。EasyUI就像是宇宙飞船,而jQuery就像是飞船的动力。飞船只有有了动力才可以纵横驰骋,否则,就算功能再强大,放在原地,也是废铁。jQuery所做的就是让EasyUI飞起来,负责把EasyUI的各种插件搬运到Web项目合适的地方,并且让它真正运转起来。

本书的主要目标是通过讲解jQuery EasyUI,从前端过渡到后端,深入浅出地带读者领略当前主流Java Web项目开发的过程,让读者不但可以学会jQuery EasyUI这个前端插件,还能学到更多、更新的Java开发技术。目前,市场上的Java图书琳琅满目。虽然每本书都有自己的特点,但如何选择读者自己需要的是一个问题。本书以Java Web开发为重点,每一章讲述的都是当下最流行、最实用的技术,对于一些陈旧的知识,大多都是一笔带过。本书的目标很明确,希望读者在认真阅读完本书之后,不但可以学到开发技术,还可以学到开发思想。这既是一本讲技术的书,也是一本参考工具。

本书共10章,基本上讲述了管理系统开发的整个过程。读者可以从中领略到三个层面的内容:第一,jQuery EasyUI插件化开发,也就是前端的内容,包括Ajax等;第二,Java后端开发,包括常用类、方法、JSON解析、数据库等;第三,POI和CSV导出数据。本书还有其他一些内容,如插件化开发思想、Java三层架构开发模式、项目UI的重要性、客户验收等。总之,本书的脉络清晰,实用性较强,可作为参考工具。

前阵子,我突然有了出版一本Java Web方面的技术书的想法,想以插件开发为起点,总结一下这些年自己在Java Web领域开发的经验。我把自己的这个想法和人民邮电出版社的杨海玲编辑进行了沟通,得到了她的鼓励。在这里,我要感谢人民邮电出版社和杨海玲编辑给我的这个机会。我决定认真写好这本书,做一些有意义的事情,希望读者在看了这本书之后都能有所收获。另外,感谢这些年来在程序开发道路上给予我帮助的人,他们都是人品极好的开发组长、项目经理。

由于水平有限,书中难免有不足之处,恳请专家和读者批评指正。欢迎读者通过电子邮件(453621515@qq.com)与我交流。


本章主要内容

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

学习jQuery EasyUI需要去的第一个地方就是官方网站(如图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才能做到游刃有余,熟悉局部无法达到大师的水平。

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

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

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

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

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

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

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

打开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的服务介绍,可以根据需要来设置它们的启动方式,以起到节省系统资源的作用。

一般来说,只需要特别关注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)的角色,基本上每个公司都会有专门负责数据库维护的人员。这些人的工作就是做日常维护,包括数据库的调优、备份等。

常用的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的扩展,利用它我们可以在数据库和Java EE的开发、发布以及应用程序服务器的整合方面极大地提高工作效率。它是功能丰富的Java EE集成开发环境,包括了完备的编码、调试、测试和发布功能,完整支持HTML、Struts、JSP、CSS、JavaScript、Spring、SQL、Hibernate。

通过这两段引自官方的描述,可以大概了解这两个工具的区别。简单而言,MyEclipse是Eclipse的插件,也是一款功能强大的Java EE集成开发环境,支持代码编写、配置、测试以及除错,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。当然,这个办法被证实有效,却并不提倡,每个人都有自己的喜好,不应该把自己的理念强加给别人。

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

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

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

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

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

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

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

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

打开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。这时候,可以看到包资源管理器下出现了一个项目managemanage下面有以下几个组成部分。

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

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

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

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

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

图1-4 MyEclipse的开发界面

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

首先,登录Apache tomcat官方网站,选择“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 项目调试成功

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

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

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

第一种集成方式是将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>

第一种方式是打开项目的“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" />

如果采用第一种方式集成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”打开看一看,看能否将数据连接过来。

搭建好了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/会解析成功,显示页面的内容;如果失败了,可以留意一下控制台输出的错误信息,并根据错误信息来定位问题。

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提供的文件夹即可。引入的时候,要合理安排目录结构。这样,可以做到让引入的文件清晰明了,不会让人迷茫。在确定目录结构之后,在后面的开发过程中,只要写前端页面都要引入这段代码,所以合理安排目录结构有着不同寻常的意义。

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


相关图书

深入浅出Spring Boot 3.x
深入浅出Spring Boot 3.x
JavaScript核心原理:规范、逻辑与设计
JavaScript核心原理:规范、逻辑与设计
JavaScript入门经典(第7版)
JavaScript入门经典(第7版)
JavaScript函数式编程指南
JavaScript函数式编程指南
PHP、MySQL和JavaScript入门经典(第6版)
PHP、MySQL和JavaScript入门经典(第6版)
JavaScript学习指南(第3版)
JavaScript学习指南(第3版)

相关文章

相关课程