楊雅志++楊開洪
摘 要:母嬰樂園APP,采用育兒知識(shí)+圈子分享+母嬰商城的模式,囊括了當(dāng)下母嬰APP的熱門流行功能,并添加了照片墻,百日宴等特色功能。軟件采用混合應(yīng)用開發(fā)模式,前端采用Ionic+AngularJS框架,后臺(tái)采用SSM框架,開發(fā)過程簡捷方便,軟件擴(kuò)展性與維護(hù)性強(qiáng)。
關(guān)鍵詞:母嬰APP;AngularJS;照片墻;百日宴
中圖分類號(hào):TP311.52 文獻(xiàn)標(biāo)志碼:A 文章編號(hào):2095-2945(2017)29-0112-02
引言
近幾年來,伴隨二胎政策與“互聯(lián)網(wǎng)+”、電子商務(wù)等技術(shù)的迅猛發(fā)展,使得母嬰類產(chǎn)品也得到飛速發(fā)展[1]。據(jù)相關(guān)權(quán)威數(shù)據(jù)顯示,二胎政策的全面放開,每年將新增300-500萬新生寶寶,帶來一個(gè)每年900-1500億的巨大消費(fèi)市場(chǎng)。這些新生的寶寶,必將拉動(dòng)母嬰市場(chǎng)的飛速發(fā)展,在接下來的幾年將是母嬰市場(chǎng)發(fā)展的鉑金時(shí)期。
目前,市場(chǎng)上的母嬰APP大致分為電商類和社區(qū)類兩大分支[2],兩類APP注重點(diǎn)不同,各有所長。但是很少有將購物、育兒、交流、推送等服務(wù)集于一身的應(yīng)用。鑒于此,開發(fā)了母嬰樂園APP。軟件前端采用流行的Ionic+AngularJS框架實(shí)現(xiàn)布局和用戶交互,后臺(tái)采用SSM框架實(shí)現(xiàn)維護(hù)相關(guān)功能。軟件各個(gè)模塊耦合度低,擴(kuò)展性、可維護(hù)性高。通過該APP的使用,年輕的父母可以享受一站式服務(wù),將寶寶的衣食住行安排的僅僅有條,使寶寶健康快樂的成長。
1 相關(guān)技術(shù)
1.1 Ionic
Ionic是一個(gè)用來開發(fā)混合手機(jī)應(yīng)用的移動(dòng)開發(fā)框架,以界面美觀、響應(yīng)速度快等特點(diǎn)獲得良好的使用體驗(yàn),Ionic采用MVVM的實(shí)際思想,通過SASS構(gòu)建應(yīng)用程序來幫助開發(fā)者開發(fā)近乎完美的手機(jī)應(yīng)用[3,4]。
1.2 AngularJS
AngularJS 是由谷歌維護(hù)的JavaScript框架[5]。它補(bǔ)充了
HTML在構(gòu)建應(yīng)用上的不足。它吸收了傳統(tǒng)的MVC設(shè)計(jì)模式針但又并不執(zhí)行傳統(tǒng)意義上的MVC,更接近于MVVM(Model-View-ViewModel)。AngularJS憑借模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等特性使得web開發(fā)更加簡單化、專業(yè)化。
1.3 SSM
SSM框架是由MyBatis+Spring +SpringMVC三個(gè)框架整合而成。其中,MyBatis作為持久層框架,主要負(fù)責(zé)對(duì)數(shù)據(jù)庫的操作,SpringMVC作為表示層框架實(shí)現(xiàn)頁面展示與業(yè)務(wù)邏輯相分離,Spring框架負(fù)責(zé)管理MyBatis和SpringMVC。SSM是繼SSH框架之后,目前比較主流的Java EE企業(yè)級(jí)框架。適合搭建各種大型的企業(yè)級(jí)應(yīng)用系統(tǒng)[6]。
2 系統(tǒng)設(shè)計(jì)
2.1 總體設(shè)計(jì)
母嬰樂園APP本著功能豐富、界面美觀、操作簡單的設(shè)計(jì)原則,在對(duì)市面廣泛使用的母嬰APP充分調(diào)研基礎(chǔ)上,確定了系統(tǒng)的總體架構(gòu)和功能分配。系統(tǒng)功能模塊包括:登錄注冊(cè)、圈子、商城購物、百日宴、知識(shí)庫(孕育問答)、好友功能、照片墻等。各功能之間的相互調(diào)用情況如圖1所示。
2.2 數(shù)據(jù)庫設(shè)計(jì)
母嬰樂園APP數(shù)據(jù)庫采用MySQL,主要包括用戶表、商品表、商品一級(jí)分類表、商品二級(jí)分類表、訂單表、音頻表、視頻表、輪播圖表等。母嬰樂園APP數(shù)據(jù)庫的PDM結(jié)構(gòu)如圖2所示。
3 系統(tǒng)實(shí)現(xiàn)
3.1 域模型(JavaBean)實(shí)現(xiàn)
域模型(JavaBean)指滿足一定條件的Java類。作為持久化對(duì)象,域模型實(shí)現(xiàn)Java類與數(shù)據(jù)表的映射。JavaBean中每個(gè)成員變量與數(shù)據(jù)表的每個(gè)字段相對(duì)應(yīng),從而對(duì)象映射。以用戶類User為例,其域模型代碼為:
public class User implements Serializable{
private int userID; //用戶編號(hào)
private String userName; //用戶名
private password; //密碼
//省略每個(gè)成員變量的getter和setter方法
}
3.2 業(yè)務(wù)邏輯層實(shí)現(xiàn)
業(yè)務(wù)邏輯層通過調(diào)用數(shù)據(jù)持久層完成指定的業(yè)務(wù)邏輯,同時(shí)處理表示層請(qǐng)求。業(yè)務(wù)邏輯層與數(shù)據(jù)層之間的協(xié)同通過Spring框架進(jìn)行管理。以用戶對(duì)象User為例,業(yè)務(wù)邏輯層功能主要包括用戶登錄、注銷、修改密碼等。用戶對(duì)象業(yè)務(wù)邏輯主要代碼如下所示:
public class UserServiceImpl{
public boolean register(String username,String password){…}
……
public Boolean login(String username,String password){…}
}
3.3 數(shù)據(jù)持久層實(shí)現(xiàn)
數(shù)據(jù)持久層主要根據(jù)用戶請(qǐng)求完成對(duì)數(shù)據(jù)庫的訪問,并將結(jié)果返回到業(yè)務(wù)邏輯層。數(shù)據(jù)持久層對(duì)數(shù)據(jù)庫的訪問通過MyBatis框架完成。以用戶對(duì)象User為例,數(shù)據(jù)持久層功能主要包括對(duì)用戶的增、刪、改、查操作。主要代碼如下所示:
public class UserServiceImpl{
public boolean register(String username,String password){…}
……
public Boolean login(String username,String password){…}
}
3.4 前端界面實(shí)現(xiàn)
前端界面通過Ionic+AngularJS框架實(shí)現(xiàn),其中個(gè)人賬戶界面和側(cè)邊欄界面如圖3所示。
4 結(jié)束語
本文介紹了母嬰樂園APP的設(shè)計(jì)與實(shí)現(xiàn)過程,通過該軟件的使用,可以同時(shí)滿足年輕父母對(duì)購物、孕期咨詢、育兒交流等不同方面的需求,而免去在各個(gè)APP間切換的煩惱。
參考文獻(xiàn):
[1]王麗萍,樊鴻鈺.我國母嬰電商市場(chǎng)現(xiàn)狀及前景分析[J].經(jīng)營者,2016,30(13):50-52.
[2]李曉,夏杉珊,王明宇.我國母嬰電商的發(fā)展現(xiàn)狀與前景分析[J].中國商論,2015(36):150-152.
[3]朱凱南,李艷平,申閆春,等.基于Ionic和Cordova的跨平臺(tái)移動(dòng)APP的研究與應(yīng)用[J].電腦知識(shí)與技術(shù),2016,12(1):119-121.
[4]鄧慧琴.Ionic框架開發(fā)移動(dòng)App-自定義登錄加密插件[J].齊齊哈爾大學(xué)學(xué)報(bào)(自然科學(xué)版),2017,33(1):9-13.
[5]董英茹.簡談AngularJS在下一代Web開發(fā)中的應(yīng)用[J].軟件工師,2015,18(5):30-31.
[6]鄒紅霆.基于SSM框架的Web系統(tǒng)研究與應(yīng)用[J].湖南理工學(xué)院學(xué)報(bào)(自然科學(xué)版),2017,30(1):39-43.