SSM 前端ExtJS MVC框架的搭建实例

1、SSM+ExtJS MVC框架搭建实例2013目录1 重要声明 . 22 项目搭建 . 2 2.1 项目 jar 包简介 . 2 2.2 项目新建 . 5 2.3 管理项目目录 . 9 2.4 配置使用 mybatis . 10 2.5 配置使用 spring . 13 2.6 测试用例的编写 . 15 2.7 新建和启动 server . 21 2.8 ExtJS之 MVC . 25 2.8.1 前端开发之页面访问 . . 25 2.8.2 前端开发之 struts 配置 . 27 2.8.3 前端开发之 web.xml 配置 . 28 2.8.4 前端开发之前端概貌 . . 30 2.8.

2、5前端开发之 view 层 . 34 2.8.6前端开发之 model 层和 store 层 . 362.8.6前端开发之 controller 层 . 373 结尾的话 . 40SSM+ExtJS MVC框架搭建实例1 重要声明在开始搭建我们的 web 项目之前,需要进行以下声明:1 这份实例帮助文档主要针对一些初入职场或者是初识 java 和 ExtJS 的程序员, 希望 能一定程度上给予一些建议和引导, 避免走一些不必要的弯路。 对于职场元老级人物可以直 接略过,不作理会,以免贻笑大方。2这次实例演示我们所采用的 IDE 是 eclipse ,因此如果当你使用 myeclipse 或者是

3、 其他 IDE 来进行实践时,有些场景不完全相同,但基本相似;3本次实例后端采用 spring+struts+mybatis框架,前端采用 ExtJS ,前后端均采用 MVC 的开发模式来进行开发。4本文档的作者是一个程序菜鸟,因此本文档中难免存在诸多错误和问题,请多多包 涵。如果可以的话,请及时与我沟通交流,以期共同进步。2 项目搭建2.1 项目 jar 包简介在正式开始我们的项目搭建之前,让我们来看一下在我们即将开始的项目中, 主要会使用到哪些 jar 包, 具体如右图所示: 1 aopalliance.jar:这个包是 AOP 联盟的 API 包, 里面包含了针对面向切面的接口, 通常

4、Spring 等其它具备动态织入功能的框架依赖此包。2 commons-dbcp.jar :DBCP 数据库连接池, Apache 的 Jakarta 组织开发的, Tomcat4的连接池也是 DBCP 。3 commons-fileupload.jar :commons 项目中的关于文件上传的包 , struts2.1.6版本 后必须加入此文件。4 commons-io.jar :commons 项目 (commons 项目就是 java 中一些常用的公共的组 件的 io 子项目,是处理异常的。5 commons-lang.jar :Apache Commons包中的一个, 包含了一些数据类

5、型工具类, 是 java.lang.*的扩展。6 commons-lang3.jar :跟 java.lang 这个包的作用类似, Commons Lang这一组 API 也是提供一些基础的、通用的操作和处理,如自动生成 toString(的结果、自动实现 hashCode(和 equals(方法、数组操作、枚举、日期和时间的处理等。7 commons-logging.jar:这个包是使用 spring 的必备包,用来记录程序运行时的活动 日志。8 commons-pool.jar:DBCP数据库连接池, Apache 的 Jakarta 组织开发的, Tomcat4的连接池也是 DBCP 。

6、9 dom4j.jar :java 解析 xml 文件。10 freemarker.jar:是 webwork 的包, FreeMarker 允许 Java servlet保持图形设计同应 用程序逻辑的分离, 这是通过在模板中密封 HTML 完成的。 模板用 servlet 提供的数据动态 地生成 HTML 。11 javassist.jar :是一个开源的 java 字节码操作工具 , 主要是对已经编译好的 class 文件进行修改和处理 , 这里我写了一个简单的说明 , 复杂的请去看 的官方文档。 12 mybatis.jar :使用 mybatis 必须要引用的包。13 mybatis-

7、spring.jar :mybatis 与 spring 集成所需要的包。14 ognl.jar:OGNL(Object Graph Navigation Language是一种表达式语言 , 使用它可 以使表达式与 java 对象中的 getter 和 setter 属性绑定 , 且一个 OGNL 表达式可以进行存和 取两方面的操作 .15 ojdbc14.jar :java 连接 oracle 的驱动。16 spring-aop.jar :这个 jar 文件包含在应用中使用 Spring 的 AOP 特性时所需要的类。 使 用 基 于 AOP 的 Spring 特 性 , 如 声 明 事

8、务 型 管 理 (Declarative Transaction Management ,则需要在应用里包含这个 jar 包。17 spring-beans.jar :这个 jar 文件是所有应用都要用到的,它包含访问配置文件、创 建和管理 bean 以及进行 Inversion of Control / Dependency Injection(IoC/DI操作 相关的所有类。如果应用只需基本的 IoC/DI支持,引入 spring-core.jar 及 spring- beans.jar 文件就可以了。18 spring-context.jar :这个 jar 文件为 Spring 核心提

9、供了大量扩展。可以找到使用 Spring ApplicationContext特性时所需的全部类, JDNI 所需的全部类, UI 方面的用来与 模板(Templating 引擎如 Velocity 、 FreeMarker 、 JasperReports 集成的类,以及校验 Validation 方面的相关类。19 spring-core.jar :这个 jar 文件包含 Spring 框架基本的核心工具类, Spring 其它组 件都要使用到这个包里的类,是其它组件的核心。20 spring-expression.jar :spring 的表达式语言。21 spring-jdbc.jar

10、:这个 jar 文件包含 Spring 对 JDBC 数据访问进行封装的所有类。22 Spring-tx.jar :提供对事务的支持。23 spring-web.jar :这个 jar 文件包含 Web 应用开发时,用到 Spring 框架时所需的核 心类,包括自动载入 WebApplicationContext 特性的类、 Struts 与 JSF 集成类、文件上 传的支持类、 Filter 类和大量工具辅助类。24 struts2-core.jar :struts 的核心包,必须的。25 struts2-json-plugin.jar :struts2中返回和传递 json 格式数据的插件

11、。26 struts2-spring-plugin.jar :strtus2与 spring 集成所需要的 jar 。27 xwork.jar:包含 webwork 构建所依赖的 xwork 类库, webwork 是基于 xwork 的。 以上所列举的 jar 包都是我们这次工程搭建过程中所必须使用到的, 后续由于功能的扩 展可能会有相应的增加。在实际工程搭建过程中, jar 包往往是根据需要动态添加的,不会 一成不变。2.2 项目新建当涉及到前后端数据动态交互的时候,我们往往需要新建一个动态 web 工程,如下图 所示:接下来为我们新建的工程命名,这里我们的工程名称为 tableManag

12、ement : 单击 finish 按钮, 完成工程的新建。 将我们前面章节所提到的 jar 包复制到 lib 目录下, 如下图所示: 上图即为工程成功创建后的默认目录。当然,在 eclipse 中,不同的视图模式,会呈现 不同的目录形式,不过基本内容大同小异。上图所示的目录结构则是在 JAVA EE 视图模式 下的。值得注意的是,在实际项目中,我们最好不要再为 lib 目录建立新的子目录。这样做 虽然方便了 jar 包的分类管理,但是有可能造成工程运行时 jar 包无法正确加载的情况,从 而出现一些莫名其妙的错误。当然,你也可以根据需要导入相应的 jar 包,而不是这样一次 性准备好。 这可

13、能需要花费你更多的时间和精力。 不过随着我们工程的增长和壮大,有可能还需要引入新的 jar 包。2.3 管理项目目录新建好一个 web 项目后,首先需要构建适合自己使用和理解的文件目录。这些文件目 录和目录里面的文件需要遵循统一的命名规则, 以方便后续的维护和扩展。 当然如果是在公 司环境或者是经常进行项目构建的话,可以采用 prototype 原型的方式直接生成预订格式 的目录工程,而无需每次都手动构建。我们这里采用的目录结构如下图所示:1第 1部分的目录主要存放后端的实现代码和测试代码, shares 目录下主要存放后端要使用的一些实体、异常等。 server 包显示我们这里将后端代码分为

14、三层,分别是 dao 层、manager 层和 action 层, 其中 dao层主要实现与数据库的交互,manager 层主要实现业务逻辑的处理, action 层主要实现与前端页面的交互。 test 包下存放的是测试代码,此处只对 dao 层和 manager 层进行测试用例的编写。2 第 2部分主要存放的是一些 XML和 property 配置文件。3第 3部分主要用来存放前端除 html 文件外的 js 、 css 等代码文件, 其中 ExtJS 文件夹下主要存放页面使用 ExtJS 进行开发 时所必须引入的一些文件, images 文件夹集中存放图片, tableManagement

15、 文件夹下存 放的则是基于 ExtJS 工具下的一个典型的 MVC 应用。 其中, App.js 作为程序的入口,首先 需要指定这个应用所需要调用的 controller 控制器,这些控制器都定义在 controller 文件 夹下。 model 文件夹下存放页面 model , store 文件夹下存放 view 中要使用的 store , view 存放具体页面, data 存放数据。后续当我们要使用 ExtJS 的 MVC 开发模式进行前端开发 时,也应该遵循这样基本的目录规范。4第 4部分的 lib 文件夹下存放了之前我们准备好的所有 jar 包, pages 文件夹下将用来 存放我们

16、项目中的所有页面。当然,还有最重要的 web.xml 文件也存在于这个目录下,我 们需根据需要对这个文件按需配置。2.4 配置使用 mybatis要想使用 mybatis 框架来操作访问我们的数据库,那么首先得配置我们所需要使用的 数据源。我们这个项目中使用的数据库是 oracle 数据库,具体的配置信息如下图所示:1 jdbc.driverClassName:驱动 类名 ,我 们这里 需要 使用 的是 oracle 数据 驱动 : jdbc.driverClassName = oracle.jdbc.driver.OracleDriver; 2 jdbc.url:数据源的地址,我们需要提供待

17、访问的数据库所在的 ip 地址和数据库名称。 我们这里链接的是远程数据库, 为了安全起见,做了些许处理,读者无需介怀,按实际情况 进行配置即可。3 jdbc.username:待访问的数据库的用户名。5 jdbc.password :待访问的数据库的密码。其他的几个属性为可选配置, 感兴趣的童鞋可以深入研究看看, 这里不做赘述。 不过作 者想稍微啰嗦一下, 以前有句俗语咋说的来着, “不怕千招会, 就怕一招精” 。 在我们如饥似 渴的吸收新知识的同时, 切忌不可贪大求全, 尝试着选准一个方向,仔细钻研下去,才有机 会成为高手中的高手。 貌似跑题了, 回来回来。 配置好了数据源之后, 我们新建一

18、个 UserRole 实体类,如下图所示:这个实体只包含两个属性, 分别是用户名称 userName 和 roleName 。 一般在 domain 实体里, 我们只提供这些实体属性的 get 方法和 set 方法, 其他都不做扩展, 以保持实体类 的高度纯洁。接下来,我们需要配置 mybatis.xml 文件,如下图所示: 在 mybatis.xml 配置文件中,我们可以对经常使用到的类定义别名,同时配置我们所 需 要 的 mapper 映 射 文 件 。 当 然 这 一 配 置 是 建 立 在 我 们 已 经 创 建 了 一 个 名 为 UserRoleMapper.xml 映射文件的基础

19、上进行的。这些 mapper 映射文件定义了对于相关 数据表的增删改查等具体操作, 后续再做介绍。在这里, 一定要注意配置文件的路径。 我们 这 里 的 相 对 路 径 默 认 是 在 src 文 件 夹 下 的 , 而 我 们 这 里 的 配 置 文 件 统 一 放 在 了 common/hy/tableManagement/config文件夹下进行管理,具体如上图所示。 上 面 提 到 了 UserRoleMapper.xml 配 置 文 件 , 接 下 来 让 我 们 看 一 下 UserRoleMapper.xml 中的具体内容,如下图所示: 这是一个典型的 mybatis 映射文件,

20、大部分的映射文件都长成这个样子。在这个文件 里面完成对数据库的增加、删除、查询、修改等操作,这里只以最简单的查询为例,其他的定义和使用都与此相似,只需遵循 mybatis 的通用语法即可。在这个文件的定义里需要有 以下几点,值得注意:1 namespace 属性定义整个 mapper 文件的命名空间,一般以所操作的实体类的全 路径来作为命名;2 resultMap 定义了实体类中的属性与数据库中字段的一一对应关系,一次定义后即 可多处使用。当以上这些文件都定义完成之后,我们便可以开始构思我们 dao 层的代码了。如下图 所示: 大家可以注意到, 为了方便代码的管理和维护, 我们这里对类名和方法

21、的命名比较讲究。 当然这纯属个人习惯和公司规范问题, 读者可根据个人的喜好自由选择简洁易懂可维护的命 名规则去遵守。在我们的这个 DAO 层接口里,暂时只定义了一个方法,用以查询用户角色 基本信息。这里的方法名称和 mapper 文件中相应的 id 相同,当然,这并非强制如此。2.5 配置使用 spring为了更高效的进行类间关系的管理和维护,我们引入了 spring 来对我们的类进行统一 管理。在这里,我们主要利用 spring 的控制反转的特性,通过配置文件的管理,完成类与 类之间的依赖注入。在完成了之前的这一系列工作之后,就可以配置我们所需要的 spring.xml文件,来完成 sqlS

22、essionFactory 类等的依赖和注入了,具体内容如下图所示:spring.xml 文件会加载我们之前准备好的 perties 文件和 mybatis.xml 文件, 进行数据源的配置和注入依赖的配置。这里,我们一定要保证配置文件引入路径的正确性。 对于初学者来讲,文件引入的路径是一个让人头疼的问题,不过摸索多了, 尝试清楚了,自 然问题就会迎刃而解了。 这里为了让读者查看方便, 对一些文件路径进行了换行操作, 在实 际操作中, 建议不要中途换行, 否则容易引起一些意外的错误。如上图所示,我们配置了一 个名为 userRoleDao 的 bean , 完成 dao 层的注

23、入, 注入的 bean 为 sqlSessionT emplate 。 这个 bean 里定义了对于数据库的一系列操作,后续你会从代码里面看到它的强大之处。 完成了这些配置之后,让我们一起看看 dao 层实现类的代码详情: 我们可以看到,查询用户角色信息的实现类十分简单,需要定义我们所需要调用的 mapper 文件的 namespace 和相应 id , 同时需要将我们所需要的类注入进来。 大家肯定都 还有印象, sqlSessionT emplate 这个 bean 我们之前已经在 spring.xml 文件中引入了。 注 意,这里一定要保证 bean 名称的一致性,否则 spring 无法

24、自动解析,同时需要提供被注 入 bean 的 set 方法, get 方法就不需要了。2.6测试用例的编写经过上述一系列的操作之后, dao 层的代码即已宣告完成。可是我们如何检测我们写 好的代码是否能返回我们想要的结果呢?这个就需要测试类来辅助我们进行验证了。 大家应 该还记得,我们已经建立了专门的目录,用以书写测试用例了,那现在让我们开始吧。 从目录可以看到,在我们的 test 包下包含了 common 、 dao 、 manager 这三个子目 录,分别用来存放公用的 bean 获取类、 dao 层测试用例和 manager 层测试用例。其中公 用的 bean 获取类如上图所示,它实现了

25、从相应 spring 配置文件中读取所需要的 bean 并 完成实例化。接下来看具体看一下我们 dao 层测试类的内容和输出,如下图所示: 到此,证明我们的 dao 层代码已经完成了对数据库的成功访问并返回了我们所需要的 结果。当然我们这里所写的测试类并不专业,如果感兴趣的话,可以试试用 junit 来书写你 的测试用例。 junit 实现单元测试也比较简单,因此在此处想做一下简单扩展。首先为了能 够在工程中成功使用 junit 进行单元测试,我们需要引入 junit 测试工具包,如下图所示: 现在可以看到,我们的 web 工程 lib 目录下增加了一位新成员。在之前的篇幅中,我 们也提到过,

26、我们的工程 lib 目录会随着我们开发的深入而不断壮大。在进行 junit 单元测 试之前,我们需要提供一个通用的方法,允许用户根据 bean 的名字获取到相应 bean 的实 例,如下图所示: 上图所示的代码只是为获取指定名称的 bean 实例提供一个借鉴, 各位可以有其他的实 现方式。在这里需要注意一下代码中泛型的使用方式。当我们获取到某个 bean 时,我们并 没有办法事先知道这个 bean 的实例类型,只知道我们想要的是什么类型,就能通过 getBean 方法给我们返回到相应的 bean , 因此做了上图所示的定义。 接下来编写测试用例 就成为一件很简单的事情了。 junit 之所以强

27、大,是因为我们在编写实际的测试用例时,不 需要遵循以往编写测试用例诸多的命名规范,而只需要在相应的方法前加上相应的 annotation 注解即可,具体代码如下图所示: 这些注解很容易理解, 这里不做赘述。 注意我们所编写的测试用例一定要继承自我们的 TestCase 类。有了这句强调,大家就应该知道下图所示的测试用例跑不起来的原因了吧? 因为一开始我们的测试类没有继承 TestCase 。上帝呀,确实是很不可思议的错误!然而很 多时候, 困恼我们很久很久的大麻烦就是这些看似很简单的小细节, 大家都是程序员, 这一 点应该深有体会吧。 测试用例编写完成之后, 要运行它就变得轻而易举了。 在需要

28、运行测试的方法上单击鼠 标右键,选择 run at Junit Test,即可测试你的相应方法是否正确,具体如下图所示:看, 我们得到了与之前编写非专业测试用例运行同样的结果, 不过整个过程相比之前简 单很多, 扩展性也更强。 为了使整个测试过程更加易于管理, 我们这里人为规定了一些有关 测试用例的命名规范,譬如被测试方法名必须以 test 开头等等。当然,这是因人因项目而 异的,你也可以根据自己的偏好来制定命名规范。2.7新建和启动 server在完成了之前 DAO 层代码的编写和测试之后,我们就可以根据类似的编写逻辑完成 manager 层代码的编写。由于本文档介绍的只是一个简单的搭建实例

29、,因此在 manager 层并没有进行很复杂的逻辑校验,所以代码格式和结构与 dao 层基本一致。注意,在编写 manager 层实现代码之前,要将所引用的 dao 层实例注入 spring 文件,如下图所示: 至此,后端 spring + mybatis 的框架搭建基本完成,让我们稍微切换一下思维,来到 前端 ExtJS 的 MVC 世界看看。不过在开始前端开发之前,我们需要新建一个 server ,以运 行我们刚刚搭建好的 web 工程,具体如下图所示: 调出新建 server 的视图,选择合适的 tomcat 服务器,完成 server 的创建,如下图所 示:我们这里安装的是 tomca

30、t6, 因此选择 6.0版本的 tomcat 服务器。 各位在实际进行操 作时,按需配置即可。单击下一步,出现如下图所示的界面: 将我们需要在此服务器下运行的项目移动到右侧,即可完成服务器的创建。server 新建成功之后,调出 servers 窗体,可以看到我们刚刚配置好的服务器,右键 选择 start 看能否成功启动,如下图所示: 控制台打印出如下图所示的启动信息,且未报任何异常,则表明启动成功: 2.8ExtJS 之 MVC2.8.1 前端开发之页面访问服 务 器 成 功 启 动 之 后 , 为 了 带 大 家 一 起 熟 悉 一 下 前 端 的 目 录 结 构 , 我 分 别 在 we

31、bcontent 目录及其子目录下放置了三个类似 helloworld 的 index.html 静态页面, 如下 图所示。 那么这三个 html 静态页面哪一个可以在目前所做的工作前提下实现成功访问呢? index.html 页面中的内容如下: 忽略掉这个 html 中所引入的 ExtJS 相关文件, 这个 html 页面可以说相当单纯。 那么, 究竟位于哪个目录下的 index.html 文件可以正常运行呢?还是说,都可以?经过尝试,只有当 index.html 文件被直接放置在 WebContent 根目录下或者是非 WEB-INF 目录下时,才能被成功访问。访问结果如下图所示: 因此可

32、以从一定程度上说明, WEB-INF 下面为安全目录。当我们使用 SSM 框架进行 开发时, 只有在 struts 中配置了相应的 action 之后, 才能通过 action 访问实现成功跳转。2.8.2 前端开发之 struts 配置在 SSM 开发框架下, struts 的主要功能是配置页面访问、 页面跳转和前后端参数传递, 对于其中涉及到的强大的拦截器以及更多实现原理此处不做赘述, 作者也难以驾驭。 接下来 一起来看一下我们即将要使用到的 struts 配置文件: 如上图所示, 我们暂时只关注 package 属性中所包含的全部内容, 对于 package 属性 之外的一些属性的定义暂

33、时不做关注。但是, 需要声明的是, 不关注并不代表不重要。 还记 得那句话么?“不怕千招会,就怕一招精” 。这里再强调一下。 Package 属性中包裹的所有 内容都是我们这次所需要关注的重点, 下面简单进行介绍一下。 更深入的钻研, 只能留待读 者自己去完成了。1 package 后面的 name 属性:包名,只是作为其他包引用本包的标记,作用不大。2 package 的 namespace :包的命名空间,很重要的一个属性,用以区分具体的 action 存在于哪一个命名空间之间,以解决 action重名的冲突问题。好比一班有个叫张三的,二班也有个叫张三的,当我们呼叫某个张三时,就得带上“命

34、名空间” 。 action 也是如此如上 图所示的 login.action 就需要通过 /table/login.action的方式来进行访问。3 package 的 extends :继承,这里由于我们大部分的数据都是以 json 格式返回给前端 的,因此不仅要继承基本的 struts-default ,还需要继承 json-default 。这是初学者很容易 忽略和犯错的地方。有关 struts 的其他属性在此处暂时不做介绍,后续随着练习的深入会有所涉及。2.8.3 前端开发之 web.xml 配置在配置了 struts.xml 文件后,要将 struts 文件配置体现在 web.xml

35、 文件中,如下图所 示: web.xml 配置文件的水很深,这里面可以定义很多种属性,感兴趣的童鞋可以仔细钻 研一下。配置的时候一定要仔细,稍微一个不小心,就有可能导致页面出不来,譬如在我们 的工程里面 struts.xml 文件并没有遵循常规直接放置在 src 根目录下,而是放置在common/hy/tableManagement/config/包下。那么像这种改变了配置文件默认路径的情况下, 就需要在配置文件中进行配置初始化, 如上图粉色框框所示。刚开始尝试的时候,页 面访问总是会报无法找到 action 的错误,后来当我把common/hy/tableManagement/config/

36、struts.xml、 struts-default.xml 、struts-plugin.xml 这样的书写顺序修改为 struts-default.xml 、 struts-plugin.xml 、 common/hy/tableManagement/config/struts.xml的时候,即可实现成功运行,因此 struts-default.xml 、 struts-plugin.xml 这两个路径引用不仅需要,而且对于顺序要求十分 严格。有些时候还会出现这样的情况, 本来没有任何问题的工程, 当某一个时间我们再次启动 服务器时,突然会抛出某些莫名其妙的异常,譬如 ClassNotFo

37、und 的错误,而页面仍然可 以正常访问。这个时候往往是由于缓存的问题, tomcat 对环境配置要求十分苛刻。这个时 候通常我们只需要移除服务器下的工程再重新加载工程即可,如下图所示:在完成了上述所有的配置之后,我们就可以将我们需要访问的 index.html 页面文件放 在指定目录下,通过 action 请求的方式来进行访问了。如下图所示: 我们删除掉了之前做实验所需要的其他页面, 只留下我们想要的。 成功启动服务器之后, 在浏览器中输入如下图所示的网址,实现访问: 2.8.4 前端开发之前端概貌在开始正式地讲解 ExtJS MVC开发模式之前,首先让我们来看一下基于这种开发模式的整体架构

38、,如下图所示: 如上图所示,作者只是对 ExtJS MVC开发模式的优缺点进行了简单总结,完全是一个 抛砖引玉的过程,更多的感受需要各位读者一步一步实践操作中去体会和感悟。在确认了页面可以正常访问之后,我们就可以采用 ExtJS 进行前端 js 代码的编写了。 当然,前端有诸多的开发工具,这里只是以 ExtJS 为例来进行介绍。在前面的章节中,也已 经介绍了前端开发的目录结构,此处不再赘述。采用 MVC 的方式进行前端代码编写时,将 使我们的 html 代码变得十分简洁, 不必像从前那样引用很多很多的 js 文件, 只需要在引入 基本 js 和 css 文件的基础上,引入我们的 TableMa

39、nagementApp.js 作为应用程序入口即可,如下图所示:在揭开 TableManagementApp.js 神秘面纱之前,需要跟大家继续探讨一个时刻困扰 职场菜鸟的问题,那就是前端文件的相对路径问题。从上图我们可以看到,通过“ ./resources/” 的形式就可以引用到我们所需要的 js 文件了。 可以这样理解, 前端代码 的默认路径是存在于 WEB-INF 路径下的, 我们建立的 resources 文件夹与 WEB-INF 平级, 现在你应该知道了上面的路径从何而来了吧?前端文件的默认路径原则上也是可以配置的, 如果感兴趣的话,可以深入钻研一下。接下来让我们来看一下 T abl

40、eManagementApp.js 中的代码,这只是一个简单的示例 代码, 请各位看官暂时不要纠结页面的美观, 只把目光放在功能的实现和思考问题的角度上, 如下图所示: TableManagementApp.js 文件作为前端应用程序的入口,里面的每个属性都值得大 家认真去研究和推敲。下面我们介绍上图所示的代码里面包含的几个重要属性:1 Ext.Loader.setConfig(enabled:true:上图所示的 js 文件中的第一句有效代码, 好比一个开关,当我们将这个属性设置为 true 的时候,我们的应用程序就会根据我们所配 置的 appFolder 属性去相应的路径下加载我们所编写的

41、 view 、 model 、 store 、 data 等文 件。否则, 每次当我们需要使用某个对象时, 都需要手动加载,否则就会在前端控制台抛出 js 文件无法找到的异常。如果我们不指定 appFolder 的路径,它就会去默认路径下去自动 加载。很显然,我们这里的前端代码并不是放在默认路径下的。2 name 属性:十分重要,相当于为我们的应用取一个名字,同时也相当于一个命名 空间,后续当我们需要定义这个应用相关的 store 、 model 、 view 的时候,都需要以这么 name 为基础来进行命名,这里我们的 name 属性值设置为 xhy 。3 controllers 属相:声明

42、我们这个应用里所需要使用的控制器,可以发现,控制器可 以不止一个。 在 MVC 开发模式下, 所有涉及逻辑处理的代码都应该放在 controller 控制器 里面,而不是像从前一样, V 与 C 纠缠不清、难舍难分。那么我们通过这样的方式开发出来的页面究竟打算长成个什么样子呢?让我们先抛开 M 层、 V 层、 C 层的具体实现,来对我们的页面先睹为快一下吧!再次重申,请各位看官 暂时先抛开一切审美杂念,如下图所示: 毋容置疑, 当前的这个页面,确实不甚美观, 委屈各位先将就着瞅一眼吧。 在这个页面 当中, 共有三处可向服务器发送请求, 也就是说, 我们在 struts 文件中至少配置了三个 a

43、ction :第一个 action 我们很明显看到,名称是 login ,主要实现页面请求;第二个 action ,绑定 在“看不清,换一张”这个按钮上,主要用以实现切换验证码的图片(请不要问我为何在此 放一个有关验证码的请求, 那么突兀, 那么奇怪。 我只是想借助这个文档一起说明一下前端 ExtJS 应该如何获取后端传过来的流数据, 因为对于初学者来说, 这个也许也算一个难点 ; 第三个 action ,绑定在“查询按钮上, ”点击查询后,会向后端发起一个查询用户角色信息 的请求 getUserRoleInfoList 。还记得这个请求么,我们基本编写完了有关这个请求的后端 代码,还编写了相

44、应的测试用例,别告诉我一点儿印象都没有了才好。2.8.5前端开发之 view 层在介绍完了前端应用入口 TableManagementApp.js文件和初步欣赏了我们要实现的页面样子之后, 各位读者就可以好好思考一下根据我们要实现的页面, view 、 model 、 store 这几个目录下面应该需要创建哪些对象了。 接下来让我们具体看一下我们前端的目录安排和 view 层的代码实现,如下图所示: 从上图可以看出,我们根据前面要实现的页面,在 view 目录下定义了两个组件,分别 是查询条件 view 和查询结果列表 view ,上图截取的是查询条件 view 的代码,查询结果列 表的 vi

45、ew 相对则更为简单,此处不做赘述。在 SearchConditionView.js 文件中有以下几 点值得注意:1自定义的 view (其他自定义组件也需遵循同样的命名规范命名需要遵守 一定的规范,类似我们 java 后端的“包名 +类名”的命名方式,如我们这里的xhy.view.SearchConditionView (命名空间 +目录 +类名 ,相信聪明的读者你已经有所领 悟。只有满足这样的命名规范才能自动加载成功。 当然, 研究无处不在,更深层次的原理有 待各位读者自己去深入挖掘。 2从上图我们可以看到,每一个 button 出现的地方,如果 有相应的事件需要与其绑定的话,我们都定义了

46、一个 action 。具体怎么用,在哪里用,各 位读者可以稍微思索一下,同时保有对这些 action的一些印象,以免下次遇到的时候,觉得突兀。 3上图提供了一种在 ExtJS 中显示图片的方法,当然,条条大道通罗马,你可以 有新的实现方式。 4再认真审查一遍 SearchConditionView.js 文件中的代码,大家可以 发现,这个 view 文件中除了单纯的 view 定义之外,没有涉及任何的逻辑处理、规则校验 等。保持 view 层的纯洁,这一点很重要。下图为查询结果列表 view 的部分代码截图: 2.8.6前端开发之 model 层和 store 层model 层和 store 层的代码与以往的实现基本没有差别,除了在为组件定义的时候要 注意命名规范之外。这个项目实例中涉及到的 model 十分简单,如下图所示: model中的字段名称要与后端实体中定义的字段名称完全一致,这个属于基本常识,此处不做赘述。下图是本实例中要使用到的 store 的代码截图: 2.8.6前端开发之 controller 层为了能让上述这些都十分