基于Vue的体育汇App设计与实现

目 录

摘 要 I
Abstract II
引 言 1
1 核心技术的理论与分析 3
1.1 客户端技术 3
1.1.1 Vue.js框架 3
1.1.2 Vue.js路由管理 3
1.1.3 Vuex状态管理 3
1.1.4 MVVM开发模式 4
1.1.5 Vant组件库 5
1.2 服务端技术 5
1.2.1 Node.js 5
1.2.2 Egg.js框架 5
1.3 数据库技术 6
1.4 本章小结 6
2 App系统分析 7
2.1 需求分析 7
2.1.1 功能性需求分析 7
2.1.2 非功能性需求分析 8
2.2 用例分析 9
2.3 系统工作流程图 10
2.4 本章小结 10
3 App系统设计 11
3.1 体系结构设计 11
3.2 数据库设计 12
3.3 App功能模块设计 16
3.3.1 登录模块设计 16
3.3.2 赛事相关模块设计 16
3.3.3 日志模块设计 18
3.3.4 论坛模块设计 19
3.3.5 购物优选模块设计 20
3.4 本章小结 20
4 App功能模块具体编程实现 21
4.1 项目开发环境 21
4.2 项目目录结构 21
4.3 登录模块详细编码设计 22
4.4 赛事模块详细编码设计 23
4.4.1 赛事新闻功能具体实现 24
4.4.2 赛事赛程安排功能具体实现 25
4.4.3 球队技术统计功能具体实现 26
4.4.4 球员技术统计功能具体实现 27
4.5 日志模块详细编码设计 29
4.6 论坛模块详细编码设计 29
4.7 购物优选详细编码设计 31
4.8 本章小结 32
5 App测试与验证 33
5.1 测试环境 33
5.2 测试目的 33
5.3 测试内容 33
5.3.1 登录模块测试 33
5.3.2 论坛模块测试 34
5.3.3 购物优选模块测试 34
5.3.4 压力测试 35
5.4 本章小结 36
结 论 37
致 谢 38
参考文献 39

摘 要

基于体育产业的日益增长以及智能手机、互联网快速发展的今天，国内各种类型的体育App呈现出“爆棚”的增长趋势。相对于传统媒体的资讯报道和赛事直播都可以通过App了解体育新闻动向。目前体育App主要以体育资讯、体育赛事直播为主，产品功能略显单一，然而将赛事资讯传达、获取热门赛事技术统计、球迷论坛以及便捷购买体育装备等功能融合在一个整体中将会是主流的发展方向。本课题基于以上背景从前端设计到项目功能实现阐述了App的开发过程。
本课题主要针对足球运动为设计方向，根据大众对体育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

Based on the growing sports industry and the rapid development of smart phones and the Internet today, various types of sports apps in China show an “explosive” growth trend. Compared with the information report of traditional media and the live broadcast of games, sports news trends can be understood through the App. At present, sports apps mainly focus on sports information and live broadcast of sports events, with slightly single product functions. However, it will be the mainstream development direction to integrate the functions of event information transmission, access to technical statistics of popular events, fan forums and convenient purchase of sports equipment into a whole. Based on the above background, this project elaborated the development process of App from front-end design to product function implementation.
This project mainly aims at the design direction of football, and designs a set of sports App with clear interface and diversified functions according to the needs of the public for the use of sports App. The application development framework of Node. js and Egg. js, which are event-driven, non-blocking I/O and single process, is adopted at the back end of the coding design process of App to construct the server side. The ORM framework Sequelize is used to operate MySql database to read and store data. The front-end adopts the Vue. js framework, and the front-end architecture code is written in cooperation with the Vue. js scaffold tool Vue-cli, routing Vue-router, and Vuex for state management. The single-page application development is completed and the front and rear ends are completely separated. The front-end design process uses the Vant component library to achieve responsive web design that adapts to the screen resolution of different mobile devices for optimal user experience. In the process of development, the requirements of App function and product design were analyzed to make the function modular and independent function componentization, so as to enhance the robustness of the system, and the code modules were hierarchical.
Keywords: Vue. js Framework; Node.js; Fore And Aft End Separation; Sports App Development

引 言

现如今，互联网的飞速发展与智能手机性能的卓越提升使越来越多的大众步入互联网的新时代。根据第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.1 Vue.js框架
随着时间和技术的发展，前端框架技术不再基于jQuery的使用从而涌现出了众多主流框架。Vue.js就是当前许多著名互联网公司正在使用的前端框架之一。Vue.js基于MVVM开发模式，采用自底向上的设计，可通过一个简单的API实现数据的双向绑定[4]，适合单页面应用开发[5]。它注重视图层，对于开发者来说易于上手，可提高开发效率，同时与第三方库或其他项目整合也较为容易，能够与复杂的单页面应用完美融合[6]。Vue.js显著特性：双向数据绑定、轻量级的框架、组件化[7]、ES6语法。
1.1.2 Vue.js路由管理
Vue.js为了管理路由状态官方推出了Vue-router组件，更加适合单页面应用跳转而无需频繁刷新页面。开发人员通过Vue-router插件只需在路由中配置想要加入的业务模块，页面更新时就会将按需替换相关组件，而不再是以超链接的传统方式实现页面的切换和跳转。这样既可以避免页面的频繁刷新，同样实现了页面跳转更新数据的效果[8]。
1.1.3 Vuex状态管理
Vuex是为Vue.js所开发的状态管理模式，它采用集中管理所有组件中所约定好的状态和相应的规则[9]，并通过按需调用规则中的方法去改变源数据更新视图。在没有Vuex之前，Vue属于单向数据流如图1.1所示，但开发中避免不了组件中的数据相互共享，这样就违背了单向数据流的使用原理。

图1.1 单向数据流
Vuex出现后如图1.2所示，State代表数据源，Mutation用于操作State中的数据，Actions用于响应view上用户操作形成的状态变化。具体使用流程就是Vue中的组件Dispatch Actions中的方法，Actions中的方法通过Commit调用Mutations中的数据使State中的数据发生改变，最后重新渲染组件[10]。Vuex只适合构建中大型单页面开发应用，否则会使项目变得繁琐冗余。

图1.2 Vuex状态管理
1.1.4 MVVM开发模式
MVVM的全称是Model-View-ViewModel，这种架构模式最初作为微软软件的展现层设计模式，它是MVC的衍生物[11]。MVVM与MVC的主要任务都是分离视图层和模型层进而提升系统整体性能[12]。如图1.3所示，视图和模型中的数据不能直接通讯，以视图模型作为通讯桥梁，通过视图与视图模型进行绑定&