黃　磊,楊武軍,張　鵬,程遠(yuǎn)征

(1.西安郵電大學(xué) 通信與信息工程學(xué)院,西安　710121; 2.西安郵電大學(xué) 移動互聯(lián)網(wǎng)研究所, 西安　710121)

?

基于JSP和Android的歌手競賽信息交互系統(tǒng)設(shè)計

黃磊1,楊武軍1,張鵬1，2,程遠(yuǎn)征1

(1.西安郵電大學(xué) 通信與信息工程學(xué)院,西安710121; 2.西安郵電大學(xué) 移動互聯(lián)網(wǎng)研究所, 西安710121)

摘要：為了打造校園歌手選拔的線上“生態(tài)系統(tǒng)”，完成線上與線下的互動閉環(huán)，提出一種基于Android平臺與MVC模式的歌手競賽系統(tǒng)的方法；該系統(tǒng)是客戶端/服務(wù)器結(jié)構(gòu)的，使用Servlet和JSP技術(shù)，并采用了改進(jìn)的MVC設(shè)計模式，將Spring MVC與MyBatis技術(shù)結(jié)合起來；服務(wù)端利用Tomcat搭建Web容器，用開發(fā)工具Eclipse對服務(wù)器編程，并用MySQL數(shù)據(jù)庫提供數(shù)據(jù)層應(yīng)用；該系統(tǒng)在移動終端上進(jìn)行了測試，可以實(shí)現(xiàn)線上報名，上傳作品，互動分享，查看排名，以及對選手進(jìn)行評論，投票等功能；該系統(tǒng)的實(shí)現(xiàn)可以使線上歌手競賽隨時隨地的進(jìn)行，從而使參賽過程更加便利和高效。

關(guān)鍵詞：安卓平臺；歌手競賽系統(tǒng)；MVC模式

0引言

近年來，隨著移動互聯(lián)網(wǎng)的迅猛發(fā)展，手機(jī)上網(wǎng)已經(jīng)成為生活中不可或缺的一部分，以用戶為中心的移動APP進(jìn)入了一個快速發(fā)展的階段。同時用戶也越來越希望能在任何時間，任意地點(diǎn)體驗(yàn)個性化服務(wù)。諸如中國好聲音，中國夢之聲等選秀節(jié)目的興起，為有著音樂夢想的年輕人提供了一個展現(xiàn)自己，實(shí)現(xiàn)夢想的舞臺。

然而傳統(tǒng)的線下海選對于深處象牙塔的大學(xué)生來說，無論參賽時間還是比賽地點(diǎn)，都有其局限性，不能滿足大學(xué)生群體張揚(yáng)個性的需求，線下參賽門檻仍然很高。因此本文基于Android和JSP技術(shù)[1]，以Android移動設(shè)備作為客戶端載體，設(shè)計了一個歌手競賽系統(tǒng)，為校園音樂愛好者提供了一個線上的展示自己的平臺，實(shí)現(xiàn)了選手線上比賽，線下互動的功能。

1Android平臺簡介

隨著信息化和互聯(lián)網(wǎng)技術(shù)的發(fā)展，智能手機(jī)越來越多地被廣大消費(fèi)者使用，各類手機(jī)的操作系統(tǒng)應(yīng)運(yùn)而生。Android系統(tǒng)從一發(fā)布，就因?yàn)樗_源的優(yōu)勢而迅速占領(lǐng)市場，目前Android系統(tǒng)的市場份額已經(jīng)達(dá)到了一半以上[2]。技術(shù)的進(jìn)步帶動了整個Android軟件產(chǎn)業(yè)的蓬勃發(fā)展，越來越多的用戶開始追捧日益豐富的Android軟件應(yīng)用。Android采用開源的Linux操作系統(tǒng)，分別采用C和Java語言技術(shù)實(shí)現(xiàn)底層和應(yīng)用層[3-4]。由于Android系統(tǒng)開放性這一特點(diǎn)，使得在其上的軟件開發(fā)相對較為容易，普通用戶可以根據(jù)自己的需求定向開發(fā)屬于自己的應(yīng)用軟件，同時由于應(yīng)用的逐漸豐富，Android手機(jī)用戶的數(shù)量不斷增長?？紤]到Android系統(tǒng)龐大的用戶群體和巨大的發(fā)展?jié)摿?，所以選擇它作為應(yīng)用程序的運(yùn)行環(huán)境。

2系統(tǒng)架構(gòu)設(shè)計

2.1系統(tǒng)架構(gòu)

該系統(tǒng)的設(shè)計研發(fā)，提出了一種建立在Android平臺上，結(jié)合Java Web技術(shù)的方法。本系統(tǒng)采用C/S結(jié)構(gòu)，為了使軟件具有結(jié)構(gòu)性，便于開發(fā)，維護(hù)和管理，本系統(tǒng)采用了MVC的設(shè)計模式，將不同的功能模塊獨(dú)立，使其具有松耦合性的特點(diǎn)，系統(tǒng)架構(gòu)如圖1所示。

圖1　系統(tǒng)架構(gòu)

Servlet主要負(fù)責(zé)控制程序的流轉(zhuǎn)，屬于程序的控制層；JavaBean負(fù)責(zé)封裝和處理數(shù)據(jù)，與數(shù)據(jù)庫進(jìn)行交互；JSP負(fù)責(zé)在頁面展示數(shù)據(jù)。這種開發(fā)模式下的程序具有很好的結(jié)構(gòu)性，因?yàn)楦鱾€層只做本身最擅長的工作。

圖中MVC設(shè)計模式是一種基于模型-視圖-控制器的軟件設(shè)計模式，一種軟件設(shè)計的規(guī)范。可以實(shí)現(xiàn)將視圖與模型的代碼進(jìn)行分離，改變某一模塊時不需要對其它模塊進(jìn)行改動，方便代碼的替換與復(fù)用。M指的是業(yè)務(wù)模型Model，功能是數(shù)據(jù)庫的存取數(shù)據(jù)；V是指用戶界面View，處理的是數(shù)據(jù)顯示的部分；C則是控制器Controller，負(fù)責(zé)從視圖讀取數(shù)據(jù)，并可將后臺數(shù)據(jù)傳輸?shù)角芭_展示。

該系統(tǒng)客戶端與服務(wù)端采用了HTTP協(xié)議進(jìn)行交互，HTTP協(xié)議是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議。由客戶端發(fā)起一個HTTP請求，建立一個到服務(wù)器指定端口的TCP連接，服務(wù)器則在那個端口監(jiān)聽客戶端發(fā)送過來的HTTP請求，一旦收到請求，服務(wù)器根據(jù)不同的情況響應(yīng)一個狀態(tài)碼。在HTTP協(xié)議下，客戶端每發(fā)起一次請求都需要服務(wù)器端進(jìn)行一次響應(yīng)。包括POST請求和GET請求，其中POST請求向服務(wù)器傳送的數(shù)據(jù)對用戶不可見；GET請求是把參數(shù)放到URL中，對用戶可見。

2.2系統(tǒng)功能設(shè)計

制造商通過常規(guī)生產(chǎn)和再制造生產(chǎn)滿足市場需求，顧客買到的都是新商品。參考文獻(xiàn)[13]方法，將消費(fèi)者持有商品看作虛擬庫存，分別建立如下制造商、零售商和消費(fèi)者庫存平衡方程：

服務(wù)端是基于JSP開發(fā)的系統(tǒng)，其功能如下：

1)選手報名：填寫報名信息，上傳參賽歌曲或視頻，后臺將選手填寫的姓名，手機(jī)等字段信息設(shè)置到Model層，保存到數(shù)據(jù)庫的player_info表中；

2)選手詳細(xì)信息：選手詳細(xì)信息頁面展示的字段包括姓名，所在院校，得票數(shù)，評論數(shù)等。用戶可以在線收聽選手上傳的音樂或視頻作品，并可為自己喜歡的選手投票，同時可以在下面的討論區(qū)對選手進(jìn)行評論；

3)選擇賽區(qū)：頁面采用三級聯(lián)動技術(shù)，可選擇省份、城市和學(xué)校。點(diǎn)擊搜索后將地區(qū)條件加入到篩選條件中，重新跳轉(zhuǎn)到排行榜頁面，顯示按照地區(qū)學(xué)校的選手排名列表信息；

4)搜索選手：點(diǎn)擊首頁的“搜索”按鈕跳轉(zhuǎn)到選手搜索頁面，后臺的數(shù)據(jù)庫查詢規(guī)則采用的是模糊查詢，將填寫的姓名加入到查詢語句中，通過DAO層的id映射到對應(yīng)的查詢語句，將結(jié)果返回并分頁展示在前端頁面；

5)用戶評論：用戶可在線對選手的作品進(jìn)行評論，后臺根據(jù)用戶的permit即手機(jī)號，從數(shù)據(jù)庫中檢索出當(dāng)前用戶的信息，并傳遞頭像給頁面并展示在評論列表中。當(dāng)選手點(diǎn)擊用戶頭像時，從前臺返回一個“Username”參數(shù)給后臺，后臺重新拼接回復(fù)內(nèi)容，實(shí)現(xiàn)選手對特定用戶進(jìn)行回復(fù)的功能；

6)用戶投票：每個用戶每天可以為選手投一張票，點(diǎn)擊詳情頁左下角的心形ICON后，就可以對選手進(jìn)行投票，后臺會根據(jù)注冊用戶的手機(jī)號進(jìn)行判斷，當(dāng)前用戶是否已經(jīng)投過票，并將頁面顯示的投票數(shù)加一。系統(tǒng)功能模塊如圖2所示。

圖2　系統(tǒng)功能模塊

2.3開發(fā)工具與框架

本系統(tǒng)采用的Spring MVC+MyBatis是目前主流的框架，Spring MVC配置較為簡單，通常在項(xiàng)目中會涉及到幾十上百的組件，如果采用xml的對象定義來配置的話，就會增加配置文件的大小，不方便查找和代碼維護(hù)，項(xiàng)目中采用的Spring注解利用反射機(jī)制原理可以解決如上的問題。Spring的組件自動掃描機(jī)制，可以實(shí)現(xiàn)在配置文件中添加幾行配置文件代碼，即可實(shí)現(xiàn)在類路徑下尋找標(biāo)注的功能。如我們可以用@Controller標(biāo)注控制層組件，@Repository來標(biāo)注數(shù)據(jù)訪問組件，即DAO組件。

MyBatis是一個自定義SQL，存儲過程和高級映射的持久層框架，它用于在bean和數(shù)據(jù)庫之間傳輸數(shù)據(jù)，同時保證對象，數(shù)據(jù)庫和數(shù)據(jù)映射層本身的獨(dú)立。MyBatis通過在XML中進(jìn)行配置和定義SQL語句，用Mapper來綁定XML與程序之間的關(guān)系，這樣便將數(shù)據(jù)庫語句和對象隔離了起來。

本系統(tǒng)根據(jù)用戶競賽交互系統(tǒng)的實(shí)際需要，保證平臺的穩(wěn)定運(yùn)行，選擇使用MySQL數(shù)據(jù)庫。MySQL是目前主流的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，具有體積小、速度快、總體成本低、安全可靠等特點(diǎn)，適用于各種平臺。同時采用數(shù)據(jù)庫可視化軟件SQLyog對數(shù)據(jù)庫進(jìn)行可視化，方便地操作。

3服務(wù)端的設(shè)計與實(shí)現(xiàn)

3.1服務(wù)端程序構(gòu)成

本系統(tǒng)創(chuàng)建的Web服務(wù)器是采用Spring MVC架構(gòu)，在于客戶端交互上，為了使得數(shù)據(jù)傳輸效率更高，系統(tǒng)采用了JSON格式的數(shù)據(jù)用于前后臺的數(shù)據(jù)傳輸[5-7]。JSON是一種輕量級的字符串?dāng)?shù)據(jù)格式，采用的文本格式易于閱讀和編寫，同時也易于機(jī)器解析和生成，不僅可以傳輸一個數(shù)組，還可以傳輸一個對象。

為了完成整個服務(wù)端的功能，服務(wù)器端程序一共有7個包，如圖3所示。

圖3　服務(wù)端包

DAO包主要是一些接口，封裝了數(shù)據(jù)庫的增刪改查的操作，Service包主要用來調(diào)用DAO層的一些方法，同時可以操作多個DAO包，ServiceImp是對Service接口的具體實(shí)現(xiàn)，這里會調(diào)用DAO的一些方法，Controller層負(fù)責(zé)控制程序的流轉(zhuǎn)，通過調(diào)用Service中的方法做一些操作，可以將查詢到的數(shù)據(jù)傳入前臺進(jìn)行展示。

3.2數(shù)據(jù)庫的建立與連接

根據(jù)功能需要，數(shù)據(jù)庫包含3張表：選手詳情信息表player_info，選手評論信息表player_comment及投票信息表player_vote等，采用主流的MyBatis持久層框架，當(dāng)DAO層接收到調(diào)用請求時，會接收到SQL的ID和傳入對象，MyBatis會根據(jù)SQL的ID找到對應(yīng)的MapperStatement，然后根據(jù)傳入?yún)?shù)對象對其進(jìn)行解析，最終得到要執(zhí)行的SQL語句和參數(shù)。

選手信息表包含選手ID主鍵、選手姓名、選手聯(lián)系方式、性別、報名頭像地址、報名時間和所在學(xué)校ID，如表1所示；選手評論信息表包括用戶ID、所評論的選手ID、評論內(nèi)容、評論類型及評論時間，如表2所示；投票信息表包括投票用戶ID、所投票選手ID、投票數(shù)目及投票時間等，如表3所示。

表1　選手詳情信息表

表2　選手評論信息表

表3　投票信息表

在這個過程中，Controller層不再直接訪問數(shù)據(jù)庫，而將其轉(zhuǎn)化為由DAO封裝對數(shù)據(jù)庫的增刪改查的操作。這樣就將低級別的數(shù)據(jù)訪問邏輯與高級別的業(yè)務(wù)邏輯分離了，體現(xiàn)了松耦合的思想。

4實(shí)驗(yàn)與分析

各個模塊設(shè)計開發(fā)完畢后，為了使用戶有更好的應(yīng)用體驗(yàn)，需要將代碼部署到linux服務(wù)器上，本次開發(fā)用的linux遠(yuǎn)程管理器是Xshell+Xftp，Xshell是一個強(qiáng)大的安全終端模擬軟件，它支持SSH以及Microsoft Windows平臺的TELNET協(xié)議。Xftp是一個基于MS windows平臺的功能強(qiáng)大的SFTP，F(xiàn)TP文件傳輸軟件。

項(xiàng)目開發(fā)完畢后，部署到正式服務(wù)器上，將打好的項(xiàng)目的war包通過Xftp傳輸?shù)椒?wù)器上。

接著打開Xshell，輸入linux命令：sudo cp-a /home/remote/isp.war./將isp的war包復(fù)制到當(dāng)前文件夾下，sudo unzip isp.war解壓縮，接著sudo /ect/tomcat7 restart 重啟tomcat服務(wù)器，這樣項(xiàng)目就部署在了服務(wù)器上，就可以通過無線網(wǎng)絡(luò)訪問系統(tǒng)服務(wù)器，同時也可以通過訪問后臺來獲取數(shù)據(jù)信息。

實(shí)現(xiàn)結(jié)果如圖4所示，其中系統(tǒng)主界面如圖4(a)所示，排行榜界面如圖4(b)所示，選手詳情界面如圖4(c)所示。

圖4　實(shí)現(xiàn)結(jié)果

5結(jié)論

本文提出了基于JSP和Android[8-9]的歌手競賽系統(tǒng)，客戶端與服務(wù)端的交互采用HTTP協(xié)議，上傳視頻文件時將字符串轉(zhuǎn)化為字節(jié)流傳輸?shù)胶笈_，播放時再讀取文件流并還原成視頻文件。該系統(tǒng)部署在了Linux遠(yuǎn)程服務(wù)器上，經(jīng)過測試，能夠滿足多用戶同時注冊報名登錄瀏覽的需求。

本文的特色之一是移動APP平臺的創(chuàng)新運(yùn)用，從使用的便攜性上來說，用戶通過APP即可利用碎片時間參加線上競技，同時也可以線下邀請好友注冊為自己拉票助威。采用的線上競技線下互動的O2O模式，掌上突圍，“云”端加冕，線上線下齊互動，移動互聯(lián)網(wǎng)平臺的運(yùn)作使之變得更加高效和便捷。

參考文獻(xiàn)：

[1] 宋小倩,周東升.基于Android平臺的應(yīng)用開發(fā)研究[J].軟件導(dǎo)刊，2011，10(2)：104-105.

[2] 陳望挺,林滿足.基于JSP和Android的C/S結(jié)構(gòu)問卷系統(tǒng)[J].計算機(jī)應(yīng)用，2013，33(3):886-889.

[3] 耿東久,索岳.基于Android手機(jī)的遠(yuǎn)程訪問和控制系統(tǒng)[J].計算機(jī)應(yīng)用，2011(2)：559-561.

[4] 潘永高,鐘亦平.基于網(wǎng)關(guān)的J2ME Jabber系統(tǒng)研究[J].計算機(jī)工程，2005,31(19):108-110.

[5] Yuan M J. J2ME移動應(yīng)用程序開發(fā)[M].梁超，王延華，譯.北京：清華大學(xué)出版社，2004.

[6] 李興華.名師講壇：Android開發(fā)實(shí)戰(zhàn)經(jīng)典[M].北京：清華大學(xué)出版社,2011.

[7] 張濤,黃強(qiáng).一個基于JSON的對象序列化算法[J].計算機(jī)工程與應(yīng)用，2007,43(15):98-100.

[8] 郭宏志.Android應(yīng)用開發(fā)詳解[M].北京：電子工業(yè)出版社，2011.

[9] 黃藝鋒,閆巧.基于Android平臺電子詞典的設(shè)計與實(shí)現(xiàn)[J].計算機(jī)應(yīng)用，2011(S2)：228-232.

Design of Information Interaction System for Singer Competition Based on JSP and Android

Huang Lei1，Yang Wujun1，Zhang Peng1，2，Cheng Yuanzheng1

(1.School of Communication and Information Engineering，Xi’an University of Posts and Telecommunications，Xi’an710121,China; 2.Institute of Mobile Internet，Xi’an University of Posts and Telecommunications,Xi’an710121, China)

Abstract：In order to build the online “ecosystem” of campus singer selection, and to complete the interaction between online and offline closed loop, a singer competition interaction system based on Android platform and MVC model has been proposed. This system was C/S structured and use Servlet as well as JSP technology，also adopted a modified MVC design pattern，combined Spring MVC and MyBatis technology together . The server included a Web container built by Tomcat，and used Eclipse development tools to program，meanwhile，it used MySQL database to provide data layer application . The system was tested on mobile terminal，can realize the online registration，display works，interactive sharing，checking the player rankings，as well as to the comment，vote and so on .The implementation of the system can make the online singer competition of anytime and anywhere，thus to make the process more convenient and efficient.

Keywords：Android platform; singer competition system; MVC model

文章編號：1671-4598(2016)02-0175-03

DOI：10.16526/j.cnki.11-4762/tp.2016.02.048

中圖分類號：TP311

文獻(xiàn)標(biāo)識碼：A

作者簡介：黃磊(1988-)，男，河南安陽人，研究生，主要從事移動互聯(lián)網(wǎng)技術(shù)方向的研究。楊武軍(1969-)，男，陜西西安人，副教授，碩士研究生導(dǎo)師，主要從事移動互聯(lián)網(wǎng)方向的研究。

基金項(xiàng)目：2014陜西省國際科技合作項(xiàng)目(2014KW02-02) ;2014陜西省工業(yè)攻關(guān)(2014K09-14)。

收稿日期：2015-08-06；修回日期：2015-10-08。