基于nodejs+vue运动会管理系统的设计与实现python-flask-django

 
本文采用vue和mysql数据库作为开发工具，设计运动会管理系统，目的在于实现对运动员信息计算机化，网络化管理，达到在线信息查询、修改、更新及维护。整个系统采用B/S结构，主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的库。而对于后者则要求应用程序功能完备,易使用等特点。在进行大量需求分析的基础上，本系统完成对运动员信息录入、查询、统计和维护等功能设计。系统运行结果表明，程序稳定，操作简便、界面友好，具有较强的实用性。
前端技术：nodejs+vue+elementui,
Express 框架于Node运行环境的Web框架,
语言 node.js
框架：Express
前端:Vue.js
数据库：mysql
数据库工具：Navicat
开发软件：VScode
视图层其实质就是vue页面，通过编写vue页面从而展示在浏览器中，编写完成的vue页面要能够和控制器类进行交互，从而使得用户在点击网页进行操作时能够正常。

代码结构讲解
 1、 node_modules文件夹(有npn install产生)
    这文件夹就是在创建完项目后，cd到项目目录执行npm install后生成的文件夹，下载了项目需要的依赖项。
2、package.json文件
     此文件是项目的配置文件（可定义应用程序名，版本，依赖项等等）。node_modules文件夹下的依赖项是从哪里知道的呢？原因就是项目根目录下的这个package.json文件，执行npm install时会去找此文件中的dependencies，并安装指定的依赖项。
3、public文件夹(包含images、javascripts、stylesheets)
      这个文件夹做过Web开发的应该一看就知道，为了存放图片、脚本、样式等文件的。
4、routes文件夹
      用于存放路由文件。
5、views文件夹
      存放视图。  
随着社会的进步和计算机技术的发展，特别是微型计算机的大范围普及，计算机的应用逐渐由科学计算、实时控制等方面向非数值处理的各个领域中渗透。尤其是以微型计算机为处理核心，以数据库管理系统为开发环境的管理在办公室自动化以及商业信息管理等方面的应用，日益受到人们的关注。运动会管理系统以前利用传统的人工方式对运动员报名注册、成绩进行管理，非常落后，存在着许多缺点，尤其对于查找、更新和维护都带来了不少的困难。经过业务流程分析和梳理后，具体分析了运动会管理系统的功能需求，得出系统需求如下：
●系统具有良好的人机界面，方便用户操作。
●系统安全可靠，权限机制完善，防止信息外泄。
●要求系统具有良好的可扩展性。
●要求系统简单实用。

（五）可行性分析

可行性分析研究的目的就是用最小的代价在尽可能短的时间里确定问题是否能够解决[5]，它是任何一项系统研究投入力量之前必须进行的一项工作，这对于保证资源的合理使用、避免浪费是十分重要的，也是系统设计一旦开始以后能顺利进行的重要保证。
经过系统目标的研究及详细的现场调查，总结出一下可行性分析：
1．技术可行性分析
技术上的可行性分析主要分析现有技术条件能否顺利完成开发工作，硬、软件配置能否满足开发者需要等。运动会管理系统涉及到运动会基本信息、学生的成绩信息等，数据处理量大，而这一特点非常适合计算机特点，发挥计算机的数据处理速度快、准确度高的优势。现代计算机硬件和软件技术的飞速发展，为系统的建设提供了技术条件。且我的系统是利用微软自带的Micrsoft　SQL Server 20000作为后台数据库，只要有vue运行环境就很方便操作，而且本系统有友好的用户界面、有良好的安全性设置、有详细的操作说明书，这样更使各类用户很快地掌握系统的使用方法。
2．经济可行性分析
主要是对项目的经济效益进行评价，一方面是支出的费用，其中包括人员的开资费用、纸张的费用等。另一方面是取得的效益中可以用钱来衡量的那部分（收益的另一部分难以用钱来表示的。基于本单位现有计算机及配套设备，建设运动会管理系统，不但能减少重复性的书面报告，降低办公费用，提高办公效率，而且能提高运算速度，同时为学校的整体工作的进一步加强做出更大的贡献。
3．操作可行性分析
系统是基于B/S模式开发的，B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，界面简洁。该企业相关人员在系统操作上经过简单培训即可使用，所以系统在操作上是可行的。
总之，无论从技术上、经济上，还是从操作上，运动会管理系统都是可行的。

三、系统分析
为了发挥系统的功能，实现系统的目标，运用科学的方法对系统加以周详的考察、分析、比较、试验，并在此基础上拟定一套有效处理步骤和程序，或对原来的系统提出改进方案的过程，就是系统分析。
（一）数据流图分析
在业务流程分析的基础上，进行数据流的分析。数据流图清晰地反映系统必须完成的逻辑功能。
本系统的数据流图分为顶层、一层。
 （二）数据字典
通过对系统数据流的分析，用数据字典描述数据流图中的数据元素、数据流、数据存储、处理过程和外部实体[6]。
数据字典是系统分析阶段的工具。数据字典中包含的每个数据元素的控制信息都是很有价值的，数据字典在数据库设计中占有很重要的地位。
数据字典通常包括以下6个部分：
(1)数据元素。数据元素是不可再分的数据单位。
(2)数据结构。数据结构反映了数据之间的组合关系。一个数据结构可以由若干个数据项组成，也可以由若干个数据结构组成，或由若干数据项和数据结构混合组成。
(3)数据流。数据流是数据结构在系统内传输的路径。
(4)数据存储。数据存储是数据及其结构停留或保存的地方，也是数据流的来源和去向之一。
(5)处理过程。处理过程的具体处理逻辑一般用判定表或判定树来描述。
(6)外部实体。外部实体是数据的来源和去向。
 2．数据库逻辑结构的设计
对数据库中实现具体表的详细设计。即各数据库表的字段名、类型、长度等信息进行了详细的描述[11]。根据系统E-R图，系统数据表设计如下：
●用户表(用户编号,姓名，登录名，密码，注册时间，权限，学院)
●比赛项目(比赛编号，项目名称，类别，日期，性质)
●运动会信息(运动会编号,名称，地点，日期，项目，其他，登记人）
●入库信息(入库编号,产品名称,仓库名称,数量,经手人,日期，入库类型)
●精神文明成绩信息(编号,学院，成绩，备注)
●纪录信息(纪录编号,创建时间，纪录人，项目编号， 成绩，备注）
●成绩(编号，报名编号，成绩，名次，得分)
●报名表(报名编号，参赛人，项目编号，运动员编号，学院)
3．数据表设计
数据表的建立是应用程序开发过程中的非常重要的一个环节，必须清楚每一模块要操纵的数据是那些，以及数据间的相互关系，然后建立数据表[12]。
本系统数据库名为works，包含以下8个表:用户表，比赛项目表， 运动会信息表，入库信息表，精神文明成绩表，纪录信息表，成绩表，报名表。下面分别详细介绍以上各表：
数据库名称：ydh
数据表结构：
管理员表：如表4-1
表4-1 用户表(suser)
字段名称 数据类型 字段大小 说明
Uid int 4 用户编号
Uname varchar 50 姓名
Lname varChar 50 登录名
Pwd varChar 50 密码
Logtime Datetime 8 注册时间
Qx Varchar 50 权限
Xy Varchar 50 学院

说明：用户表是用来存放用户人员注册信息。
报名表：如表4-2
表4-2报名表(baoming)
字段名称 数据类型 字段大小 说明
Bid int 4 报名编号
Bper varchar 50 参赛人
Xid Int 8 项目编号
Code varChar 50 运动员编号
学院 varchar 50 学院

成绩表：如表4-3
表4-3 成绩表(cj)
字段名称 数据类型 字段大小 说明
cid int 4 成绩编号
Bid Int 8 报名编号
Cj varchar 50 成绩
Mingci varchar 50 名次
Fen varchar 50 得分

说明：成绩表存放的是比赛成绩信息。此表存放径赛，田赛，全能赛成绩信息。
纪录表：如表4-4
表4-4纪录表(jilu)
字段名称 数据类型 字段大小 说明
Jid int 4 纪录编号
Jtime Datetime 8 登记时间
Bper varchar 50 纪录人
Xid varchar 50 项目编号
Cj varchar 50 成绩
Bz Varchar 100 备注
精神文明成绩表：如表4-5
表4-5精神文明表(jscj)
字段名称 数据类型 字段大小 说明
Jid int 4 精神文明编号
Xy varchar 50 学院
Cj varchar 50 成绩
Bz varchar 50 备注

运动会表：如表4-6
表4-6运动会表(sport)
字段名称 数据类型 字段大小 说明
Sid int 4 运动会编号
Sname varchar 50 名次
Location varchar 50 地点
Riqi Datetime 8 日期
Xm varchar 50 比赛项目
Qt Varchar 50 其他
Djper varchar 50 登记人

比赛项目表：如表4-7
表4-7比赛项目表(xm)
字段名称 数据类型 字段大小 说明
Xid int 4 项目编号
Xname varchar 50 项目名称
Lb varchar 50 类别
Riqi Datetime 8 日期
Xingzhi Varchar 50 性质

 六、系统测试
系统测试是将已经确认的软件、计算机硬件、外设、网络等其他元素结合在一起，进行信息系统的各种组装测试和确认测试，其目的是通过与系统的需求相比较，发现所开发的系统与用户需求不符或矛盾的地方。
系统测试的任务是尽可能彻底的检查出程序中的错误，提高软件系统的可靠性[15]。该阶段结束应交付测试报告，说明测试数据的选择，测试用例以及测试结果是否符合预期结果。测试发现问题之后要经过调试找出错误原因和位置，然后进行改正。
1．系统功能测试
1．系统测试是将经过测试的子系统装配成一个完整系统来测试。它是检验系统是否确实能提供系统方案说明书中指定功能的有效方法，为了发现缺陷并度量产品质量，按照系统的功能和性能需求进行的测试 ，一般使用黑盒测试技术， 一般由独立的测试人员完成， 对于模块之间交互性比较强的软件,还会有单独的集成测试,用来发现模块接口之间的错误。
2．软件测试的基本方法包括单元测试的基本方法、综合测试的基本方法、确认测试的基本方法、系统测试的基本方法、软件测试的基本方法。但软件测试的方法和技术是多种多样的，对于软件测试技术，可以从不同的角度加以分类：
3．1.从是否需要执行被测软件的角度，可分为静态测试和动态测试。
4．2.从测试是否针对系统的内部结构和具体实现算法的角度来看，可分为白盒测试和黑盒测试。
5．下面主要介绍白盒测试和黑盒测试
黑盒测试也称功能测试或数据驱动测试，它是在已知产品所应具有的功能，通过测试来检测每个功能是否都能正常使用，在测试时，把程序看作一个不能打开的黑盆子，在完全不考虑程序内部结构和内部特性的情况下，测试者在程序接口进行测试，它只检查程序功能是否按照需求规格说明书的规定正常使用，程序是否能适当地接收输入数锯而产生正确的输出信息，并且保持外部信息（如数据库或文件）的完整性。黑盒测试方法主要有等价类划分、边值分析、因—果图、错误推测等，主要用于软件确认测试。 “黑盒”法着眼于程序外部结构、不考虑内部逻辑结构、针对软件界面和软件功能进行测试。“黑盒”法是穷举输入测试，只有把所有可能的输入都作为测试情况使用，才能以这种方法查出程序中所有的错误。实际上测试情况有无穷多个，人们不仅要测试所有合法的输入，而且还要对那些不合法但是可能的输入进行测试。
白盒测试也称结构测试或逻辑驱动测试，它是知道产品内部工作过程，可通过测试来检测产品内部动作是否按照规格说明书的规定正常进行，按照程序内部的结构测试程序，检验程序中的每条通路是否都有能按预定要求正确工作，而不顾它的功能，白盒测试的主要方法有逻辑驱动、基路测试等，主要用于软件验证。
“白盒”法全面了解程序内部逻辑结构、对所有逻辑路径进行测试。“白盒”法是穷举路径测试。在使用这一方案时，测试者必须检查程序的内部结构，从检查程序的逻辑着手，得出测试数据。贯穿程序的独立路径数是天文数字。但即使每条路径都测试了仍然可能有错误。第一，穷举路径测试决不能查出程序违反了设计规范，即程序本身是个错误的程序。第二，穷举路径测试不可能查出程序中因遗漏路径而出错。第三，穷举路径测试可能发现不了一些与数据相关的错误。

对于生成秩序手册的测试：

测试目的：
检测“用户登录”预定的数据录入验证功能。
预置条件：
系统在系统中已经有注册信息。
测试过程： 预期结果：
系统管理员
用系统管理员的登录信息进入主页面，进行功能的操作。 正常跳转到系统的主页面，并对所有的功能进行操作。
进入设置运动会信息。 成功增加运动会信息。
设置比赛项目 成功增加比赛项目信息，系统以列表的形式展现已经设置的比赛项目信息
测试实际结果：
经过测试证明运用录入增加功能，可以正常进行相关信息的处理。达到预期结果。

2．测试总结
本次测试中，经过以上详细的测试，在程序测试过程中，发现的错误主要分为两大类错误，一是程序语法错误，二是程序逻辑错误，对于前者的解决主要是依赖于JDK自带编译程序来寻找程序中的语法错误，并逐一解决。而对于后者则是测试运行程序通过设置断点，耐心地寻找逻辑错误处，最终使得程序合乎逻辑，符合设计要求。
通过对本系统的全面测试，使系统的模块间的链接正确，准确的连接到指定的页面，完成指定的功能。改正了错误后的系统，整个系统基本运行稳定，完成了系统预期的效果。

结 论
“凡是预则立，不预则废”，这是我在开发完这套系统后的最大的体会。
通过开发本系统和学习vue我对前面学过的许多课程有了更为深刻的理解。。如果在开发前对整个开发工作做出全方位的规划和系统的分析，开发过程就会事半功倍，否则就会遇到许多意想不到的问题，延缓开发进度。我开始在没有进行系统规划，确定系统的注册职能，做好业务流程图、逻辑分析图的情况下，就急于进行系统开发，结果使得开发过程比较混乱，进展缓慢，系统重新作了几次。由于功能不确定，系统主菜单及窗口改来改去，浪费了很多时间和精力。后来我静下心来，认真细致的对开发过程进行了规划和分析，明确了系统的基本功能，在设计好系统各主要部分，将一些细节问题考虑周全后才开始动手进行开发，使得后来的工作进行得很顺利。
另外在学习vue的过程中还不够扎实，学过的东西没能融会贯通，在编写代码的时候不能够信手拈来，熟练应用，而是到处查阅资料，使得一些应该实现的功能没有实现，也是一种遗憾。
但是总体上说，这次的毕业设计对我来说是非常难得的一次锻炼机会。毕业设计使得我们对几年来所学的专业课有了更为深刻的认识，使知识得到了融会贯通，得到了比以往学习任何一门课都大的提高和进步。对于我来讲这不仅仅是一次毕业设计，不仅仅是学会了一门数据库开发工具，更重要的是在学习的过程中，所有的问题要一个人面对，有问题要想尽各种办法解决，克服困难，在解决这些困难的过程中提高了我学习的能力、解决问题的能力和实际工作的能力，学到了许多书本以外的知识。由于时间仓促，本人能力有限，该系统仍存在一些问题需要在以后的开发、维护工作中继续完善
参 考 文 献

致 谢
转眼间两个多月的毕业设计时间已经结束，我所设计的生产信息管理系统也按照开始制定的方案完成，达到了预期的效果。在这次毕业设计中，同学与老师都给予我很多的帮助。特别是我的导师齐文老师及时地帮助我解决系统开发中遇到的种种问题，他严肃的科学态度，严谨的治学精神，精益求精的工作作风，深深地感染和激励着我。同学们和老师在理论和实践中给我的启发，将对我今后的学习和工作影响深远。在此，我要衷心感谢齐文老师的热情帮助与全力指导！也要向各位评审老师致以诚挚的谢意和崇高的敬意！