1、SSM+ExtJS MVC框架搭建實(shí)例2013目錄1 重要聲明 . 22 項(xiàng)目搭建 . 2 2.1 項(xiàng)目 jar 包簡介 . 2 2.2 項(xiàng)目新建 . 5 2.3 管理項(xiàng)目目錄 . 9 2.4 配置使用 mybatis . 10 2.5 配置使用 spring . 13 2.6 測(cè)試用例的編寫 . 15 2.7 新建和啟動(dòng) server . 21 2.8 ExtJS之 MVC . 25 2.8.1 前端開發(fā)之頁面訪問 . . 25 2.8.2 前端開發(fā)之 struts 配置 . 27 2.8.3 前端開發(fā)之 web.xml 配置 . 28 2.8.4 前端開發(fā)之前端概貌 . . 30 2.8.

2、5前端開發(fā)之 view 層 . 34 2.8.6前端開發(fā)之 model 層和 store 層 . 362.8.6前端開發(fā)之 controller 層 . 373 結(jié)尾的話 . 40SSM+ExtJS MVC框架搭建實(shí)例1 重要聲明在開始搭建我們的 web 項(xiàng)目之前,需要進(jìn)行以下聲明:1 這份實(shí)例幫助文檔主要針對(duì)一些初入職場或者是初識(shí) java 和 ExtJS 的程序員, 希望 能一定程度上給予一些建議和引導(dǎo), 避免走一些不必要的彎路。 對(duì)于職場元老級(jí)人物可以直 接略過,不作理會(huì),以免貽笑大方。2這次實(shí)例演示我們所采用的 IDE 是 eclipse ,因此如果當(dāng)你使用 myeclipse 或者是

3、 其他 IDE 來進(jìn)行實(shí)踐時(shí),有些場景不完全相同,但基本相似;3本次實(shí)例后端采用 spring+struts+mybatis框架,前端采用 ExtJS ,前后端均采用 MVC 的開發(fā)模式來進(jìn)行開發(fā)。4本文檔的作者是一個(gè)程序菜鳥,因此本文檔中難免存在諸多錯(cuò)誤和問題,請(qǐng)多多包 涵。如果可以的話,請(qǐng)及時(shí)與我溝通交流,以期共同進(jìn)步。2 項(xiàng)目搭建2.1 項(xiàng)目 jar 包簡介在正式開始我們的項(xiàng)目搭建之前,讓我們來看一下在我們即將開始的項(xiàng)目中, 主要會(huì)使用到哪些 jar 包, 具體如右圖所示: 1 aopalliance.jar:這個(gè)包是 AOP 聯(lián)盟的 API 包, 里面包含了針對(duì)面向切面的接口, 通常

4、Spring 等其它具備動(dòng)態(tài)織入功能的框架依賴此包。2 commons-dbcp.jar :DBCP 數(shù)據(jù)庫連接池, Apache 的 Jakarta 組織開發(fā)的, Tomcat4的連接池也是 DBCP 。3 commons-fileupload.jar :commons 項(xiàng)目中的關(guān)于文件上傳的包 , struts2.1.6版本 后必須加入此文件。4 commons-io.jar :commons 項(xiàng)目 (commons 項(xiàng)目就是 java 中一些常用的公共的組 件的 io 子項(xiàng)目,是處理異常的。5 commons-lang.jar :Apache Commons包中的一個(gè), 包含了一些數(shù)據(jù)類

5、型工具類, 是 java.lang.*的擴(kuò)展。6 commons-lang3.jar :跟 java.lang 這個(gè)包的作用類似, Commons Lang這一組 API 也是提供一些基礎(chǔ)的、通用的操作和處理,如自動(dòng)生成 toString(的結(jié)果、自動(dòng)實(shí)現(xiàn) hashCode(和 equals(方法、數(shù)組操作、枚舉、日期和時(shí)間的處理等。7 commons-logging.jar:這個(gè)包是使用 spring 的必備包,用來記錄程序運(yùn)行時(shí)的活動(dòng) 日志。8 commons-pool.jar:DBCP數(shù)據(jù)庫連接池, Apache 的 Jakarta 組織開發(fā)的, Tomcat4的連接池也是 DBCP 。

6、9 dom4j.jar :java 解析 xml 文件。10 freemarker.jar:是 webwork 的包, FreeMarker 允許 Java servlet保持圖形設(shè)計(jì)同應(yīng) 用程序邏輯的分離, 這是通過在模板中密封 HTML 完成的。 模板用 servlet 提供的數(shù)據(jù)動(dòng)態(tài) 地生成 HTML 。11 javassist.jar :是一個(gè)開源的 java 字節(jié)碼操作工具 , 主要是對(duì)已經(jīng)編譯好的 class 文件進(jìn)行修改和處理 , 這里我寫了一個(gè)簡單的說明 , 復(fù)雜的請(qǐng)去看 的官方文檔。 12 mybatis.jar :使用 mybatis 必須要引用的包。13 mybatis-

7、spring.jar :mybatis 與 spring 集成所需要的包。14 ognl.jar:OGNL(Object Graph Navigation Language是一種表達(dá)式語言 , 使用它可 以使表達(dá)式與 java 對(duì)象中的 getter 和 setter 屬性綁定 , 且一個(gè) OGNL 表達(dá)式可以進(jìn)行存和 取兩方面的操作 .15 ojdbc14.jar :java 連接 oracle 的驅(qū)動(dòng)。16 spring-aop.jar :這個(gè) jar 文件包含在應(yīng)用中使用 Spring 的 AOP 特性時(shí)所需要的類。 使 用 基 于 AOP 的 Spring 特 性 , 如 聲 明 事

8、務(wù) 型 管 理 (Declarative Transaction Management ,則需要在應(yīng)用里包含這個(gè) jar 包。17 spring-beans.jar :這個(gè) jar 文件是所有應(yīng)用都要用到的,它包含訪問配置文件、創(chuàng) 建和管理 bean 以及進(jìn)行 Inversion of Control / Dependency Injection(IoC/DI操作 相關(guān)的所有類。如果應(yīng)用只需基本的 IoC/DI支持,引入 spring-core.jar 及 spring- beans.jar 文件就可以了。18 spring-context.jar :這個(gè) jar 文件為 Spring 核心提

9、供了大量擴(kuò)展。可以找到使用 Spring ApplicationContext特性時(shí)所需的全部類, JDNI 所需的全部類, UI 方面的用來與 模板(Templating 引擎如 Velocity 、 FreeMarker 、 JasperReports 集成的類,以及校驗(yàn) Validation 方面的相關(guān)類。19 spring-core.jar :這個(gè) jar 文件包含 Spring 框架基本的核心工具類, Spring 其它組 件都要使用到這個(gè)包里的類,是其它組件的核心。20 spring-expression.jar :spring 的表達(dá)式語言。21 spring-jdbc.jar

10、:這個(gè) jar 文件包含 Spring 對(duì) JDBC 數(shù)據(jù)訪問進(jìn)行封裝的所有類。22 Spring-tx.jar :提供對(duì)事務(wù)的支持。23 spring-web.jar :這個(gè) jar 文件包含 Web 應(yīng)用開發(fā)時(shí),用到 Spring 框架時(shí)所需的核 心類,包括自動(dòng)載入 WebApplicationContext 特性的類、 Struts 與 JSF 集成類、文件上 傳的支持類、 Filter 類和大量工具輔助類。24 struts2-core.jar :struts 的核心包,必須的。25 struts2-json-plugin.jar :struts2中返回和傳遞 json 格式數(shù)據(jù)的插件

11、。26 struts2-spring-plugin.jar :strtus2與 spring 集成所需要的 jar 。27 xwork.jar:包含 webwork 構(gòu)建所依賴的 xwork 類庫, webwork 是基于 xwork 的。 以上所列舉的 jar 包都是我們這次工程搭建過程中所必須使用到的, 后續(xù)由于功能的擴(kuò) 展可能會(huì)有相應(yīng)的增加。在實(shí)際工程搭建過程中, jar 包往往是根據(jù)需要?jiǎng)討B(tài)添加的,不會(huì) 一成不變。2.2 項(xiàng)目新建當(dāng)涉及到前后端數(shù)據(jù)動(dòng)態(tài)交互的時(shí)候,我們往往需要新建一個(gè)動(dòng)態(tài) web 工程,如下圖 所示:接下來為我們新建的工程命名,這里我們的工程名稱為 tableManag

12、ement : 單擊 finish 按鈕, 完成工程的新建。 將我們前面章節(jié)所提到的 jar 包復(fù)制到 lib 目錄下, 如下圖所示: 上圖即為工程成功創(chuàng)建后的默認(rèn)目錄。當(dāng)然,在 eclipse 中,不同的視圖模式,會(huì)呈現(xiàn) 不同的目錄形式,不過基本內(nèi)容大同小異。上圖所示的目錄結(jié)構(gòu)則是在 JAVA EE 視圖模式 下的。值得注意的是,在實(shí)際項(xiàng)目中,我們最好不要再為 lib 目錄建立新的子目錄。這樣做 雖然方便了 jar 包的分類管理,但是有可能造成工程運(yùn)行時(shí) jar 包無法正確加載的情況,從 而出現(xiàn)一些莫名其妙的錯(cuò)誤。當(dāng)然,你也可以根據(jù)需要導(dǎo)入相應(yīng)的 jar 包,而不是這樣一次 性準(zhǔn)備好。 這可

13、能需要花費(fèi)你更多的時(shí)間和精力。 不過隨著我們工程的增長和壯大,有可能還需要引入新的 jar 包。2.3 管理項(xiàng)目目錄新建好一個(gè) web 項(xiàng)目后,首先需要構(gòu)建適合自己使用和理解的文件目錄。這些文件目 錄和目錄里面的文件需要遵循統(tǒng)一的命名規(guī)則, 以方便后續(xù)的維護(hù)和擴(kuò)展。 當(dāng)然如果是在公 司環(huán)境或者是經(jīng)常進(jìn)行項(xiàng)目構(gòu)建的話,可以采用 prototype 原型的方式直接生成預(yù)訂格式 的目錄工程,而無需每次都手動(dòng)構(gòu)建。我們這里采用的目錄結(jié)構(gòu)如下圖所示:1第 1部分的目錄主要存放后端的實(shí)現(xiàn)代碼和測(cè)試代碼, shares 目錄下主要存放后端要使用的一些實(shí)體、異常等。 server 包顯示我們這里將后端代碼分為

14、三層,分別是 dao 層、manager 層和 action 層, 其中 dao層主要實(shí)現(xiàn)與數(shù)據(jù)庫的交互,manager 層主要實(shí)現(xiàn)業(yè)務(wù)邏輯的處理, action 層主要實(shí)現(xiàn)與前端頁面的交互。 test 包下存放的是測(cè)試代碼,此處只對(duì) dao 層和 manager 層進(jìn)行測(cè)試用例的編寫。2 第 2部分主要存放的是一些 XML和 property 配置文件。3第 3部分主要用來存放前端除 html 文件外的 js 、 css 等代碼文件, 其中 ExtJS 文件夾下主要存放頁面使用 ExtJS 進(jìn)行開發(fā) 時(shí)所必須引入的一些文件, images 文件夾集中存放圖片, tableManagement

15、 文件夾下存 放的則是基于 ExtJS 工具下的一個(gè)典型的 MVC 應(yīng)用。 其中, App.js 作為程序的入口,首先 需要指定這個(gè)應(yīng)用所需要調(diào)用的 controller 控制器,這些控制器都定義在 controller 文件 夾下。 model 文件夾下存放頁面 model , store 文件夾下存放 view 中要使用的 store , view 存放具體頁面, data 存放數(shù)據(jù)。后續(xù)當(dāng)我們要使用 ExtJS 的 MVC 開發(fā)模式進(jìn)行前端開發(fā) 時(shí),也應(yīng)該遵循這樣基本的目錄規(guī)范。4第 4部分的 lib 文件夾下存放了之前我們準(zhǔn)備好的所有 jar 包, pages 文件夾下將用來 存放我們

16、項(xiàng)目中的所有頁面。當(dāng)然,還有最重要的 web.xml 文件也存在于這個(gè)目錄下,我 們需根據(jù)需要對(duì)這個(gè)文件按需配置。2.4 配置使用 mybatis要想使用 mybatis 框架來操作訪問我們的數(shù)據(jù)庫,那么首先得配置我們所需要使用的 數(shù)據(jù)源。我們這個(gè)項(xiàng)目中使用的數(shù)據(jù)庫是 oracle 數(shù)據(jù)庫,具體的配置信息如下圖所示:1 jdbc.driverClassName:驅(qū)動(dòng) 類名 ,我 們這里 需要 使用 的是 oracle 數(shù)據(jù) 驅(qū)動(dòng) : jdbc.driverClassName = oracle.jdbc.driver.OracleDriver; 2 jdbc.url:數(shù)據(jù)源的地址,我們需要提供待

17、訪問的數(shù)據(jù)庫所在的 ip 地址和數(shù)據(jù)庫名稱。 我們這里鏈接的是遠(yuǎn)程數(shù)據(jù)庫, 為了安全起見,做了些許處理,讀者無需介懷,按實(shí)際情況 進(jìn)行配置即可。3 jdbc.username:待訪問的數(shù)據(jù)庫的用戶名。5 jdbc.password :待訪問的數(shù)據(jù)庫的密碼。其他的幾個(gè)屬性為可選配置, 感興趣的童鞋可以深入研究看看, 這里不做贅述。 不過作 者想稍微啰嗦一下, 以前有句俗語咋說的來著, “不怕千招會(huì), 就怕一招精” 。 在我們?nèi)琊囁?渴的吸收新知識(shí)的同時(shí), 切忌不可貪大求全, 嘗試著選準(zhǔn)一個(gè)方向,仔細(xì)鉆研下去,才有機(jī) 會(huì)成為高手中的高手。 貌似跑題了, 回來回來。 配置好了數(shù)據(jù)源之后, 我們新建一

18、個(gè) UserRole 實(shí)體類,如下圖所示:這個(gè)實(shí)體只包含兩個(gè)屬性, 分別是用戶名稱 userName 和 roleName 。 一般在 domain 實(shí)體里, 我們只提供這些實(shí)體屬性的 get 方法和 set 方法, 其他都不做擴(kuò)展, 以保持實(shí)體類 的高度純潔。接下來,我們需要配置 mybatis.xml 文件,如下圖所示: 在 mybatis.xml 配置文件中,我們可以對(duì)經(jīng)常使用到的類定義別名,同時(shí)配置我們所 需 要 的 mapper 映 射 文 件 。 當(dāng) 然 這 一 配 置 是 建 立 在 我 們 已 經(jīng) 創(chuàng) 建 了 一 個(gè) 名 為 UserRoleMapper.xml 映射文件的基礎(chǔ)

19、上進(jìn)行的。這些 mapper 映射文件定義了對(duì)于相關(guān) 數(shù)據(jù)表的增刪改查等具體操作, 后續(xù)再做介紹。在這里, 一定要注意配置文件的路徑。 我們 這 里 的 相 對(duì) 路 徑 默 認(rèn) 是 在 src 文 件 夾 下 的 , 而 我 們 這 里 的 配 置 文 件 統(tǒng) 一 放 在 了 common/hy/tableManagement/config文件夾下進(jìn)行管理,具體如上圖所示。 上 面 提 到 了 UserRoleMapper.xml 配 置 文 件 , 接 下 來 讓 我 們 看 一 下 UserRoleMapper.xml 中的具體內(nèi)容,如下圖所示: 這是一個(gè)典型的 mybatis 映射文件,

20、大部分的映射文件都長成這個(gè)樣子。在這個(gè)文件 里面完成對(duì)數(shù)據(jù)庫的增加、刪除、查詢、修改等操作,這里只以最簡單的查詢?yōu)槔?其他的定義和使用都與此相似,只需遵循 mybatis 的通用語法即可。在這個(gè)文件的定義里需要有 以下幾點(diǎn),值得注意:1 namespace 屬性定義整個(gè) mapper 文件的命名空間,一般以所操作的實(shí)體類的全 路徑來作為命名;2 resultMap 定義了實(shí)體類中的屬性與數(shù)據(jù)庫中字段的一一對(duì)應(yīng)關(guān)系,一次定義后即 可多處使用。當(dāng)以上這些文件都定義完成之后,我們便可以開始構(gòu)思我們 dao 層的代碼了。如下圖 所示: 大家可以注意到, 為了方便代碼的管理和維護(hù), 我們這里對(duì)類名和方法

21、的命名比較講究。 當(dāng)然這純屬個(gè)人習(xí)慣和公司規(guī)范問題, 讀者可根據(jù)個(gè)人的喜好自由選擇簡潔易懂可維護(hù)的命 名規(guī)則去遵守。在我們的這個(gè) DAO 層接口里,暫時(shí)只定義了一個(gè)方法,用以查詢用戶角色 基本信息。這里的方法名稱和 mapper 文件中相應(yīng)的 id 相同,當(dāng)然,這并非強(qiáng)制如此。2.5 配置使用 spring為了更高效的進(jìn)行類間關(guān)系的管理和維護(hù),我們引入了 spring 來對(duì)我們的類進(jìn)行統(tǒng)一 管理。在這里,我們主要利用 spring 的控制反轉(zhuǎn)的特性,通過配置文件的管理,完成類與 類之間的依賴注入。在完成了之前的這一系列工作之后,就可以配置我們所需要的 spring.xml文件,來完成 sqlS

22、essionFactory 類等的依賴和注入了,具體內(nèi)容如下圖所示:spring.xml 文件會(huì)加載我們之前準(zhǔn)備好的 perties 文件和 mybatis.xml 文件, 進(jìn)行數(shù)據(jù)源的配置和注入依賴的配置。這里,我們一定要保證配置文件引入路徑的正確性。 對(duì)于初學(xué)者來講,文件引入的路徑是一個(gè)讓人頭疼的問題,不過摸索多了, 嘗試清楚了,自 然問題就會(huì)迎刃而解了。 這里為了讓讀者查看方便, 對(duì)一些文件路徑進(jìn)行了換行操作, 在實(shí) 際操作中, 建議不要中途換行, 否則容易引起一些意外的錯(cuò)誤。如上圖所示,我們配置了一 個(gè)名為 userRoleDao 的 bean , 完成 dao 層的注

23、入, 注入的 bean 為 sqlSessionT emplate 。 這個(gè) bean 里定義了對(duì)于數(shù)據(jù)庫的一系列操作,后續(xù)你會(huì)從代碼里面看到它的強(qiáng)大之處。 完成了這些配置之后,讓我們一起看看 dao 層實(shí)現(xiàn)類的代碼詳情: 我們可以看到,查詢用戶角色信息的實(shí)現(xiàn)類十分簡單,需要定義我們所需要調(diào)用的 mapper 文件的 namespace 和相應(yīng) id , 同時(shí)需要將我們所需要的類注入進(jìn)來。 大家肯定都 還有印象, sqlSessionT emplate 這個(gè) bean 我們之前已經(jīng)在 spring.xml 文件中引入了。 注 意,這里一定要保證 bean 名稱的一致性,否則 spring 無法

24、自動(dòng)解析,同時(shí)需要提供被注 入 bean 的 set 方法, get 方法就不需要了。2.6測(cè)試用例的編寫經(jīng)過上述一系列的操作之后, dao 層的代碼即已宣告完成?？墒俏覀?nèi)绾螜z測(cè)我們寫 好的代碼是否能返回我們想要的結(jié)果呢?這個(gè)就需要測(cè)試類來輔助我們進(jìn)行驗(yàn)證了。 大家應(yīng) 該還記得,我們已經(jīng)建立了專門的目錄,用以書寫測(cè)試用例了,那現(xiàn)在讓我們開始吧。 從目錄可以看到,在我們的 test 包下包含了 common 、 dao 、 manager 這三個(gè)子目 錄,分別用來存放公用的 bean 獲取類、 dao 層測(cè)試用例和 manager 層測(cè)試用例。其中公 用的 bean 獲取類如上圖所示,它實(shí)現(xiàn)了

25、從相應(yīng) spring 配置文件中讀取所需要的 bean 并 完成實(shí)例化。接下來看具體看一下我們 dao 層測(cè)試類的內(nèi)容和輸出,如下圖所示: 到此,證明我們的 dao 層代碼已經(jīng)完成了對(duì)數(shù)據(jù)庫的成功訪問并返回了我們所需要的 結(jié)果。當(dāng)然我們這里所寫的測(cè)試類并不專業(yè),如果感興趣的話,可以試試用 junit 來書寫你 的測(cè)試用例。 junit 實(shí)現(xiàn)單元測(cè)試也比較簡單,因此在此處想做一下簡單擴(kuò)展。首先為了能 夠在工程中成功使用 junit 進(jìn)行單元測(cè)試,我們需要引入 junit 測(cè)試工具包,如下圖所示: 現(xiàn)在可以看到,我們的 web 工程 lib 目錄下增加了一位新成員。在之前的篇幅中,我 們也提到過,

26、我們的工程 lib 目錄會(huì)隨著我們開發(fā)的深入而不斷壯大。在進(jìn)行 junit 單元測(cè) 試之前,我們需要提供一個(gè)通用的方法,允許用戶根據(jù) bean 的名字獲取到相應(yīng) bean 的實(shí) 例,如下圖所示: 上圖所示的代碼只是為獲取指定名稱的 bean 實(shí)例提供一個(gè)借鑒, 各位可以有其他的實(shí) 現(xiàn)方式。在這里需要注意一下代碼中泛型的使用方式。當(dāng)我們獲取到某個(gè) bean 時(shí),我們并 沒有辦法事先知道這個(gè) bean 的實(shí)例類型,只知道我們想要的是什么類型,就能通過 getBean 方法給我們返回到相應(yīng)的 bean , 因此做了上圖所示的定義。 接下來編寫測(cè)試用例 就成為一件很簡單的事情了。 junit 之所以強(qiáng)

27、大,是因?yàn)槲覀冊(cè)诰帉憣?shí)際的測(cè)試用例時(shí),不 需要遵循以往編寫測(cè)試用例諸多的命名規(guī)范,而只需要在相應(yīng)的方法前加上相應(yīng)的 annotation 注解即可,具體代碼如下圖所示: 這些注解很容易理解, 這里不做贅述。 注意我們所編寫的測(cè)試用例一定要繼承自我們的 TestCase 類。有了這句強(qiáng)調(diào),大家就應(yīng)該知道下圖所示的測(cè)試用例跑不起來的原因了吧? 因?yàn)橐婚_始我們的測(cè)試類沒有繼承 TestCase 。上帝呀,確實(shí)是很不可思議的錯(cuò)誤!然而很 多時(shí)候, 困惱我們很久很久的大麻煩就是這些看似很簡單的小細(xì)節(jié), 大家都是程序員, 這一 點(diǎn)應(yīng)該深有體會(huì)吧。 測(cè)試用例編寫完成之后, 要運(yùn)行它就變得輕而易舉了。 在需要

28、運(yùn)行測(cè)試的方法上單擊鼠 標(biāo)右鍵,選擇 run at Junit Test,即可測(cè)試你的相應(yīng)方法是否正確,具體如下圖所示:看, 我們得到了與之前編寫非專業(yè)測(cè)試用例運(yùn)行同樣的結(jié)果, 不過整個(gè)過程相比之前簡 單很多, 擴(kuò)展性也更強(qiáng)。 為了使整個(gè)測(cè)試過程更加易于管理, 我們這里人為規(guī)定了一些有關(guān) 測(cè)試用例的命名規(guī)范,譬如被測(cè)試方法名必須以 test 開頭等等。當(dāng)然,這是因人因項(xiàng)目而 異的,你也可以根據(jù)自己的偏好來制定命名規(guī)范。2.7新建和啟動(dòng) server在完成了之前 DAO 層代碼的編寫和測(cè)試之后,我們就可以根據(jù)類似的編寫邏輯完成 manager 層代碼的編寫。由于本文檔介紹的只是一個(gè)簡單的搭建實(shí)例

29、,因此在 manager 層并沒有進(jìn)行很復(fù)雜的邏輯校驗(yàn),所以代碼格式和結(jié)構(gòu)與 dao 層基本一致。注意,在編寫 manager 層實(shí)現(xiàn)代碼之前,要將所引用的 dao 層實(shí)例注入 spring 文件,如下圖所示: 至此,后端 spring + mybatis 的框架搭建基本完成,讓我們稍微切換一下思維,來到 前端 ExtJS 的 MVC 世界看看。不過在開始前端開發(fā)之前,我們需要新建一個(gè) server ,以運(yùn) 行我們剛剛搭建好的 web 工程,具體如下圖所示: 調(diào)出新建 server 的視圖,選擇合適的 tomcat 服務(wù)器,完成 server 的創(chuàng)建,如下圖所 示:我們這里安裝的是 tomca

30、t6, 因此選擇 6.0版本的 tomcat 服務(wù)器。 各位在實(shí)際進(jìn)行操 作時(shí),按需配置即可。單擊下一步,出現(xiàn)如下圖所示的界面: 將我們需要在此服務(wù)器下運(yùn)行的項(xiàng)目移動(dòng)到右側(cè),即可完成服務(wù)器的創(chuàng)建。server 新建成功之后,調(diào)出 servers 窗體,可以看到我們剛剛配置好的服務(wù)器,右鍵 選擇 start 看能否成功啟動(dòng),如下圖所示: 控制臺(tái)打印出如下圖所示的啟動(dòng)信息,且未報(bào)任何異常,則表明啟動(dòng)成功: 2.8ExtJS 之 MVC2.8.1 前端開發(fā)之頁面訪問服 務(wù) 器 成 功 啟 動(dòng) 之 后 , 為 了 帶 大 家 一 起 熟 悉 一 下 前 端 的 目 錄 結(jié) 構(gòu) , 我 分 別 在 we

31、bcontent 目錄及其子目錄下放置了三個(gè)類似 helloworld 的 index.html 靜態(tài)頁面, 如下 圖所示。 那么這三個(gè) html 靜態(tài)頁面哪一個(gè)可以在目前所做的工作前提下實(shí)現(xiàn)成功訪問呢? index.html 頁面中的內(nèi)容如下: 忽略掉這個(gè) html 中所引入的 ExtJS 相關(guān)文件, 這個(gè) html 頁面可以說相當(dāng)單純。 那么, 究竟位于哪個(gè)目錄下的 index.html 文件可以正常運(yùn)行呢?還是說,都可以?經(jīng)過嘗試,只有當(dāng) index.html 文件被直接放置在 WebContent 根目錄下或者是非 WEB-INF 目錄下時(shí),才能被成功訪問。訪問結(jié)果如下圖所示: 因此可

32、以從一定程度上說明, WEB-INF 下面為安全目錄。當(dāng)我們使用 SSM 框架進(jìn)行 開發(fā)時(shí), 只有在 struts 中配置了相應(yīng)的 action 之后, 才能通過 action 訪問實(shí)現(xiàn)成功跳轉(zhuǎn)。2.8.2 前端開發(fā)之 struts 配置在 SSM 開發(fā)框架下, struts 的主要功能是配置頁面訪問、 頁面跳轉(zhuǎn)和前后端參數(shù)傳遞, 對(duì)于其中涉及到的強(qiáng)大的攔截器以及更多實(shí)現(xiàn)原理此處不做贅述, 作者也難以駕馭。 接下來 一起來看一下我們即將要使用到的 struts 配置文件: 如上圖所示, 我們暫時(shí)只關(guān)注 package 屬性中所包含的全部內(nèi)容, 對(duì)于 package 屬性 之外的一些屬性的定義暫

33、時(shí)不做關(guān)注。但是, 需要聲明的是, 不關(guān)注并不代表不重要。 還記 得那句話么?“不怕千招會(huì),就怕一招精” 。這里再強(qiáng)調(diào)一下。 Package 屬性中包裹的所有 內(nèi)容都是我們這次所需要關(guān)注的重點(diǎn), 下面簡單進(jìn)行介紹一下。 更深入的鉆研, 只能留待讀 者自己去完成了。1 package 后面的 name 屬性:包名,只是作為其他包引用本包的標(biāo)記,作用不大。2 package 的 namespace :包的命名空間,很重要的一個(gè)屬性,用以區(qū)分具體的 action 存在于哪一個(gè)命名空間之間,以解決 action重名的沖突問題。好比一班有個(gè)叫張三的,二班也有個(gè)叫張三的,當(dāng)我們呼叫某個(gè)張三時(shí),就得帶上“命

34、名空間” 。 action 也是如此如上 圖所示的 login.action 就需要通過 /table/login.action的方式來進(jìn)行訪問。3 package 的 extends :繼承,這里由于我們大部分的數(shù)據(jù)都是以 json 格式返回給前端 的,因此不僅要繼承基本的 struts-default ,還需要繼承 json-default 。這是初學(xué)者很容易 忽略和犯錯(cuò)的地方。有關(guān) struts 的其他屬性在此處暫時(shí)不做介紹,后續(xù)隨著練習(xí)的深入會(huì)有所涉及。2.8.3 前端開發(fā)之 web.xml 配置在配置了 struts.xml 文件后,要將 struts 文件配置體現(xiàn)在 web.xml

35、 文件中,如下圖所 示: web.xml 配置文件的水很深,這里面可以定義很多種屬性,感興趣的童鞋可以仔細(xì)鉆 研一下。配置的時(shí)候一定要仔細(xì),稍微一個(gè)不小心,就有可能導(dǎo)致頁面出不來,譬如在我們 的工程里面 struts.xml 文件并沒有遵循常規(guī)直接放置在 src 根目錄下,而是放置在common/hy/tableManagement/config/包下。那么像這種改變了配置文件默認(rèn)路徑的情況下, 就需要在配置文件中進(jìn)行配置初始化, 如上圖粉色框框所示。剛開始嘗試的時(shí)候,頁 面訪問總是會(huì)報(bào)無法找到 action 的錯(cuò)誤,后來當(dāng)我把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的時(shí)候,即可實(shí)現(xiàn)成功運(yùn)行,因此 struts-default.xml 、 struts-plugin.xml 這兩個(gè)路徑引用不僅需要,而且對(duì)于順序要求十分 嚴(yán)格。有些時(shí)候還會(huì)出現(xiàn)這樣的情況, 本來沒有任何問題的工程, 當(dāng)某一個(gè)時(shí)間我們?cè)俅螁?dòng) 服務(wù)器時(shí),突然會(huì)拋出某些莫名其妙的異常,譬如 ClassNotFo

37、und 的錯(cuò)誤,而頁面仍然可 以正常訪問。這個(gè)時(shí)候往往是由于緩存的問題, tomcat 對(duì)環(huán)境配置要求十分苛刻。這個(gè)時(shí) 候通常我們只需要移除服務(wù)器下的工程再重新加載工程即可,如下圖所示:在完成了上述所有的配置之后,我們就可以將我們需要訪問的 index.html 頁面文件放 在指定目錄下,通過 action 請(qǐng)求的方式來進(jìn)行訪問了。如下圖所示: 我們刪除掉了之前做實(shí)驗(yàn)所需要的其他頁面, 只留下我們想要的。 成功啟動(dòng)服務(wù)器之后, 在瀏覽器中輸入如下圖所示的網(wǎng)址,實(shí)現(xiàn)訪問: 2.8.4 前端開發(fā)之前端概貌在開始正式地講解 ExtJS MVC開發(fā)模式之前,首先讓我們來看一下基于這種開發(fā)模式的整體架構(gòu)

38、,如下圖所示: 如上圖所示,作者只是對(duì) ExtJS MVC開發(fā)模式的優(yōu)缺點(diǎn)進(jìn)行了簡單總結(jié),完全是一個(gè) 拋磚引玉的過程,更多的感受需要各位讀者一步一步實(shí)踐操作中去體會(huì)和感悟。在確認(rèn)了頁面可以正常訪問之后,我們就可以采用 ExtJS 進(jìn)行前端 js 代碼的編寫了。 當(dāng)然,前端有諸多的開發(fā)工具,這里只是以 ExtJS 為例來進(jìn)行介紹。在前面的章節(jié)中,也已 經(jīng)介紹了前端開發(fā)的目錄結(jié)構(gòu),此處不再贅述。采用 MVC 的方式進(jìn)行前端代碼編寫時(shí),將 使我們的 html 代碼變得十分簡潔, 不必像從前那樣引用很多很多的 js 文件, 只需要在引入 基本 js 和 css 文件的基礎(chǔ)上,引入我們的 TableMa

39、nagementApp.js 作為應(yīng)用程序入口即可,如下圖所示:在揭開 TableManagementApp.js 神秘面紗之前,需要跟大家繼續(xù)探討一個(gè)時(shí)刻困擾 職場菜鳥的問題,那就是前端文件的相對(duì)路徑問題。從上圖我們可以看到,通過“ ./resources/” 的形式就可以引用到我們所需要的 js 文件了。 可以這樣理解, 前端代碼 的默認(rèn)路徑是存在于 WEB-INF 路徑下的, 我們建立的 resources 文件夾與 WEB-INF 平級(jí), 現(xiàn)在你應(yīng)該知道了上面的路徑從何而來了吧?前端文件的默認(rèn)路徑原則上也是可以配置的, 如果感興趣的話,可以深入鉆研一下。接下來讓我們來看一下 T abl

40、eManagementApp.js 中的代碼,這只是一個(gè)簡單的示例 代碼, 請(qǐng)各位看官暫時(shí)不要糾結(jié)頁面的美觀, 只把目光放在功能的實(shí)現(xiàn)和思考問題的角度上, 如下圖所示: TableManagementApp.js 文件作為前端應(yīng)用程序的入口,里面的每個(gè)屬性都值得大 家認(rèn)真去研究和推敲。下面我們介紹上圖所示的代碼里面包含的幾個(gè)重要屬性:1 Ext.Loader.setConfig(enabled:true:上圖所示的 js 文件中的第一句有效代碼, 好比一個(gè)開關(guān),當(dāng)我們將這個(gè)屬性設(shè)置為 true 的時(shí)候,我們的應(yīng)用程序就會(huì)根據(jù)我們所配 置的 appFolder 屬性去相應(yīng)的路徑下加載我們所編寫的

41、 view 、 model 、 store 、 data 等文 件。否則, 每次當(dāng)我們需要使用某個(gè)對(duì)象時(shí), 都需要手動(dòng)加載,否則就會(huì)在前端控制臺(tái)拋出 js 文件無法找到的異常。如果我們不指定 appFolder 的路徑,它就會(huì)去默認(rèn)路徑下去自動(dòng) 加載。很顯然,我們這里的前端代碼并不是放在默認(rèn)路徑下的。2 name 屬性:十分重要,相當(dāng)于為我們的應(yīng)用取一個(gè)名字,同時(shí)也相當(dāng)于一個(gè)命名 空間,后續(xù)當(dāng)我們需要定義這個(gè)應(yīng)用相關(guān)的 store 、 model 、 view 的時(shí)候,都需要以這么 name 為基礎(chǔ)來進(jìn)行命名,這里我們的 name 屬性值設(shè)置為 xhy 。3 controllers 屬相:聲明

42、我們這個(gè)應(yīng)用里所需要使用的控制器,可以發(fā)現(xiàn),控制器可 以不止一個(gè)。 在 MVC 開發(fā)模式下, 所有涉及邏輯處理的代碼都應(yīng)該放在 controller 控制器 里面,而不是像從前一樣, V 與 C 糾纏不清、難舍難分。那么我們通過這樣的方式開發(fā)出來的頁面究竟打算長成個(gè)什么樣子呢?讓我們先拋開 M 層、 V 層、 C 層的具體實(shí)現(xiàn),來對(duì)我們的頁面先睹為快一下吧!再次重申,請(qǐng)各位看官 暫時(shí)先拋開一切審美雜念,如下圖所示: 毋容置疑, 當(dāng)前的這個(gè)頁面,確實(shí)不甚美觀, 委屈各位先將就著瞅一眼吧。 在這個(gè)頁面 當(dāng)中, 共有三處可向服務(wù)器發(fā)送請(qǐng)求, 也就是說, 我們?cè)?struts 文件中至少配置了三個(gè) a

43、ction :第一個(gè) action 我們很明顯看到,名稱是 login ,主要實(shí)現(xiàn)頁面請(qǐng)求;第二個(gè) action ,綁定 在“看不清,換一張”這個(gè)按鈕上,主要用以實(shí)現(xiàn)切換驗(yàn)證碼的圖片(請(qǐng)不要問我為何在此 放一個(gè)有關(guān)驗(yàn)證碼的請(qǐng)求, 那么突兀, 那么奇怪。 我只是想借助這個(gè)文檔一起說明一下前端 ExtJS 應(yīng)該如何獲取后端傳過來的流數(shù)據(jù), 因?yàn)閷?duì)于初學(xué)者來說, 這個(gè)也許也算一個(gè)難點(diǎn) ; 第三個(gè) action ,綁定在“查詢按鈕上, ”點(diǎn)擊查詢后,會(huì)向后端發(fā)起一個(gè)查詢用戶角色信息 的請(qǐng)求 getUserRoleInfoList 。還記得這個(gè)請(qǐng)求么,我們基本編寫完了有關(guān)這個(gè)請(qǐng)求的后端 代碼,還編寫了相

44、應(yīng)的測(cè)試用例,別告訴我一點(diǎn)兒印象都沒有了才好。2.8.5前端開發(fā)之 view 層在介紹完了前端應(yīng)用入口 TableManagementApp.js文件和初步欣賞了我們要實(shí)現(xiàn)的頁面樣子之后, 各位讀者就可以好好思考一下根據(jù)我們要實(shí)現(xiàn)的頁面, view 、 model 、 store 這幾個(gè)目錄下面應(yīng)該需要?jiǎng)?chuàng)建哪些對(duì)象了。 接下來讓我們具體看一下我們前端的目錄安排和 view 層的代碼實(shí)現(xiàn),如下圖所示: 從上圖可以看出,我們根據(jù)前面要實(shí)現(xiàn)的頁面,在 view 目錄下定義了兩個(gè)組件,分別 是查詢條件 view 和查詢結(jié)果列表 view ,上圖截取的是查詢條件 view 的代碼,查詢結(jié)果列 表的 vi

45、ew 相對(duì)則更為簡單,此處不做贅述。在 SearchConditionView.js 文件中有以下幾 點(diǎn)值得注意:1自定義的 view (其他自定義組件也需遵循同樣的命名規(guī)范命名需要遵守 一定的規(guī)范,類似我們 java 后端的“包名 +類名”的命名方式,如我們這里的xhy.view.SearchConditionView (命名空間 +目錄 +類名 ,相信聰明的讀者你已經(jīng)有所領(lǐng) 悟。只有滿足這樣的命名規(guī)范才能自動(dòng)加載成功。 當(dāng)然, 研究無處不在,更深層次的原理有 待各位讀者自己去深入挖掘。 2從上圖我們可以看到,每一個(gè) button 出現(xiàn)的地方,如果 有相應(yīng)的事件需要與其綁定的話,我們都定義了

46、一個(gè) action 。具體怎么用,在哪里用,各 位讀者可以稍微思索一下,同時(shí)保有對(duì)這些 action的一些印象,以免下次遇到的時(shí)候,覺得突兀。 3上圖提供了一種在 ExtJS 中顯示圖片的方法,當(dāng)然,條條大道通羅馬,你可以 有新的實(shí)現(xiàn)方式。 4再認(rèn)真審查一遍 SearchConditionView.js 文件中的代碼,大家可以 發(fā)現(xiàn),這個(gè) view 文件中除了單純的 view 定義之外,沒有涉及任何的邏輯處理、規(guī)則校驗(yàn) 等。保持 view 層的純潔,這一點(diǎn)很重要。下圖為查詢結(jié)果列表 view 的部分代碼截圖: 2.8.6前端開發(fā)之 model 層和 store 層model 層和 store 層的代碼與以往的實(shí)現(xiàn)基本沒有差別,除了在為組件定義的時(shí)候要 注意命名規(guī)范之外。這個(gè)項(xiàng)目實(shí)例中涉及到的 model 十分簡單,如下圖所示: model中的字段名稱要與后端實(shí)體中定義的字段名稱完全一致,這個(gè)屬于基本常識(shí),此處不做贅述。下圖是本實(shí)例中要使用到的 store 的代碼截圖: 2.8.6前端開發(fā)之 controller 層為了能讓上述這些都十分