基于Html5的个性化学习系统的设计与实现

阳光穿透心脏的1/2处 2024-04-01 13:24 71阅读 0赞

目 录  
摘 要 I  
Abstract II  
第1章 绪论 1  
1.1 课题背景及意义 1  
1.2 国内外研究现状 1  
1.2.1国内研究现状 1  
1.2.2国外研究现状 4  
1.3开发工具及技术 5  
1.3.1 MyEclipse 5  
1.3.2 ToMcat 6  
1.3.3 SqlServer 6  
1.3.4 JSP 6  
1.3.5 Servlet 7  
1.4研究主要内容 8  
第2章 可行性分析及总体设计原则 9  
2.1可行性分析 9  
2.1.1技术可行性 9  
2.1.2经济可行性 9  
2.1.3社会可行性 9  
2.2总体设计原则 10  
第3章 系统分析 13  
3.1业务流程分析 13  
3.2数据流图 14  
第4章 系统设计 16  
4.1系统功能设计 16  
4.2数据库设计 18  
4.2.1概念结构设计 19  
4.2.2数据库表设计 23  
第5章 系统实现 26  
5.1管理员登录 26  
5.2管理员功能模块 29  
5.2.1公告信息管理 29  
5.2.2留言信息管理 33  
5.2.3学习资料管理 35  
5.2.4视频信息管理 39  
5.2.5修改个人密码 43  
5.3前台网站功能模块 44  
5.3.1网站首面 44  
5.3.2学习资料下载 45  
5.3.3学习视频下载 48  
5.3.4留言板功能 51  
第6章 软件测试 53  
6.1软件测试的重要性 53  
6.2测试实例的研究与选择 53  
6.3测试环境与测试条件 55  
6.4系统运行情况 55  
6.5系统评价 55  
结 论 57  
参考文献 58  
致 谢 60  
1.4研究主要内容  
构建个性化学习系统网站的大体框架，明确系统将要实现的各项功能。确定各项功能如何实现，然后逐步丰富学习系统的各项功能麻将系统做的丰满起来。同时需要创建提供权限管理模块，项目管理员可以设置项目门户的访问权限以及对权限进行定制和扩展。实现基于Html5的个性化学习系统的各项功能的实现。对于使用该系统的登陆用户的信息进行准确记录，在系统上进行在线测试，同时可以进行视频的观看和资料的下载。同时应该具有互动功能，使用该系统的用户可以对资源进行评价与讨论。管理员除基本功能外应可以对网站上的资料进行修改，添加等。项目管理员同时应对项目门户的访问权限设置以及对权限进行定制问题。  
第2章 可行性分析及总体设计原则  
2.1可行性分析  
可行性分析也称为可行性研究，是在调查的基础上，针对新系统的开发是否具备必要性和可能性，对新系统的开发从技术、经济、社会等方面进行分析和研究，以避免投资失误，保证新系统的开发成功\[2\]。可行性研究的目的就是用最小的代价在尽可能短的时间内确定问题是否能够解决。  
下面将分别从技术、经济、社会三个方面对在线学习系统的建设进行分析和研究。  
2.1.1技术可行性  
根据在线学习网的系统功能、性能及实现系统的各种约束条件，根据新系统目标来衡量所需的技术是否具备，本系统是一个数据库管理和查询的系统，现有的技术已较为成熟，硬件、软件的性能要求、环境条件等各项条件良好，估计利用现有技术条件应完全可以达到该系统的功能目标。同时，考虑给予的开发期限也较为充裕，预计系统是可以在规定期限内完成开发的。  
由以上分析可知，在线学习系统的开发在技术上是可行的  
2.1.2经济可行性  
学校具有信息化的处理设施，并且拥有支持本系统的应用平台。因此无需再投入资金购买其他设施。系统的开发基于本人对程序开发的实践学习而来，学校无需资金投入，并且软件开发过程投入的成本不高，因此开发经费完全可以接受。  
由以上分析可知，在线学习系统在经济上是可行的。  
2.1.3社会可行性  
本系统的社会可行性主要从法律因素、用户使用可行性两方面进行研究。  
(1)法律因素  
本系统是根据在线学习系统的实际情况开发研制的，是通过大量的调研得出的，系统的软件设计是在独立的环境下完成的，无可供抄袭的软件产品。  
(2)用户使用可行性  
本系统对用户的要求，除了需要具备在Microsoft Windows平台上使用个人电脑的知识外，并不需要特别的技术能力。使用系统的管理员，需要具备对ToMcat服务器的使用能力，在投入使用前，无需对操作系统的人员进行培训。这样既减少投入成本又简化了操作环节。由以上分析可知，本系统具有社会可行性。

2.2总体设计原则  
本系统为了设计、实现和后期维护的方便，以及系统用户使用的便利，所以必须采取一定的设计原则。其主要设计原则有：  
简单性：在实现系统的功能的同时，尽量让系统操作简单易懂，这对于一个系统来说是非常重要的。  
针对性：本系统设计是针对在线学习系统的需求定向开发设计，所以具有专业突出和很强的针对性。  
实用性：要求本系统能够满足在线学习系统的需求，因此具有良好的实用性。  
一致性：页面整体设计风格以及命名规则的一致性：整体页面布局和用图用色风格及变量、类名和其他元素的命名规则保持一致。功能一致性：完成同样的功能应该尽量使用同样的元素。 元素风格一致性：界面元素的美观风格、摆放位置在同一个界面和不同界面之间都应该是一致的。变量命名规则的一致性：变量应该用统一的规则进行命名，做到任意变量均能从上下文推断其义。  
先进性：本系统采用JSP技术、SQLSERVER等被广泛采用系统开发技术和数据库，因此本设计具有良好的先进性，具体表现在其具有良好的可扩展性，可开发性。  
Java Servlet 与 JSP 的相关功能  
JSP和Servlet的区别到底在应用上有哪些体现，很多人搞不清楚。简单的说，SUN首先发展出Servlet，其功能比较强劲，体系设计也很先进，只是，它输出HTML语句还是采用了老的CGI方式，是一句一句输出，所以，编写和修改HTML非常不方便。  
JavaServer Pages(JSP)是一种实现普通静态HTML和动态HTML混合编码的技术，JSP并没有增加任何本质上不能用Servlet实现的功能。但是，在JSP中编写静态HTML更加方便，不必再用println语句来输出每一行HTML代码。更重要的是，借助内容和外观的分离，页面制作中不同性质的任务可以方便地分开：比如，由页面设计者进行HTML设计，同时留出供Servlet程序员插入动态内容的空间。后来SUN推出了类似于ASP的镶嵌型的JSP，把JSP TAG镶嵌到HTML语句中，这样，就大大简化和方便了网页的设计和修改。新型的网络语言如ASP，PHP，JSP都是镶嵌型的SCRIPT语言。 这是JSP和Servlet区别的运作原理层面。  
从网络三层结构的角度看JSP和Servlet的区别，一个网络项目最少分三层：data layer(数据层),business layer(业务层), presentation layer(表现层)。当然也可以更复杂。Servlet用来写business layer是很强大的，但是对于写presentation layer就很不方便。JSP则主要是为了方便写presentation layer而设计的。当然也可以写business layer。写惯了ASP，PHP，CGI的朋友，经常会不自觉的把presentation layer和business layer混在一起。根据SUN自己的推荐，JSP中应该仅仅存放与presentation layer有关的东东，也就是说，只放输出HTML网页的部分。而所有的数据计算，数据分析，数据库联结处理，统统是属于business layer，应该放在Java BEANS中。通过JSP调用Java BEANS，实现两层的整合。  
实际上，微软前不久推出的DNA技术，简单说，就是ASP+COM/DCOM技术。与JSP+BEANS完全类似，所有的presentation layer由ASP完成，所有的business layer由COM/DCOM完成。通过调用，实现整合。为什么要采用这些组件技术呢？因为单纯的ASP/JSP语言是非常低效率执行的，如果出现大量用户点击，纯SCRIPT语言很快就到达了他的功能上限，而组件技术就能大幅度提高功能上限，加快执行速度。  
另外一方面，纯SCRIPT语言将presentation layer和business layer混在一起，造成修改不方便，并且代码不能重复利用。如果想修改一个地方，经常会牵涉到十几页CODE，采用组件技术就只改组件就可以了。Servlet是一个早期的不完善的产品，写business layer很好，写presentation layer就很臭，并且两层混杂。所以，推出JSP+BEAN，用JSP写presentation layer,用BEAN写business layer。SUN自己的意思也是将来用JSP替代Servlet。这是技术更新方面JSP和Servlet的区别。  
可是，这不是说，学了Servlet没用，实际上，你还是应该从Servlet入门，再上JSP，再上JSP+BEAN。强调的是：学了JSP，不会用Java BEAN并进行整合，等于没学。大家多花点力气在JSP+BEAN上。  
我们可以看到，当ASP+COM和JSP+BEAN都采用组件技术后，所有的组件都是先进行编译，并驻留内存，然后快速执行。所以，大家经常吹的Servlet/JSP先编译驻内存后执行的速度优势就没有了。那么，为什么还用JSP+BEAN？因为Java实在前途远大。微软分拆后，操作系统将群雄并起，应用软件的开发商必定要找一个通用开发语言进行开发，Java一统天下的时机就到了。如果微软分拆顺利，从中分出的应用软件公司将成为Java的新领导者。目前的Java大头SUN和IBM都死气沉沉，令人失望。本文转载自http://www.biyezuopin.vip/onews.asp?id=11870希望新公司能注入新活力。不过，新公司很有可能和旧SUN展开Java标准大战，双方各自制定标准，影响Java跨平台。  
简单分析了一下JSP和Servlet的区别和Java Web开发方面的发展。现在的机器速度越来越快，Java的速度劣势很快就可以被克服。

<%@ page language="java" pageEncoding="UTF-8"%>
    <%String path = request.getContextPath();%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>欢迎使用</title>
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">
    	
    	<STYLE type=text/css>
    		BODY {
        FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: 宋体}
    		TD {
        FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: 宋体}
    	</STYLE>
    	
    	<script type='text/javascript' src='<%=path %>/dwr/interface/loginService.js'></script>
        <script type='text/javascript' src='<%=path %>/dwr/engine.js'></script>
        <script type='text/javascript' src='<%=path %>/dwr/util.js'></script>
           
    	<script language="javascript">
    		function check1()
    		{
                                                                                                 
    		     if(document.ThisForm.userName.value=="")
    			 {
        
    			 	alert("请输入用户名");
    				document.ThisForm.userName.focus();
    				return false;
    			 }
    			 if(document.ThisForm.userPw.value=="")
    			 {
        
    			 	alert("请输入密码");
    				document.ThisForm.userPw.focus();
    				return false;
    			 }
    			 document.getElementById("indicator").style.display="block";
    			 loginService.login(document.ThisForm.userName.value,document.ThisForm.userPw.value,0,callback);
    		}
    		
    		function callback(data)
    		{
        
    		    document.getElementById("indicator").style.display="none";
    		    if(data=="no")
    		    {
        
    		        alert("用户名或密码错误");
    		    }
    		    if(data=="yes")
    		    {
        
    		        alert("通过验证,系统登录成功");
    		        window.location.href="<%=path %>/loginSuccess.jsp";
    		    }
    		    
    		}
        </script>
      </head>
      
      
      
    <body>
    <form action="<%=path %>/login?type=login" name="ThisForm" method="post">
    <TABLE cellSpacing=0 cellPadding=0 width=900 align=center border=0>
    	  <TR>
    	       <TD style="HEIGHT: 105px"><IMG src="<%=path %>/images/login_1.gif" border=0></TD>
    	  </TR>
    	  <TR>
    	       <TD background="<%=path %>/images/login_2.jpg" height=300>
    		      <TABLE height=300 cellPadding=0 width=900 border=0>
    		        <TR><TD colSpan=2 height=35></TD></TR>
    		        <TR>
    		          <TD width=360></TD>
    		          <TD>
    		            <TABLE cellSpacing=0 cellPadding=2 border=0>
    			              <TR>
    			                <TD style="HEIGHT: 28px" width=80>登 录 名：</TD>
    			                <TD style="HEIGHT: 28px" width=150><INPUT style="WIDTH: 130px" name=userName type="text"></TD>
    			                <TD style="HEIGHT: 28px" width=370></TD>
    			              </TR>
    			              <TR>
    			                <TD style="HEIGHT: 28px" width=80>登录密码：</TD>
    			                <TD style="HEIGHT: 28px" width=150><INPUT style="WIDTH: 130px" type=password name=userPw></TD>
    			                <TD style="HEIGHT: 28px" width=370></TD>
    			              </TR>
    			              <TR>
    			                <TD style="HEIGHT: 18px"></TD>
    			                <TD style="HEIGHT: 18px"></TD>
    			                <TD style="HEIGHT: 18px"></TD>
    			              </TR>
    			              <TR>
    			                <TD></TD>
    			                <TD>
    			                   <img src="<%=path %>/images/login_button.gif" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" onclick='check1()'/>
    			                   <img id="indicator" src="<%=path %>/img/loading.gif" style="display:none"/>
    			                </TD>
    			              </TR>
    		            </TABLE>
    		          </TD>
    		        </TR>
    		      </TABLE>
    	       </TD>
    	  </TR>
          <TR>
               <TD><IMG src="<%=path %>/images/login_3.jpg" border=0></TD>
          </TR>
    </TABLE>
    </form>
    </body>
    </html>

![在这里插入图片描述][be42e52b290e48a08acf483859a6116e.png_pic_center]  
![在这里插入图片描述][d4ce9d2fde1e4c46a9d84bc80d7148dc.png_pic_center]  
![在这里插入图片描述][bd89b042ec174914a45a464257e104f7.png_pic_center]  
![在这里插入图片描述][e5fc22ef1b2e4e099d323c933693d3d0.png_pic_center]  
![在这里插入图片描述][c92785f72f534869aebf4ab953e704de.png_pic_center]  
![在这里插入图片描述][9ac1d2ac0ce24e8886586fe1ff5ac38c.png_pic_center]  
![在这里插入图片描述][b6f24cdad1be43f19a10c8b3ec9e5f03.png_pic_center]  
![在这里插入图片描述][bab899791349451cbc79ea4b4c67085c.png_pic_center]  
![在这里插入图片描述][3d97dff61f2e4e03a9015dec12e28c05.png_pic_center]  
![在这里插入图片描述][75402ea68bf64497a81050b2f56a025e.png_pic_center]  
![在这里插入图片描述][9c0ecd7f0ffe4c22b799905ae00287ff.png_pic_center]  
![在这里插入图片描述][78d9984e4d9a4ba581b31ddf2f453c34.png_pic_center]  
![在这里插入图片描述][ad7106e964e340e29a438fb6d0d8de27.png_pic_center]  
![在这里插入图片描述][1574b1827ca24122867a3f6807b19e88.png_pic_center]  
![在这里插入图片描述][a6f97ab831ae442a93c499e8e1ba3ab3.png_pic_center]  
![在这里插入图片描述][47781e140b0c429fbe4830b873085509.png_pic_center]  
![在这里插入图片描述][dc91bfef3a5c45cc832b0f95add85487.png_pic_center]  
![在这里插入图片描述][db190b3701f946adbe5fe25e0ead740d.png_pic_center]

[be42e52b290e48a08acf483859a6116e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/277c0f7e7c3247149264257c12588178.png
[d4ce9d2fde1e4c46a9d84bc80d7148dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3b9aef46545b43139fb19ba5ff12e4e5.png
[bd89b042ec174914a45a464257e104f7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8e976b4bca00458783a126e5548fb05c.png
[e5fc22ef1b2e4e099d323c933693d3d0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5ebe2d91b7dc4a2aa8154dec70f54f57.png
[c92785f72f534869aebf4ab953e704de.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/00887bab91654f2abf2f2e6efeef4261.png
[9ac1d2ac0ce24e8886586fe1ff5ac38c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/164da473cbfb48b387db514bcc62e5f0.png
[b6f24cdad1be43f19a10c8b3ec9e5f03.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8edc82ef1d9142bca556b078ad56639a.png
[bab899791349451cbc79ea4b4c67085c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d33f6718bde64360ba89c2c927a24450.png
[3d97dff61f2e4e03a9015dec12e28c05.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fdd3c2daa38d406e946a17cda32135bf.png
[75402ea68bf64497a81050b2f56a025e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/134a433695d44ad89f3a63edb27ee212.png
[9c0ecd7f0ffe4c22b799905ae00287ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a1a79b210e6149be9936dd29f0245262.png
[78d9984e4d9a4ba581b31ddf2f453c34.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7664a1e27b34403bac7150053777ac2d.png
[ad7106e964e340e29a438fb6d0d8de27.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f59a9055b5d24837aa1ed3d5eaed1e62.png
[1574b1827ca24122867a3f6807b19e88.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f39aa9eb3f644ca3bf9516e7ebb0250e.png
[a6f97ab831ae442a93c499e8e1ba3ab3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/099f87dced76416891e349574f5a53bc.png
[47781e140b0c429fbe4830b873085509.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a846bfe854bc4721a72ee0c911b62120.png
[dc91bfef3a5c45cc832b0f95add85487.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a8309e407824430793dc3281f2db5086.png
[db190b3701f946adbe5fe25e0ead740d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c9d7a3b1f5b5441e94a69afb046a9f02.png