楊雅志++楊開洪

摘 要：母嬰樂園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.