【《基于Vue的运动小程序系统设计》9100字（论文）】

基于Vue的运动小程序系统设计摘要本毕业设计是使用Vue.js技术，加上前端技术的代码开发，在微信系统中的微信小程序就能快速使用这款运动小程序，用极简的设计理念，让用户随时随地在家，户外都能完成跑步定位，计时，已跑公里数计数等基本需求，社区分享，发布每日动态等期望型需求，给用户一个全新的体验，让达到想要瘦身，塑身等需求的用户更好快速的达到目标。关键词：前后端分离；Vue；HTML；运动；目录TOC\o"1-3"\h\u124861概述 168311.1选题研究背景 129671.2国内现有状况分析 122141.3实现内容与方法 1202461.4环境介绍 1317761.5项目开发工具及技术 2311892需求分析 3120112.1可行性研究分析 3305582.2阐述系统功能模块 3145202.3数据流图及用例图 468022.4本章小结 523993概要设计 6289843.1系统功能总体设计 6247983.2系统详细设计 6160533.3数据库流图与设计 897714系统测试 11120464.1测试用例 11237694.1.1跑步模块测试 1142944.1.2授权登录模块测试 12199704.1.3首页关注管理模块测试 12318154.2测试概述 12212735系统前端总设计 12140705.1系统前端设计 1255215.2进入系统后页面实现 14216655.3用户中心 149955.4首页管理 15214125.5前端设计小结 16326866系统结论与展望 17298296.1系统结论 1731176.2系统展望 178522参考文献 181概述1.1选题研究背景在这个21世纪互联网发展迅速的时代，运动方式不仅仅是跑步和散步，人们可以通过智能手机或者可穿戴智能设备和互联网结合的运动类APP达到自己各种的运动需求，基本跑步定位功能，跑步计时器，还能有线上的运动视频指导，带领新手小白等爱好运动，想要健康的人群。伴随着目前世界经济的发展和完善优化，大家对生活质量也有较为明显的幅度上升，同时也对于自身有着更大的要求。Web在现如今互联网时代的快速新启，Web是目前在网页前端中页面动态交互的一种方式，运用网络技术和自建造的数据库共同整合开发，使用数据库开发的功能点让整体页面设计炫彩夺目。伴随着现如今互联网计算机的不停更新不断迭代，对计算机互联网依赖性越来越强烈的我们，大家可以很方便的从互联网定位到自己想要的信息，这也是件极好的事；所以，希望可以通过此项目系统能够给大家带来更加健康的生活，让更多人了解运动，爱上运动，也能在运动中找到快乐，让美食和健康也能融为一体。“基于Vue的运动小程序”便成了此次我研究的课题。1.2国内现有状况分析经过各方面调研，市场上存在了许许多多运动还有健身相关的app，首先较热门的一款运动APP也是我自己有经常使用的：Keep，“自律给我自由”这是这款app的口号，首先是首页、计划界面，核心界面也是最常使用的是“运动”跑步界面。之后是“商城”和“用户中心”,该运动APP社交单独模块，可以满足用户打卡，历史数据记载，生成数据周报，专业课程查看；其他功能也有饮食工具，分类搜索等，满足了基本型和期望型以及兴奋性的需求，但在使用多次后，发现这款APP有一个缺点，当用户想要记录自己的训练计划时，不能自定义编写。下一个也是大众用的较多的运动APP是：悦动圈，“多一点运动，多一点健康”的口号把健康和运动关联起来告诉了用户，这正是我们运动想要的需求，其中最开始的界面是“悦动”和赛事，我们可以在这其中查看运动相关的赛事，核心的是“主键”和“用户中心”，我们可以在这修改和编辑自己的个人信息，该运动APP还有一个核心优势，不仅仅实现了健康的AI监测也展现了用户的运动数据和打卡，其他功能还实现了赛事以及卡路里拍照检测。1.3研究内容与方法经过上面大概讲述的研究分析，现如今有许多运动类的APP和运动的小程序，那么此次系统作为运动健身的小程序，小程序的界面必须以极简风格，功能上需要便捷有益用户，希望让用户在使用时候能有个好的体验，让用户习惯使用我们的跑跑小程序，感受到这款运动小程序带来的快捷便利，更重要的是让使用者在使用后能拥有健康的生活状态。在这一章节中主要是讲述本运动小程序系统的总体开发框架，开展的内容和开发该系统的意义概述，开发用的系统在接下来也将展开论述，总体运行起来便捷，快速，方便开发人员和项目启动后的跑跑小程序的使用者。整合市场上较为热门的运动APP，因此跑跑小程序系统应具备如下功能（KANO模型）:一：基本型需求：定位准确，时间计数准确；二：期望型需求：计划记录，体重变化记录，平台消息通知；三：兴奋型需求：社区分享，发表互动，饮食菜谱分类跑跑小程序系统界面设计美观，操作起来简单，开发编程语言主要使用vue开发，清晰的设计也让使用本系统的用户能够一目了然的找到确定自己想要的，在跑跑小程序正式上线前也进行了多次系统的功能分析和系统测试，这样能够在项目使用上减少bug错误的产生；后续使用跑跑小程序的用户提出新出新需求时候，我们也能在这基础上迭代优化新的跑跑小程序。1.4环境介绍跑跑运动小程序开发环境如下：语言环境：Html5、Css3、Vue2.0、前后端分离；Vue；HTML；运动；操作系统：Window系统；软件环境：HBuilderX、微信开发者工具；运行环境：GoogleChrome、手机模拟器等。1.5项目开发工具及技术1.5.1微信开发者工具这款代码编写工具是官方提供的编译软件，运行微信开发者工具可以在内部直接进行编码，也可以通过其他的编译工具运行微信开发者工具，官方也发布了最新的微信开发者工具的使用文档，该开发工具也可以友善的进行编码以及调试。运行到软件后，我们可以使用编写工具里的二维码调试，进行手机微信号绑定的扫描登录；程序调试的功能区很多，界面最常使用的是模拟器的查看，可以对手机型号的更改查看，还有代码文件区以及调试器；模拟器呈现出来的和客户端查看的效果一样，具有强烈的代入感，让测试工具呈现出准确的状态。1.5.2HbuilderXHbuilderX是一款内存极低（10余M），使用起来非常便捷，安装效率极高，启动HbuilderX和在编码方面远远超过C++的架构性能，vue的轻量级框架和双向绑定给用户带来了非常好的体验，支持创建uni-app，或者H5和小程序的移动端页面代码开发。这是给使用该软件开发的开发人员提供更高效工具，HbuilderX支持添加许多插件，node.js插件，并且同时可以兼容其他前端编写工具的插件和代码块。所以使用Hbuilder结合开发很大程度也减轻了开发人员的负担。1.5.3VueVue是现如今非常热门的前端编写框架，也是我们国人尤雨溪编写的，在近几年，这个前端框架被大家所使用，因为拥有轻量级的Vue，使用起来并不复杂；我对Vue的理解就是自底向上的阶梯式，同样它自己有着许多内部的功能组件。在做项目时候，我们会选择一些vue的功能来开发，也会用到它的组件系统。2需求分析2.1可行性分析根据其他运动类的APP和运动小程序的分析，也对使用过和热爱的运动的用户做出需求分析总结，现做出如下从三方面对跑跑小程序的系统展开分析：1.操作方面可行性该跑跑运动小程序系统操作简单方便，同时界面设计简洁清楚，当想要进入跑跑小程序运动时，用户只需要微信搜索我们的跑跑小程序系统，即可进入我们的跑跑小程序系统，进入后首先看到跑步界面，这时候用户可以进行自己当下地理的定位和跑步计数，当用户点击底部可进入首页，在首页中用户可以查看社区中他人发表过的动态，会显示时间和动态内容，用户也可以对这些发表后的动态进行互动，例如可以分享评论等功能。此外，在首页下，用户可以点击首页下的菜谱，这时候用户会看见分类低卡美食制作，用户可以点击到自己想要的菜谱，查看这个菜谱的制作过程；当用户点击我的进入了我的个人中，这时候用户可以进行基础的用户操作。跑跑小程序系统的功能也满足了用户的需求，可以很方便的看到自己的个人中心详情页面，使用跑跑小程序系统时操作难度不困难，因此，结果跑跑小程序的操作可行性分析后，是达到期望的。2.经济方面可行性跑跑小程序的开发中，无论是从哪方面的角度，好比在开发中都有着很大程度的节约开发的成本，在经济方面也可以不断的缩减，此次开发运动小程序系统就是为了让现代用户可以随时随地的运动。在开发方面，能做多极其简单的操作开发，首先是要能带得动项目的电脑，经过一人或几人的开发，这大大节省了开发项目的物力和时间，后续也可以轻松运营，在产品需要增加新功能时，只需要添加即可，迭代效率也是极高，在经济上我们能做到节省许多人力和时间上的缩减，开发起来也较为容易，因此，经过经济可行性的分析后，跑跑小程序是符合经济允许范围内的。3.技术方面可行性跑跑小程序的系统是运用其他的前端编程语言加上Vue的框架语言编写设计开发，结合自建的数据库。因为空间内存小的hbuilderX，这也让文件运行起来速度很快；在界面设计时候，运用在校期间学习过的图片软件自行操作即可，例如XMind画出高保真原型图；功能模块分析按照整合过的需求文档；在开发跑跑小程序时，使用基础的台式电脑或笔记本电脑就能运行到微信开发者工具，之后使用点击真机调试到手机上或电脑端的手机模拟器。因此，从技术可行性分析后是可以达到要求的。2.2阐述系统功能模块在本系统正式上线前，想要让我们的运动小程序系统能够被用户经常使用，那么就要更加的让我们的系统贴近生活，满足大家的日常需求。我们对身边的家人，老师，同学等有接触到运动的当作用户进行调研，通过得出的结果得知现在许多人都很喜欢运动，希望运动能给自己带来健康和快乐，但通过调研，很多人都没有运动动力，也有很多小白不知道怎么开始，通过对考察的总结调研分析，运动小程序的开发，能够使一大部分人学会运动，开始运动，让自身加强运动知识。以下为跑跑运动小程序系统的功能模块分析：1、跑跑是主要的功能模块，内容设计主要是：跑跑运动小程序系统分为首页模块、跑步模块、个人中心模块为公共界面，即进入跑跑运动小程序系统的最初始的界面。完成跑步计数和地点定位以及公里数计数使用者可以在最开始的页面无需登录即可完成。2、界面设计：首先跑跑运动小程序系统slogan我使用的是：“跑出自我”，所以在进入该系统时，首先进入的是一个跑步界面，全局采用淡蓝色，在中国，淡蓝有着广阔天空，深蔚大海的象征，纯净的风格给用户带来是觉得好感，在各个功能模块的设计时，风格尽量的贴近自然，层次分明，做到简单了然，这样能让使用运动小程序的用户看到系统的优势。3、首页功能模块：用户可以点击首页按钮，进入首页页面，可以查看好友或者关注好友的动态社区发表内容，用户可以进行分享，评论以及点赞收藏等互动操作。4、个人中心模块：当用户点击我的，可以跳转至个人中心的模块，用户可以查看自己登录后的头像以及名称还有编辑设置个人信息，以及运动记录自定义编写，各个功能模块的查看。2.3数据流图及用例图根据跑跑小程序系统的页面，当用户进入跑跑小程序系统后，首先进入的是跑步的界面，用户可以对当前自己的地理位置进行位置定位，之后对跑步的开始计时以及跑步的公里数计数，以及开始后用户暂停点击的跑步暂停功能，以下跑步的页面的数据流图2-1所示：图2-1跑跑的跑步页面（第一层）在用户成功进入跑跑小程序后，在我的界面中，页面会显示头像名称，以及基础的设置，可以设置用户在跑跑小程序系统的电话绑定，微信号绑定和收到消息的音量大小，在设置里还有客服热线，使用的是虚拟的电话拨打线，用户还可以查看的消息，用户今日计划的记录，九大宫格板块的运动数据，九大功能板块分别是：我的动态，我的收藏，我的目标，我的饮食，身体测试，运动目标，我的草稿和帮助说明，用户的数据流图2-2所示：图2-2用户页（第二层）2.4本章小结跑跑小程序使用想要很好的达到体验感需要把各个功能先提前表示出来，以使用的跑跑运动小程序用户为中心展开描述，把用户所想要的需求点进行功能分析，之后在跑跑小程序中开发需求功能，再对每一个开发的需求功能进行深度分析，最后把所有数据整合后，完成用户的需求才可以做出一款不会被淘汰的跑跑小程序，会尽可能的贴合使用者的需求想法。之后从开发的技术及各方面阐述。3概要设计3.1系统功能总体设计跑跑运动小程序设计中大体有三大功能设计，最开始的关注模块和菜谱模块都是在首页模块下。当用户进入首页时，在页面的头部有个搜索框，这时用户可以进行页面的搜索功能；在首页页面的关注模块下，用户可以查看浏览关注的用户发表的动态，用户也可以对这些发表的动态进行互动；在首页页面的菜谱下，当用户想要查阅需要学习的菜谱时可以定位相关的菜谱分类点击按钮。其他两个功能模块发别是运动的跑步模块和个人中心模块，当用户进入跑跑小程序系统后，最先进入的是跑步功能模块，这里用户可以进行一个地理位置的定位，跑步时间的计时，以及跑步的暂停时间计时；在个人中心功能模块中，可以看见用户在跑跑小程序中的头像以及名称；在我的页面中九大功能模块占主页，九大功能是很好的满足了用户的需求，用户还可以对系统的一个设置与绑定；在训练前后用户可以对自己的训练计划做一个记录和设定。系统的总体框架具体设计图在3-1所示：图3-1系统总体框架设计图3.2系统详细设计3.1详细模块设计（1）初始界面：跑步模块：使用者成功登录后直接进入的是跑步界面的功能模块，用户开始跑步前可以点击开始，页面开始计时，直接呈现在页面，让用户可以查看已经运动时长；当用户运动结束或者想暂停休息时，点击暂停键，当前计时时间暂停计时；用户还可以对当前的位置想要进行地理定位，可以点击定位按钮，系统可以获取用户当前的经纬度。（2）个人中心：跑跑运动小程序系统对账号没有一定必要的要求，在使用跑跑小程序的用户进入系统后，使用系统的用户在这个模块中可以查看运动计划和记录的情况。在九大功能模块中，也可以选择进入相应的功能板块；在个人中心页面的左上角信息图标中，用户也可以查看跑跑小程序系统的通知；在个人中心页面的右上角可以设置个人用户的电话绑定和微信设置以及权限设置，我们为此也在该模块中设置了客服热线，可以为当使用跑跑小程序系统的用户出现问题或困难时，拨打热线，帮助用户解决。（3）首页模块：首页模块分为了关注板块和菜谱板块，详细板块分为：（3.1）关注管理：用户可以查看已关注用户下的社区动态发表，可以对发表的文章进行点赞，当用户在主界面进行留言时，用户也可以点击评论，两用户之间的直接沟通，提高了网站的交互性，也可以转发其他的关注用户的发表的动态，提高了用户的黏性，让用户更加喜欢使用跑跑运动小程序系统。所以模块的关注在跑跑小程序系统中也显得尤为重要。（3.2）菜谱管理：本跑跑运动小程序系统比其他的运动软件更为优势的是，有了解到现如今饮食很重要，于是在系统里也设定了菜谱页面，菜谱页面是在首页的模块下，增加了首页的互动使用率，可以给使用该系统的用户多满足一个需求，在菜谱下，使用系统的用户可以很快定位查看到想要的食谱列表，如：减脂餐，健身餐，减脂甜点等。在之后菜谱的内容增加时，各个分类的菜谱页面数据也会不断增加，页面的展示也会越来越丰富，之后的迭代功能模块也会更加重视。3.3数据库流图与设计3.3.1数据库用例下列为跑跑小程序自建的数据库信息，对本系统的后台数据库进行了数据编写，整理成表格，也对各个板块之间的数据库进行了描述整合，判断其中每个列明的条件，实现数据库的对应说明。个人中心：系统使用者的数据库。在下表3-1所示：表3-1个人中心表（user）序号英文名称中文名称允许空值数据类型长度限制主键1Id账户否int50是2username用户名varchar2553data创建日期varchat2554photo用户头像布尔菜品分类表：用于点击菜谱后的相关信息。下表3-2所示：表3-2菜品表(menu)序号英文名称中文名称允许空值数据类型长度限制主键1name分类名称否布尔是2key分类varchat5time时间varchat255（3）食谱分类：用于点击菜谱后的详细食谱数据库。表3-3所示：表3-3食谱表(cate)序号英文名称中文名称允许空值数据类型长度限制主键1Id分类id否int50是2content菜单内容varchar2553menuname菜单名称varchat2554photo菜单图片varchat2555key菜单varchat255首页的关注表中，是已关注的用户已发表的数据库。如下表3-4所示：表3-4关注表(focus)序号英文名称中文名称允许空值数据类型长度限制主键1key关注用户varchat2552Id账户否int50是3Time时长发布varchat2553.3.2数据库概要图及结构代码4系统测试4.1测试用例1.跑步模块测试跑步模块是在测试按钮点击后是否实现功能，当先进入跑跑小程序系统后使用者在运动时点击开始按钮后数字是否运行计时操作，当用户运动结束后想要暂停时，点击暂停的按钮运行的数字是否正常停止计时，当用户在运动过程中想要对自身运动位置做定位，用户则可以点击定位的按钮，检测定位按钮是否开始选择当前位置。来判断每个功能点的期望输出可不可以对应上实际的输出.下图表4-1为跑步块测试用例和测试的具体结果：表4-1：跑步块用例测试2.授权登录测试在使用系统的用户可以授权登录进入跑跑小程序，当系统检索到使用时用户的手机号和绑定的微信号，就可以成功进入系统登录使用，编写测试用例可以清楚查看登录的测试用例过程，下图表4-2为使用者授权登录块用例测试的实际和预期具体结果：表4-2：授权登录块用例测试3.首页关注模块测试在用户登录成功后点击首页下的关注模块，对关注功能的社区动态，进行浏览，点赞，分享，评论，转发，增加用户之间的社区互动行为，明确能否正常实现动态的互动的功能，下图表4-3为首页关注模块的测试的实际和预期具体结果，来判断每个功能点的期望输出与实际真实结果对应：表4-3：系统使用者动态用例测试首页页面的关注模块测试的目的是为了用户在关注模块下浏览社区动态，用户对这些动态进行互动。这可以提高用户使用系统的黏性。4.2测试概述测试软件系统，就是耐心的测试发现存在的错误，或者当没发满足用户需求时候，也是一个错误；对各个软件系统的测试的焦点也使软件开发者不断摸索其中的奥秘，达到想要的软件上线效果。因此，软件测试主要是黑白灰盒子测试，在每个测试中也细分了很多测试方法，例如等价类划分功能图分析法等。5系统前端总设计5.1前端设计在使用者进入运动小程序系统时，首次进入的是跑步的界面用户可以对当前界面进行操作，之后可以进入个人中心界面进行个人的信息操作，设置基础的用户权限等；在首页页面模块下，分为关注和菜谱分类，让使用系统的用户更快速查到自己想要的功能点。清楚的解剖跑跑小程序的前端设计，下图5-1是展示本次跑跑小程序系统的总体设计流程图，而5-2图是最终跑跑小程序的各个前端页面效果图。-图5-1前端设计流程图图5-2页面效果图5.2进入系统后页面展示进入跑跑小程序系统后的步骤：登录成功后直接进入跑步的页面模块，可以点击进行跑步计时，公里数计数，停止时间计时，运动时的用户对当前地理位置进行定位。下图5-4为跑跑页面的流程图：图5-3跑跑页面流程图5.3系统用户中心当使用者进入跑跑小程序后，点击我的进入个人中心，会展示使用跑跑小程序系统用户的信息和资料，也可以在设置中修改在系统上的信息，可以设置电话号码和绑定的微信号，权限设置等操作。之后也可以设置和规划制定自己的运动计划，在就打功能板块中也有相对应的操作实现的功能，修改个人页的具体流程图可看下图5-4所示：图5-4用户信息流程图 5.4首页管理当用户登录成功后进入首页页面，首页分为关注和菜谱分类，在关注模块下，可以浏览已关注的用户发表的动态文章，在使用系统时候可以看到动态浏览页，使用系统的用户可以对这些动态进行互动操作，很好的增加了使用跑跑小程序系统的用户黏性。在菜谱模块下，可以定位点击查看自己的减脂餐，健身餐等菜谱分类，首页管理流程可看下图的5-5所示：图5-5首页信息管理流程图5.5前端设计小结前端设计中，描述了大致的总体页面设计，呈现给用户的页面，也介绍了系统各个模块的页面设计板块，画出了各个板块的功能流程图，做到确保跑跑小程序系统的使用者在运行和使用跑跑小程序的时候能够正常操作，数据准确，显示展示页面无误。也详细表述了系统的使用者的操作流程。6系统结论与展望6.1系统结论跑跑小程序是一款基于Vue的运动小程序，主要使用人群是给广大人们。没有对年龄的限制，跑跑小程序是采用国人开发的vue框架和结合了其他前端语言编写开发程序，由于自我的技术高度还不足以完全做完美，跑跑小程序系统仍有许多功能待完善，跑跑小程序系统也实现了产品中的功能模块，按照KANO模型来说：基础型需求：地图定位，公里数计数，运动时长记时；期望型需求：个人中心模块，设置模块，运动计划打卡；兴奋型需求：社区发表，社区互动，菜单分类。也对这些模块区域进行了全方面的系统操作，保证这些系统功能无误。通过结合身边人的不断调研与市场同类商品的摸索，探究，结合了在校学习的课程知识，平常老师布置的课后技术项目作业，便用前端语言编写了跑跑小程序，在开发中，自然会有许多问题，例如要结合后端的数据库时，较为操作，各个组件之间的来往等问题，开发人员在翻阅许多社区网站和官网，学习后不断尝试完成系统，不断完善，最终完成跑跑小程序。在跑跑小程序界面设计时，UI都是简单色彩，功能模块尽量也做到极简，也希望能在使用时候有较好的体验感，在设计这跑跑小程序的初衷，是因为自己本身也喜欢运动，后来也有接触饮食，认为相结合的效果才能达到更好，于是便有了开发这款跑跑小程序系统的想法，也因为查找资料做出总结后，也学习到了很多，无论是在技术方面更加巩固了，还是在收集资料时候，也学习了很多低卡菜谱的做法等。做跑跑小程系统，对自身而言还是受益匪浅的。由于时间紧迫和所学的知识尚浅，跑跑小程序依旧还有很多功能待完善。之后也会对跑跑小程序重新进行梳理，身边人群的回访调研，做好更多跑跑小程序各个功能的完善。6.2系统展望跑跑小程序的系统全部介绍后，得出了可以实现的功能和产品，对跑跑小程序也进行了测试完果，在界面设计初期希望简洁，后续也会在界面设计需要之后再次改动，让产品更加贴近生活，增加使用跑跑小程序的用户率，以用户角度看使用跑跑小程序时，能更加美观。跑跑小程序可以是自带的授权登录