母嬰樂園APP設計與實現

楊雅志++楊開洪

摘 要：母嬰樂園APP，采用育兒知識+圈子分享+母嬰商城的模式，囊括了當下母嬰APP的熱門流行功能，并添加了照片墻，百日宴等特色功能。軟件采用混合應用開發模式，前端采用Ionic+AngularJS框架，后臺采用SSM框架，開發過程簡捷方便，軟件擴展性與維護性強。

關鍵詞：母嬰APP；AngularJS；照片墻；百日宴

中圖分類號：TP311.52 文獻標志碼：A 文章編號：2095-2945（2017）29-0112-02

引言

近幾年來，伴隨二胎政策與“互聯網+”、電子商務等技術的迅猛發展，使得母嬰類產品也得到飛速發展[1]。據相關權威數據顯示，二胎政策的全面放開，每年將新增300-500萬新生寶寶，帶來一個每年900-1500億的巨大消費市場。這些新生的寶寶，必將拉動母嬰市場的飛速發展，在接下來的幾年將是母嬰市場發展的鉑金時期。

目前，市場上的母嬰APP大致分為電商類和社區類兩大分支[2]，兩類APP注重點不同，各有所長。但是很少有將購物、育兒、交流、推送等服務集于一身的應用。鑒于此，開發了母嬰樂園APP。軟件前端采用流行的Ionic+AngularJS框架實現布局和用戶交互，后臺采用SSM框架實現維護相關功能。軟件各個模塊耦合度低，擴展性、可維護性高。通過該APP的使用，年輕的父母可以享受一站式服務，將寶寶的衣食住行安排的僅僅有條，使寶寶健康快樂的成長。

1 相關技術

1.1 Ionic

Ionic是一個用來開發混合手機應用的移動開發框架，以界面美觀、響應速度快等特點獲得良好的使用體驗，Ionic采用MVVM的實際思想，通過SASS構建應用程序來幫助開發者開發近乎完美的手機應用[3，4]。

1.2 AngularJS

AngularJS 是由谷歌維護的JavaScript框架[5]。它補充了

HTML在構建應用上的不足。它吸收了傳統的MVC設計模式針但又并不執行傳統意義上的MVC，更接近于MVVM（Model-View-ViewModel）。AngularJS憑借模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等特性使得web開發更加簡單化、專業化。

1.3 SSM

SSM框架是由MyBatis+Spring +SpringMVC三個框架整合而成。其中，MyBatis作為持久層框架，主要負責對數據庫的操作，SpringMVC作為表示層框架實現頁面展示與業務邏輯相分離，Spring框架負責管理MyBatis和SpringMVC。SSM是繼SSH框架之后，目前比較主流的Java EE企業級框架。適合搭建各種大型的企業級應用系統[6]。

2 系統設計

2.1 總體設計

母嬰樂園APP本著功能豐富、界面美觀、操作簡單的設計原則，在對市面廣泛使用的母嬰APP充分調研基礎上，確定了系統的總體架構和功能分配。系統功能模塊包括：登錄注冊、圈子、商城購物、百日宴、知識庫（孕育問答）、好友功能、照片墻等。各功能之間的相互調用情況如圖1所示。

2.2 數據庫設計

母嬰樂園APP數據庫采用MySQL，主要包括用戶表、商品表、商品一級分類表、商品二級分類表、訂單表、音頻表、視頻表、輪播圖表等。母嬰樂園APP數據庫的PDM結構如圖2所示。

3 系統實現

3.1 域模型（JavaBean）實現

域模型（JavaBean）指滿足一定條件的Java類。作為持久化對象，域模型實現Java類與數據表的映射。JavaBean中每個成員變量與數據表的每個字段相對應，從而對象映射。以用戶類User為例，其域模型代碼為：

public class User implements Serializable{

private int userID； //用戶編號

private String userName； //用戶名

private password； //密碼

//省略每個成員變量的getter和setter方法

}

3.2 業務邏輯層實現

業務邏輯層通過調用數據持久層完成指定的業務邏輯，同時處理表示層請求。業務邏輯層與數據層之間的協同通過Spring框架進行管理。以用戶對象User為例，業務邏輯層功能主要包括用戶登錄、注銷、修改密碼等。用戶對象業務邏輯主要代碼如下所示：

public class UserServiceImpl{

public boolean register（String username，String password）{…}

……

public Boolean login（String username，String password）{…}

}

3.3 數據持久層實現

數據持久層主要根據用戶請求完成對數據庫的訪問，并將結果返回到業務邏輯層。數據持久層對數據庫的訪問通過MyBatis框架完成。以用戶對象User為例，數據持久層功能主要包括對用戶的增、刪、改、查操作。主要代碼如下所示：

public class UserServiceImpl{

public boolean register（String username，String password）{…}

……

public Boolean login（String username，String password）{…}

}

3.4 前端界面實現

前端界面通過Ionic+AngularJS框架實現，其中個人賬戶界面和側邊欄界面如圖3所示。

4 結束語

本文介紹了母嬰樂園APP的設計與實現過程，通過該軟件的使用，可以同時滿足年輕父母對購物、孕期咨詢、育兒交流等不同方面的需求，而免去在各個APP間切換的煩惱。

參考文獻：

[1]王麗萍，樊鴻鈺.我國母嬰電商市場現狀及前景分析[J].經營者，2016，30（13）：50-52.

[2]李曉，夏杉珊，王明宇.我國母嬰電商的發展現狀與前景分析[J].中國商論，2015（36）：150-152.

[3]朱凱南，李艷平，申閆春，等.基于Ionic和Cordova的跨平臺移動APP的研究與應用[J].電腦知識與技術，2016，12（1）：119-121.

[4]鄧慧琴.Ionic框架開發移動App-自定義登錄加密插件[J].齊齊哈爾大學學報（自然科學版），2017，33（1）：9-13.

[5]董英茹.簡談AngularJS在下一代Web開發中的應用[J].軟件工師，2015，18（5）：30-31.

[6]鄒紅霆.基于SSM框架的Web系統研究與應用[J].湖南理工學院學報（自然科學版），2017，30（1）：39-43.