- 人人都玩開心網(wǎng):Ext JS+Android+SSH整合開發(fā)Web與移動(dòng)SNS
- 李寧編著
- 2398字
- 2018-12-27 18:57:22
1.3 編程高手的預(yù)言:人人都有開心網(wǎng)
實(shí)際上,開心網(wǎng)就是一種SNS?,F(xiàn)在網(wǎng)上有很多個(gè)人或小公司開發(fā)的開心網(wǎng)。雖然功能可能遠(yuǎn)不如kaixin和kaixin001,但也不失為另一種選擇。為了滿足廣大開發(fā)人員開發(fā)類似開心網(wǎng)的SNS的需求,本書將介紹一個(gè)采用Ext JS及SSH技術(shù)實(shí)現(xiàn)的模擬Windows桌面的開心網(wǎng)系統(tǒng),也可稱為開心桌面。由于篇幅所限,本書的開心網(wǎng)系統(tǒng)不可能做得像kaixin或kaixin001一樣復(fù)雜,但讀者可以利用本書介紹的技術(shù)及例子實(shí)現(xiàn)更復(fù)雜、更絢麗的功能。
1.3.1 自己搭建開心網(wǎng):絢麗頁面先睹為快
雖然開心網(wǎng)系統(tǒng)的規(guī)模比較大,以個(gè)人之力想實(shí)現(xiàn)一個(gè)完整的開心網(wǎng)十分困難,但仍然可以選擇其中的幾項(xiàng)功能來實(shí)現(xiàn),既學(xué)習(xí)了技術(shù),還會(huì)有成就感。當(dāng)然,如果能獲得利益就更好了。
本書要實(shí)現(xiàn)的開心網(wǎng)采用了Java及其相關(guān)的技術(shù)來實(shí)現(xiàn),主要的開發(fā)工具是Eclipse for Java EE,讀者可以到http://www.eclipse.org下載最新的版本。
除了開發(fā)工具外,Web服務(wù)器采用了Tomcat 6.x,當(dāng)然,讀者也可以很容易地將開心網(wǎng)移植到其他的Web(Java EE)服務(wù)器,例如,WebLogic、WebSphere、JBoss等。在具體的技術(shù)方法上采用了現(xiàn)在非常流行的Ajax客戶端框架Ext JS來實(shí)現(xiàn)Web頁面部分。后面的系統(tǒng)將采用SSH和三層結(jié)構(gòu)來完成。其中SSH是Struts 2、Spring和Hibernate。這是三種很常用的框架。它們分別被用于MVC模式、IOC和數(shù)據(jù)操作。這些技術(shù)的詳細(xì)情況將在下一節(jié)介紹。下面來看一下我們將要搭建的開心網(wǎng)的一些絢麗的頁面。這些頁面如圖1.4、圖1.5和圖1.6所示。

圖1.4 主頁面

圖1.5 電子相冊(cè)

圖1.6 贈(zèng)送禮物
1.3.2 萬丈高樓平地起:技術(shù)儲(chǔ)備
本書實(shí)現(xiàn)的開心網(wǎng)所采用的核心技術(shù)涉及Ext JS、Struts 2、Spring和Hibernate。由于篇幅所限,本書主要介紹Ext JS及SSH的整合技術(shù)。如果讀者想了解更多的關(guān)于Struts 2、Spring及Hibernate的知識(shí),請(qǐng)參閱筆者所著的《Java Web開發(fā)速學(xué)寶典》一書。
開發(fā)開心網(wǎng)客戶端除了需要用到傳統(tǒng)的Web技術(shù)(HTML、CSS、Java Script等)外,還涉及近年來很流行的Ajax技術(shù)。自Ajax之父Jesse James Garrett于2005年提出這一新概念之后,這一沉睡了多年的技術(shù),換上新衣,一下子變成Web應(yīng)用程序中最為受寵的功能。經(jīng)過將近5年的發(fā)展,Ajax技術(shù)在國際社區(qū)取得了很大的發(fā)展,已經(jīng)比較成熟。Ajax發(fā)展至今,也誕生了很多優(yōu)秀的框架,Ext JS就是其中的佼佼者。
在了解Ext JS之前,首先需要了解一下什么是YUI。
YUI(Yahoo! UI Library)是一個(gè)開源的JavaScript庫,與Ajax、DHTML和DOM等技術(shù)一起使用可以用于創(chuàng)建交互性極強(qiáng)的Web應(yīng)用,它還包含豐富的CSS資源。
Ext JS最初是YUI的一個(gè)擴(kuò)展,然而,它現(xiàn)在也可以擴(kuò)展至JQuery和Prototype。自1.1版開始,Ext JS已經(jīng)可以獨(dú)立運(yùn)行,不需要依賴于那些外部庫,雖然它仍然可以和其他技術(shù)集成?,F(xiàn)在,Ext 3.0版可以使用許多不同的基礎(chǔ)庫,例如YUI、JQuery和Prototype,甚至可以獨(dú)立的運(yùn)行。
Ext JS是一個(gè)非常棒的Ajax框架,可以用來開發(fā)具有十分華麗外觀的富客戶端應(yīng)用(從上一節(jié)的開心網(wǎng)頁面就可以看出這一點(diǎn)),能使B/S應(yīng)用更加具有活力。它是一個(gè)用JavaScript編寫,與后臺(tái)技術(shù)無關(guān)的前端Ajax框架。因此,可以把Ext JS用在.NET、Java、PPH等各種語言開發(fā)的應(yīng)用程序中。
SSH整合是開心網(wǎng)中涉及的另一項(xiàng)技術(shù)。Struts 2、Spring和Hibernate雖然都可以獨(dú)立運(yùn)行(Struts 2只能用于Web應(yīng)用,而Spring和Hibernate可以運(yùn)行在任何類型的Java應(yīng)用程序中)。但將三者有機(jī)地整合到一起會(huì)使程序更容易維護(hù)和升級(jí)(尤其對(duì)于大型的應(yīng)用程序而言)。
Struts2的核心思想是MVC模式。利用Struts 2中的Action可以將客戶端頁面和服務(wù)端的程序分離,這樣更容易升級(jí)和維護(hù)。而Hibernate主要用于數(shù)據(jù)的持久化和ORM映射。利用Hibernate可以將數(shù)據(jù)表的記錄映射成Java對(duì)象,并且Hibernate提供了大量的功能來操作這些Java對(duì)象。而且這種映射是透明的,也就是說,開發(fā)人員可以在不修改代碼的前提下修改Hibernate所指向的數(shù)據(jù)庫類型,如從SQL Server切換成Oracle。
Spring的功能非常多,但主要的功能是通過XML配置文件來裝配Java Bean。其核心思想是控制反轉(zhuǎn)(Inversion of Control, IOC)模式。通過Spring可以將很多代碼放到XML文件中供其他程序復(fù)用,從而大大減少了工作量。
將Struts 2、Spring和Hibernate相結(jié)合就意味著開心網(wǎng)使用的是MVC模式,并且可以很容易地移植數(shù)據(jù)庫,還可以利用Spring實(shí)現(xiàn)自動(dòng)裝載的功能。例如,當(dāng)Action對(duì)象被創(chuàng)建時(shí), Spring會(huì)根據(jù)XML文件的配置和Action類中的代碼來自動(dòng)創(chuàng)建DAO或Service對(duì)象實(shí)例(這部分將在第2章詳細(xì)介紹)。
1.3.3 開心網(wǎng)的安裝和運(yùn)行
在本節(jié)將介紹如何安裝和運(yùn)行本書實(shí)現(xiàn)的開心網(wǎng)系統(tǒng)。首先在讀者的機(jī)器上應(yīng)有JDK(1.5或以上版本)、Eclipse for Java EE(3.4或以上版本)、Tomcat(6.0或以上版本)和MySQL(5.0或以上版本)。這4個(gè)軟件的安裝非常容易(在安裝MySQL時(shí)root的密碼必須是1234)。安裝完這些軟件后,需要在Eclipse中配置Tomcat。單擊【W(wǎng)indow】> 【Preferences】菜單項(xiàng),打開【Preferences】對(duì)話框,在左側(cè)的選項(xiàng)樹中選中【Service】>【Runtime Environments】選項(xiàng),單擊右側(cè)的【Add】按鈕,選擇Tomcat服務(wù)器,如圖1.7所示。
單擊【Next】按鈕,進(jìn)入下一個(gè)頁面來設(shè)置Tomcat的安裝目錄,如圖1.8所示。

圖1.7 選擇Tomcat服務(wù)器

圖1.8 設(shè)置Tomcat的安裝目錄
在進(jìn)行上面的設(shè)置后,【Server Runtime Environments】列表中會(huì)顯示剛才選擇的Tomcat服務(wù)器,如圖1.9所示。
除此之外,在【Server】視圖中也會(huì)顯示剛才選擇的Tomcat服務(wù)器,如果在服務(wù)器可發(fā)布的工程中沒有讀者需要發(fā)布的工程,可以通過單擊Tomcat服務(wù)器右鍵菜單的【Add and Remove Projects】菜單項(xiàng)來添加相應(yīng)的Eclipse工程。如果想啟動(dòng)、停止或調(diào)試Tomcat,單擊Tomcat服務(wù)器右鍵菜單中相應(yīng)的菜單項(xiàng)即可。圖1.10是【Server】視圖中顯示相關(guān)工程的效果。

圖1.9 【Server Runtime Environments】列表

圖1.10 【Server】視圖
接下來在src目錄中找到script.txt文件,該文件保存了建立數(shù)據(jù)庫的腳本,復(fù)制該文件的內(nèi)容,在MySQL的命令行控制臺(tái)中執(zhí)行這些命令。
在進(jìn)行完上面的操作后,可以將src目錄中的源代碼目錄導(dǎo)入到Eclipse中(最好將這些目錄復(fù)制到硬盤上)。操作的方法是在【File】菜單中選擇【Import】子菜單項(xiàng),彈出【Import】對(duì)話框,按圖1.11所示選中導(dǎo)入項(xiàng),并進(jìn)入下一個(gè)頁面,如圖1.12所示。單擊【Browser】按鈕選擇要導(dǎo)入的工程目錄后,單擊【Finish】按鈕完成導(dǎo)入。

圖1.11 選擇要導(dǎo)入的項(xiàng)

圖1.12 選擇要導(dǎo)入的工程目錄
在導(dǎo)入相應(yīng)的工程后,需要在【Servers】視圖的右鍵菜單中選擇【Add and Remove Projects】菜單項(xiàng),在彈出的對(duì)話框左側(cè)選擇要運(yùn)行的工程,將其放到右側(cè)的列表框中,如圖1.13所示?,F(xiàn)在可以在Eclipse中啟動(dòng)Tomcat,并運(yùn)行程序了。本書實(shí)現(xiàn)的每一個(gè)例子的URL在相應(yīng)的位置都已給出。讀者可以在閱讀到相應(yīng)的位置時(shí)再運(yùn)行對(duì)應(yīng)的例子。

圖1.13 選擇要運(yùn)行的工程
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網(wǎng)頁設(shè)計(jì)基礎(chǔ)培訓(xùn)
- Dreamweaver CC中文版網(wǎng)頁設(shè)計(jì)與制作從新手到高手
- 網(wǎng)頁設(shè)計(jì)與制作(Dreamweaver CS6)
- JSP動(dòng)態(tài)網(wǎng)站開發(fā)案例指導(dǎo)
- 速學(xué)速通:快學(xué)Flash網(wǎng)頁動(dòng)畫
- Photoshop網(wǎng)頁設(shè)計(jì)從入門到精通
- Photoshop電商網(wǎng)頁廣告設(shè)計(jì)實(shí)戰(zhàn)從入門到精通
- 社交網(wǎng)站界面設(shè)計(jì)(原書第2版)
- 電子商務(wù)網(wǎng)頁設(shè)計(jì)(第二版)
- 淘寶店鋪頁面設(shè)計(jì)與裝修實(shí)戰(zhàn)教程
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網(wǎng)頁設(shè)計(jì)基礎(chǔ)培訓(xùn)教程
- ASP快速建站全程實(shí)錄
- 中文版Dreamweaver CS6完全自學(xué)教程
- Highcharts網(wǎng)頁圖表制作實(shí)例詳解 (Web開發(fā)典藏大系)
- Dreamweaver CS3網(wǎng)頁制作