郑志娴 王敏

摘  要：为了满足动态灵活的移动端首页内容配置需求，设计了一款针对某超市APP的智能投放系统。系统主要功能为广告首页投放，操作人员仅需登录后台，即可控制手机展示相应的广告、商品、布局等内容，方便快捷。系统基于Android平台开发了系统客户端，服务器采用Spring Boot整合Vue实现前后端分离，服务器与客户端之间以JSON格式进行数据传输，打造前端到后端一体化的系统。经过测试，系统运行稳定，符合设计需求，具有一定的商用价值。

关键词：智能投放系统;广告首页投放;前后端分离;数据交互

中图分类号：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，Fuzhou  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  引  言

在信息技术不断发展的今天，电商平台日益增多，永辉、朴朴等超市也相继推出了APP，用户可通过移动端更加方便地在线选购商品。同时，相应的营销策略、活动也必不可少，其中广告就是一个重要的内容，APP如何合理布局、有效投放广告，并能够吸引顾客眼球，对当代移动端的内容丰富性及灵活性提出了更高的挑战。在移动端无需发布更新的前提下，如何针对大促和常规性活动展现出不同的内容也成为移动互联网时代绕不过的挑战。学院与福州因果网络科技有限公司合作，针对上述需求，设计和实现了一套针对首页资源位的投放系统，以满足动态灵活的移动端首页内容配置需求。通过投放后台的管理配置，APP即可在某些特定活动时间或特定場景对用户展现出不同的布局和样式，能够降低发布人员的操作难度、简化步骤，有效提升程序的快捷性。

1  相关框架和技术

1.1  Spring Boot

Spring Boot是基于Spring框架开发[1]的应用。“约定优先于配置”的软件设计范式简化了Spring应用的整个搭建和开发过程，使开发人员从不断重复的定义模板化配置的复杂过程中解脱[2]，更加注重业务逻辑的实现。除此之外，过去项目存在的稳定性问题以及依赖包的版本冲突，通过Spring Boot中集成的框架得到了解决。同时开发者能够更好地利用众多组件项目，Web应用的开发模式因此被改变。

Spring Boot具有下列几个特点[3]：

（1）可以任意地搭配、组装从而生成独立的开发项目;

（2）包依赖管理;

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

（4）内置Tomcat，部署调试简单。

1.2  Vue介绍

Vue.js是目前较为流行的前端框架之一，框架只关注视图层[3]。与其他重量级框架不同的是，Vue较易与前端库或其他项目整合，易上手。与其他前端框架相比较，Vue.js具备以下优点[4]：

（1）语法类似HTML，结合HTML、JS，易上手;

（2）简单小巧，能开发复杂的单页面组件，较为灵活;

（3）本身容量小，处理数据更快速。

2  系统设计

2.1  系统框架结构设计

整个投屏系统分为服务器与客户端两大部分。服务器端是基于Spring Boot框架搭建后端，Vue.js+Element UI框架设计前端，MySQL数据库用于存储数据。前端负责控制页面跳转、调用接口，通过Ajax向Spring Boot框架请求数据;而后端负责业务逻辑，包含了业务层、数据访问层等。而客户端通过Andrid Studio进行开发，通过Volley框架处理HTTP请求，从服务层API获取JSON数据。具体系统框架结构图如图1所示。

2.2  系统主要功能设计

系统主要分为客户端与服务器，具体功能为：

客户端：以Android为操作系统，手机APP可以展示展示定制广告，并根据时限自动上架、下架;APP的广告布局可以根据后台设置进行切换选择，让用户体验不一样的显示效果。三个选项卡无缝衔接，展示更多商品的同时，支持商品搜索，带给用户更加良好的视觉体验。

服务器后台：根据后台人员的操作，可以对广告的内容、时间、位置进行灵活设置，改变前端页面展示的布局。后台人员能够通过服务器后台，直接创建、修改、删除广告和商品，将内容添加进前端页面，并支持一键下架、上架商品;创建广告和商品时，可以设置广告的起始时间和结束时间，到达相应时间点，无需人工干涉，自动添加、取消广告;可以在后台控制APP页面的布局切换。

2.3  系统接口规定

整个系统采用HTTP协议，数据传输主要以JSON格式[5]为主。JSON格式是一种轻量级的数据交换格式[6]，它小巧、易于被机器解析与生成、易于阅读与编写。采用的基本格式为：

{

"data"： null，

"status"： 200

}

服务器与客户端之间按照业务模块进行接口约定，其中表1展示了部分接口定义，具体如表1所示。

3  系统实现

整个投放系统基于Java语言，服务器的Spring Boot开发工具为IntelliJ IDEA，Vue开发工具为VSCode软件，项目部署在阿里云服务器上[7]。客户端使用Android系统，开发工具为Android Studio。

3.1  Android客户端界面实现

Android客户端界面除了闪屏页、登录界面之外，关键就是主页面。主页面采用纵向布局，广告、商品等缩略信息都可主页面里看到。为降低代码耦合度，手机APP界面主要使用XML文件来编写。程序使用Google推出的Material Design来丰富APP效果。APP整体采用协调布局CoordinatorLayout作为顶层布局，协调View之间的交互。

主界面中使用多种组件实现各种功能效果：

（1）使用CollapsingToolbarLayout控件实现折叠式标题布局的效果。该控件可以看成一个可折叠的Toolbar，里面包含一个ImageView和一个Toolbar当它缩到最小的时候就是一个普通的Toolbar，它可以实现：随着滑动，图片逐渐缩小最后只剩下Toolbar;

（2）使用Banner组件实现轮播图效果;

（3）使用SmartRefreshLayout智能刷新框架，它支持所有的View并支持多层嵌套的视图结构，能够实现稳定，成熟的下拉刷新;

（4）使用滑动布局ConsecutiveScrollerLayout来统一处理布局的滑动，它可以同时嵌套多个滑动布局（RecyclerView、WebView、ScrollView等）和普通控件（TextView、ImageView、LinearLayout、自定义View等），使得多个滑动布局就像一个整体一样连续滑动，它的效果就像是一个ScrollView一样。而且它支持嵌套所有的View，具有很好的通用性。使用者不需要关心它是如何滑动的，也不需要考虑滑动的冲突问题，并且不用担心它会影响子View的性能;

（5）使用RecyclerView代替ListView以實现商品列表数据。

APP部分实现界面如图2～图4所示。

3.2  广告布局功能实现

用户通过手机浏览程序广告布局，向服务器发送HTTP请求后，解析接口，根据请求查找对应的LayoutController文件，通过控制层中的URL，根据不同路径调用不同的Service，通过Service的LayoutDao去查找具体的Mapper，再通过LayoutMap文件中的方法操作数据库，与数据库交互后将返回结果告知Service，接着由Service传给Controller，最后通过JSON格式返回给APP。获得布局的业务时序图如图5所示。

程序实现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

请求参数：{}

返回参数：{

"data"： {

"id"： 1，

"layout"： 1

}，

"status"： 200

}

上述返回结果表示，返回成功，显示的数据为布局为1，广告ID为1的效果展示，如图6中左侧界面所示。

在本系统中，已设计APP中的广告可放置在顶栏、轮播、横条三个位置，如图6中矩形框所示，也可以设置接口实现后台设置一键切换广告位置，如图6右图效果。流程类似，本文不再赘述。

项目开发完成之后，该系统应用在Chrome浏览器和移动平台（Android 4.4以上版本测试，测试平台型号为：魅族 16th）经过测试并无异常，页面显示以及与用户交互方面与需求设计一致。

4  结  论

本系统开发针对某一超市APP进行广告定制，对广告的设置侧重简洁、方便，复杂度有待提升，后期可进一步开发更加精确的设置、推荐相应的广告及商品。另外，虽然进行了广告布局的更改，但布局位置相对固定，后续开发过程中可以适当提升灵活性，让用户体验更加良好。后期也可推广为任一APP的广告投屏。期待本項目可以为公司和企业节约劳力成本的同时，为用户带来更好的体验。

参考文献：

[1] 小马哥.Spring Boot编程思想（核心篇） [M].北京：电子工业出版社，2010.

[2] 耿庆阳.基于Spring Boot与Vue的电子商城设计与实现 [D].西安：西安石油大学，2020.

[3] 朱运乔.基于SpringBoot+SSM框架的Web应用系统搭建与实现 [J].电脑编程技巧与维护，2019（10）：23-25.

[4] 焦鹏珲.基于SpringBoot和Vue框架的电子招投标系统的设计与实现 [D].南京：南京大学，2018.

[5] 王龙军，李华志，朱雪梅.JSON在Android移动图书馆开发中的应用 [J].电脑编程技巧与维护，2019（4）：74-75+89.

[6] 柯熙政，宋云凤.一种移动终端可见光数据收发系统的设计与实现 [J].西安理工大学学报，2019，35（1）：1-6.

[7] 师明，曾丹.基于Vue.js和Spring Boot的校招日记系统 [J].工业控制计算机，2020，33（1）：95-97.

作者简介：郑志娴（1979—），女，汉族，福建福州人，副教授，软件设计师，硕士，研究方向：移动互联开发技术、Java开发。