基于Vue.js+Koa框架的APP平臺設計與實現

張倩 李旭英 林華焜 茍睿 石睿

摘要：近年來，我國網民數量大幅增加，酒類網購用戶規模逐年擴大，在認真分析各酒類電商模式現狀的基礎上，研究開發出一款基于Vue.js+Koa框架的酒類文化交流與電子商務平臺。該平臺靈活運用大數據分析、Vue.js+Koa等框架，滿足用戶利用移動平臺進行白酒購物、白酒文化交流等需求，有效地將電商與內容相結合，彌補了傳統酒類購物APP所缺失的社交功能，實現了社區內容向電商流量的轉化。

關鍵詞：移動端信息交流;大數據;酒類電子商務;Vue.js框架;Koa框架

中圖分類號：TP311.5? ? ? 文獻標識碼：A ? ? 文章編號：2096-4706（2021）07-0063-05

Design and Implementation of APP Platform Based on Vue.js+Koa Framework

——Take Wine Cultural Exchange and E-commerce as an Example

ZHANG Qian，LI Xuying，LIN Huakun，GOU Rui，SHI Rui

（School of Computer Sciences and Engineering，Sichuan University of Science & Engineering，Zigong? 643000，China）

Abstract：In recent years，the number of internet users in China has increased significantly，and the scale of online wine shopping users has expanded year by year. On the basis of careful analysis of the current situation of wine e-commerce mode，a wine culture exchange and e-commerce platform based on Vue.js+Koa framework was researched and developed. The platform flexibly applies big data analysis，Vue.js+Koa and other frameworks to meet the needs of users in Baijiu shopping and Baijiu cultural exchange，share shopping experience and other needs. It effectively combines the e-commerce with content，making up for the social functions of traditional Baijiu shopping APP，and realizes the transformation of community content to the e-commerce flow.

Keywords：information exchange on mobile terminal;big data;wine e-commerce;Vue.js framework;Koa framework

收稿日期：2021-03-07

基金項目：四川省大學生創新創業訓練計劃項目（S202010622053）

0? 引? 言

早在2017年底，中國便已發展成為世界上規模最大的酒類生產與消費大國，如今，國內白酒市場供給已達到相對飽和階段，要變革產供銷模式，大量白酒企業都需要通過互聯網進行轉型。“互聯網”為酒業流通帶來了巨大變革，相較于酒業傳統的營銷模式，電商模式則具備渠道鏈條短、進入成本低等顯著優勢[1]。酒類新零售行業發展迅猛，2021年市場規模預計將突破1 360億元[2]。

如何挖掘線上潛力，拓展白酒消費群體成為當前白酒市場所面臨的一大困境;隨著我國酒類市場的不斷開放，對酒類產品的防偽技術也提出了更高的要求。同時，白酒產品附加值低，中國豐富的酒文化在市場發展中漸漸消逝，這為酒企在酒文化的發揚與傳承上賦予了更多的責任。如今白酒線上APP處于未完全開放的狀態，根據上述現狀，開發了基于Vue.js、Koa框架的酒類文化交流與電子商務平臺，為其取名為“交酒”平臺。

1? “交酒”平臺的開發工具

“交酒”平臺是集交流、文化傳播、大數據分析、酒類直銷、防偽為一體的綜合性創新型電子商務項目。

1.1? 開發環境Visual Studio Code

Visual Studio Code是一個運行于Windows、OSX和Linux之上的跨平臺編輯器。同時，Visual Studio Code也可在桌面上運行，它為開發者們提供了對多種編程語言的內置支持，同時也會為這些語言提供豐富的代碼補全和導航功能。

1.2? 編程語言JavaScript

編程語言采用JavaScript，它是一種基于原型編程、多范式的動態腳本語言，同時也是一種廣泛應用于Web應用開發的高級腳本語言，常用于為網頁添加各式各樣的動態功能，使得網頁更加流暢美觀，使用戶獲得更好的瀏覽體驗[3]。

1.3? 數據庫MySQL

采用阿里云的云服務、Nginx服務器技術和MySQL數據庫進行數據存儲，在目前可行的技術條件下最大限度保證了平臺的信息安全。

2? “交酒”平臺的設計與實現

基于Vue.js+Koa框架的交酒APP平臺包括用戶注冊與登錄、商品購買、實時聊天、論壇發帖、掃碼識別真偽等多種功能模塊。“交酒”APP架構如圖1所示，APP主界面如圖2所示。

2.1? 白酒文化交流功能

在白酒交流論壇中，平臺會定期發布白酒的制法、品法、歷史文化等相關內容，以傳播白酒文化中的精神內涵。同時，每一位通過平臺認證的用戶可以隨時隨地在論壇中發表動態，用戶可以通過圖文、短視頻、直播等多種形式創造并分享購物心得、對酒文化的見解等內容，同時還可以對其他用戶發布的內容進行收藏、點贊與評論。根據用戶發帖的質量情況，平臺將為用戶授予不同等級的頭銜，如“白酒小白”等，對于高質量的“精品貼”進行積分獎勵，以鼓勵更多的用戶參與到論壇中來，增加論壇的活躍度。

2.2? 白酒購物功能

用戶在平臺上完成注冊和登錄后，可以通過搜索框或商品類目來導航挑選心儀商品，將其收藏或是加入購物車，在選定心儀商品、填寫收貨地址并支付貨款后，即可在平臺上查詢訂單狀態。

2.3? 商品推薦功能

平臺利用協同過濾算法，進行商品信息收集、數據處理、信息分析后，根據用戶已產生的購買相關行為（如對商品的點擊、收藏、評論），對顧客的購買意向進行預測[4]，在海量的商品數據中形成信息推薦模型。同時提供精確的篩選條件和精準的商品推薦，為顧客選擇商品提供便利。平臺可以提升用戶信息的準確性與有效性，針對每位用戶的喜好提供一個更精確的定位，縮短用戶的選品時間，優化用戶的購買體驗，從而有效地提高用戶滿意度。

2.4? 消息推送功能

實時推送酒類行業相關資訊、活動信息，比如新品上線、酒業動態、商品促銷等信息，方便用戶第一時間知曉此類信息，這也是防止部分用戶流失，提高留存率的方法之一。

2.5? 溯源防偽功能

平臺采用“一物一碼”的原則，為每個產品賦予一個身份標識，通過APP掃描平臺產品的二維碼，消費者便能獲得該產品從生產到銷售的全過程信息。

2.6? 大數據分析功能

系統可以追蹤客戶從點擊APP到購買商品的完整行為，規范并結構化用戶行為，對用戶行為進行建模分析，對用戶拉新與留存進行實時監控，并進行可視化分析。圖3為系統對某商品的每月訂單數、銷售總金額的可視化分析。

3? “交酒”平臺的創新點

3.1? 實現內容與電商相結合

中國酒文化源遠流長，博大精深。論壇為白酒文化提供了一個具有科普意義的文化宣傳社區，也為酒類愛好者提供了一個交流交友與心得共享的“社區”、口碑庫。同時，在平臺上獲得的用戶需求信息將優于傳統市場研究收集的用戶數據，企業可以最大限度了解用戶需求，并對用戶需求進行科學分析，合理制定營銷策略，在提升運營效率的同時最大限度滿足用戶需求[5]。

在線評論對消費者的購買意愿和市場績效方面的影響較為顯著[6，7]，平臺內用戶優質的購物心得、好物分享等筆記，將進一步引導其余消費者產生購買行為[8]，可有效地將內容消費者轉化為產品和服務消費者[9]。使交酒APP不僅僅是一個購物平臺，更是一個內容與電商相結合的共享社區。平臺用戶既是消費者，更是分享者，實現了商品與內容的協同，并進一步以內容塑造電商[10]。以“種草”和交流為主的社區文化催生用戶消費，用戶在交酒APP上“種草”，并在交酒APP上下單，實現電商閉環。

3.2? 消費者行為分析與大數據分析功能

通過對消費者行為深度的洞察分析，構建精準、多維的用戶畫像體系，可以讓平臺或企業深入了解自己的消費者，為企業產品營銷定位和需求分析提供重要依據，幫助企業制定針對性高的客戶參與策略，實現更精準的營銷。

同時，企業通過對交易訂單等相關數據的可視化分析，可以改進現有產品的結構，挖掘用戶的潛在需求，提升客戶生命周期價值，減少客戶流失率等。

3.3? 溯源防偽功能

系統采用“一物一碼”的原則，借助二維碼為平臺上的每個產品建立身份標識，消費者通過APP的掃碼功能即可獲得產品真偽信息，以及該產品從制造、加工、流通、倉儲到銷售的全過程信息。圖4為“交酒”APP溯源防偽功能效果圖。

同時，運用二維碼標簽對產品進行虛擬化，有助于企業系統化、批量化地從出產、加工、流通、倉儲到銷售等過程對產品進行統一管理。同時，協助政府對白酒防偽事宜進行監督、管理和決策，幫助商家保護品牌，保障用戶合法權益，讓用戶買到放心的白酒產品。

3.4? 個性化推薦功能

為了滿足用戶對商品多樣化的需求，商家不斷推出新的品類，為用戶帶來更多選擇的同時，也導致了用戶難以在短時間內快速準確地選擇出自己想要購買的商品，信息過載的問題也隨之而來。

隨著信息技術的發展，消費需求更趨向于個性化。為了縮短用戶的選品時間，優化用戶的購買體驗，提升信息的準確性與有效性，平臺對用戶在平臺上的檢索記錄、購買記錄等行為數據進行分析，信息推薦模型基于協同過濾算法而形成，為用戶推薦當前可能會購買的產品，在滿足用戶購買需求的同時，也為平臺的商品增加了更多的買賣機會，為平臺創造更大的經濟效益。

3.5? 集成創新

本產品采用前后端分離思想[11]，基于谷歌v8引擎開發，集成了vue框架和koa洋蔥模型框架以及各種第三方插件[12，13]。分為前端、后端、接口三個部分，其中前端基于element-ui開發，采用了vue框架及第三方插件axios、better-scroll、vuex、vue-router、element-ui等，實現了商品詳細頁面、酒友論壇等頁面[14]。其中，前端框架vue中的main.js代碼如圖5所示。

后端實現圖形化管理，分為個人用戶的查修增刪功能、論壇管理功能、訂單管理功能、修改前端商品圖片及其信息功能、Echart大數據分析功能等。后端接口框架koa中的app.js代碼如圖6所示。

接口通過koa洋蔥模型框架開發，采用第三方插件dotenv、jsonwebtoken等，實現了個人信息中的avatar、profile sign等接口。前后端分離postman調用接口如圖7所示。

4? 結? 論

在傳統酒類的營銷中，較高的渠道成本及復雜冗長的銷售渠道是酒類銷售難以避開的問題，本研究構建了一個基于Vue.js、Koa框架的白酒電商平臺，在去中間化的同時，借助平臺特有的白酒文化交流社區，對酒文化進行傳播和發揚，實現了商品與內容的協同，并進一步用內容塑造電商，實現了內容向電商流量的轉化。通過大數據分析可使平臺或酒企切實了解用戶需求，洞察市場趨勢，進而為市場定位、需求分析和確立核心競爭力提供重要決策依據，更好地發展白酒事業。

參考文獻：

[1] 界面新聞.京東發布《2017年線上酒業報告》 [EB/OL].（2017-03-21）.https：//www.winesinfo.com/html/2017/3/12-71670.html.

[2] 艾媒咨詢.酒類新零售行業報告：2021年市場規模將突破1360億元，未來集中化成方向 [EB/OL].（2021-02-18）.https：//www.sohu.com/na/451242142_533924.

[3] 林信良.JavaScript技術手冊 [M].北京：清華大學出版社，2020.

[4] 梁家富.基于協同過濾的商品個性化推薦算法應用研究 [J].河北軟件職業技術學院學報，2020，22（4）：22-25+41.

[5] 尹紅.引入網絡效應的營銷資源分配問題研究 [D].廣州：華南理工大學，2020.

[6] BERGER J A，SORENSEN A，RASMUSSEN S J. Positive Effects of Negative Publicity：When Negative Reviews Increase Sales [J].Marketing Science，2010，29（5）：815-827.

[7] DUAN W J，GU B，WHINSTON A B. Do Online Reviews Matter：An Empirical Investigation of Panel Data [J].Decision Support Systems，2008，45（4）：1007-1016.

[8] 魏如清，唐方成.用戶生成內容對在線購物的社會影響機制——基于社會化電商的實證分析 [J].華東經濟管理，2016，30（4）：124-131.

[9] 屈冠銀，張哲.內容電商發展及運營邏輯思考 [J].北京勞動保障職業學院學報，2016，10（3）：33-35+39.

[10] 張珊珊，朱瑾.內容電商平臺中的價值共創機理——基于小紅書的案例研究 [J].現代商業，2021（8）：76-78.

[11] 朱梟帥.基于混合方法的電商推薦系統的設計與實現 [D].西安：西安電子科技大學，2020.

[12] 朱曉妤，陳思，張愷，等.基于Vue.js前后端分離技術的問卷調查系統 [J].電腦與電信，2020（10）：49-52.

[13] 胡雅麗.基于Vue.js的“微商城”前端開發設計與實現 [J].電子技術與軟件工程，2020（20）：34-35.

[14] 宋雅.基于Web的大屏數據可視化系統的研究與實現 [D].北京：北京郵電大學，2020.

作者簡介：張倩（2000—），女，漢族，四川成都人，本科

在讀，研究方向：移動應用開發、大數據分析;通訊作者：石睿（1988—），男，漢族，四川瀘州人，講師，博士，研究方向：計算機應用技術。