張承楷 林琳 溫凌峰 魏宏宇 吳冬燕

摘要：該項(xiàng)目解決了當(dāng)今廣告行業(yè)的撒網(wǎng)式播放視頻廣告的問題。針對(duì)廣告投入方無法直觀看到廣告訪問量的問題，通過springboot快速開發(fā)了數(shù)據(jù)可視化圖表來追蹤廣告訪問人數(shù);而對(duì)于視頻廣告缺少互動(dòng)性的弱點(diǎn)，該項(xiàng)目通過添加增強(qiáng)現(xiàn)實(shí)（AR）模板，提升廣告的趣味性，模板可復(fù)用同時(shí)達(dá)到快速開發(fā)的目的，促進(jìn)廣告投放的精準(zhǔn)性，可追查性。

關(guān)鍵詞：廣告;springboot;增強(qiáng)現(xiàn)實(shí);ar.js

中圖分類號(hào)：TP311.5? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）36-0080-04

當(dāng)今，伴隨著互聯(lián)網(wǎng)行業(yè)驚人的發(fā)展，傳統(tǒng)廣告和媒體預(yù)算的時(shí)代已成為過去式，數(shù)據(jù)與創(chuàng)意和媒介的相互融合成為顯而易見的發(fā)展趨勢(shì)。撒網(wǎng)式的廣告投放不僅投入巨大，并且缺少直觀的反饋，無法根據(jù)反饋即時(shí)改進(jìn)。

因此，本項(xiàng)目通過增強(qiáng)現(xiàn)實(shí)技術(shù)，在增加廣告的互動(dòng)性，增強(qiáng)用戶黏性的同時(shí)，收集了用戶訪問人數(shù)等等信息來分析，并且對(duì)于增強(qiáng)現(xiàn)實(shí)模塊開發(fā)成本高的問題，本項(xiàng)目提出模塊化的開發(fā)思路來降低技術(shù)難度和開發(fā)成本，做到高效率快速開發(fā)的目的。

1 系統(tǒng)需求分析

1.1 需求分析

本項(xiàng)目針對(duì)的是廣告投放商，目的是解決廣告商不能持續(xù)跟蹤廣告投放效果，以及通過增強(qiáng)現(xiàn)實(shí)等技術(shù)來與客戶形成更多的互動(dòng)。在此基礎(chǔ)上，本項(xiàng)目進(jìn)行了以下的優(yōu)化：

1）增加了可視化的數(shù)據(jù)統(tǒng)計(jì)

客戶可以隨時(shí)進(jìn)入網(wǎng)頁查詢可視化數(shù)據(jù)統(tǒng)計(jì)分析，通過分析推廣數(shù)據(jù)，可以根據(jù)數(shù)據(jù)分析出新老用戶、每日使用人數(shù)、用戶所在地區(qū)等信息，來將廣告推送給適宜的群體，這些數(shù)據(jù)對(duì)調(diào)整市場(chǎng)投放策略起到重要作用。

2） 降低廣告換代制作成本

對(duì)于廣告投放商來說，從頭制作一個(gè)廣告的代價(jià)確實(shí)太高，因此對(duì)于更新?lián)Q代的產(chǎn)品來說，在廣告視頻上嵌入一個(gè)可供掃描的二維碼或者通過平面或者紙質(zhì)廣告上的圖案增加AR功能都是可以接受的。

3）易用一鍵即達(dá)

相對(duì)于使用ARCore或者制作App之類煩瑣的行為，通過手機(jī)瀏覽器訪問無疑減少用戶的決策負(fù)擔(dān)，易用且直觀。

2 系統(tǒng)設(shè)計(jì)

2.1 用例設(shè)計(jì)

該系統(tǒng)設(shè)計(jì)了三種角色：客戶、管理員和廣告受眾?？蛻艨梢赃M(jìn)行以下操作：登錄、注冊(cè)、填寫訂單和提交、查看訂單狀態(tài)、查看廣告反饋數(shù)據(jù)。管理員以管理員身份登錄后臺(tái)系統(tǒng)后，可以查看訂單和客戶信息，修改、刪除和添加一些信息。廣告受眾的操作是用微信掃描商品或其他地方上的二維碼，跳轉(zhuǎn)到制作好的AR頁面，進(jìn)行AR互動(dòng)，最后引流至客戶發(fā)布的活動(dòng)頁面。

管理員和廣告受眾的用例比較簡單略去不表，客戶用例圖如圖1。

廣告反饋頁面，包含每月觀看量/地區(qū)觀看量和多次收看觀眾占比，通過可視化數(shù)據(jù)統(tǒng)計(jì)幫助客戶了解廣告效果并及時(shí)調(diào)整廣告策略。

2.2 AR設(shè)計(jì)方案

AR技術(shù)支持如圖2所示：

AR系統(tǒng)中一般都包含以下4個(gè)基本步驟：1）獲取實(shí)時(shí)場(chǎng)景信息;2）對(duì)實(shí)時(shí)場(chǎng)景及相機(jī)位置信息進(jìn)行分析;3）生成虛擬背景;4）合并視頻或直接顯示[1]。

2.3 后端設(shè)計(jì)方案

本項(xiàng)目采用Spring Boot作為開發(fā)框架進(jìn)行快速構(gòu)建和開發(fā)。Spring Boot是由核心團(tuán)隊(duì)基于Spring framework開發(fā)的微服務(wù)開發(fā)框架的微服務(wù)開發(fā)框架體系，致力于簡化項(xiàng)目開發(fā)流程，優(yōu)化項(xiàng)目代碼結(jié)構(gòu)，實(shí)現(xiàn)零配置。與傳統(tǒng)的Spring框架相比，Spring Boot在代碼編寫形式、業(yè)務(wù)邏輯實(shí)現(xiàn)、項(xiàng)目部署實(shí)現(xiàn)、松耦合項(xiàng)目開發(fā)等方面都有了很大的飛躍[2]。

系統(tǒng)架構(gòu)設(shè)計(jì)是系統(tǒng)編程的基礎(chǔ)，是項(xiàng)目設(shè)計(jì)的核心。本系統(tǒng)采用controller（控制層），service（業(yè)務(wù)層）和dao（數(shù)據(jù)持久層）三層體系結(jié)構(gòu)的系統(tǒng)模式。其功能如圖3所示。

Entity層：entity層即數(shù)據(jù)庫實(shí)體層，也被稱為model層，pojo層。一般數(shù)據(jù)庫一張表對(duì)應(yīng)一個(gè)Entity實(shí)體類，類屬性同表字段一一對(duì)應(yīng)。

Dao層：dao層即數(shù)據(jù)持久層，也被稱為mapper層，它的作用為訪問數(shù)據(jù)庫，向數(shù)據(jù)庫發(fā)送sql語句，完成數(shù)據(jù)的增刪改查任務(wù)。

Service層：service層即業(yè)務(wù)邏輯層，作用為完成功能設(shè)計(jì)。service層調(diào)用dao層接口，接收dao層返回的數(shù)據(jù)，完成項(xiàng)目的基本功能設(shè)計(jì)。

Controller層：controller層即控制層，功能為請(qǐng)求和響應(yīng)控制，負(fù)責(zé)前后端交互，接受前端請(qǐng)求，調(diào)用service層，接收service層返回的數(shù)據(jù)，最后返回具體的頁面和數(shù)據(jù)到客戶端。

3 技術(shù)實(shí)現(xiàn)

3.1 Spring Security技術(shù)實(shí)現(xiàn)

在Web應(yīng)用程序開發(fā)中，安全性一直是一個(gè)非常重要的方面。Spring Security是一個(gè)安全框架，可以為基于Spring的企業(yè)應(yīng)用程序系統(tǒng)提供聲明式安全訪問控制解決方案。它提供了一組可以在Spring應(yīng)用程序上下文中配置的Bean和相關(guān)配置文檔。借助IOC（控制反轉(zhuǎn)），DI（依賴注入）和AOP（面向切面編程）對(duì)用戶身份驗(yàn)證進(jìn)行統(tǒng)一管理，從而實(shí)現(xiàn)對(duì)資源訪問的全面控制和維護(hù)[3]。

因此本項(xiàng)目的安全管理技術(shù)棧為Spring Boot + Spring Security。

網(wǎng)絡(luò)應(yīng)用的安全性包括兩個(gè)部分：用戶認(rèn)證（Authentication）和用戶授權(quán)（Authorization）。用戶身份驗(yàn)證是指驗(yàn)證用戶是否是系統(tǒng)中的合法主體，即用戶是否能夠訪問系統(tǒng)。用戶身份驗(yàn)證通常要求用戶提供用戶名和密碼。系統(tǒng)通過驗(yàn)證用戶名和密碼來完成身份驗(yàn)證過程。用戶授權(quán)是指驗(yàn)證用戶是否具有執(zhí)行操作的權(quán)限。在一個(gè)系統(tǒng)中，不同的用戶擁有不同的權(quán)限。

在用戶授權(quán)方面，Spring Security提供了基于角色的訪問控制和訪問控制列表。在這個(gè)項(xiàng)目中設(shè)計(jì)了兩個(gè)角色：ROLE_USER和ROLE_ADMIN，它們被分配了不同的訪問權(quán)限。下面描述了如何在這個(gè)項(xiàng)目中使用Spring Security。

1）在pom.xml中添加Spring Security的依賴。

2）實(shí)現(xiàn)UserDetails接口：

最終提交給Spring Security的是UserDetails 。該接口是提供用戶信息的核心接口。該接口實(shí)現(xiàn)僅僅存儲(chǔ)用戶的信息。后續(xù)會(huì)將該接口提供的用戶信息封裝到認(rèn)證對(duì)象Authentication中去。UserDetails 默認(rèn)提供了：用戶的權(quán)限集，用戶的加密后的密碼，應(yīng)用內(nèi)唯一的用戶名。另外還有賬戶是否過期、鎖定等信息，可以視需求重寫這些功能，也可以自行實(shí)現(xiàn)擴(kuò)展以存儲(chǔ)更多的用戶信息。比如用戶的郵箱、手機(jī)號(hào)等

3）實(shí)現(xiàn)UserDetailsService接口：

本接口提供了一個(gè)方法：loadUserByUsername（） ，即通過用戶名來加載用戶，于從系統(tǒng)數(shù)據(jù)中查詢并加載UserDetails的實(shí)現(xiàn)類的實(shí)例到Spring Security中。

4）配置身份認(rèn)證機(jī)制和資源訪問規(guī)則：

編寫配置類WebSecurityConfig，繼承自WebSecurityConfigurerAdapter。在configure方法中定義認(rèn)證用戶信息獲取來源和安全策略。

3.2 整合Mybatis管理持久層

在DAO層管理方面，為了方便開發(fā)，本項(xiàng)目選擇了Mybatis。Mybatis是一個(gè)集成了SQL查詢、存儲(chǔ)過程調(diào)用和高級(jí)映射的持久層框架。它封裝了幾乎所有手工設(shè)置的JDBC代碼，并通過簡單的XML配置和注釋將Java POJOs映射到數(shù)據(jù)庫中的記錄[4]。

整合與開發(fā)過程快捷且方便，首先通過meaven拉取相關(guān)依賴，其中包括mybatis-spring-boot-starter，這個(gè)模塊能夠使用SqlSessionFactoryBean注冊(cè)SqlSessionFactory 實(shí)例，并自動(dòng)檢測(cè)并設(shè)置DataSource數(shù)據(jù)源，并在使用時(shí)自動(dòng)掃描@Mapper注解類，并通過SqlSessionTemplate注冊(cè)到Spring Context中，達(dá)到了springboot所提倡開箱即用的想法。

springboot會(huì)自動(dòng)加載相關(guān)配置，數(shù)據(jù)源就會(huì)自動(dòng)注入sqlSessionFactory中，再自動(dòng)注入Mapper中，因此只需要通過注解或者xml的方式來簡單的連接并操作數(shù)據(jù)庫，通常在mapper類中存放對(duì)于相應(yīng)xml，在Service層及Controller層便可以簡單地調(diào)用方法操作數(shù)據(jù)庫，實(shí)現(xiàn)所需的功能。

3.3 支付系統(tǒng)

在本項(xiàng)目中，針對(duì)用戶支付系統(tǒng)，我們采用集成支付寶支付系統(tǒng)來實(shí)現(xiàn)，方便用戶下單購買。

1）Mapper層實(shí)現(xiàn)與數(shù)據(jù)庫交互

在持久層中本系統(tǒng)主要集成MyBatis，實(shí)現(xiàn)與數(shù)據(jù)庫的交互。在下訂單時(shí)在后臺(tái)插入一條訂單數(shù)據(jù)，用以后臺(tái)記錄訂單的相關(guān)狀態(tài)，在實(shí)現(xiàn)相關(guān)其他服務(wù)時(shí)，為其他相關(guān)服務(wù)提供數(shù)據(jù)支持。

2）Service層實(shí)現(xiàn)下訂單的功能函數(shù)

在服務(wù)層中主要實(shí)現(xiàn)下訂單的功能函數(shù)以及串聯(lián)支付寶接口實(shí)現(xiàn)支付。主要設(shè)計(jì)兩個(gè)函數(shù)，pay，returnUrl和notifyUrl：

①pay函數(shù)實(shí)現(xiàn)下訂單

下訂單時(shí)通過用戶所填的付款金額，訂單名稱實(shí)現(xiàn)下訂單的功能的實(shí)現(xiàn)。在此功能實(shí)現(xiàn)之前應(yīng)首先判斷訂單正確與否，通過表單號(hào)判斷訂單的正確性，過濾非法訂單。當(dāng)訂單正確時(shí)實(shí)現(xiàn)下訂單的功能

②支付寶接口實(shí)現(xiàn)支付功能

通過商戶訂單號(hào)，支付寶交易號(hào)，付款金額，實(shí)現(xiàn)讓用戶的支付功能。通過獲取支付寶GET過來的返回信息進(jìn)行驗(yàn)簽。

3） Controller層實(shí)現(xiàn)邏輯功能

在Controller層主要實(shí)現(xiàn)功能函數(shù)的邏輯串聯(lián)，使得整體用戶功能得到完美的實(shí)現(xiàn)。在此層中獲取到前臺(tái)的商戶訂單號(hào)，支付寶交易號(hào)和交易狀態(tài)作為參數(shù)傳入后臺(tái)功能函數(shù)，以此實(shí)現(xiàn)響應(yīng)支付下訂單功能。

3.4 頁面設(shè)計(jì)

在本項(xiàng)目中，所有頁面都采用Html5實(shí)現(xiàn)，通過CSS和JavaScript來實(shí)現(xiàn)頁面的環(huán)境渲染和頁面布局。

1）登錄、注冊(cè)及修改密碼頁面的設(shè)計(jì)

登錄界面通過注冊(cè)時(shí)提交的用戶的用戶名和密碼來登錄系統(tǒng)，如果用戶需要修改密碼，通過認(rèn)證

用戶的原密碼來修改，數(shù)據(jù)庫會(huì)更新用戶提交的新密碼，再次登錄時(shí)使用新的用戶密碼。

2）首頁展示頁面的設(shè)計(jì)

首頁主要是展示界面，提供一些功能按鈕，如登錄，注冊(cè)，租用界面的入口。還有一些公司簡介和產(chǎn)品的介紹，為用戶提供方便的導(dǎo)航界面。

3）租用廣告頁面的設(shè)計(jì)

本頁面主要為用戶提供下訂單的頁面。此頁面用戶需輸入廣告標(biāo)題、手機(jī)號(hào)、廣告類型、租用時(shí)間以及上傳需要的文件，為用戶在本系統(tǒng)下訂單提供便利的購物體驗(yàn)。

4）主面板頁面的設(shè)計(jì)

主面板主要為用戶提供數(shù)據(jù)的統(tǒng)計(jì)。新老用戶比例的統(tǒng)計(jì)為廣告投放用戶提供新用戶的增長率。各城市訪問人數(shù)的統(tǒng)計(jì)為用戶提供各個(gè)地點(diǎn)的用戶使用量，可以讓用戶的產(chǎn)品通過廣告的統(tǒng)計(jì)對(duì)于各個(gè)城市的銷售有所不同的策略。每月訪問人數(shù)可以看到這個(gè)月的用戶增長趨勢(shì)，可以幫助廣告投放用戶指定相應(yīng)的月銷售計(jì)劃。

5）AR廣告頁面的設(shè)計(jì)

在此頁面主要是對(duì)于廣告投放用戶所提交的廣告進(jìn)行展示。我們所設(shè)計(jì)的AR廣告較傳統(tǒng)的廣告更增加了用戶的互動(dòng)性與趣味性，在此界面用戶通過掃描二維碼可以獲取到AR廣告，讓廣告使用者如臨其境，深切地感受每個(gè)產(chǎn)品的魅力。

3.5 增強(qiáng)現(xiàn)實(shí)模塊實(shí)現(xiàn)

針對(duì)廣告投放時(shí)，為方便每個(gè)用戶無成本地體驗(yàn)到增強(qiáng)現(xiàn)實(shí)的效果，本項(xiàng)目通過WebGL來實(shí)現(xiàn)AR的效果，可以在不使用插件的情況下在任何兼容的瀏覽器中呈現(xiàn)交互式3D圖形，所有用戶只需用微信內(nèi)嵌瀏覽器即可體驗(yàn)AR效果。

為快速開發(fā)本項(xiàng)目調(diào)用了AR.js及three.js這兩個(gè)JavaScript庫來實(shí)現(xiàn)AR效果，three.js負(fù)責(zé)實(shí)現(xiàn)3D模型，AR.js負(fù)責(zé)AR顯示，其中重點(diǎn)主要分為圖像識(shí)別與導(dǎo)入模型。

1） 圖像識(shí)別

基于圖像識(shí)別追蹤的三維空間注冊(cè)技術(shù)可使用光學(xué)攝像機(jī)對(duì)平面識(shí)別標(biāo)識(shí)圖像的特征點(diǎn)提取， 或使用深度攝像機(jī)對(duì)現(xiàn)實(shí)物體的立體輪廓及距離進(jìn)行識(shí)別追蹤。這兩種方式都可以實(shí)時(shí)計(jì)算虛擬與現(xiàn)實(shí)世界坐標(biāo)系對(duì)應(yīng)關(guān)系， 并將虛擬物體準(zhǔn)確疊加到現(xiàn)實(shí)場(chǎng)景中的平面識(shí)別標(biāo)識(shí)或者物體上[5]。

對(duì)于圖像識(shí)別創(chuàng)建標(biāo)記部分，AR.js使用了Marker來標(biāo)記特征信息，通過從圖片提取像素值來作為匹配特征，而在識(shí)別時(shí)，會(huì)將像素值當(dāng)作灰度值轉(zhuǎn)換為圖像來識(shí)別，減少圖像信息，加速處理。

對(duì)于識(shí)別標(biāo)記部分，AR.js本質(zhì)是將artoolkit c++庫通過 Emscripten編譯成對(duì)應(yīng)的js文件，本部分在實(shí)際調(diào)用中的過程如圖6所示：

在實(shí)際調(diào)用中，僅需將文件中的markerControls中的patternUrl替換成所需的訓(xùn)練后的圖片模型即可。2）導(dǎo)入模型

本項(xiàng)目選用obj格式來導(dǎo)入3D模型，導(dǎo)入obj格式的文件需要MTLLoader與OBJLoader兩個(gè)加載器來輔助加載模型。

其中，obj包含mtl格式的紋理及材質(zhì)部分及obj格式的物體的主體部分，MTLLoader的作用就是用來加載mtl文件部分的，負(fù)責(zé)將mtl材質(zhì)渲染到obj平面之上;而obj格式的模型包含了物體的頂點(diǎn)信息，紋理坐標(biāo)及頂點(diǎn)法線等等信息，通過OBJLoader解析并渲染到界面上，圖7就清晰展示了obj包含模型的頂點(diǎn)信息：

6 結(jié)束語

本文介紹了基于springboot技術(shù)，以及ar.js和three.js等技術(shù)實(shí)現(xiàn)的廣告牌系統(tǒng)，系統(tǒng)主要分為所需實(shí)現(xiàn)功能的分析，對(duì)項(xiàng)目后臺(tái)快速開發(fā)，AR功能實(shí)現(xiàn)技術(shù)的選擇，以及對(duì)各項(xiàng)所需要功能的實(shí)現(xiàn)。當(dāng)下，廣告的發(fā)展也要追求形式上的變化，從2D進(jìn)化為3D也是一種未來的可能。本項(xiàng)目正是對(duì)于廣告不同形式的一種嘗試，而本項(xiàng)目使用基于WebGL的AR技術(shù)實(shí)現(xiàn)，也是在向移動(dòng)端曾經(jīng)基于ARCore實(shí)現(xiàn)的AR系統(tǒng)的一種嘗試。相信AR技術(shù)對(duì)于未來而言，能夠得到廣泛的應(yīng)用與發(fā)展，AR技術(shù)的各種應(yīng)用將被逐漸挖掘。

參考文獻(xiàn)：

[1] 吳帆，張亮.增強(qiáng)現(xiàn)實(shí)技術(shù)發(fā)展及應(yīng)用綜述[J].電腦知識(shí)與技術(shù)，2012，8（34）：8319-8325.

[2] 王悅，張雷，錢英軍.基于SpringBoot微服務(wù)的Spring Security身份認(rèn)證機(jī)制研究[J].電腦編程技巧與維護(hù)，2019（8）：64-65，68.

[3] Stephen Young.How to become a web developer part5：Web a，plication architecture[EB/OL].[2020-06-18]（2015-01-13）.https：//aestheticio.com/web-application-architecture-basics/.

[4] 榮艷冬.關(guān)于Mybatis持久層框架的應(yīng)用研究[J].信息安全與技術(shù)，2015，6（12）：86-88.

[5] 朱淼良，姚遠(yuǎn)，蔣云良.增強(qiáng)現(xiàn)實(shí)綜述[J].中國圖象圖形學(xué)報(bào)A輯，2004，9（7）：767-774.

【通聯(lián)編輯：謝媛媛】