基于vue.js的琴行管理系统的设计与实现v1.0_0605

1、 毕 业 设 计（论 文） 题目： 子题： 专 业： 指导教师： 学生姓名： 班级-学号： 年 月大连工业大学本科毕业设计（论文）原声琴行管理系统毕业设计YUANSHENG Piano Company Management System Undergraduate Graduation Project (Thesis) of DLPU设计（论文）完成日期 20 年 月 日学 院： 专 业： 学 生 姓 名： 班 级 学 号： 指 导 教 师： 评 阅 教 师： 年 月大连工业大学2018届本科生毕业设计(论文) V摘 要近年来，随着计算机技术的飞速发展，使得很多企事业单位、机构、个体户加快了计

2、算机信息化管理的进程与步伐。建设良好的管理系统就是企业、个体，机构等信息化的其中一个重要环节。对于琴行这一机构，建设它的信息化管理有其必要性，它对琴行的客户，商品等维护和使用效率能够起到良好的作用，也能够节省大量人力、物力、财力，而且不容易导致琴行用户数据的丢失或泄露。针对此问题我利用自己本专业所学的知识开发了一套琴行管理系统，通过这种现代化、高效的方式来协助琴行的日常管理与运营工作，既能够提高琴行教师的工作效率，也能提高学员学习的积极性，使得琴行管理现代化迈上了一个新台阶。该系统基于JS语言的VUE.js框架和NODE.js框架 + MYSQL技术，采用了Visual Studio Code

3、、Navicat for MySQL等开发工具。主要实现了琴行机构的用户中心管理，包括了琴行学员用户与教师用户的管理，可以创建新用户，修改已存在的用户资料，删除用户；琴行商品管理，管理员可以新增商品，发布课程信息，修改和删除；琴行场地管理，管理员可以新增，修改，删除琴行的练课的场地信息；琴行订单管理，查看所有学员的订单信息；工资结算，用来记录所有教师的工资信息；留言反馈管理，用来发布留言和查看留言信息；运营活动管理等功能。关键词：琴行管理；VUE.JS；NODE.JS；效率；MYSQL ABSTRACTIn recent years, with the rapid development of

4、 computer technology, many enterprises and institutions have accelerated the process of information management. The informatized management of the construction of good equipment management system is one of the important link, its maintenance on equipment and efficiency can play a good role, also can

5、 save a lot of manpower, material resources, financial resources, and its not easy to cause the equipment data lost or leaked.Aiming at this problem I use their professional knowledge to develop a set of equipment management system, through the modern, efficient way to assist in equipment management

6、 of daily work, both to improve the staffs working efficiency, also can reduce the burden, make equipment management modernization to a new level. The system is based on vue.js+node.js + mysql technology, use the development tools, such as the Visual Studio Code,Navicat for MySql .Mainly realizes th

7、e user management,Including other new users, modified, login, rights management, the product management ,including other add product, modify product, select product,and delete product, the place management,including other add place, modify product, select product ,and delete product, the order manag

8、ement including other select order and sync order data, the payroll settlement management including other select order and sync payroll data ,the message board management add message and other functions.Keywords: Piano Company management; vue.js;node.js;effectiveness; mysql大连工业大学2018届本科生毕业设计(论文)目 录

9、TOC o 1-3 h z u HYPERLINK l _Toc5128 摘 要 第一章 绪论1.1选题的意义近几年来，随着计算机与信息技术的高速发展，我国在各行业中，各个领域的信息化建设也不断地再进行完善，但很多琴行个体户、机构等对于琴行的运营概念还采取传统的人工管理数据模式，例如人工登记学员信息、人工更改课程预约状态等工作。依靠人工来处理这些琴行的商品信息和课程的预约状态，不仅会极大的降低工作效率，也会提升记录人员的错误率，尤其在中大型的琴行机构中，这种传统的管理模式更是对琴行机构的日常管理和运营带来了巨大的威胁，最明显的事例有：学员用户信息注销记录不及时、课程预约变更不能及时通知等，这些

10、问题轻则对其他同事工作带来不便，重则造成巨大的直接经济损失。琴行管理已成为现代琴行机构的一个重要领域，我们知道，越来越多的音乐及音乐器材爱好者是现代琴行机构的物质基础，而管理好这些用户爱好者也是琴行机构有效提高自身盈利能力的重要途径。对琴行而言，对音乐器材，课程管理，用户管理等的水平的要求也越来越高，对音乐器材商品建立到销售，从教学课程发布到学员预约的整个环节，更需要严格的科学管理，严谨的科学态度，必须运用现代计算机科学技术与信息技术手段树立琴行机构的综合管理思想，改进琴行管理工作，进行琴行的信息化管理与建设，以获得最佳运营效益。1.2 国内外现状及发展趋势国外发达国家对于琴行管理信息化的研究

11、从九十年代就开始了，但国外对于预防与预测更为看重，优化琴行管理的思想。国外更重要注重琴行管理运营的数据安全性，运营成本，进而提高用户转化效率，然后用管理系统实现用户数据流共享、教师预约授课、学生预约听课优化，提高整个琴行运营管理中的的经济性和效率，有效降低琴行总体成本。欧美等发达国家对琴行管理系统的研究相较于中国而言，因为计算机行业的率先发展，使得计算机信息化方面一直处于领先的地位，国外的琴行管理系统用到了很多先进的计算机信息技术，使得琴行的管理非常有效、高效并且实用。国内琴行管理系统起步比较晚，主要是对琴行机构进行管理实务以及对管理模式进行一定的创新，并更加看重琴行管理系统的数据安全和学员与

12、教师互动功能。大多数琴行管理办法是学员与教师数据的管理，并无器材维护管功能。将琴行的学员信息数据和音乐器材信息登记存档。因此，我国应当更加重视琴行管理系统的开发和应用，实现琴行管理自动化或者说数字化，提高琴行管理效率、优化现有的琴行课程预定流程，进而调整管理体制与琴行工作流，最终达到强化决策一致性、高效性的目的。1.3设计目的及内容1.3.1 设计目的随着我国科技的发展，计算机信息化水平不断提高，因此，我们在日常工作和生活当中，面对大量丰富多样的信息，尤其在琴行机构中面对极其重要的学员、商品、教师等用户数据，例如查看学员信息、琴行扩张、商品扩充、新增课程、预约课程、查看当前教学场地等。因此，对

13、琴行的管理水平的要求也越来越高，对琴行从学生器材购买，教学预约，课程发布等，需要严格的科学管理，必须运用现代化计算机科学技术手段树立琴行等机构综合管理思想，改进琴行机构管理工作，进行琴行机构的信息化无纸化管理，以获得最佳运营效益。1.3.2 设计内容在这种情况下，我们应当利用计算机等现代化手段，开发一款适合琴行机构的琴行管理系统，使得琴行机构中的主要数据管理人员从手工计算、统计工作中解脱出来，并且也是现代琴行机构科学化、正规化管理的必要前提条件。通过琴行管理系统来管理琴行机构的日常运营活动，如用户管理，商品的管理，课程场地管理等，通过这种现代化、高效的方式确保琴行用户数据的保密性和安全性，并且

14、也提高琴行工作人员的工作效率，最大限度的减轻了员工的负担、降低了出错率，最终助力琴行机构迈向新台阶。1.4技术背景介绍1.4.1采用Js语言VUE.JS框架进行开发Vue.js是一套基于JS语言，并构建于WEB用户界面的渐进式框架。与其他主流的重量级技术框架不同，Vue 采用自底层向上的增量开发的设计模式 REF _Ref8532 r h 1。Vue 的核心思想只关注视图表现层，并且非常容易学习并上手，非常容易与已有项目整合 REF _Ref10452 r h 2。另一方面，Vue 完全可以驱动并采用单文件组件的组合形式。并且Vue生态系统支持复杂单页应用的库开发模型。Vue.js的目标是通过

15、简单的API接口，尽可能的实现响应数据绑定和组合视图组件显示 REF _Ref10524 r h 3。1.4.2采用Visual Studio Code平台进行开发Visual Studio Code(简称VS Code/VSC) 是一款免费 HYPERLINK /tag/%E5%BC%80%E6%BA%90 t /amyloverice/article/details/_blank 开源的轻量级代码编辑器，几乎支持目前计算机行业主流的开发语言，包括语法关键字高亮、代码自动提示与补全、自定义快捷键（热键）、代码片段自动生成、代码对比等特性，并且支持开发插件、组件扩展。并针对网页WEB HYPE

16、RLINK /tag/%E5%BC%80%E5%8F%91 t /amyloverice/article/details/_blank 开发和云端服务应用开发单独进行了优化措施。软件跨平台支持 Win、 HYPERLINK /os/mac-platform t /amyloverice/article/details/_blank Mac以及 HYPERLINK /os/linux-platform t /amyloverice/article/details/_blank Linux。VSCode是微软研发出的一款免费的轻量级代码编辑器，功能强大，操作简单。对JavaScript和NodeJ

17、S的支持非常友好，自带很多功能，例如代码一键格式化，代码智库自动补全、主流插件支持等 REF _Ref9015 r h 4。其中，VSCode推荐一个项目的打开方式以文件夹最好。1.4.3采用MySql进行数据存储SQL是英文Structured Query Language的缩写，即为结构化查询语言，主要功能就是对各种数据库建立统一联系，它建立在成熟而强大的数据库关系模型基础上 REF _Ref9224 r h 5。其主要特点是有真正的客户机/服务器体系、图形化的用户界面、丰富的编程API工具，并且为用户开发程序提供更大的支持与选择。数据库中的数据可幽数据库服务管理，它能为数据库提供数据的定

18、义、查询、修改、和统计等操作。主要功能包括：数据库的定义、数据库数据存储、数据库运维管理和数据库关系与维护功能。1.5软硬件需求本琴行管理系统所用软件环境：操作系统：Windows7操作系统数据库：MYSQL5.7数据库开发工具：Visual Studio Code 2017本设备管理系统所用硬件环境：CPU：Core i5-2430 2.6GHz内存：8GB显示器分辨率：1366*768第二章 可行性研究与需求分析2.1系统可行性分析可行性分析是在用户以及使用场景的要求之上和系统调研的基础上进行实践得出，对系统产生的初衷从需求、技术、合理性、管理等多方面方面进行分析与证实，并得出新系统的研发

19、工作的可行性和非可行性的方案与结论，最后输出可行性分析报告。因此，在每一个项目系统研发之前，都要需要进行可行性分析论证，这样可以减少项目的开发风险，避免人力、物力和财力的损失浪费。下面就技术、经济、安全和操作这四个方面来阐述。2.1.1 技术可行性分析技术可行性就是根据现有的计算机信息技术条件，分析能否实现该系统的各项要求，包括软硬件和其他应用技术等各个方面。在软件方面，该琴行管理系统采用B/S架构体系，选择JS语言及来进行开发，所采用的数据库是 MYSQL5.7，所以该系统具有“一次编写，到处运行”的优点，具有很强的移植性和安全性，并且易于维护和管理，所以在技术上是可行的。在硬件方面，该系统

20、对所需设备性能要求很低，目前市场主流计算机完全能够满足该系统功能的要求。2.1.2 经济可行性分析经济可行性分析主要是对该琴行机构所投入的资金与该管理系统投入使用后所带来的用户数据与经济效益进行比较，确认该系统是否会给该琴行机构带来一定的经济效益。该琴行管理系统在硬件开销方面只需要一台普通PC机即可，在软件开销方面需要购买Windows操作系统，数据库MYSQL，属于开源系统，免费使用。这对于琴行机构来说是完全能够承担的。使用该系统能够将琴行音乐器材管理和客户管理信息化，使得琴行能够用计算机管理并记录琴行用户的音乐器材购买、教师工资结算、课程状态变更等，极大地提高了琴行工作人员的工作效率，减少

21、了管理支出的费用和时间，用最少的运营成本获得最高的经济效益，增强了琴行在市场中的竞争力，因此在经济上是可行的。2.1.3 安全可行性分析安全性方面，在用户使用系统时，并不需关心该琴行管理系统的内部组成结构及具体实现方法，即对系统使用者来说是公开透明的，用户只需通过浏览器登入，并查看相应的琴行信息即可，数据都是存在于服务端的数据库。而在前端简单地使用鼠标键盘等外设操作各友好界面即可，而对于数据的保护，我们使用数据库自带的加密方式及一张管理员管理信息表即可，此信息表记录了管理员与普通用户人员资料信息，只有管理员能够添加删除音乐器材商品，场地资料管理，普通学员只能浏览商品、课程信息等，不能够对数据库

22、进行修改，删除操作，因此在安全性上也是可行的。2.1.4 操作可行性分析考虑到该琴行管理系统的使用人员层次不一，本着操作简单、使用方便的原则，设计了友好的前端界面及错误异常提示，用户只需对该琴行管理系统稍作学习了解并且会使用计算机的简单操作即可，使用该系统后，能够大大减少管理人员的工作负担，因此在操作上也是可行的。2.2 系统性能分析2.2.1 系统安全性分析系统安全性是决定整个系统运行质量的重要因素之一，此系统基于B/S结构，可以部署在云平台或者私有服务器中，保证系统安全性 REF _Ref9440 r h * MERGEFORMAT 6。但系统中也涉及很多信息，如用户信息、商品信息、场地信

23、息、订单信息、工资等。如果有人为的故意破坏，都将导致该管理系统的崩溃，导致琴行面临亏损，因此仍然时刻需要保证系统的安全性，防止系统使用者越权使用、防止系统中的商业数据被非法的篡改、破坏、泄漏和盗取 REF _Ref9659 r h * MERGEFORMAT 7。2.2.2 系统合理性分析在开发该琴行管理系统时要考琴行机构的实际情况，不能忽略现实状况和所处环境（如琴行规模、盈利情况、用户占有率、地域经济整体情况等），也不能一味追求新技术，要保证系统的合理性 REF _Ref9737 r h 8。2.2.3 系统简易性分析考虑到不同层次、不通年龄的人员对计算机的操作水平高低不一。一般而言，大部分

24、琴行的管理者的计算机操作水平可能会不高。因此，该系统开发时应该遵循简单易用的原则，方便各阶层人员使用，用户经过简单的培训学习就能上岗使用。因此，设计简单、实用的友好用户界面是至关重要的 REF _Ref9835 r h 9。2.3系统需求功能分析2.3.1 琴行用户中心需求分析用户中心功能作为系统的核心模块，主要是用来管理用户的账号信息等，对应的功能应该包括创建用户（学员和教师），用户删除，用户资料编辑以及用户查询等功能,并且只有管理员账号才能进行此操作，在系统设计时，需要设置一个超级管理员永不过期账号，利用该账号再来创建其他管理员、教师和学员账号。2.3.2 琴行商品管理需求分析琴行的日常运

25、营中不只有学员的课程信息，同时也存在音乐器材的实体商品销售，对于琴行而言，课程和音乐器材都属于商品，只是属性不同而已。并且该商品信息只允许管理员拥有新增修改删除等权限，学员只允许查看。商品功能管理主要包括创建新商品（支持商品资料图片上传），商品删除，商品资料修改以及商品查询功能。2.3.3 琴行场地管理需求分析琴行场地管理需求主要是涉及到琴行教学场地的动态化管理，功能主要包括创建新场地，场地资料修改，场地资料删除与场地多条件查询。同样，场地信息资料属于系统的基本信息资料，只允许管理员有权限进行场地数据的新增修改删除，学员有查看教学场地的权限。2.3.4 琴行订单管理需求分析当学员购买了商品，或

26、者是预定了课程信息后，对应的购买信息与预约信息需要记录并生成对应的订单信息，方便琴行查看与数据统计。订单管理功能主要是显示琴行所有学员订单信息，该功能主要是一个订单列表菜单项。可查看当前学生所购买的商品信息，包含实体音乐器材和虚拟音乐课程等。2.3.5 琴行工资结算需求分析工资结算表功能主要是用来计算当前教师所授课完成后的课程工资，以课时为单位计算，最后以列表展示。学生角色登入无法查看到对应的工资信息。2.3.6 琴行反馈管理需求分析琴行反馈功能，该功能主要针对于学员用户，学员用户是主要系统使用者，需要有一个平台功能可以反馈一些信息上报给琴行管理者，反馈内容可以是供求商品信息，供求课程信息，评

27、价教师信息，评价琴行活动等。反馈数据只有管理员才能访问并查看留言数据，使得整个留言过程非透明化，保证私密性，增强学员与琴行互动，提升用户粘性，管理更透明化。2.3.7 琴行运营管理需求分析琴行可以针对当前节日，等特殊情况可以对器材商品或者音乐课程进行运营策划活动，或者是学员的组织活动等。对应的运营策划海报图可以上传到运营中心，学生用户登入系统，选择运营中心便可查看，减少了琴行营销活动的运营成本。第三章 系统概要分析与设计原声琴行管理系统的设计与实现的第三个阶段是概要分析与设计，在需求分析阶段确定了系统应该开发的内容的基础上，设计系统如何开发。设计概要设计侧重于实用和方便，设计内容包括数据库设计

28、，系统软件的整体结构（包括数据结构的设计，设计，分布）的外部接口设计，功能组件之间接口设计等。3.1系统总体结构本琴行系统主要有用户中心，商品管理，场地管理，订单列表管理，工资结算，留言反馈，运营活动等七大功能，其中管理员角色登入会显示所有菜单信息，教师用户登入只能查看到商品管理中的预约课程信息。总功能图如图3.1所示。图3.1 系统功能框图3.2系统功能模块设计3.2.1用户中心用户中心功能分析主要涉及功能如下：用户新建：管理员角色可以新增用户，并且可以指定用户权限，可以指定为管理员，教师，或者是学员，不通的用户角色登入后会显示不同的菜单，显示不同的功能。用户资料修改：管理员角色可以修改所有

29、用户的资料信息。用户删除：对于已经不在琴行教学或者不再听课的学生信息可以进行删除，可以定期维护更新数据，保证系统不会出现冗余数据。用户信息查询：管理员角色可以根据此查询功能查询出特定条件的用户详细信息，查询条件可以是用户姓名、账号、编号等。3.2.2商品管理商品管理功能分析主要涉及功能如下：商品新建：该系统管理员可以新增音乐器材等商品信息和授课的课程信息到该琴行系统。实体商品购买：学员登入琴行系统后，查看音乐器材商品资料，可以选择是否购买该音乐器材，当购买商品成功后，对应的学员订单信息会同步到琴行系统的订单管理数据中心。虚拟商品课程预约：学生用户登入系统后可以预约喜欢的音乐课程。学员预约指定课

30、程后，对应的预约课程数据会同步到教师预约课程表，授课教师登入系统，通过预约表可以查看到当前预约听课的所有学生。商品资料修改：管理员可以修改系统中的商品资料信息。商品删除：对于无效的音乐器材或者需要下架的音乐器材，管理员可以对其进行删除。对于失效或者错误的课程也可以进行删除。商品信息查询：管理员可以直接查询所有商品列表信息。学生登入后实体音乐器材商品信息和虚拟商品课程信息会分开显示，并分别可以对这些商品进行下单购买。3.2.3场地管理场地管理功能分析主要涉及功能如下：场地新增：管理员维护场地信息，可以新增乐器教学场地，供学生查看并预约场地学习。场地修改：针对有异常，需要修改的场地数据，管理员可以

31、直接使用该功能进行处理，使场地数据维护更方便容易。其中场地信息还包含了三种状态，分别为未使用、使用中和被锁定，其中状态的更改只能是管理员在改场地数据的编辑状态下进行。场地删除：当场地数据需要清理，或者是冗余数据时，管理员可以直接对该数据进行删除。3.2.4订单管理管理管理功能分析主要涉及功能如下：订单列表数据生成：当学员在该琴行系统看到自己喜爱的乐器，或者喜爱的课程信息后，点击购买，购买成功后，数据会同步到订单列表，有且只有管理员登入并可以查看到所有的订单信息。订单不可以删除，作为查询凭证。当学员在琴行看到喜欢的课程信息后，可以预约听课，当系统确认预约有效后，该预约数据会同步到订单系统，生成预

32、约课程订单信息。订单信息只可以查看，不允许删除。3.2.5工资结算工资结算功能分析主要涉及功能如下：工资结算生成：授课结束后，系统根据课程的授课时间与当前时间对比，确认课程正常授课，系统根据授课时长与教师工资因子统计计算出该授课教师本次授课的工资信息，并以列表的方式展示出来。其中该部分数据是不允许删除和修改的。3.2.6留言反馈留言反馈功能分析主要涉及功能如下：留言新增：只有学员角色登入系统后才有留言反馈菜单，对琴行管理，课程设计，教师行为，课程质量等任何信息都可以进行留言反馈，并且只有管理员角色可以看到。保证私密性。留言查看：管理员登入系统后，显示留言列表，可以查看到所有学员的留言信息，留言

33、时间。留言人。3.2.7运营管理琴行可以针对当前节日，等特殊情况可以对器材商品或者音乐课程进行运营策划活动，或者是学员的组织活动等。对应的运营策划海报图可以上传到运营中心，学生用户登入系统，选择运营中心便可查看，减少了琴行营销活动的运营成本。3.3模块流程图学员信息与教师登入系统可以进行多种操作，教师可以查看当前预约课程的学员信息。学员可以购买商品，预约课程，发布留言等。其具体流程图如下3.2所示：图3.2 教师和学员登入功能流程图管理员登入系统后可以维护基础数据，包括用户信息的新增修改删除，商品信息的新增修改删除，课程信息的发布与删除，场地的新增与删除，留言管理等。管理员具体流程图如下3.3

34、所示：图3.3 管理员登入功能流程图数据库设计系统开发目标确定以后，下一步应该是数据库设计。数据库设计是一个项目开发的基础，设计好的数据库，可以让研发时间节省一半。所以，数据库的设计开发的系统的性能以及开发和维护有着非常重要的作用。为了在保证系统功能的基础上，加上简单易用原则，本系统采用了MYSQL数据库进行系统的数据库，完全满足系统所需功能的实现。4.1数据库的分析与设计计算机软件系统以数据库操作为核心，在数据库管理工具的支持下，进行系统信息的存储、检索、更新、删除、备份、统计等操作。目前数据库已经成为现代信息管理系统的基础与核心部分。数据库设计的好坏直接影响到整个管理系统的运行质量和使用效

35、率。在设计数据库时，应注意以下几点： （1）实体属性转换成数据库表字段设计时，不要添加不相干的冗余字段，即为需要才存储原则 REF _Ref4986 w h 10。（2）数据库规范化规则，数据库统一标准和命名规则编码。（3）数据库安全问题，保证数据库用户权限严格划分，不同用户指定不同读写权限。（4）考虑系统的性能的基础上，数据库建立之初定义的大小与数据库容量增长大小应设置在一个合理的范围内。（5）数据库要具有良好的可维护，可拓展性。（6）尽量追寻数据库设计的三大范式原则 REF _Ref5113 w h 11。4.2数据库的概念结构设计概念设计是指在数据分析的基础上自底向上的建立整个系统的数据

36、库概念结构，从用户的角度进行视图设计，然后将视图集成，最后对集成的结构分析优化得到最后结果。数据库的概念结构设计采用实体联系（E-R）模型的设计方法。E-R模型法的组成元素有：实体、属性和实体与实体的关系，E-R模型用E-R图表示，是提示各实体之间工作环境中所涉及的事物，属性则是对实体特性的描述 REF _Ref5355 w h 12。概念设计的目标是产生反映企业组织信息要求的数据库概念结构，即概念模式。概念模式是独立于数据库逻辑结构，独立于支持数据库的DBMS，不依赖于计算机系统的，根据以上对数据库的需求分析，并结合系统概念模型的特点及建立方法，建立E-R模型图。该琴行管理系统的E-R图如图

37、4.1、图4.2所示：图4.1 教师与学员授课关系E-R图图4.2 教师工资关系E-R图4.3数据库的详细设计4.3.1数据库逻辑模型用户表（user）：用户ID（主键）、账号信息，密码、账号类型、手机、QQ号、邮箱、地址、学校订单信息表（order）：订单ID（主键）、商品名称、地址、授课老师、订单时间、购买人、购买人名称、价格、课程区间时长场地信息表（place）：场地ID（主键）、场地名称、地址、状态、负责人、电话商品信息表（product）：商品信息ID（主键）、商品ID、商品名称、价格、图片信息、类型、品牌留言反馈表（message）：留言ID（主键）、留言人、创建时间、留言内容运营

38、活动表（setup）：运营ID（主键）、运营海报图4.3.2数据库表结构用户表用来存放用户基本资料，包括登入的账号资料，其中该表通过TAG字段标志位区分管理员，教师和学员用户 REF _Ref10893 w h 13。用户信息属于唯一，定义了唯一主键，用户表设计如下：表4.1 用户信息表user字段名字段描述数据类型长度可空ID主键，用户idinteger11否USER_NAME账号名varcahr20是PASSWORD密码varchar20是TAG类型varchar20是PHONE手机varchar20是QQQQ号varchar20是EMAIL邮箱varchar20是ADDRESS地址var

39、char100是SCHOOL学校varchar20是订单信息表用来存放学生所购买商品的订单信息，包括实体音乐器材商品和虚拟音乐课程商品等。其表设计如下：表4.2 订单信息表order字段名字段描述数据类型长度可空ID主键，订单idinteger11否PRODUCT_NAME商品名称varchar20是ADDRESS地址varchar20是USER_NAME授课老师varchar20是TIME订单时间date是USERID购买人varchar20是续表4.2字段名字段描述数据类型长度可空USERNAME购买人名称varchar20是PRICE价格varchar20是TIMES课程区间时长varc

40、har20是场地表主要用来记录教师所授课的地点信息，其表设计如下：表4.3 场地信息表place字段名字段描述数据类型长度可空ID主键，场地idinteger11否PLACE_NAME场地名称varchar20是ADDRESS地址varchar100是STATUS状态varchar20是PEOPLE负责人varchar20是PHONE电话varchar20是商品表用例记录琴行的所有商品信息，包括实体的音乐器材商品，虚拟的课程信息商品等，通过STYLE字段区分。其商品表设计如下：表4.4 商品信息表product字段名字段描述数据类型长度可空PID主键，商品IDinteger11否PRODUCT

41、_NAME商品名称varchar20是PRICE价格varchar20是IMAGE图片信息varchar20是STYLE类型varchar20是BRAND品牌varchar20是留言反馈表主要是用来记录学生的留言信息，供琴行管理者查看，其对于的表设计如下：表4.5 留言反馈表message字段名字段描述数据类型长度可空ID主键，留言IDinteger11否USERNAME留言人varchar20是CREATETIME创建时间varchar20是MSG留言内容varchar200是运营表主要用来存放琴行运营策划活动的海报图片信息，其表可以简单设计，设计如下所示：表4.6运营活动表setup字段名

42、字段描述数据类型长度可空ID主键，运营IDinteger11否IMAGE运营海报图varchar20是第五章 详细设计与实现前面的章节实现了概要设计，而详细设计则是在概要设计的基础上进行技术点和程序块的细化 REF _Ref6276 w h 14。上一章节已经完成了数据库的详细设计，已经具备功能的详细编码及页面设计的条件。5.1 用户中心模块功能与实现5.1.1 左侧菜单显示用户登入左侧菜单显示代码如下所示，对于的功能截图如5.1所示： if (first & != login) matched = path: /, meta: title: 首页 .concat(matched) this.

43、levelList = matched console.log(matched)最终效果菜单显示界面如下：图5.1 左侧菜单显示界面用户登入后需要获取左侧菜单，后通过$route路由方法获取当前登入角色的权限，并获取所有权限菜单信息，通过this.levelList对象获取输出。5.2 商品管理模块功能实现5.2.1 商品列表显示功能实现商品管理列表显示模块显示商品信息其核心代码如下所示，对于的功能截图如5.2所示： this.$xhr(getPro, this.searchData).success(res = this.context = res.data this.context.for

44、Each(e = if (e.style = 1) e.style = 商品 else e.style = 课程 )商品列表显示结果图如下：图5.2 商品列表显示界面商品管理主要是所有商品列表显示与新增商品功能部分，商品列表为显示所有商品数据，创建getPro方法，调用xhr.js文件声明的接口地址，得到接口返回值对象，判断返回值对象style的值，如果style=1，则表示为商品信息，为其他值则表示为课程信息。最后forEach循环输出所有数据。5.2.2 商品添加功能实现管理员新增商品核心逻辑代码如下，对于的功能截图如5.3： if (valid) this.$xhr(addPro, th

45、is.ruleForm).success(res = this.$message.success(商品添加成功) this.$router.back() ).error(res = this.$message.error(res.message) ) 页面效果如下：图5.3 新增商品界面管理员新增商品,前端通过form表单提交，并且通过表单的validate验证表单提交数据是否完整，当ruleForm表单对象验证成功后，直接调用$xhr对象的addPro接口，添加商品成功后，返回提示信息，5.2.3 商品修改功能实现商品修改，选择要修改的商品信息后，前端会通过$router.params对象将

46、商品id提交给后台，后台通过传入id字段调用userDetail接口方法获取到当前的商品详细对象，并将对象data赋值给前端ruleForm对象。最终在前段显示可编辑的商品信息，当商品保存时，其逻辑同商品新增。其核心代码如下，对于功能截图如图5.4： this.$xhr(editUser, this.ruleForm).success(res = this.$router.push(/userList) this.$message.success(修改用户成功)页面效果如下：图5.4 修改商品信息界面5.3 场地管理模块功能实现5.3.1 场地列表功能实现场地管理主要是琴行场地列表显示与新增场

47、地功能部分，场地数据列表显示调用getPlace方法，获取所有场地信息data数据，然后将data对象绑定到tableData对象中采用forEach循环显示到界面中，其场地列表核心代码如下所示，对应的功能截图如5.5： this.$xhr(getPlace, req).success(res = this.tableData5 = res.data this.page.total = res.total this.tableData5.forEach(e = switch (e.status) case 0: e.status = 未使用 break case 1: e.status = 使

48、用中 break case 2: e.status = 已预订 break )页面效果如下：图5.5 场地列表界面5.3.2 场地新增功能实现场地新增，为了保证数据完整与安全性，对该功能数据新增时，需要做强制校验，其自定义ruleForm表单校验，基于Jquery的validate框架验证,场地数据验证通过后，调用addPlace方法，直接将验证后的数据提交到后台，完成数据的插入，其核心代码如下,功能截图如5.6： this.$xhr(addPlace, this.ruleForm).success(res = this.$router.back() this.$message.success

49、(创建场地成功) );页面效果如下：图5.6 新增场地界面5.4 订单管理模块功能实现5.4.1 订单列表功能实现订单管理数据在学生用户对商品下单或者对课程进行预约成功后数据会同步到订单管理系统中，调用getOrder方法，获取数据中心的所有订单信息，getOrder接口方法将查询到的返回集用data对象封装，然后赋值给saleData对象，然后通过forEach内置方法，将所有订单数据循环输出，对于字段为空的情况，赋值默认为“无”，其核心代码如下，对应的功能截图如5.7所示： this.$xhr(getOrder).success(res = this.saleData = res.data

50、 this.saleData.forEach(e = e.time = e.time.slice(0, 10) )订单管理页面如下：图5.7 订单管理界面5.4.2 选课功能实现学员角色在登入系统后，查看商品信息，会查看到当前的实体音乐器材商品信息和虚拟的课程信息，用户选择对应的课程进行预订，前端通过localStorage.getItem(userId)获取当前用户ID，localStorage.getItem(userName)对象获取当前用户姓名，通过form表单提交获取当前用户的选课信息，然后调用addOrder方法，生成选课订单，对应的核心代码如下，功能截图如5.8所示： this.

51、form.userId = localStorage.getItem(userId) this.form.userName = localStorage.getItem(userName) this.$xhr(addOrder, this.form).success(res = this.chooseClass = false this.$message.success(选课成功) this.$router.push(/classList)学员选课页面如下：图5.8 学员选课界面5.4.3 商品购买功能实现同样，学员角色在登入系统后，查看商品信息后，学员可以直接选择对应的商品进行购买，和预约课

52、程逻辑与代码实现类似，同样前端通过localStorage.getItem(userId)获取当前用户ID，localStorage.getItem(userName)对象获取当前用户姓名，通过form表单提交获取当前用户的选课信息，然后调用addOrder方法，生成选课订单，对应的核心代码如下，功能截图如5.9所示： this.form.userId = localStorage.getItem(userId) this.form.userName = localStorage.getItem(userName) this.$xhr(addOrder, this.form).success(

53、res = this.$message.success(购买成功) 学员购买商品页面如下：图5.9 购买商品测试5.5 工资结算模块功能实现教师在授课完成后，通过系统操作授课结束，授课时间点过后，系统会生成对应的教师工资结算单，工资数据是根据授课完毕的基础课程生成而来。通过getPro获取所有的商品信息，通过style=2条件过滤掉实体音乐器材商品。调用getOrder接口方法获取所有订单信息。将获取到的商品信息与订单列表中的商品信息进行对比，然后获取订单中的时间比较。获取当前教师是否已完成授课，完成授课的将会生成对应的工资账单。其对应的核心代码如下，对应的功能截图如5.10所示：this.$

54、xhr(getPro).success(prd = var className = prd.data.forEach(product = if(product.style = 2) className.push(duct_name) ) this.$xhr(getOrder).success(res = res.data.forEach(order = 工资结算管理界面：图5.10 工资结算界面5.6 留言反馈管理功能代码及说明5.6.1 留言反馈功能实现学生用户使用该系统，购买商品，预约课程后，都可以对服务体验，系统友好度等进行留言反馈，增强学生与琴行之间的互动。发布留言最重要的是时间必须是

55、当前时间，通过new Date（）获取当前系统时间，然后通过localStorage对象的getItem方法获取当前的登入用户。调用sendMessage接口方法提交意见评论。其发布留言核心代码如下，对应的功能截图如5.11所示： this.$xhr(sendMessage, params).success(res = this.$message.success(意见反馈成功) this.msg = ).error(res = this.$message.error(res.message) ) 发布留言界面如下：图5.11 发布留言反馈界面5.6.2 留言查看功能实现留言列表查看，直接调用$

56、xhr类中声明的lookMessage方法，可获取所有留言信息，其核心代码如下，对应功能截图如5.12所示： this.$xhr(lookMessage).success(res = this.tableData5 = res.data ).error(res = this.$message.error(res.message) )留言列表界面如下：图5.12 留言反馈列表界面5.7 运营管理功能代码及说明琴行可以针对当前节日，等特殊情况可以对器材商品或者音乐课程进行运营策划活动，或者是学员的组织活动等。对应的运营策划海报图可以上传到运营中心，学生用户登入系统，选择运营中心便可查看，减少了琴行

57、营销活动的运营成本。运营管理功能主要就是图片上传功能，通过file文件对象获取文件流，通过localStorage.getItem(image)对象获取图片信息，其核心代码如下，对应的功能截图如5.13所示：import picAddress from /config.jsonlet temp = localStorage.getItem(image) if (!temp) localStorage.setItem(image, ) else this.arr = JSON.parse(localStorage.getItem(image) 运营活动管理界面：图5.13 运营活动管理界面第六章

58、 测试6.1测试目的系统测试阶段是计算机管理系统在开发周期中一个非常重要且漫长的的阶段 REF _Ref8441 r h 15。其重要性体现在他是保证系统运行稳定与可靠性的关键手段，是对整个系统开发过程包括系统需求分析、系统概要设计以及系统功能实现的最终审查。测试的目标是以较少的时间和人力资源，至多的去发现系统中潜伏的各种错误和缺陷，确保管理系统的质量 REF _Ref8503 r h 16。测试主要参照的标准为：需求分析阶段所确定的用户需求；功能模块的设计；处于对管理体系的稳定性和功能完整性；系统正常运行功能上的具体实现。6.2测试项目的背景本次测试对象为原声琴行管理系统，主要目的是为了检测

59、系统各个模块功能是否畅通，是否可以正常使用，数据交互是否完整，系统在兼容性方面、性能方面是否存在设计方面的不足，系统运行时，占用服务器资源是否合理。6.2.1 测试要点系统被测特性：对系统软件进行功能性测试；对系统软件进行非功能性测试。系统不被测特性：源代码，逻辑等；模块功能接口，操作异常错误处理模块，本地数据模块，模块执行实施过程中的独立路径，边界值测试方案模块 REF _Ref8591 r h 17；单元（模块）之间的数据互通性等。6.2.2 测试内容测试的实质即为系统测试的需求，测试内容主要包含功能测试、兼容性测试和系统性能测试。测试该琴行管理系统如下：登入系统时的权限验证；数据的输入与

60、显示的完整性；功能模块数据交互的完整性；数据操作（查询，添加，修改，删除）的完整性；6.3 测试方法本小节主要叙述了测试的环境、测试使用工具和测试方法。6.3.1 测试环境PC机一台、Tomcat7.0服务器、火狐浏览器和MySQL数据库以及网络。系统配置如下。1）软件配置操作系统：Windows 7、Windows 8、Windows 10。数据库系统：MySQL5.7版本。浏览器：火狐浏览器46版本。2）硬件需求CPU：CORE i3及以上。内存：1GB及以上。硬盘：500GB及以上。6.3.2该系统的测试方法测试方法：由于本次测试的依据是需求设计文档，已经知晓系统所有功能模块的具体实现，