课程网站的设计与实现论文

1、目 录摘 要IABSTRACTII第1章 前 言11.1开发背景及意义11.2课题分析11.3研究目标2第2章 开发环境选择与简介32.1 开发环境及工具32.2 HTML5+CSS3.032.3 JSP技术42.4 数据库4第3章 需求分析53.1 功能需求分析53.1.1 管理端功能需求分析53.1.2 普通用户端功能需求分析53.2 性能需求分析6第4章 数据库设计74.1 数据表74.2数据流图84.3 概念设计和E-R图9第5章 系统详细设计115.1 系统结构图115.2 管理端设计11登录11消息管理12用户管理14资料上传15资料维护175.3普通用户18登录、注册及找回密码1

2、8意见反馈20浏览、查看资料22下载资料22在线观看视频23第6章 总结与展望25参考文献26致谢27精品课程网站的设计与实现摘 要随着我国对教育越来越重视，远程教育的建设也愈发良好，为了适应当前教育环境的发展，一些公司或者教育机构先后开发精品课程。而精品课程网站的建设也应用而生，并且有着很大优越性和重要性。它提升学生和老师的互动性，加强学生和老师的沟通，给广大师生提供了良好的资源共享和学习交流的环境。精品课程网站的设计中使用的前台技术有HTML、CSS、Javascript、JQuery、Ajax、JSP，进行后台开发的技术有SpringMVC、Spring、Hibernate、Freema

3、rker，使用了MySQL数据库，其中开发环境是JDK1.8及MyEclipse 2015，网站的设计分为管理员和普通用户两大模块，实现了用户管理、资源的上传和下载及在线学习等功能。论文首先对了精品课程网站做了全面的综述，并对开发环境做了简要的介绍，然后对网站进行了功能需求分析和性能需求分析，紧接着在对网站的数据库设计进行详细分析，之后对管理端和普通用户端的具体设计作了一个简单的阐述，并对网站的各大模块进行了测试，最后对精品课程网站进行了总结和展望。关键词： 精品课程；HTML+CSS；JSP；MySQLABSTRACTWith the rapid development of China&#

4、39;s modern distance education, major universities, a number of distance education units and the company has developed a number of adaptation of distance education courses. High Quality Courses Website construction work in teaching school, but also plays a key role. It improves the school and the st

5、udents interaction, but also to strengthen the communication between students and teachers, but also to promote the exchange and discussion among students, the majority of teachers and students to provide a learning platform for the exchange and sharing of resources.High Quality Courses Website rece

6、ption technology used in the design have HTML, CSS, Javascript, JQuery, Ajax, JSP, has developed technology for background SpringMVC, Spring, Hibernate, Freemarker, using a MySQL database, which is the development environment and JDK1.8 MyEclipse 2015, the site design is divided into two modules adm

7、inistrators and ordinary users to achieve a user management, resource uploads and downloads and online learning and other functions.Firstly, the quality of High Quality Courses website to do a comprehensive review, and development environment to do a brief introduction, and then on the site function

8、al requirements analysis and performance needs analysis, followed by the design of the database to conduct a detailed analysis of the site, and then to management side and the specific design of the ordinary client made a simple exposition, and the site of major module was tested last High Quality C

9、ourses Website are summarized and discussed.Keywords: High Quality Courses; HTML+CSS; JSP; MySQL第1章 前 言 1.1开发背景及意义精品课程在所有的课程中是一流的示范课程，它的教师队伍、教学内容、教学方法、教材、教学管理等方面都是无与伦比的1。它不仅指引着广大高校进一步巩固着自己在教学工作方面的中心地位，在切实加强高校的教学建设、提高学校教学质量的基础上改善、加强各大高校的信息化建设。在现代化教育中利用信息技术的手段将学习资源在网上共享，使全国的其他高校在授课同类课程时可以借鉴或者使用网上共享的优质

10、的教学资源，更大范围的提高广大学校的教学质量和人才培养质量。精品课程的建设是学校课程教学任务中非常重要的一项内容，它帮助学校师生解决许多教育教学上的问题。在以往的课堂教育教学模式中，教师往往是按照自己对课程的理解来对整个班级的学生进行教育教学活动，但是这种教学模式不能友好地实现“因材施教”这一目的。通过精品课程的教学方式不仅可以自主地依靠教学软件的指导进行学习，并且可以自我评价和反馈信息。精品课程网站的设计与实现就是配合了这一流行高效的教学方式而设计的。1.2课题分析精品课程的建设是“高等学校教学质量与教学改革工程”的一项重要内容和先期启动的四个项目之一。精品课程是教育部深化教学改革的成果，是

11、以教育信息化推动教育现代化的一项重要举措2。那么精品课程网站的设计与实现就有着不可替代的作用，极大地提高了精品课程建设的进程，最关键的是，它可以提高学生们的学习动力，帮助学生们解决学习过程中一些问题。1.3研究目标精品课程网站在其表现形式就可以知道它充分运用了多媒体技术和web技术建立一个全新的教学模式，可实现在线交流、资源的下载和共享3。首先它充分运用数据库系统概论网络课程资源，在网络社会高度发展的今天，网络课程资源越来越丰富，辅助教学的作用地位越来越突出。目前课程所有教学活动均可在网上进行，大大提高了教学效率，也便于优质教学资源的积累与共享。它可以有效激发学生的自主学习意识，培养学生创新精

12、神，在精品课程中，加大了教育教学过程中使用信息技术的力度，为学生主动自主学习塑造了环境。面对知识的迅猛增长和加速更新，利用网络充实自己必将成为今后人们谋求发展的途径之一，自主学习能力也越来越体现在网络学习之中，促进高校以培养学生自主学习为目的，对网络精品课程进行设计，可以作为学校教育中以课堂教学为主培养学生自主学习能力的有益补充，同时也对学生的创新能力起到不容忽略的作用4。第2章 开发环境选择与简介2.1 开发环境及工具开发环境：Windows 8.1，JDK1.8开发工具：MySQL数据库，MyEclipse 20152.2 HTML5+CSS3.0HTML5是Web开发世界的一次重大的改变

13、， 是下一代 Web 语言，它不仅仅是一种文本标记语言，更为下一代 Web 提供了全新功能，并将引领下一代 Web 实现类似桌面的应用体验5。HTML5 主要新功能：l 本地音频视频播放l 动画l 地理信息l 硬件加速l 本地运行（即使在 Internet 连接中断之后）l 本地存储l 从桌面拖放文件到浏览器上传l 语义化标记CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。 在网页设计时时可以采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对<style type=&q

14、uot;text/css"></style>中做一些简单的修改，就可以改变同一页面的不同部分，也可以改变页数不同的网页的外观和格式,而CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化6。2.3 JSP技术JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp), 用JSP开发的Web应用是跨平

15、台的，即能在Linux下运行，也能在其他操作系统上运行,JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑,网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑7。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。 Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户,插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能,SP与Java Servlet一样，是在

16、服务器端执行的，通常返回该客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览8。 2.4 数据库MySQL是一种开放源代码的关系型数据库管理系统（RDBMS），MySQL数据库系统使用最常用的数据库管理语言,结构化查询语言（SQL）进行数据库管理。由于MySQL是开放源代码的，因此任何人都可以在General Public License的许可下下载并根据个性化的需要对其进行修改9。MySQL因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下，MySQL是管理内容最好的选择。MySQL，虽然功能未必很强大，但因为它的开源、广泛传播，导致很多人都了解到这个数

17、据库。在本次毕业设计中MySQL可以很好地与MyEclipse结合，有利于网页的设计与实现10。第3章 需求分析需求分析阶段主要任务是在了解了用户的需求之后，对系统应该具备什么样的功能进行详细的分析11。首先对用户的功能需求进行调研并做详细分析，准确理解用户的要求后，再将用户非形式的需求陈述转化为完整的形式化的需求定义，本文在对学生学习需求和老师的建议的基础上，定义以下的需求3.1 功能需求分析功能需求定义一个软件系统或组件的功能，也是一个系统需提供的功能及服务。功能可以用一组输入、行为及输出的组合来表示。功能需求是软件工程中非常重要的一个环节，功能的大小及多少都是在这一环节决定的，功能需求分

18、析的好坏也直接决定了软件设计过程中是否顺利，所以做好系统的功能需求分析是有必要的。接下来从管理端和普通用户端的两方面需求分析说起。3.1.1 管理端功能需求分析（1） 登录：需要一些管理员账号及密码才能登录，一般是给教师登录，与普通用户不同。（2） 消息管理：在管理端可以与学生进行沟通或留言，那么管理员可以查看这些消息或者删除消息。（3） 资料上传：在网站设计中，要在普通用户端显示一些学习资料时，那就需要教师端对课件，视频等资料进行上传。（4） 资料维护：也即教师端对上传的资料景进行更新，删除，查找等操作。3.1.2 普通用户端功能需求分析（1） 登录、注册、及找回密码：此处的关键技术是找回密

19、码功能，当用户忘记密码时，可以在注册时用的邮箱找回密码，极大满足用户需求。（2） 意见反馈：如果用户有什么意见或者建议，可以通过此处的功能向管理端进行反馈。（3） 资料的浏览、查看、下载：学习过程中，用户可以通过浏览资料、查看资料、下载资料来提高学习成绩。（4） 在线观看视频：用户查找到需要学习的视频时可以在线观看学习。3.2 性能需求分析安全性：首先用户登录时使用MD5加密保护，确保账号的安全。找回密码功能增加了网页与用户的交互，同时提高了用户体验的能力。实时性：网站中信息交互以及学习资料的上传、管理、查询、下载等都具有事实性，极大地提高了学生学习积极性。高效性：精品课程网站的设计与实现中的

20、密码找回、资料上传、信息管理等模块的设计都具有高效性。第4章 数据库设计4.1 数据表数据表是数据库中一个非常重要的对象，是其他对象的基础。根据信息的分类情况，一个数据库中可能包含若干个数据表。有数据表，关键字、主键、索引等也就无从谈起。在数据库画板中可以显示数据库中的所有数据表，创建数据表，修改表的定义等数据表是数据库中一个非常重要的对象，是其他对象的基础。下面共有四个表格，它们分别是课程信息表，反馈信息表，资料信息表和用户信息表。课程表信息相对比较简单，它主要指明某些课程的名称或者可以说是课程类型，它包括了ID和名称两类，如表4-1所示：表4-1：课程信息表序号字段名称字段名字段类型说明1

21、课程IDidint主键、非空2课程名称namevarchar反馈信息表主要是指普通用户端和管理端交互的信息，它包括了反馈信息ID,信息内容，信息状态以及处理信息时间，其中信息状态是指该信息是否被处理。如表4-2所示：表4-2：反馈信息表序号字段名称字段名字段类型说明1反馈信息IDidint主键、非空2信息内容contentvarchar3信息状态statusvarchar4处理信息的时间timedatetime学习资料信息表中主要指明了该资料的信息状态等相关数据，它包括了ID，资料类型，资料描述，资料路径，资料上传时间，资料隶属课程ID等。如下表4-3所示：表4-3：资料信息表序号字段名称字段

22、名字段类型说明1资料IDidint主键、非空2资料类型categoryvarchar3资料描述descriptionvarchar4资料路径pathvarchar5资料上传时间uploadtimedatetime6资料隶属课程IDcourseIdint用户信息表中主要指明当前使用者注册的相关信息，如表4-4所示：表4-4：用户信息表序号字段名称字段名字段类型说明1用户IDidint主键、非空2激活activedbit非空3邮箱emailvarchar4最近修改密码时间lastModifyPassworddatetime5密码passwordvarchar6注册时间regtimedatetime

23、7用户名usernamevarchar8激活状态enablebit非空4.2数据流图接下来的是网站中涉及到的数据流图，主要是普通用户和管理者登陆以后的不同的操作。图4-1和图4-2分别是系统一级数据图和系统二级数据图。图4-1：系统一级数据图图4-2：系统二级数据图4.3 概念设计和E-R图E-R图（实体-关系图）提供了表示实体类型、属性和联系的方法。用矩形表示实体类型，矩形框内写明实体名。用椭圆型表示属性，并用无向边与其相应实体连接起来。用菱形表示联系，菱形框内写明联系名，并用无向边与其有关实体连接本系统采用E-R图的方法进行数据库概念结构设计。系统E-R图如图4-3所示：图4-3：E-R图

24、第5章 系统详细设计5.1 系统结构图在本章节中，系统结构设计图主要是精品课程网站的设计与实现过程主要是对管理端功能和用户端的详细功能以图表的格式展示出来，具体的系统结构图如图5-1所示：图5-1：系统结构图5.2 管理端设计登录管理端的登录模块比较简单，并使用了MD5加密密码，确保了账户的安全性。在管理端的登录比较简单，在打开浏览器之后，在地址框里输入：IP(本地IP)/qc/admin/toLoginUI，然后输入管理员的账号和密码即可进入管理端，如图5-1所示。图5-1：管理端的登录界面用户登录主要通过UserController的login方法实现，具体代码如下：public int

25、login(User user) int status = userService.getUserStatus(user);if (status = 1) User=userService.getUserByusername(user.getUsername();session.setAttribute("user", user);return status;其中参数user代表当前要登录的用户。在login的方法体里面又调用userService的getUserStatus方法，此方法返回用户的状态，返回0代表用户名和密码信息不正确；1代表用户名和密码信息正确，并且账号已

26、经激活且未被禁用；2代表用户名和密码信息正确，账号尚未激活或者被禁用消息管理在管理端可以与学生进行沟通或留言，那么管理员可以查看这些消息或者删除消息。在消息管理中主要是对普通用户端反馈的信息进行查看，在网页中会显示反馈的信息的时间、状态及操作，具体设计如图6-2所示，在操作中可以查看消息和删除消息，界面设计如图5-3所示：图5-2：用户反馈信息汇总图5-3：信息详细（1）建议模块主要通过MessageController的suggest方法实现，代码如下：public boolean suggest(Message message)message.setStatus("未读"

27、;);message.setTime(new Date();messageService.save(message);return true;参数message代表当前要存储的用户建议。（2）更改消息的状态通过MessageController的updateStatus方法实现，代码如下：public boolean updateStatus(Integer id)Message m=messageService.getById(id);m.setStatus("已读");messageService.update(m);return true;参数id为要更新消息的id号

28、。（3）删除消息通过MessageController的deleteById方法实现，代码如下：public boolean deleteById(Integer id)messageService.deleteById(id);return true;参数id为要删除的消息id号。（4）获取消息列表通过messageService的getByPageNum方法实现，代码如下：public List<Message> getByPageNum(int currentPageNum) String hql="from Message m order by m.time de

29、sc"return findByPageNum(hql,currentPageNum);用户管理用户管理模块中主要是查找用户，以及对用户的权限和状态进行管理，在用户管理网页设计中，主要对用户账户的查找及对用户的用户状态的改变。网页中会显示用户注册时的用户名、邮箱、注册时间、用户状态及可执行锁定操作的管理等功能。具体测试结果如下图5-4所示：图5-4：用户管理（1）查找用户功能通过UserController的searchUserByUsername方法实现，具体代码如下：public String searchUserByUsername(PathVariable("key

30、word")String username) List<User> userList=userService.searchByUsername(username);request.setAttribute("userList",userList);return "admin/searchUser"（2）禁用和解除禁用的功能主要通过UserControllerchangeUserStatus方法实现，具体代码如下：public String changeUserStatus(PathVariable("userId"

31、;)Integer userId) User user=userService.getById(userId);user.setEnable(!user.isEnable();userService.update(user);return "redirect:/admin/loginSuccess/toUserManageUI/1"参数userId为用户的id号。资料上传在网站设计中，要在普通用户端显示一些学习资料时，那就需要教师端对课件，视频等资料进行上传。在资料上传模块中，首先是对上传文件的具体描述，然后是文件所属的课程类别，接下来是资料所属类别，自己后就可以选择要上传

32、的文件，最后提交即可，如图5-5所示：图5-5：资料上传管理员上传资料的功能主要通过ResourceController的addResource方法实现，具体代码如下：public String addResource(Resource resource, Integer courseId,MultipartFile uploadFile) Course course = courseService.getById(courseId);resource.setCourse(course);resource.setUploadTime(new Date();String subfix = Fil

33、eUtil.getSubfix(uploadFile);String filename = FileUtil.generateFilename(subfix);String path = "upload/" + filename;String filepath = request.getServletContext().getRealPath("/upload")+ "/" + filename;参数resource为要上传的资料，courseId为资料所属的课程号，uploadFile为上传的资料本身。资料维护教师端对上传的资料景进

34、行更新，删除，查找等操作。在资料维护模块中，它会显示数据库中的资料信息，它包括了对信息的描述、所属课程、资料所属类别、上传时间以及可进行删除和修改资料信息的操作，具体设计结果如图6-6所示：图6-6资料维护（1）资料修改的功能主要通过ResourceController的update方法实现，具体代码如下：public String update(String description, Integer courseId, Integer rid) Resource old = resourceService.getById(rid);Course course = courseService.

35、getById(courseId);old.setCourse(course);old.setUploadTime(new Date();old.setDescription(description);resourceService.update(old);return "redirect:/admin/loginSuccess/toFileEditUI/1"参数description为资料的描述信息，courseId为资料所属的课程号，rid为要更新资料的id号。（2）资料删除的功能主要通过ResourceController的 deleteById方法实现，具体代码如下

36、：public boolean deleteById(Integer resourceId) Resource r=resourceService.getById(resourceId);StringbasePath=request.getServletContext().getRealPath("/");String path=basePath+"/"+r.getPath();File file=new File(path);file.delete();resourceService.delete(r);return true;参数resourceId

37、为要删除资料的id号。5.3普通用户登录、注册及找回密码普通用户端的登录功能与管理端一样，想利用精品课程网站进行学习的用户可以注册该网站，需要填写用户名、邮箱、密码等相关信息，此处的用户名不能重用，也即不能重名。邮箱的功能方便以后激活账户和找回密码。注册功能如下图6-7所示，激活用户账户的设计如下图6-8所示，找回密码的测试和激活用户时的操作及测试大同小异，此处不再附图。图5-7：用户注册网站图5-8：精课网新用户账号激活（1）注册功能通过UserController的register方法实现，具体代码如下：public String register(User user) Date d =

38、new Date();user.setRegtime(d);user.setLastModifyPassword(d);user.setEnable(true);String serverIP = request.getServerName();Map<String, Object> dataMap = new HashMap<String, Object>();dataMap.put("serverIP", serverIP);dataMap.put("username", user.getUsername();（2）找回密码功

39、能通过UserController的resetPassword方法实现，具体代码如下：public String resetPassword(Integer userId, String hpassword) User user = userService.getById(userId);user.setPassword(hpassword);userService.update(user);User suser = (User) session.getAttribute("user");if (null != suser) session.removeAttribute(

40、"user");return "user/login"参数userId为要找回密码用户的用户id号，password为新密码。（3）发送邮件的功能通过MailService的sendHtmlTextWithTemplate方法实现，具体代码如下：public boolean sendHtmlTextWithTemplate(String templateName,Map<String, Object> dataMap, String receiver) boolean sendSuccess = false;String htmlText =

41、 ""Template template = null;MimeMessage msg = this.mailSender.createMimeMessage();MimeMessageHelper helper = null;helper.setSubject(this.senderInfo.getEmailSubject();/ 参数templateName为找回密码网页模板的文件名，dataMap为模板中要填充的数据，receiver为收件人地址。意见反馈 用户有什么意见或者建议，可以通过此处的功能向管理端进行反馈。意见反馈模块当中，主要是用户如有什么意见或建议可以在

42、“意见反馈”模块中填写，具体测试结果如下图5-9所示，点击“提交”之后，在管理端的“信息管理”模块中就会显示出未读的消息。操作成功后就会有如图5-10的提示。图5-9：问题反馈图5-10：反馈成功意见反馈功能通过MessageController的suggest方法实现，具体代码如下：public boolean suggest(Message message)message.setStatus("未读");message.setTime(new Date();messageService.save(message);return true;参数message为要保存的消息

43、。浏览、查看资料 学习过程中，用户可以通过浏览资料、查看资料、下载资料来提高学习成绩。这一模块的具体实现过程如下所示：（1）查看资料主要通过ResourceController的toResourceUI方法实现，具体代码如下：public String toResourceUI(PathVariable("courseName")String courseName,PathVariable("pageNum")Integer pageNum)long totalPageNum=resourceService.getTotalPageNumByCourse

44、Name(courseName);if(totalPageNum>0)List<Resource> resourceList=resourceService.getByCourseName(courseName,pageNum);参数courseName为课程名称，pageNum为页码。（2）查找资料的具体实现代码如下：public List<Resource> searchByKeyword(String keyword) String hql="from Resource r where r.description like :keyword or

45、 like :keyword order by r.uploadTime desc"Map<String,Object> dataMap=new HashMap<String,Object>();dataMap.put("keyword","%"+keyword+"%");return findByHQL(hql, dataMap);下载资料在用户端的资料下载功能非常简单，它主要通过将资料的路径赋值给a标签的href属性，当用户点击时就可以开始下载。下载资料测试结果如下图5-

46、11所示，选择项下载的文件，在“操作”栏中会有下载按钮，点击后就会下载选中的资料，作者测试了一下，结果如下图5-12所示：图5-11：下载资料图5-12：下载成功在线观看视频用户查找到需要学习的视频时可以在线观看学习，当资料库中有视频资料时，用户可以在线观看视频，具体测试结果如下图5-13所示（注意：有的浏览器可能不支持播放功能）。图5-13在线视频播放视频播放功能通过html5的video标签实现，该标签有一个src属性，当用户点击该视频时通过javascript将该视频的路径赋值给弹出框里的video标签，最终实现播放视频的功能。代码如下：<div class="am-modal am-modal-no-btn tvModal" tabindex="-1"<a href="javascript: void(0)" class