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

目录

TOC\o"1-3"\h\z\u摘要 I

Abstract II

引言 1

1核心技术的理论与分析 3

1.1客户端技术 3

1.1.1Vue.js框架 3

1.1.2Vue.js路由管理 3

1.1.3Vuex状态管理 3

1.1.4MVVM开发模式 4

1.1.5Vant组件库 5

1.2服务端技术 5

1.2.1Node.js 5

1.2.2Egg.js框架 5

1.3数据库技术 6

1.4本章小结 6

2App系统分析 7

2.1需求分析 7

2.1.1功能性需求分析 7

2.1.2非功能性需求分析 8

2.2用例分析 9

2.3系统工作流程图 10

2.4本章小结 10

3App系统设计 11

3.1体系结构设计 11

3.2数据库设计 12

3.3App功能模块设计 16

3.3.1登录模块设计 16

3.3.2赛事相关模块设计 16

3.3.3日志模块设计 18

3.3.4论坛模块设计 19

3.3.5购物优选模块设计 20

3.4本章小结 20

4App功能模块具体编程实现 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

5App测试与验证 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

沈阳城市学院毕业设计（论文）

PAGE40

摘要

基于体育产业的日益增长以及智能手机、互联网快速发展的今天，国内各种类型的体育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

BasedonthegrowingsportsindustryandtherapiddevelopmentofsmartphonesandtheInternettoday,varioustypesofsportsappsinChinashowan"explosive"growthtrend.Comparedwiththeinformationreportoftraditionalmediaandthelivebroadcastofgames,sportsnewstrendscanbeunderstoo