基于微信小程序的成员管理系统小程序的设计与功能实现

目录一、设计思路................................................................................................................11.1设计目标..........................................................................................................11.2设计内容.........................................................................................................11.2.1界面设计...............................................................................................11.2.2数据库..................................................................................................11.3设计思路.........................................................................................................21.3.1用户功能..............................................................................................21.4工具设备要求.................................................................................................21.5技术规范.........................................................................................................3二、设计过程与说明..................................................................................................32.1团队组织结构介绍与分工.............................................................................32.2技术线路.........................................................................................................32.3实现方案.........................................................................................................42.4实现原理.........................................................................................................52.5功能描述.........................................................................................................52.6功能设计.........................................................................................................62.7系统实现流程.................................................................................................62.8系统测试方案.................................................................................................72.9设计遇到的问题.............................................................................................72.9.1在自学微信小程序方面......................................................................7三、设计成果简介........................................................................................................83.1作品特点.........................................................................................................83.1.1技术指标..............................................................................................83.1.2性能特点..............................................................................................83.1.3创新......................................................................................................83.1.4待解决的问题......................................................................................83.1.5改进意见..............................................................................................83.2毕业设计总结.................................................................................................9

3.3详细设计成果.................................................................................................93.3.1登录注册功能......................................................................................93.3.2首页....................................................................................................113.3.3资讯页面............................................................................................143.3.4课程页面............................................................................................173.3.5我的页面............................................................................................23五、参考文献..............................................................................................................31

一、设计思路1.1设计目标随着学校不断的壮大，学员数量急剧增加，对学员信息和教师信息的管理也不断增加，面对这样的情况需要一个学员管理系统来增加工作的效率。通过这个系统可以做到规范管理、科学统计和快速查询、修改、增加、删除等，从而减少管理方面的工作量。使用学员管理系统，只需要一到两名数据操作员即可，节省了大量人力和财力；可以存储大量学生的基本信息，安全，高效，快捷。1.2设计内容1.2.1界面设计登录与注册：学员通过授权微信登录进行登录注册。当学员进入小程序会有两种状态，登录和未登录。当你未登录的时候，你查看的界面是有效的，在必要的时候，会提醒你进行登录，所以，这就会产生状态的切换。主页面:学员进入主页可以看到特色课堂，点击课程后可以看到该课程的详细信息，例如学习费用、课程详情、课程特色。可以看到教学的环境。资讯页面:资讯页面显示了一些讯息，点击查看后，会出现资讯标签卡，点击资讯详情后可以看到课程的主讲内容、可掌握的核心能力和可解决的现实问题。课程页面:课程页面显示了热门课程，点击查看课程可以看到对该课程的介绍，迪纳基更多内容可以看到该课程的详细信息。个人页面:个人页面主要实现了我的预约功能，我的收藏功能，意见反馈功能，每日签到功能，优惠卷功能和联系我们功能。1.2.2数据库MySQL可以利用SQL（结构化查询语言），SQL是一种所有现代数据库系统都选用的语言。也可以利用支持ODBC（开放式数据库连接）的应用程序，ODBC是Microsoft开发的1

一种数据库通信协议。MySQL可以利用SQL（结构化查询语言），SQL是一种所有现代数据库系统都选用的语言。也可以利用支持ODBC（开放式数据库连接）的应用程序，ODBC是Microsoft开发的一种数据库通信协议。MySQL是完全网络化的，其数据库可在因特网上的任何地方访问，因此，可以和任何地方的任何人共享数据库。而且MySQL还能进行访问控制，可以控制哪些人不能看到您的数据。MySQL可运行在各种版本的UNIX以及其他非UNIX的系统（如Windows和OS/2）上。MySQL可运行在从家用PC到高级的服务器上。MySQL容易获得；只要使用Web浏览器即可。如果不能理解某样东西是如何起作用的，或者对某个算法感到好奇，可以将其源代码取来，对源代码进行分析。如果不喜欢某些东西，则可以更改它。MySQL运行速度很快。开发者声称MySQL可能是目前能得到的最快的数据库。1.3设计思路这个小程序的设计思路是学生对学校课程的了解，学生通过小程序可以看到学校的课程信息，并对喜欢的课程进行收藏和购买。系统可以统计到每个课程的学员数量，然后讲师可以通过登录后台看到自己所教的课程和对每个课程学员的打分，学员可以登录后台可以进行课程的报名，也看到自己所选的课程，如不喜欢可以退选，管理员登录后可以对学员、讲师、课程进行管理。1.3.1用户功能1.登录、注册模块：本平台需要登录之后方可获得权限。2.管理员模块：对课程、学员、讲师进行管理。3.讲师模块：查看自己的课程信息，和对每个课程的学员进行打分。4.学员模块：查看所有课程信息，并对喜欢的课程进行选课，对已选择的但不喜欢课程进行退课。1.4工具设备要求数据库：Mysql；Jdk版本：jdk1.8；开发工具：微信开发者工具+idea；Web服务器：tomcat8.5；小程序服务器：contos7；微信版本：7.0.7（安卓）、6.6.7（IOS）；2

1.5技术规范易用、友好，以用户为中心,设计由用户控制的界面,而不是界面控制用户。命名规范，代码的注释也都按规范写好，增加代码的可读性。我们对代码编写有着严格的要求，每个组员在编写自己的模块时必须要求命名规范，对每段代码进行注释。使用Mysql数据库,系统界面设计，需要遵循“一致”原则，即命名的一致、大小的一致、操作的一致和逻辑的一致,在设计中，同时也要遵循“简约”原则，即用简单的、向导性、无歧义的文字表示系统的意图。每个组员在写自己的模块时绝不允许使用存在异议、对以后软件使用存在漏洞的代码，每个组员需要改动模块必须与其他人进行商量。二、设计过程与说明2.1团队组织结构介绍与分工团队组织介绍与分工，如表2-1所示：表2-1团队组织结构团队成员职务分工完成小程序端的全部页面设计、完成小程序页面js中功能API的彭芷桑程序员编写、完成整体逻辑运行，完成数据库的设计及信息录入、完成后台所有代码的编写。2.2技术线路该系统的技术线路，如图2-1所示：3

图2-1技术线路图小程序端：1.搭建框架：首先搭建整个小程序的后台框架，连接好数据库，把后台框架跑通。2.后台逻辑分析：分析页面之间的逻辑关系实现页面之间的数据传输，分析每个用户之间的数据库联系。3.编写代码：根据功能编写后台代码，把数据库的的数据传到小程序端的页面，将前端页面整合起来。4.项目的测试：完成项目整合进行程序测试。5.整合测试：将各模块代码整个进行测试。6.发布上线：后台接口代码发布到liux系统服务器上发布上线。2.3实现方案该系统的实现方案，如图2-2所示：4

图2-2实现方案图2.4实现原理该系统主要应用到的开发工具及软件是：使用AXURERP8绘制项目流程图，开发环境使用的是JDK1.8使用JNavicat—Mysql数据库的可视化管理，测试接口主要用到的是POSTMAN测试工具，微信开发者工具开发小程序端，IDEA开发服务端和web端，服务器使用Tomcat8.5，使用Xshell连接服务器，使用的开发语言为Java语言，小程序端服务器使用的是contos7系统。2.5功能描述本平台的功能描述，如图2-3所示：5

图2-3功能描述图2.6功能设计此平台基于微信开发者工具开发，主要包含如下所示的功能模块：1.登录、注册模块：本平台需要登录之后方可获得权限。2.管理员模块：对课程、学员、讲师进行管理。3.讲师模块：查看自己的课程信息，和对每个课程的学员进行打分。4.学员模块：查看所有课程信息，并对喜欢的课程进行选课，对已选择的但不喜欢课程进行退课。2.7系统实现流程本平台的实现流程，如图2-4所示：图2-4功能描述图用户使用小程序在线选课，挑选自己喜欢的课程，选课后，会生成课程表，在后台可以看到自己所选择的课程，还可以进行退选。讲师可以看到自己所教的可以有哪些学员。6

2.8系统测试方案通过测试系统基本功能的实现情况来诊断出系统是否存在设计错误。基本测试过程：注册学员、登录进入、添加课程、对课程进行退选、讲师对学员打分、管理员对课程的管理、进行版本更新、查看项目情况。尝试各个功能，检测功能实现情况，检测页面生成情况以及跳转情况，测试表如表2-2：表2-2测试表测试范围热门课程，资讯，选课，退课，课程管理，讲师管理，学员管理等。技术利用有效的和无效的数据来执行各个功能，以核实相关功能内容、在使用有效数据时得到预期的结果。各项功能开发完成经测试各项功能正常运行测试重点：选课、打分。优先级：选课>打分>其他功能页面切换的连接性和各个页面数据传输的逻辑性开始标准完成标准测试重点和优先级需考虑的特殊事项2.9设计遇到的问题2.9.1在自学微信小程序方面微信小程序是是一个全新的开发方式，以前从来没有接触，主要，在于里面涉及的知识很多，布局方式，组件，连接方式都是全新的知识，不太会用。解决方案：最好的解决方法是在网上找视频，自己看视频系统的学习，看微信小程序的开发文档，遇到问题去百度找资料或者和组员一起讨论，共同解决问题。7

三、设计成果简介3.1作品特点3.1.1技术指标1.熟悉软件工程理论和程序设计思想，根据设计任务完成软件需求分析，确定软件基本功能。2.根据需求分析完成系统设计，包括开发语言与工具选取、数据库设计、界面设计等，参照《计算机软件需求说明编制指南》（GB9385-88）。3.根据系统设计完成代码编写、调试，实现软件功能，参照《计算机软件开发规范》（GB8566-88）。4.进行软件测试，完善软件功能，参照《计算机软件测试文件编制指南》（GB9386-88）。5.系统集成、部署软件、运行截图，编写设计说明书，参照《软件文档管理指南》（GB/T16680-1996）。3.1.2性能特点1.在本系统中，每个功能模块能相互转换，特别是各个页面传输数据都非常合理，安全性良好。2.每个角色操作起来灵活也易于掌握，方便学员浏览课程信息，对课程进行选择。模块功能明确，模块化程度高，方便软件维护。3.1.3创新电商与教育相结合：本平台将电商平台与教育平台结合在一起，做到让学员能在一个平台实现对课程的浏览和选择。3.1.4待解决的问题1.未进行很好的角色权限控制。2.支付功能无法实现。3.1.5改进意见页面加入OPENID进行精确性识别：OPENID是微信平台对每一个微信用户的唯一性标识，只要能够实现OPENID的获取，就能让我们对每个用户的数据管理更加的方便和精确，等同于给用户添加一个唯一的标识，8

避免用户的数据重叠，降低用户的体验度。3.2毕业设计总结本次项目是看到学习软件想到的开发项目，最开始的时候把项目想象的过于简单，出现了很多设计不完整的问题，开发过程中不断的修改整体设计。在这整个项目的过程中，我也出现了解决不了的问题，在通过百度也解决不了的情况下，会寻求老师的帮助，老师无论是在什么时候，都会帮我解决问题，所以很感谢老师对我的帮助，虽然一个人完成一个项目真的很难，但是有了同学和老师的帮助一些都变得简单起来了。3.3详细设计成果3.3.1登录注册功能平台的登录页面，主要是授权进行登录与注册，如图3-1所示：图3-1登录页面9

实现代码：class='login'>class='login-bg'>class='title'>登录class='inp'>name="username"value="{{username}}"placeholder="请输入账号"登录注册class="rember">请记住用户名10

3.3.2首页项目首页界面运行效果如图3-2所示：图3-2首页实现代码：功能导航11inter

class="unav">wx:for="{{navs}}"id="tapTest"wx:key="">class="navlist"data-hi="{{}}"bsrc="{{}}"mode="scaleToFill">{{}}IT培训机构012-888888湖南省长沙市芙蓉区生机培训机构12

-->class="block">class="utitle">class="mtitle">教学环境class="ztitle">Environment13

我是有底线的3.3.3资讯页面资讯页面，实现了对资讯的查看，如图3-3、3-4、3-5所示：图3-3资讯页面14

图3-4资讯标签卡页面实现代码：class="container">class="publish">{{}}class="course_title">{{}}class="course_title">{{2}}class="btn_box">class="btnlearn_btn">资讯详情d}}"hover-class="navigator-hover"15

图3-5资讯详情页面实现代码：class="container">{{}}class="se">{{}}src="{{img}}"/>8%"/>{{r}}16class="a">{{rcollege}}class="a">{{ao}}

主讲内容{{1}}可掌握的核心能力{{2}}可解决的现实问题{{3}}3.3.4课程页面查看热门课程，点击可以查看课程详情，如图3-6、3-7、3-8所示：style="style="style="17

图3-6课程页面实现代码：class="container">热门课程价格:元18bdbt"wx:for="{{courses}}"wx:key="">url="/pages/coursedetail/index?id={{}src="{{}}"/>class="price">{{}}{{

课程类型:{{Type}}查看课程图3-7课程详情页面实现代码：{{col19

class="itembdbt">{{}}价格：{{}}元更多内容课程介绍{{}}20

图3-8更多内容页面实现代码：{{}}学习费用21

<}}">class="lival"style="background:#ddd">wx:for-items="{{}}"wx:key="{{iteclass="urow">{{}}class="">class="lival">{{}}课程详情class="">class="ubom10rpx">class="udetail">{{}}课程特色22class="ubom10rpx">class="udetail">{{}}

src="/image/">3.3.5我的页面显示个人相关信息，例如我的余额，剩余积分等，如图3-9，3-10，3-11，3-10所示：图3-9我的页面实现代码：class="contain">class="userinfo">wx:if="{{userimg}}"class="userinfo-avatar"src="{{userimg}}"账号:{{username}}class="asset">class="item"bindtap="goAsset">{{balance}}可用余额23

{{score}}剩余积分{{}}图3-10意见反馈页面24

实现代码：class="page">