基于Vue的体育汇App设计与实现Word格式文档下载.docx
《基于Vue的体育汇App设计与实现Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《基于Vue的体育汇App设计与实现Word格式文档下载.docx（44页珍藏版）》请在冰豆网上搜索。
本课题主要针对足球运动为设计方向，根据大众对体育App的使用需求设计一套界面清晰、功能具有多样性的一款体育App应用。
App的编码设计过程，后端采用具有事件驱动、非阻塞I/O、单进程等特点的Node.js和Egg.js应用开发框架为服务端进行架构，通过ORM框架Sequelize操作MySql数据库对数据进行读取存储。
前端采用Vue.js框架，配合Vue.js脚手架工具Vue-cli、路由Vue-router、状态管理Vuex进行前端架构代码编写，完成单页面应用开发，实现了前后端完全分离。
前端设计过程使用Vant组件库实现了响应式网页设计，从而能够适应不同型号移动设备的屏幕分辨率，使用户体验最优化。
开发过程中对App的功能与产品设计进行需求分析使功能模块化、独立功能组件化，以增强系统的健壮性，使代码模块层次分明。
关键词：
Vue.js框架；
Node.js；
前后端分离；
体育类App开发
Abstract
BasedonthegrowingsportsindustryandtherapiddevelopmentofsmartphonesandtheInternettoday,varioustypesofsportsappsinChinashowan"
explosive"
growthtrend.Comparedwiththeinformationreportoftraditionalmediaandthelivebroadcastofgames,sportsnewstrendscanbeunderstoodthroughtheApp.Atpresent,sportsappsmainlyfocusonsportsinformationandlivebroadcastofsportsevents,withslightlysingleproductfunctions.However,itwillbethemainstreamdevelopmentdirectiontointegratethefunctionsofeventinformationtransmission,accesstotechnicalstatisticsofpopularevents,fanforumsandconvenientpurchaseofsportsequipmentintoawhole.Basedontheabovebackground,thisprojectelaboratedthedevelopmentprocessofAppfromfront-enddesigntoproductfunctionimplementation.
Thisprojectmainlyaimsatthedesigndirectionoffootball,anddesignsasetofsportsAppwithclearinterfaceanddiversifiedfunctionsaccordingtotheneedsofthepublicfortheuseofsportsApp.TheapplicationdevelopmentframeworkofNode.jsandEgg.js,whichareevent-driven,non-blockingI/Oandsingleprocess,isadoptedatthebackendofthecodingdesignprocessofApptoconstructtheserverside.TheORMframeworkSequelizeisusedtooperateMySqldatabasetoreadandstoredata.Thefront-endadoptstheVue.jsframework,andthefront-endarchitecturecodeiswrittenincooperationwiththeVue.jsscaffoldtoolVue-cli,routingVue-router,andVuexforstatemanagement.Thesingle-pageapplicationdevelopmentiscompletedandthefrontandrearendsarecompletelyseparated.Thefront-enddesignprocessusestheVantcomponentlibrarytoachieveresponsivewebdesignthatadaptstothescreenresolutionofdifferentmobiledevicesforoptimaluserexperience.Intheprocessofdevelopment,therequirementsofAppfunctionandproductdesignwereanalyzedtomakethefunctionmodularandindependentfunctioncomponentization,soastoenhancetherobustnessofthesystem,andthecodemoduleswerehierarchical.
Keywords:
Vue.jsFramework;
Node.js;
ForeAndAftEndSeparation;
SportsAppDevelopment
引言
现如今，互联网的飞速发展与智能手机性能的卓越提升使越来越多的大众步入互联网的新时代。
根据第44次《中国互联网络发展状况统计报告》显示，我国网民数量已经达到8.54亿，互联网普及率高达61.2%，较2018年增长1.6个百分点，并且网民使用智能手机的上网方式居多，上网比例高达99.1%[1]。
从数据统计中可以发现，移动互联网和智能手机在我国已经实现普及，网民对电脑的使用需求逐渐下降，移动手机在人们的众多上网方式中占据主导地位。
当前，体育产业已经加入国家战略发展方向之一。
伴随着生活的快节奏、过渡依赖智能电子产品，导致全民身体状况呈下坡状态。
为改变当前状态缓解生活压力，体育运动成为了大众的首选方式。
从而体育类“手机App”渐渐进入到大众的视野当中，体育App在应用平台下载量迅速崛起。
目前国内外普遍的体育App，就是将传统的赛事资讯和相关信息以应用的形式展现给用户，使用者的功能可选择性较少导致没有用户影响力[2]，但较受用户欢迎的体育App，例如国内的“虎扑体育”和国外的“ESPN”体育App，几乎覆盖了世界各地的每一项运动，这些App除了提供比赛信息外，还涵盖了体育社交圈子、个人喜好推送等。
所以能够做到既有体育赛事的资讯报道传达，又有及时的体育评论、球迷圈子、购物平台等内容整体融合在一起，将会是未来主流的发展方向。
在这样背景下设计一款资讯数量多、更新速度快、可选择性广泛的体育App非常具有使用价值。
本项目设计的体育汇App可以使用户更加便捷的获取所需的体育信息，像一些传统的体育需求，如及时获取体育资讯、赛事时间、获取心仪球队或球员的赛事技术统计等，都可以通过体育汇App得到满足。
为解决体育App界面同质化严重以及功能较为单一等现象[3]。
App在设计的过程中增添了签到获取积分、球迷论坛、球队加油助力、购物等功能，丰富了App的实用性。
体育汇App除日常使用外，更大的优点在于可以让球迷发布自己的动态，建立用户之间双向互动交流模式。
通过签到累计积分的形式增强了用户与功能模块的互动性，从而提高了用户对App的使用频率。
同时App界面设计以简约不简单为原则，与功能相对，提高了信息处理速度和数据渲染的准确性，能够高效的根据用户需求进行查询、修改相关体育内容，从而提高App使用效率。
本课题设计的体育汇App主要是面向广大球迷用户，为球迷提供更丰富的使用功能，可以让用户获取新闻、赛事等相关内容更加便捷。
本文内容共五章，分别从研究背景与研究意义、需求分析、模块详细设计、项目功能模块实现、项目运行测试等5个方面进行详细阐述。
以下对论文中的各章节进行简要概述：
第1章本章主要介绍项目使用的相关技术并论述技术要点和特性。
例如前端Vue.js框架、Vue的设计模式、服务端Node.js、Egg.js框架，在详细介绍的同时都与其他技术进了对比，说明使用原因。
第2章本章主要对体育汇App设计进行整体分析，通过需求分析和非功能性需求分析判断功能的可行性，设计出具体的功能模块。
结合用例图、流程图的方式进行功能描述。
第3章本章根据第2章所设计的模型进行功能模块的业务流程分析。
通过说明客户端与服务端的数据流通和处理方法完成系统体系结构设计，在数据库的设计过程，主要通过ER图建立模型结构，分析数据表之间的联系完成数据库的创建。
第4章本章主要从客户端和服务端入手，阐述实现方法和编码流程。
客户端主要对数据渲染、功能操作、视图界面进行设计。
服务端主要对数据的传输、业务逻辑对模型的控制进行实现。
最后通过功能模块实现，以界面截图、核心代码的方式来展示App具体实现效果。
第5章本章主要针对App进行功能测试以及验证，通过服务端自动化工具编写相关测试用例，以及站在用户的角度对App进行功能测试，保证项目的可靠性、稳定性，最后根据测试结果得出测试结论。
最后，对整篇论文与课程设计进行总结，对体育汇App设计过程中遇到的问题和存在的不足进行分析。
根据完成的论文和项目收获对未来的学习和工作进行展望。
1核心技术的理论与分析
1.1客户端技术
1.1.1Vue.js框架
随着时间和技术的发展，前端框架技术不再基于jQuery的使用从而涌现出了众多主流框架。
Vue.js就是当前许多著名互联网公司正在使用的前端框架之一。
Vue.js基于MVVM开发模式，采用自底向上的设计，可通过一个简单的API实现数据的双向绑定[4]，适合单页面应用开发[5]。
它注重视图层，对于开发者来说易于上手，可提高开发效率，同时与第三方库或其他项目整合也较为容易，能够与复杂的单页面应用完美融合[6]。
Vue.js显著特性：
双向数据绑定、轻量级的框架、组件化[7]、ES6语法。
1.1.2Vue.js路由管理
Vue.js为了管理路由状态官方推出了Vue-router组件，更加适合单页面应用跳转而无需频繁刷新页面。
开发人员通过Vue-router插件只需在路由中配置想要加入的业务模块，页面更新时就会将按需替换相关组件，而不再是以超链接的传统方式实现页面的切换和跳转。
这样既可以避免页面的频繁刷新，同样实现了页面跳转更新数据的效果[8]。
1.1.3V
升级会员 