鄭志嫻 王敏

摘 ?要：為了滿足動態(tài)靈活的移動端首頁內容配置需求，設計了一款針對某超市APP的智能投放系統(tǒng)。系統(tǒng)主要功能為廣告首頁投放，操作人員僅需登錄后臺，即可控制手機展示相應的廣告、商品、布局等內容，方便快捷。系統(tǒng)基于Android平臺開發(fā)了系統(tǒng)客戶端，服務器采用Spring Boot整合Vue實現(xiàn)前后端分離，服務器與客戶端之間以JSON格式進行數(shù)據(jù)傳輸，打造前端到后端一體化的系統(tǒng)。經(jīng)過測試，系統(tǒng)運行穩(wěn)定，符合設計需求，具有一定的商用價值。

關鍵詞：智能投放系統(tǒng);廣告首頁投放;前后端分離;數(shù)據(jù)交互

中圖分類號：TP277;TU855 ? ? 文獻標識碼：A 文章編號：2096-4706（2020）21-0027-04

Design and Implementation of Intelligent Delivery System Based on Android

ZHENG Zhixian，WANG Min

（Fujian Chuanzheng Communications College，F(xiàn)uzhou ?350007，China）

Abstract：An intelligent delivery system for a supermarket APP is designed to meet the needs of dynamic and flexible mobile terminal homepage content configuration. The main function of the system is advertising on the homepage. Operators only need to log in the background to control the mobile phone to display corresponding advertisements，products，layouts and other content，which is convenient and quick. The system has developed a system client based on the Android platform，the server adopts the Spring Boot integration Vue to realize the front and rear end separation，the data transmission between the server and the client is in JSON format to create an integrated system from front-end to back-end. After testing，the system runs stably，meets the design requirements，and has certain commercial value.

Keywords：intelligent delivery system;advertising on the homepage;front and rear end separation;data interaction

0 ?引 ?言

在信息技術不斷發(fā)展的今天，電商平臺日益增多，永輝、樸樸等超市也相繼推出了APP，用戶可通過移動端更加方便地在線選購商品。同時，相應的營銷策略、活動也必不可少，其中廣告就是一個重要的內容，APP如何合理布局、有效投放廣告，并能夠吸引顧客眼球，對當代移動端的內容豐富性及靈活性提出了更高的挑戰(zhàn)。在移動端無需發(fā)布更新的前提下，如何針對大促和常規(guī)性活動展現(xiàn)出不同的內容也成為移動互聯(lián)網(wǎng)時代繞不過的挑戰(zhàn)。學院與福州因果網(wǎng)絡科技有限公司合作，針對上述需求，設計和實現(xiàn)了一套針對首頁資源位的投放系統(tǒng)，以滿足動態(tài)靈活的移動端首頁內容配置需求。通過投放后臺的管理配置，APP即可在某些特定活動時間或特定場景對用戶展現(xiàn)出不同的布局和樣式，能夠降低發(fā)布人員的操作難度、簡化步驟，有效提升程序的快捷性。

1 ?相關框架和技術

1.1 ?Spring Boot

Spring Boot是基于Spring框架開發(fā)[1]的應用?！凹s定優(yōu)先于配置”的軟件設計范式簡化了Spring應用的整個搭建和開發(fā)過程，使開發(fā)人員從不斷重復的定義模板化配置的復雜過程中解脫[2]，更加注重業(yè)務邏輯的實現(xiàn)。除此之外，過去項目存在的穩(wěn)定性問題以及依賴包的版本沖突，通過Spring Boot中集成的框架得到了解決。同時開發(fā)者能夠更好地利用眾多組件項目，Web應用的開發(fā)模式因此被改變。

Spring Boot具有下列幾個特點[3]：

（1）可以任意地搭配、組裝從而生成獨立的開發(fā)項目;

（2）包依賴管理;

（3）采用注解形式，不用再繁瑣的配置XML文件，簡化了XML配置;

（4）內置Tomcat，部署調試簡單。

1.2 ?Vue介紹

Vue.js是目前較為流行的前端框架之一，框架只關注視圖層[3]。與其他重量級框架不同的是，Vue較易與前端庫或其他項目整合，易上手。與其他前端框架相比較，Vue.js具備以下優(yōu)點[4]：

（1）語法類似HTML，結合HTML、JS，易上手;

（2）簡單小巧，能開發(fā)復雜的單頁面組件，較為靈活;

（3）本身容量小，處理數(shù)據(jù)更快速。

2 ?系統(tǒng)設計

2.1 ?系統(tǒng)框架結構設計

整個投屏系統(tǒng)分為服務器與客戶端兩大部分。服務器端是基于Spring Boot框架搭建后端，Vue.js+Element UI框架設計前端，MySQL數(shù)據(jù)庫用于存儲數(shù)據(jù)。前端負責控制頁面跳轉、調用接口，通過Ajax向Spring Boot框架請求數(shù)據(jù);而后端負責業(yè)務邏輯，包含了業(yè)務層、數(shù)據(jù)訪問層等。而客戶端通過Andrid Studio進行開發(fā)，通過Volley框架處理HTTP請求，從服務層API獲取JSON數(shù)據(jù)。具體系統(tǒng)框架結構圖如圖1所示。

2.2 ?系統(tǒng)主要功能設計

系統(tǒng)主要分為客戶端與服務器，具體功能為：

客戶端：以Android為操作系統(tǒng)，手機APP可以展示展示定制廣告，并根據(jù)時限自動上架、下架;APP的廣告布局可以根據(jù)后臺設置進行切換選擇，讓用戶體驗不一樣的顯示效果。三個選項卡無縫銜接，展示更多商品的同時，支持商品搜索，帶給用戶更加良好的視覺體驗。

服務器后臺：根據(jù)后臺人員的操作，可以對廣告的內容、時間、位置進行靈活設置，改變前端頁面展示的布局。后臺人員能夠通過服務器后臺，直接創(chuàng)建、修改、刪除廣告和商品，將內容添加進前端頁面，并支持一鍵下架、上架商品;創(chuàng)建廣告和商品時，可以設置廣告的起始時間和結束時間，到達相應時間點，無需人工干涉，自動添加、取消廣告;可以在后臺控制APP頁面的布局切換。

2.3 ?系統(tǒng)接口規(guī)定

整個系統(tǒng)采用HTTP協(xié)議，數(shù)據(jù)傳輸主要以JSON格式[5]為主。JSON格式是一種輕量級的數(shù)據(jù)交換格式[6]，它小巧、易于被機器解析與生成、易于閱讀與編寫。采用的基本格式為：

{

"data"： null，

"status"： 200

}

服務器與客戶端之間按照業(yè)務模塊進行接口約定，其中表1展示了部分接口定義，具體如表1所示。

3 ?系統(tǒng)實現(xiàn)

整個投放系統(tǒng)基于Java語言，服務器的Spring Boot開發(fā)工具為IntelliJ IDEA，Vue開發(fā)工具為VSCode軟件，項目部署在阿里云服務器上[7]?？蛻舳耸褂肁ndroid系統(tǒng)，開發(fā)工具為Android Studio。

3.1 ?Android客戶端界面實現(xiàn)

Android客戶端界面除了閃屏頁、登錄界面之外，關鍵就是主頁面。主頁面采用縱向布局，廣告、商品等縮略信息都可主頁面里看到。為降低代碼耦合度，手機APP界面主要使用XML文件來編寫。程序使用Google推出的Material Design來豐富APP效果。APP整體采用協(xié)調布局CoordinatorLayout作為頂層布局，協(xié)調View之間的交互。

主界面中使用多種組件實現(xiàn)各種功能效果：

（1）使用CollapsingToolbarLayout控件實現(xiàn)折疊式標題布局的效果。該控件可以看成一個可折疊的Toolbar，里面包含一個ImageView和一個Toolbar當它縮到最小的時候就是一個普通的Toolbar，它可以實現(xiàn)：隨著滑動，圖片逐漸縮小最后只剩下Toolbar;

（2）使用Banner組件實現(xiàn)輪播圖效果;

（3）使用SmartRefreshLayout智能刷新框架，它支持所有的View并支持多層嵌套的視圖結構，能夠實現(xiàn)穩(wěn)定，成熟的下拉刷新;

（4）使用滑動布局ConsecutiveScrollerLayout來統(tǒng)一處理布局的滑動，它可以同時嵌套多個滑動布局（RecyclerView、WebView、ScrollView等）和普通控件（TextView、ImageView、LinearLayout、自定義View等），使得多個滑動布局就像一個整體一樣連續(xù)滑動，它的效果就像是一個ScrollView一樣。而且它支持嵌套所有的View，具有很好的通用性。使用者不需要關心它是如何滑動的，也不需要考慮滑動的沖突問題，并且不用擔心它會影響子View的性能;

（5）使用RecyclerView代替ListView以實現(xiàn)商品列表數(shù)據(jù)。

APP部分實現(xiàn)界面如圖2～圖4所示。

3.2 ?廣告布局功能實現(xiàn)

用戶通過手機瀏覽程序廣告布局，向服務器發(fā)送HTTP請求后，解析接口，根據(jù)請求查找對應的LayoutController文件，通過控制層中的URL，根據(jù)不同路徑調用不同的Service，通過Service的LayoutDao去查找具體的Mapper，再通過LayoutMap文件中的方法操作數(shù)據(jù)庫，與數(shù)據(jù)庫交互后將返回結果告知Service，接著由Service傳給Controller，最后通過JSON格式返回給APP。獲得布局的業(yè)務時序圖如圖5所示。

程序實現(xiàn)Controller代碼為：

@RestController

@RequestMapping（"layout"）

public class LayoutController {

@Autowired

private LayoutDao layoutDao;

@RequestMapping（"/getLayout"）

private Map getLayout（）{

Map modeMap=new HashMap<>（）;

LayoutEntity layoutEntity=layoutDao.getLayout（）;

modeMap.put（"status"，200）;

modeMap.put（"data"，layoutEntity）;

return modeMap;

}

}

控制器對應的獲取布局信息的IP地址格式為：http：//ip：8081/interface/layout/getLayout

請求參數(shù)：{}

返回參數(shù)：{

"data"： {

"id"： 1，

"layout"： 1

}，

"status"： 200

}

上述返回結果表示，返回成功，顯示的數(shù)據(jù)為布局為1，廣告ID為1的效果展示，如圖6中左側界面所示。

在本系統(tǒng)中，已設計APP中的廣告可放置在頂欄、輪播、橫條三個位置，如圖6中矩形框所示，也可以設置接口實現(xiàn)后臺設置一鍵切換廣告位置，如圖6右圖效果。流程類似，本文不再贅述。

項目開發(fā)完成之后，該系統(tǒng)應用在Chrome瀏覽器和移動平臺（Android 4.4以上版本測試，測試平臺型號為：魅族 16th）經(jīng)過測試并無異常，頁面顯示以及與用戶交互方面與需求設計一致。

4 ?結 ?論

本系統(tǒng)開發(fā)針對某一超市APP進行廣告定制，對廣告的設置側重簡潔、方便，復雜度有待提升，后期可進一步開發(fā)更加精確的設置、推薦相應的廣告及商品。另外，雖然進行了廣告布局的更改，但布局位置相對固定，后續(xù)開發(fā)過程中可以適當提升靈活性，讓用戶體驗更加良好。后期也可推廣為任一APP的廣告投屏。期待本項目可以為公司和企業(yè)節(jié)約勞力成本的同時，為用戶帶來更好的體驗。

參考文獻：

[1] 小馬哥.Spring Boot編程思想（核心篇） [M].北京：電子工業(yè)出版社，2010.

[2] 耿慶陽.基于Spring Boot與Vue的電子商城設計與實現(xiàn) [D].西安：西安石油大學，2020.

[3] 朱運喬.基于SpringBoot+SSM框架的Web應用系統(tǒng)搭建與實現(xiàn) [J].電腦編程技巧與維護，2019（10）：23-25.

[4] 焦鵬琿.基于SpringBoot和Vue框架的電子招投標系統(tǒng)的設計與實現(xiàn) [D].南京：南京大學，2018.

[5] 王龍軍，李華志，朱雪梅.JSON在Android移動圖書館開發(fā)中的應用 [J].電腦編程技巧與維護，2019（4）：74-75+89.

[6] 柯熙政，宋云鳳.一種移動終端可見光數(shù)據(jù)收發(fā)系統(tǒng)的設計與實現(xiàn) [J].西安理工大學學報，2019，35（1）：1-6.

[7] 師明，曾丹.基于Vue.js和Spring Boot的校招日記系統(tǒng) [J].工業(yè)控制計算機，2020，33（1）：95-97.

作者簡介：鄭志嫻（1979—），女，漢族，福建福州人，副教授，軟件設計師，碩士，研究方向：移動互聯(lián)開發(fā)技術、Java開發(fā)。