基于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—），男，汉族，四川泸州人，讲师，博士，研究方向：计算机应用技术。