学生选课系统

PAGEPAGE44赵嘉宝：基于SpringMVC的学生选课系统PAGEPAGE摘要随着科学技术的不断提高,计算机科学日渐成熟,其强大的功能已为人们深刻认识,它已进入人类社会的各个领域并发挥着越来越重要的作用。学生选课系统作为一种现代化的教学技术,已经越来越受到人们的重视，是一个学校不可缺少的部分,学生选课系统就是为了管理好选课信息而设计的。学生选课系统的将使选课管理工作规范化，系统化，程序化，避免选课管理的随意性，提高信息处理的速度和准确性，能够及时、准确、有效的查询和修改选课情况。用计算机对选课信息进行管理，所具有的优点是手工管理所无法比拟的。其具有较高可靠性、较大存储量、较好的保密性、更长的寿命、更低的成本、检索迅速和查找方便等优点。这些优点极大的提高了工作效率，利用计算机进行课表编排，既提高了排课工作的科学性，又可减轻管理人员的工作强度，提高工作效率。系统主要由学生、教师、管理员三中身份实现管理，每种身份拥有不同的权限实现各自的功能。该实现了对课程的基本信息和学生选课、学生和教师用户进行管理。系统对学生角色提供个人信息查看、课程查询、选课管理以及成绩查询；对教师提供查看自己所担任课程的课表、选该门课程的学生信息及；提供给管理员以下功能：查看所有课程、学生、教师的信息并可以对它们进行管理（添加、编辑、删除）。关键字：选课；课程信息；B/S；MySQL5.0；HTML；JQuery；SpringMVCAbstractWiththeimprovementofsciencetechnology,thecomputersciencebecomesgraduallymature,peoplehavealreadydeeplyunderstooditsstrongfunction,andithasalreadygotintoeachrealmofthehumansocietytoexertamoreandmoreimportantfunction.Thestudentselectingsystem,amodernizingteachingtechnology,paysmuchmoreattentionbypeople.Itisindispensablepartforaschool.Thestudentselectingsystemisforthesakeofmanagingtotheinformationofselectingcourses.Thetendencyofstudentselectingsystemwilledifytheselectingmanagement,itwouldbemoresystematicalandproceduralinfuturework.Wetrytoavoidtherandomwork,promotingtheaccuracyandspeedoftheprocessinginformation,sothatwecanchecktheinformationofselectingcoursewithaconvenientandefficientform.Thecomputercarriesonthemanagementtotheselectedcourseinformation,hastheadvantageisthemanualmanagementplaceincomparable.Ithastheadvantagesofhigherreliability,largerstorage,betterconfidentiality,longerlife,lowercost,rapidretrievalandconvenientsearching.Theseadvantagesgreatlyimprovetheworkefficiency,theuseofcomputersforclassscheduling,notonlyimprovethescientificschedulingwork,butalsoreducetheworkintensityofmanagementpersonnel,improvetheworkefficiency.Thesystemismainlymanagedbystudents,teachersandadministrators,eachofwhomhasdifferentrightstorealizetheirownfunctions.Theimplementationofthebasicinformationofthecurriculumandstudentselection,studentsandteachersusersformanagement.Thesystemprovidesstudentswithpersonalinformation,courseinquiry,courseselectionmanagementandgradeinquiry.Provideteacherswiththeinformationofstudentswhochoosethecourseandchecktheirowncurriculumschedule;Thefollowingfunctionsareprovidedtoadministrators:toviewandmanagetheinformationofallcourses,studentsandteachers(add,edit,delete).Keywords:courseselection;courseinformation;B/S;MySQL5.0;HTML;JQuery;SpringMVC目录1绪论 错误!未定义书签。1.1研究目的及意义 51.2学生网上选课系统背景介绍 51.3国内外研究现状 错误!未定义书签。2系统需求分析 72.1需求分析 72.2可行性分析 82.3系统配置需求 错误!未定义书签。3系统总体设计 123.1项目规划 133.2设计目标 133.3系统相关技术介绍 错误!未定义书签。3.3.1系统开发采用的技术方案——B/S模式 错误!未定义书签。3.3.2HTML技术介绍 错误!未定义书签。3.3.3MySQL数据库介绍 错误!未定义书签。3.4数据库分析设计 133.4.1数据库需求分析 133.4.2数据库概念结构设计 143.4.3数据库表的设计和创建 164系统详细设计和实现 204.1主界面设计 204.2界面头尾设计 204.3登录界面 204.4学生用户界面设计 214.4.1个人信息模块功能模块设计 224.4.2网上平台模块功能设计 264.4.3系统公告 274.4.4其他功能模块设计 284.5管理员用户界面设计 294.5.1用户管理模块功能设计 364.5.2网上平台模块功能设计 384.5.3系统公告模块设计 394.5.4其他功能模块设计 394.6教师用户界面设计 414.7系统后台模块 42致谢 44参考文献 441绪论1.1研究目的及意义各国现阶段发展的大趋势是：信息技术的应用，在国际贸易和商业领域的体现,现阶段人们利用计算机技术、网络通信技术和Internet来实现社会活动的信息化和人性化。信息与我们的生活密不可分，在社会上的各个领域及各个部门，人们每天都和信息打着交道,那么我们要怎样处理这样多的信息成为一个重要的课题。学生在学期初始选课是每所学校教学活动的一个重要环节,这个环节如果能够控制、管理得当,它不但能加快学生的选课速度,而且也能够提高整个教学进程的效率。本系统基于SpringMVC的学生选课系统，是一个综合的学校学生管理的系统,因为这一点，其必须要有很强的实用性。经过这段时间的调查研究,要求系统需要具有以下的几项基本功能:由于普遍的操作人员的对计算机掌握的知识水平一般,需要有更直观的界面，方便使用者操作;由于此系统的使用人数偏多,必须要求有较为严谨的权限系统，避免不必要的隐私泄露;为了使原始数据便于修改,需要系统支持多条件的修改;为了使数据更加便于用户查询,必须需要系统支持多条件查询;在可通过的权限下,使删除数据更加方便简单,使得保存的数据稳定性较为完善;数据计算自动完成,尽量减少人工操作。由于本系统管理的对象较为单一,都是在校的学生、老师及管理员,且每个数据内容都具有较强的关联性,涉及的计算机操作过程也并不是很复杂。因此,比较适合于采用数据库管理。在技术难度方面,由于有指导老师的指导和相关参考文献的帮助,特别是网上资料等相关内容的辅佐,因此可以完全实现。1.2基于SpringMVC的学生选课系统背景简介每个学校必不可少的就是学生选课系统，它的操作内容对于学校的领导者和管理者来说是至关重要的，所以学生选课系统是一个，能够为操作者提供充足完善的信息和方便快捷的查询手段的一个系统。现阶段Internet的发展使我们的教育趋于信息化与现代化，现在网上的信息管理，是我们教育部门里的一个热门问题。现在，老师、学生跟学校的之间的信息传递，只在网络上便可以实现，可以说是一指之间，是最为方便快速的一个途径。一直以来，人们都使用传统的方式，人工手动整理文件、档案等资料，这种管理方式存在着许多缺点，如：耗时久、查询速度慢、保密性差等。另外，时间一长，就会有很多的文件和数据的堆积，这对于查找、更新和维护都增添了不少的困难。此外，在保密性和查询更新等方面，都存在有一定的不足，各现有系统资料都是独立的，想关联到一起很麻烦。在以管理者为主体的方式中，信息的取舍取决于管理者对于信息的熟悉程度与个人意愿，对于需要者也不是绝对的公平，因此无法完全满足用户的需求。学生选课系统是各大高校教学管理系统必不可少的一部分，因此制作本系统需要对教学管理工作的全部过程和细节都很熟悉，从实际的角度出发，解决工作中最具代表性的问题，并充分利用计算机网络具有大量信息的功能，实现整个教学管理工作全过程的计算机管理，帮助实际操作人员解决复杂的实际问题，使繁琐的问题简单化。使得教学管理工作从复杂繁琐走向规范化、现代化的管理。随着各大高校教学管理工作的现代化和计算机的普遍化，以及响应教育部门学分制的改革，学生选课系统已经成为教学管理系统的重要部分。由于Internet具有影响范围广、能够方便快捷的传递信息、具有近乎实时的交互性等优点，而且其本身又是一个巨大无比的信息库。学生选课系统，可以提高教师和学校对于学生的管理效率，使其保密性也有较为明显的增强。当前，为响应教育部门的号召，各大高等院校正逐步实施学分制，学分制允许学生较为自由的，在一定可接受的范围内选择更加适合自己的，自己更加擅长并且更加需要的课程。因为可以自由选课这一点，学分制具有分散性和课程上时间安排的不确定性，因此其更加难于人工调配与集中管理，所以本系统正较好的弥补了此项问题。另外，各个高校都开始了扩招行动，随着扩招程度的加强，学生读书率逐年增加，这个问题所造成的教学资料紧张，无疑增加了选课的管理难度，和教务管理人员手动排课的工作量。我们的目标是：用学生选课系统来实现最为方便快捷的对全校选修课程的发布，使教师和学生的信息交流在网络上即可实现，更为巧妙的创造现代化的学习环境。由于学生选课是大学的主要管理工作之一，此项工作涉及到校、院系、师、生等诸多方面的因素，随着教学部门对于教育体制的不断改革与创新，学生选课时的制约条件也比较纷繁复杂，对于传统人工操作而言，工作量也是巨大的，而且此项工作往往是急件，需要校方在较短的时间内便完成。现在有了此系统，在这里，运用计算机辅助选课，既能实时地对学生选课结果进行操作和统计，同时也大大减少了管理人员的时间及工作量，对于人工操作的错误率也避免了，因此建立选课系统这个各大高校必不可少的势在必行。1.3国内外研究现状就现在国际上的远程教育和学校来看，具有完整规模的就有远超百所的程度，网络上的远程教育是目前世界各地培养大批量人才的重要方式，正在全世界各地发挥着重要作用。由上面叙述的可以知道，在世界各处的高校校园内的每个方面都有使用基Internet的校园网进行各方面应用的。国外的教学科研软件与国内相比开发的早而且比较成熟。早在七十年代末，美国就建成了NSFNET(国家科学基金网)，其课题的申报及课题的进展情况汇报都在网上进行。其网上教学教务管理系统也十分完善，世界各地的学生可以坐在家里通过互联网完成入学报名、课程的选修、学期考试、毕业论文的撰写、取得学位这一学习生活的全过程。在我国，有相当多的高校都有进行学分制管理，它的核心内容是让学生进行自主选课，就是把学习的自主权还给学生。现阶段Internet的发展使我们的教育趋于信息化与现代化，现在网上的信息管理，是我们教育部门里的一个热门问题。现在，老师、学生跟学校的之间的信息传递，只在网络上便可以实现，可以说是一指之间，是最为方便快速的一个途径。在这样的情况下，决定选课的因素有很多，工作量大并且复杂，通常情况是需要在很短的时间内完成的。运用计算机来辅助选课，就是能实时地对大量选课数据进行检验和统计了，十分方便地输出选课结果，同时也避免了人工处理时容易产生的错误。2系统需求分析2.1现系统概述基于SpringMvc的学生选课系统是一种现代化的教学技术，此系统已经越来越受到人们的重视。每个学校必不可少的就是学生选课系统，它的操作内容对于学校的领导者和管理者来说是至关重要的，所以学生选课系统是一个，能够为操作者提供充足完善的信息和方便快捷的查询手段的一个系统。现阶段Internet的发展使我们的教育趋于信息化与现代化，现在网上的信息管理，是我们教育部门里的一个热门问题。现在，老师、学生跟学校的之间的信息传递，只在网络上便可以实现，可以说是一指之间，是最为方便快速的一个途径。一直以来，人们都使用传统的方式，人工手动整理文件、档案等资料，这种管理方式存在着许多缺点，如：耗时久、查询速度慢、保密性差等。另外，时间一长，就会有很多的文件和数据的堆积，这对于查找、更新和维护都增添了不少的困难。此外，在保密性和查询更新等方面，都存在有一定的不足，各现有系统资料都是独立的，想关联到一起很麻烦。在以管理者为主体的方式中，信息的取舍取决于管理者对于信息的熟悉程度与个人意愿，对于需要者也不是绝对的公平，因此无法完全满足用户的需求。2.2可行性分析1.实用性:系统界面清晰，方便快捷，操作简单，对系统的配置要求不高，因此经济实惠，可行性高。该系统可以建立一个桥梁，实现学生、教师、学校三者之间的联系，在Internet上实现完成部分教务工作，提高工作效率，减少运作周期。2.技术性:随着计算机网络的发展，越来越多的组织机构将系统管理与计算机技术融合到一起，用以方便各方面技术的运营与管理。在这么发达的一个社会背景下，基于Windows和MySQL5.0,运用先进的HTML+AJAX+JQURY技术，基于SpringMVC的学生选课系统，将学生、老师、管理员巧妙地结合到一起，大大的提高了工作效率，降低了人员的成本。使先进的技术得以发光发热。2.3系统业务流程分析2.3.1组织机构及业务范围分析学生选课系统结构如图2-3所示。学生选课系统学生选课系统学生模块管理员模块学生信息教室信息维护信息退出教师模块选课相关情况课程信息教师信息选课相关情况图2-3学生选课系统结构图Figure2-3structurediagramofstudents'courseselectionsystem本系统主要大致包含三大模块，分别包括：学生管理模块、教师管理模块和管理员模块。其中这三个模块又何以细分出12个子模块，分别如下：学生信息：完成学生的登陆验证。进行增删改查等功能。教师信息：完成教师的登陆,可以添加选课,并审批选课申请。课程信息：添加课程及选课。学院信息：学院设施的管理。院系信息：查看每个学院的详细信息和就业情况。专业信息：登录查看专业课程、专业信息及选修情况。教室信息：显示学院各个教室的占用情况及位置。课表信息：显示课程分配信息。班级信息：显示班级内部班干部情况。成绩查询：显示学生各科成绩及绩点情况。教学计划管理：显示各位老师的教学计划。系统管理：对用户信息进行增删改查，以及对学校设施的管理。2.4需求陈述本系统具体有以下模块：个人信息：显示学生的个人资料。课程查询：显示课程编号、课程名称、课程学分及选课情况。已选课程：已选课程的开课时间，上课地点，上课老师等信息。管理功能：课程发布，修改，删除。学生，老师用户的添加删除。教师用户：教师可以查看个人信息，课程和选修自己课程的学生列表。学生用户：学生可以选修喜欢的课程，亦可以取消选择。公告：学校发布的信息公告及近期活动安排等。退出系统主要功能学生网上选课系统的主要功能为：数据添加、数据删除、数据更新、数据查询和统计。“数据更新”：主要有数据添加、数据删除、数据修改及修改之后查询显示等功能“数据添加”：此功能显示方便快捷的输入界面，通过按钮的单击事件输入数据添加到数据库中，将数据库中的数据更新便可显示。“数据删除”：此功能将用户不需要的数据从数据库中删除。“数据修改”：此功能需要获取用户的权限，有权限的用户可以将其指定的数据信息进行修改操作，同样，将数据库中的数据更新便可显示。“数据查询”：此功能获取用户权限，权限通过的用户可根据查询条件条件来查询所需信息。“统计”：此功能将统计出所有符合查询条件的数据信息。性能要求能够为操作者提供充足完善的信息和方便快捷的查询手段，需要系统响应速度快，计算的精准度高。系统的输入、输出输入：班级表、课程表、院系表、专业表、计划表、成绩表、教室表、学生表、教师表、管理员表输出：教师授课表、学生选课表2.5UseCase建模2.3.1定义活动者根据学生选课系统的需求可以确定3个活动者，即学生、老师和管理员，选修课程模块和添加用户模块。学生：登录自己系统，进行选课、取消已选课程、查询课程等操作。老师：授课、查看学生选修情况及学生信息、输入成绩。管理员：增加课程、修改课程、删除课程、添加学生账户、添加教师账户。2.3.2UseCase图根据系统需求分析，结合上节系统活动者的定义分析，得到学生请求服务模块的用例如下：结合活动者和用例得到学生请求服务模块的用例图如下图2-3-1所示。查询课程查询课程选择课程查询课程选择课程查询课程取消课程学生取消课程2-3-1学生选课UseCase图Figure2-3-1UseCasediagramofstudents'courseselection教师授课模块的用例图如下图2-3-所示。查看选修情况授课查看选修情况授课输入成绩教师输入成绩2-3-2教师授课UseCase图Figure2-3-2UseCasediagramofteachers'courseselection管理员模块的用例图如下图2-3-3所示。添加用户添加用户更新课程更新课程删除课程删除课程删除课程删除课程2-3-3管理员UseCase图Figure2-3-3UseCasediagramofusers'courseselection3系统总体设计3.1项目规划基于Windows操作系统和MySQL5.0数据库，使用JSP编程，建立一个B/S层结构的学生选课系统，，实现学生的选课功能、以及教师查询上课信息的需求。网上选课系统从功能上划分一共有3个主模块，主要实现老师授课信息管理、学生选课信息管理、课程编排信息管理，其中教师信息管理有老师姓名、教师编号、授课信息、选修情况；学生信息管理有学生姓名、学生编号和学生所选课程，以及课程所对应的教师；课程信息管理有课程名称、学分、上课地点、上课教师。管理员有权限去更改课程信息，用户的信息以及删除操作。身份权限验证：学生，老师，管理员三种身份（权限不同）用户管理：管理员可以添加各种权限的用户，修改，和删除用户课程管理：可以对发布的课程表进行增删改查的操作3.2设计目标建立一个学生网上选课系统，实现对课程的基本信息维护以及学生选课、教师上课信息。系统对学生角色提供个人信息管理、选课管理、管理学生本人已选课程。系统对教师提供查看自己所担任课程的课表和选该门课的学生信息。系统同时给管理员以下功能：查看所有专业、课程、学生、教师的信息并可以对它们进行管理（添加、编辑、删除）。提高信息处理的速度和准确性，能够及时、准确、有效的查询和修改选课情况。3.3数据库分析设计3.3.1数据库需求分析学生选课管理系统的要求是要准确快捷地管理学生的信息。学生隶属班级，学院；学生需要有课程，学分，成绩，而这些又都要靠教师或者管理人员来添加。由此总结出如下需求信息：用户分为管理员用户、教师用户和学生用户。一个学生有多门课，一门课对应多个学生。一个老师可以教授多门课程，一门课程可以有多个教师来授课。经过对上述系统功能的分析和需求总结，设计如下数据项：管理员信息：管理员ID、用户名、密码。学生信息：学生ID、姓名、登录密码、性别、班级、年龄、联系方式教师信息：教师ID、登录密码、姓名、性别、年龄、联系方式课程信息：课程ID、名称、上课地点、学分、上课教师教室信息：班级ID、名称专业信息：专业ID、专业名称、课程ID、院系ID院系信息：院系ID、院系名称、院系课程、院系专业班级信息：班级ID、班级名称3.3.2数据库概念结构设计由上面的数据项可以设计出能够满足用户需求的各种实体以及它们之间的关系，为后面的逻辑结构设计打下基础。这些实体包含各种具体信息，通过相互之间的作用形成数据的流动。本系统设计的实体有：学生实体、教师实体、课程实体、班级实体、。如图3-3-1所示为实体间关系E-R图如图3-3-2为学生信息E-R图如图3-3-3为管理员信息E-R图如图3-3-4为教师信息E-R图如图3-3-5为课程信息E-R图学生学生院系NNN1NN教师班级课程图3-3-1实体间关系E-R图Figure3-3-1e-rdiagramofinter-entityrelationship学号学号姓名性别年龄学院联系方式学生班级图3-2-2学生信息E-R图Figure3-2-2studentinformatione-rdiagram系统用户系统用户用户名密码用户名密码图3-3-3管理员信息E-R图Figure3-3-3administratorinformatione-rdiagram教工号教工号姓名性别年龄联系方式教师密码图3-3-4教师信息E-R图Figure3-3-4e-rdiagramofteacherinformation课程号课程号课程名上课时间学分时间上课地点课程上课教师所在系图3-3-5课程信息实体E-R图Figure3-5isthee-rdiagramofcourseinformationentity3.3.3数据库表的设计和创建根据E-R图分析，系统数据库中各个表的设计结果如下：用户表admin（如图3-1所示）记录管理员的用户名和密码。管理员可以添加各种权限的用户，修改，和删除用户。图3-1管理员表学生表student（如图3-2所示），用来记录学生信息。此记录的信息会详细地显示在学生登录后的页面上。此信息不允许学生自己更新。图3-2学生信息表教师表teacher（如图3-3所示）用来记录教师信息。此记录的信息会详细地显示在学教师登录后的页面上。图3-3教师信息表课程表course（如图3-4所示）用来记录课程信息表图3-4课程信息表选课表courses（如图3-5所示）记录学生选课信息图3-5选课信息表班级表class（如图3-6所示）记录班级信息图3-6班级信息表3.4系统模块设计本系统包括3个管理模块用户管理模块、课程管理模块、选课管理模块，用户模块分为3类用户，管理员、学生、老师。管理员实现课程管理、学生、教师管理。本系统主要实现学生管理模块，而学生管理模块、课程管理模块、选课管理模块的与管理员和学生相关的主要模块。如图3-4-1和图3-4-2所表示是从管理员、学生用户、教师用户的角度给出的模块功能。管理员登录管理员登录系统管理用户管理课程管理选课管理学生管理用户管理教师管理删除添加添加修改密码分配课程修改课程添加课程删除课程教师登录图3-4-1管理员与教师功能模块学生登录学生登录用户管理个人信息查询个人密码修改课程添加选修课程删除选课课程信息其他管理查看头像退出系统我的选课查看选课信息图3-4-2学生用户功能模块图4系统详细设计和实现4.1主界面设计页面使用框架。本系统界面采用框架结构，把页头、左侧导航栏、右侧内容区分别放在不同的框架里面。这样便于用户在左侧导航栏选择不同的功能菜单，在右侧内容区刷新内容，这样做使得页面结构清晰，便于用户操作。系统的首页面index.html在页面左边显示出三种身份登录的链接。便于不同用户清晰的看清登录的位置。不同身份的用户登录提交的用户名和密码提交到不同身份的数据库认证页面中。如学生用户登录提交到login.html。当验证通过时，跳到学生用户的页面。并把信息保存进Jquery，以供其他页面判断用户是否已经登录。系统首页如图4-1所示。图4-1系统首页面4.2界面头尾设计登录页面采用的是HTML页面，保证页面单登录，学生登录、管理员登录、教师登录可选性登录。4.3登录界面登录界面相对简单，对于不同身份的用户拥有不同的操作权限，因此登录页面显示是不同的。当输入用户名密码成功之后，系统校验其身份是否正确，继而提交到不同的认证页面。当验证通过时，跳到用户使用页面。下图以学生身份登录为例，教师和管理员身份登录页面类似。图4-2登录页面4.4学生用户界面设计学生用户功能模块由三部分组成：个人信息、已选课程、课程查询及退出。个人信息：显示出用户的所有个人信息已选课程：提供学生用户查看已经选择的选课信息，列表内容有课程编号、课程名称、课程老师、课程课时、上课教室和取消选课，学生可以取消已选课程。课程查询：学生查看所有课程并可以查看课程信息、课程编号、课程名称、课程学分、并提供选择课程的功能。其他功能：退出系统学生用户界面设计用框架实现。页面头放在上框架，功能导航放在左框架，具体功能放在右框架。学生功能设计所有页面都放在student的HTML中，所以以下所提到的页面均在student.HTML中。设置学生界面框架结构主页student.html。其中左框架中的功能导航页面为student.html，右框架中的功能页面为student.html。系统用Jquery保存用户的学号。图4-3学生用户界面其中框架的代码为：<html>

<head>

<metacharset="UTF-8">

<title>学生选课信息管理系统-个人信息</title>

<linkhref="css/style02.css"type="text/css"rel="stylesheet"/>

<scripttype="text/javascript"src="js/jquery.js"></script>

<scripttype="text/javascript"src="js/Student.js"></script>

</head>

<body>

<divclass="top">

<divclass="title">

<p>学生选课信息管理系统</p>

</div>

</div>

<divclass="main">

<divclass="main_left">

<divclass="main_left_class00"><imgsrc=img/touxiang.png></div>

<divclass="main_left_class01"><ahref="javascript:void(0);"id="yxkc"onclick="functio()">已选课程</a></div>

<divclass="main_left_class02"><ahref="javascript:void(0);"id="kccx"onclick="functio()">课程查询</a></div>

<divclass="main_left_class03"><ahref="javascript:void(0);"id="xjxx"onclick="functio()">学生信息</a></div>

<divclass="main_left_class04"><ahref="javascript:void(0);"id="zx"onclick="zhuxiao()">注销</a></div>

</div>

<divclass="main_right">

<divclass="info1">

<p>亲爱的<spanid="infoP"></span>同学，欢迎来到选课系统</p>

</div>

<divclass="box">

<divclass="function">

<p>[通知]选课系统已开放</p>

</div>

<divclass="form">

<divclass="form_1">

<!--个人信息-->

<tableclass="info"style="display:none"id="grxx">

<tr>

<td></td>

</tr>

<tr>

<td></td>

<td><inputclass="text"id="stuName"type="text"value=""readonly="true"></td>

<td></td>

<td></td>

<td></td>

<tdrowspan="2"><imgsrc="/img/touxiang.png"/></td>

</tr>

<tr>

<td></td>

<td><inputclass="text"id="stuid"type="text"value=""readonly="true"></td>

</tr>

<tr>

<td></td>

<td><inputclass="text"id="stusex"type="text"value=""readonly="true"></td>

</tr>

<tr>

<td></td>

<td><inputclass="text"id="stuold"type="text"value=""readonly="true"></td>

</tr>

<tr>

<td></td>

<td><inputclass="text"id="stutel"type="text"value=""readonly="true"></td>

</tr>

</table>

<!--已选课程-->

<tableclass="table"style="display:none"id="yxkctable">

<tr>

<td></td>

</tr>

<tr>

<td>课程编号</td>

<td>课程名称</td>

<td>课程老师</td>

<td>课程课时</td>

<td>上课教室</td>

<td>取消选课</td>

</tr>

</table>

<!--选择课程-->

<tableclass="info2"id="info2"style="display:none">

<tr>

<td></td>

</tr>

<trclass="kclb">

<td>课程编号</td>

<td>课程名称</td>

<td>课程学分</td>

<td>选课</td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td><inputclass="sure"type="button"value="确定"onclick="addCon()"></td>

<td><inputclass="off"type="reset"value="取消"></td>

</table>

</div>

</div>

</div>

</div>

</div>

</body>

</html>4.4.1个人信息模块功能模块设计个人信息模块包括个人资料和修改密码两部分。个人资料显示学生的所有信息，包括学号、姓名、学院、系别、班级。如图4-4-1个人资料显示页面图4-4-1个人资料显示页面4.4.2已选课程模块功能设计网上平台由两部分组成：查看已选择课程和删除已选择课程查看已选择课程：学生用户登录查看所有已选择科目的信息删除已选择课程：学生用户选课后可以通过点击取消来删除课程选课信息：student.html我的课表：student.html如图4-6已选课程页面图4-6已选课程页面图4-6中学生用户登录查看所有已选择科目的信息。学生用户选课后可以通过点击取消来删除已选课程。代码如下：functiondeleteCon(){

$('#yxkctable').on('click','.cancle',function(){

varcouId=$(this).parent().parent().children().eq(0).text();

$.ajax({

url:'/student/deleteCou',

data:{

stuid:stuid,

couid:couId

},

success:function(res){

alert(res.msg);

window.location.reload();

}

});

})

};4.4.4其他功能模块设计用户退出系统时，用户点退出时，系统调用Jquery实现把页面跳转至Login.html。代码如下：functionzhuxiao(){

window.location.replace('Login.html');

}4.4.5课程查询模块设计课程查询模块是查询所有科目信息用户可以勾选自己需要选择的课程，同样也可以进行多选。代码如下：functionaddCon(){

varcheckID=newArray();

$("input[name='choiceCou']:checked").each(function(i,c){

checkID.push($(this).parent().parent().children().eq(0).text());

});

$.ajax({

url:'/student/addCou',

traditional:true,

data:{

checkID:checkID,

stuid:stuid

},

success:function(res){

if(res.code==400){

alert(res.msg);

window.location.reload();

}

}

});

}4.5教师用户界面设计管理员用户功能模块由四部分组成：选课管理、学生信息、信息查询和系统公告以及退出系统选课管理：对课程进行管理。对课程信息进行增删改查的操作。学生信息：查看想要了解的学生的个人资料信息查询：对学号、姓名、班级、课程号、课程名、上课教室进行模糊查询。系统公告：教师对公告进行管理，可在后台编辑需要上传的公告信息。其他功能：退出系统教师用户界面都同样也是用框架实现，教师功能设计所有页面都放在teaInfo.html中，所以以下所提到的页面均在teaInfo.html中。设置教师界面框架结构主页teaInfo.html。其中左框架中的功能导航页面为下图上半部分所显示的。右框架中的功能页面及公告等内容为下半部分。教师页面代码如下：<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>学生选课信息管理系统-后台管理</title>

<linkhref="css/style02.css"type="text/css"rel="stylesheet"/>

<scripttype="text/javascript"src="js/jquery.js"></script>

<scripttype="text/javascript"src="js/Teacher.js"></script>

</head>

<body>

<divclass="top">

<divclass="title"><p>学生选课信息管理系统</p></div>

</div>

<divclass="main">

<divclass="main_left">

<divclass="main_left_class00"><imgsrc=img/touxiang.png></div>

<divclass="main_left_class01"><ahref="javascript:void(0);"id="kcgl"onclick="readcy()">选课管理</a></div>

<divclass="main_left_class02"><ahref="javascript:void(0);"id="xsxx"onclick="readcy()">学生信息</a></div>

<divclass="main_left_class03"><ahref="javascript:void(0);"id="xxcx"onclick="readcy()">信息查询</a></div>

<divclass="main_left_class04"><ahref="javascript:void(0);"id="zx"onclick="zhuxiao()">注销</a></div>

</div>

<divclass="main_right">

<divclass="info1">

<p>亲爱的<spanid="teanames"></span>老师，欢迎进入选课系统</p>

</div>

<divclass="box">

<divclass="function">

<p>[通知]选课系统已开放</p>

</div>

<divclass="form">

<tableclass="news">

<tr>

<td><h2>关于本学期校级任选课相关事宜安排的通知</h2></td>

</tr>

<tr>

<td>各学院及相关单位:</td>

</tr>

<tr>

<td>根据学校教学安排，本学期全校任选课定于6月20日（星期五）正式开课，选课工作将从6月16日开始。现将有关事项通知如下：</td>

</tr>

<tr>

<td>一、选课时间：6月16日6月20日</td>

</tr>

<tr>

<td>二、学生登录选课信息管理系统后进入学生选课进行选课。学生选课前请认真阅读选课公告，再进行“网上选课”。</td>

</tr>

<tr>

<td>三、教师可登陆选课信息管理系统后进入选课管理增删课程，6月15日14:00之后各位教师及学生登录教务处网站查询自己申报的课程是否停开。</td>

</tr>

<tr>

<td>四、选课退课均须在选课时间内完成，选课结束后不再进行补退选，请学生注意选课时间。</td>

</tr>

<tr>

<td>五、请各学院通知并组织学生进行选课，同时请各学院及相关单位通知任课教师按时上课。教务处将组织相关人员对上课情况进行不定期的检查。</td>

</tr>

<tr>

<tdalign="right">2019-06-10</td>

</tr>

</table>

<tableid="Txsxx"style="display:none">

<tr>

<td></td>

</tr>

<tr>

<td>学生编号</td>

<td>学生名称</td>

<td>登录密码</td>

<td>所在班级</td>

<td>学生性别</td>

<td>联系方式</td>

</tr>

</table>

<tableclass="kcgl"style="display:none">

<tr>

<td></td>

</tr>

<tr>

<td>课程编号</td>

<td>课程名称</td>

<td>课程课时</td>

<td>修改课程</td>

<td>删除课程</td>

</tr>

</table>

<divclass="form_1">

<tableclass="form_1_table"style="display:none">

<tr>

<td><inputclass="text"type="text"name="queryKey"id="queryKey"placeholder="请输入查询项"/></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>

<selectname="type"id="selectType">

<optionvalue="1">学号</option>

<optionvalue="2">姓名</option>

<optionvalue="3">班级</option>

<optionvalue="4">课程号</option>

<optionvalue="5">课程名</option>

<optionvalue="6">上课教室</option>

</select>

</td>

<td><inputclass="btn"type="button"value="查询"onclick="selectStuAndCouAndRoom()"/></td>

</tr>

</table>

<tableclass="xxxxx"style="display:none">

<tr>

<td>学号</td>

<td>学生姓名</td>

<td>学生班级</td>

<td>课程号</td>

<td>课程名</td>

<td>上课教室</td>

</tr>

</table>

<tableclass="updateCou"style="display:none">

<tr>

<td></td>

</tr>

<tr>

<td>课程编号</td>

<td><inputclass="text"type="text"id="CNo"name="CNo"value=""readonly="true"/></td>

</tr>

<tr>

<td>课程名称</td>

<td><inputclass="text"type="text"id="Cname"name="Cname"value=""/></td>

</tr>

<tr>

<td>课程学分</td>

<td><inputclass="text"type="text"id="Ccredit"name="Ccredit"value=""/></td>

</tr>

<tr>

<td></td>

<td>

<inputclass="Coubtn"type="button"value="确认修改"/>

<inputclass="btn"type="reset"value="取消修改"/></td>

</tr>

</table>

<tableclass="updateStu"style="display:none">

<tr>

<td></td>

</tr>

<tr>

<td>学生学号</td>

<td><inputclass="text"type="text"id="SNo"value=""readonly="true"/></td>

</tr>

<tr>

<td>学生姓名</td>

<td><inputclass="text"type="text"id="Sname"value=""/></td>

</tr>

<tr>

<td>学生密码</td>

<td><inputclass="text"type="text"id="Spassword"value=""/></td>

</tr>

<tr>

<td>学生班级</td>

<td><inputclass="text"type="text"id="Sclass"value=""readonly="true"/></td>

</tr>

<tr>

<td>学生性别</td>

<td><inputclass="text"type="text"id="Ssex"value=""/></td>

</tr>

<tr>

<td>联系方式</td>

<td><inputclass="text"type="text"id="Stel"value=""/></td>

</tr>

<tr>

<td></td>

<td><inputclass="updateStuBtn"type="button"value="确认修改"onclick="updateStuX()"/>

<inputclass="btn"type="reset"value="取消修改"/></td>

</tr>

</table>

</div>

</div>

</div>

</div>

</div>

</body>

</html>4.5.1选课管理模块功能设计对课程进行管理。根据需要修改、删除课程信息。修改、删除课程的相同页面teaInfo.html图4-10选课管理（修改或删除）上图点修改时可以修改该课程，代码如下：functionupdateCon(){

varcouId;

varcouName;

varcourseTime;

$('.form_1_table').hide();

$('.xxxxx').hide();

$('.news').hide();

$('#Txsxx').hide();

$('.kcgl').hide();

$('.updateCou').show();

$('.kcgl').on('click','.upadateBtn',function(){

couId=$(this).parent().parent().children().eq(0).text();

couName=$(this).parent().parent().children().eq(1).text();

courseTime=$(this).parent().parent().children().eq(2).text();

$('#CNo').val(couId);

$('#Cname').val(couName);

$('#Ccredit').val(courseTime);

});

$('.Coubtn').click(function(){

varname=$('#Cname').val();

varcourestime=$('#Ccredit').val();

$.ajax({

url:'/course/updateCon',

data:{

conid:couId,

na