




免费预览已结束,剩余35页可下载查看
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第 40 页新乡职业技术学院毕业设计(论文) 基于WEB的网络自学平台的设计与实现摘要:随着信息技术的发展不仅使工业生产力突飞猛进的发展外,而且也深刻地改变着人们的日常生活,大致国民教育,小至生活方式,无一不受信息技术的影响。正所谓“百年大计,教育为本”,信息化发展的成功也充分影响着当今教育的发展。相对于传统教学的面面相授,基于信息化的现代教学优势是不言而喻的。首先,基于互联网以浏览器为客户端的现代远程教育系统突破了时间和空间的限制,可以在很大程度上削弱“知识沟”所形成的地区间教学水平的差异,其次,基于Web教学系统可以打破传统教学中的条条框框,可以让学生随时随地接受现代教育,不在拘泥于校园课堂中。最后,远程教学系统可以提高教学的效率,每个学生可以因人而异,选择自己学习的内容,在学习上充分体现了自主性。本系统是基于 Web的网络教学系统建立在 JSP模式下,以互联网为传输媒介,以浏览器为客户终端的远程网络教学系统。在改系统的设计前期,做了充分的调查,分析了本系统所具有的适用范围和潜在市场。在系统的设计阶段,充分借鉴了各大网络教学网站,结合利弊,设计了系统平台,即基于JSP的系统主页,并实现了预期的功能和目标。关键词:网页、自学平台、JSP、数据库、服务器The design and implementation of the network self-learning platform based on WEBXuchangkaiQigeSummary:With the development of information technology not only makes the industrial productivity by leaps and bounds, but also profoundly changed peoples daily life, roughly from the national education, way of life, the impact is not affected by the information technology. It is the so-called project, education oriented, the development of information technology success also fully affects the development of todays face to face education. Relative to the traditional teaching, modern teaching based on information advantage is self-evident. Firstly, based on the Internet browser for modern distance education system breaks through the limitation of time and space, can largely weaken the knowledge gap formed by the inter regional differences in the level of teaching, secondly. Web can break the traditional teaching system in teaching can make students based on restrictions and fetters, whenever and wherever possible to receive modern education and not get bogged down in the campus classroom. Finally, far away History teaching system can improve the teaching efficiency, each student can vary from person to person, choose their own learning content, learning fully embodies the autonomy. This system is based on Web network teaching system established in the JSP model, to the Internet as the transmission media, the browser for the client terminal of the remote network teaching system. Change in the system design stage, a full investigation, analysis of the scope and potential market for this system has. In the design phase of the system, to make full use of the website of each large network teaching, combined with the advantages and disadvantages, design the system platform, namely based on the JSP Homepage, and to achieve the expected function and target.Key word:Webpage、Self study platform、database、server、jsp目录1、网站前端的设计51.1、认识web51.2 、HTML51.3 、css样式布局61.3.1、引用css样式表61.3.2、 CSS样式表61.4、 js脚本代码71.4.1、 js脚本的介绍71.4.2、如何使用js脚本语言82 、服务器102.1、 服务器的介绍102.2、服务器的特性:102.2.1、可用性102.2.2、可扩展性112.2.3、易用性112.2.4、可管理性112.3 、认识apache+jsp+tomcat:122.3.1、服务器安装jdk122.3.2、安装apache123、数据库163.1、数据库的介绍163.1.1、数据库的定义163.1.2、数据库的基本结构163.1.3、数据库的特点163.2、数据库的应用174、网络自学平台的设计214.1、前台设计214.2、服务器配置284.3数据库的调式335 、设计中所遇困难和解决方案376、 结论39致谢:40参考文献411、网站前端的设计1.1、认识web Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,前端设计师这一职业开发技术包括三个要素:HTML、CSS和JavaScript,但随着RIA的流行和普及,Flash/Flex、Silverlight、XML和服务器端语言也是前端开发设计师应该掌握的。前端设计师既要与上游的交互设计师,视觉设计师和产品经理沟通,又要与下游的服务器端工程师沟通,需要掌握的技能非常多。这就从知识的广度上对前端设计师提出了要求。如果要精于前端开发这一行,也许要先精十行。然而,全才总是少有的。所以,对于不太重要的知识,我们只需要“通”即可。但“通”到什么程度才是够用呢?对于很多初级前端设计师来说这个问题是非常令人迷惑的。前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的初入点。在Web前端中 css的应用也是非常重要的。以前人们通常用的都是table布局,table布局虽然很简单,好用。但是随着社会的发展和科技的进步,越来越不能满足人们的需求。现在手机和平板电脑的兴起,人们大多数都是用手机和平板电脑浏览网页或网上购物。那么问题来了!当用户在不同的手机和平板上浏览网页时,会不会出现“错位”的现象?比如说,一个网页中的图片大小是1024*765分辨率的,那么你的手机或平板的分辨率是500*800的,会不会图片显示不全,这种情况是有的,所以现在都是用css布局,这样和解决了用户用不同的终端浏览网页而出现的“错位”现象。1.2 、HTMLHTNL是超文本标记语言,标准通用标记语言下的一个应用,是网页编写的基本语言。要实现 Web 网页的正文提取,必须对HTML 的语法结构有个清楚的认识。对于搜狐、新浪、网易等包含大量信息的大型门户网站而言,其各类网页中包含信息标题、文摘、超链接等可供用户检索用的有用信息,且这类网站结构稳定、类似具有普遍代表性,所以只要对这些网站信息做到高效滤除,则等于可以对这类网站的信息做到批量处理的目的。经对比得到该类网站普遍拥有相似的结构如下:网页标题及其它与网页标题无关的信息正文标题,正文内容及其它与网页正文标题,正文内容无关的信息1.3 、css样式布局在界面设计中,层叠样式表(CSS)扮演着十分重要的角色。它是一种通过定义页面元素的位置、布局、颜色及字体来控制应用外观的代码。怎样引用CSS呢?首先我们要现在网页的页面定义好。在网页的页面当中可以做很多事情,例如,定义web的所用的语言,定义文字显示格式,用那种文字显示出来。1.3.1、引用css样式表引用有两种定义方式。一种是,另一种。后者是应用在新建一个css样式表中,不和网页一个页面,这样用的看着舒服,也比较清晰,时候来维护人员一眼就能找到所要修改的内容,前者是建立在网页页面中的,一个网页代码本来就比较多,要是在加上一些css样式,看着比较麻烦,不容易找出你找的内容。那么首先 我们在head中定义一个css样式。代码如下:定义的css样式定义css样式1.3.2、 CSS样式表CSS代码中的每条规则由两个部分组成:选择器和声明,它用来作用于整个页面距离上边距为0px。在CSS中提供三种选择器机制来选取中对应的元素:(1)元素选择器:直接使用元素,如P:first-chilsfont-size:24px;及spantile=”home”font-style-size:24px;分别使用元素与元素。并且前者元素后接这是一种带伪类的选择器,后者元素后接是一种带有属性的选择器。(2)ID选择器:以#开头,用来匹配中带有对应值的元素。例如:#top/*上标题设置*/width:1349px;height:90px;margin:opx auto;/*上边距为0px 右边距自动*/background-image:url(./images/top.jpg); /*填充背景图片*/(3)类选择器:以.开头,用来匹配中带有对应值的元素。例如:.carte_1 a /*超链接设置*/text-decoration:none;/*去除超链接样式 下面的下划线去掉了*/color: #FFFFFF;/*颜色为#FFFFFF*/display:block; /*块状化,使超链接有个形状*/1.4、 js脚本代码1.4.1、 js脚本的介绍 脚本是批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合,在其中可以实现一定的逻辑分支等。JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。是一个网看着美观,使用户用着赏心悦目,绝大多数的网站都是使用了js脚本来调试的,Java Script 的突出特点有以下几种:(1)是一种解释性的脚本语言,编写功能代码段很方便,这些 Java Script程序不需要提前编译,它是在浏览器加载运行的过程中,一行一行解释执行的。(2)是面向对象的。开发人员可以用它创建自己的需要对象也可以使用其本身具有一些内置对象比如日期、正则表达式等。(3)具有事件驱动特性。就是因为Java Script 是事件驱动的,它正好满足了前端开发交互页面的需要。当把一个页面对象与相应的某个事件(比如单击click)监听绑定在一起后,对这个页面元素所进行的相应操作(比如单击操作)被监听到之后,就会调用已绑定的事件处理程序,完成特定的功能。(4)具有安全性。代码只能运行在用户客户端浏览器中以确保安全。(5)具有平台无关性。因为它是由浏览器解释执行的,所以在不同的操作平台下它都能运行,只和运行它的浏览器相关。网站前端开发主要的宗旨就是尽可能提高用户体验,当下,浏览器用户要求越来越高,用户也是互联网的重要参与者,要求在互联网中也有所参与与创造,所以交互将是互联网的重要主题之一。Java Script 凭借自身的这些特点成为 Web前端开发的最热门的设计语言。1.4.2、如何使用js脚本语言在使用JavaScript语言之前要先完成一个jQuery代码,保存成一个js文件,然后在网页中调用,jQuery也是网页前台设计师必备的技能。每个网页前台设计师都会jQuery不会就不是网站前台设计。所以说网站前台比后台管理者会的技能更多。在使用js脚本语言的时候,我们只需要把脚本独立完成,保存成一个js文件,然后在网页中引用,例如:上面的这句代码就是你要引用的代码。Type是类型的意思,就是你使用的语言是那种类型的,例如“style type=text/css” 这是使用css语言,而上面“type=text/JavaScript”的是使用JavaScript语言。然后我们要在网页中是用JavaScript语言了,JavaScript语言中间或者写在中间,这两个地方没有啥多的区别。如下图:2 、服务器2.1、 服务器的介绍服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。服务器的构成包括处理器、硬盘、内存、系统总线等,和通用的计算机架构类似,但是由于需要提供高可靠的服务,因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。在网络环境下,根据服务器提供的服务类型不同,分为文件服务器,数据库服务器,应用程序服务器,WEB服务器等。按照体系架构来区分,服务器主要分为两种:非x86服务器x86服务器按应用层次划分可以分为五类:(1)入门级服务器(2)工作组服务器(3)部门级服务器(4)企业级服务器2.2、服务器的特性:从这四个方面来衡量服务器是否达到了其设计目的;A:Availability可用性;S:Scalability可扩展性;U:Usability易用性;M:Manageability可管理性,即服务器的RASUM衡量标准。2.2.1、可用性 对于一个服务器来说,一个非常重要的方面就是它的“可用性”,即所选服务器可以满足长期稳定的要求,而且不能经常出问题。事实上,相当于太阳的可靠性(可靠性)。因为在服务器端是整个网络用户,而不是个人用户,在大、中型企业中,通常需要服务器从不中断。在一些特殊的领域,即使没有用户,服务器必须不间断地工作,因为它必须继续为用户提供连接服务,无论是在工作,还是工作,无论是工作,还是休息,节假日。这是服务器必须具有高稳定性的根本原因。一般来说,7X24小时不间断工作,特别是一些大型的网络服务器,如大型公司使用服务器,Web服务器,并提供公共服务iqdeweb服务器,这些服务器,实际工作的次数只有一次,那就是它刚买回来的时候正式使用后完全安装,它没有工作,直到结束。2.2.2、可扩展性服务器必须具有一定的可扩展性,这是不可能的,这是不可能的,特别是在今天的信息时代。如果服务器没有一定的可扩展性,当用户不能胜任,一个价值的几万,甚至几百上千的服务器在短时间内被淘汰,为了保持可扩展性,通常需要有一定数量的可扩展空间和冗余部件(如磁盘阵列、支架等)。可扩展性具体体现在硬盘可以扩展,CPU可以升级或扩展,系统支持Windows NT,Linux或Unix,和其他主流的操作系统,等等,只是为了保持充分利用早期投资。2.2.3、易用性服务器的功能比个人电脑更复杂,不仅是指硬件配置,更指的是软件系统的配置。服务器实现了这么多的功能,没有全面的软件支持是无法想象的。但一个软件系统,使用性能下降可能导致服务器、管理人员无法有效地控制。服务器的设计中很多服务器厂商,除了服务器的可用性、稳定性等方面都要考虑,还必须易于使用在服务器下的脚。服务器使用的易用性主要体现在服务器不易操作,用户的导航系统不完善,机箱设计不人性化,没有关键的恢复功能,是否存在操作系统备份,还有没有足够的培训支持等方面。2.2.4、可管理性服务器的主要特点是,有另一个重要功能的服务器,这是很容易管理。虽然我们说服务器需要继续工作,但是好的产品很可能发生,人们常说的一句话是:不知道它可能是坏的,但它应该是必要的,以避免错误,并及时发现问题,并不仅可以减少服务器错误,而且还大大提高了服务器的维护效率。服务器也体现在服务器的管理上,不是智能管理系统,没有自动报警功能,是不是一个独立的系统管理系统,没有液晶显示器等。只有这样,管理员才能轻松管理、高效的工作。2.3 、认识apache+jsp+tomcat:2.3.1、服务器安装jdk安装的是jdk1.3版下面的安装目录等都可以根据自己的版本进行修改,之后是添加jdk的环境变量:如下:变量名:path变量值:c:jdk1.3bin变量名:JAVA_HOME变量值:c:jdk1.3变量名:CLASSPATH变量值:.;c:jdk1.3libdt.jar;c:jdk1.3libtools.jar;重新启动计算机使配置的环境变量生效,注意环境变量的添加位置,这里以win2k为例:我的电脑属性高级环境变量 如win9x在autoexec.bat中添加Path=c:jdk1.3binSet JAVA_HOME=c:jdk1.3Set CLASSPATH=.;c:jdk1.3libdt.jar;c:jdk1.3libtools.jar;2.3.2、安装apache 安装的是1.3.27 for windows版,比如安装到c:apache下。apache默认的主目录是c:apachehtdocs,可以对它进行更改,编辑c:apache/conf/httpd.conf文件,找到关于Port、DocumentRoot这两行,就可以设置当前的http服务的默认端口和主目录,之后就是配置httpd.conf文件:在httpd.conf文件中添加指定apache和tomcat连接插件的位置和名称LoadModule jk_module libexec/mod_jk.dllAddModule mod_jk.c指出mod_jk工作所需要的工作文件的位置JkWorkersFile c:Tomcat 4.0pertiesJkLogFile logs/mod_jk.logJkLogLevel infoJkLogStampformat %a %b %d %H:%M:%S %Y 将所有和JSP和servlet的请求通过Apj13的协议送给Tomcat,让Tomcat来处理JkMount /*.JSP ajp13JkMount /servlet/* ajp13将下载的mod_jk.dll放到安装Apache目录下的libexec下。安装tomcat for windows版,这里我用的tomcat 4.0.4,如安装到c:tomcat4.0下。之后我们需要创建一个文本文件,内容为:因我们只用ajp13所以其内容可精简为下面几行:workers.tomcat_home=c:Tomcat4 /让mod_jk模块知道Tomcatworkers.JAVA_home=c:jdk1.3 /让mod_jk模块知道j2sdkps= worker.list=ajp13 /模块版本,现有ajp14了,不要修改worker.ajp13.port=8009 /工作端口,若没占用则不用修改worker.ajp13.host=localhost /本机,若上面的Apache主机不为localhost,作相应修改worker.ajp13.type=ajp13 /类型worker.ajp13.lbfactor=1 /代理数,不用修改在这个文件中需要修改两个地方,一个是workers.tomcat_home,这是指定Tomcat工作的目录,另外一个是workers.JAVA_home,这是指定Jdk的目录,我们自己可以做适当的修改。再配置tomcat核心文件,打开 c:Tomcat4.0confserver.xml修改如下:将!-的 去掉,这句话熟悉XML的人都知道它是注释,因为默认的Tomcat4是没有启用Apj13的8009的端口即mod_jk所使用,修改后如下:然后保存,目前为止配置基本完成了。重新启动计算机,开始整体测试。测试首先,启动Apache,然后在浏览器里输入http:/localhost,如果能看到Apache的欢迎页面,那么第一步成功了。然后,运行startup.bat启动Tomcat,再打开浏览器输入:http:/localhost:8080/如果看到Tomcat,那么Tomcat也没有问题。最后最重要的是Apache下可以解释JSP和Servlet,需要敲一些代码写进一个文档并将其命名为rosealet.JSP,内容如下:将它保存到C:Tomcat 4.0webappsROOT下,然后在浏览器里输入http:/localhost/rosealet.jsp如果看到了rosealet,那么成功。最后有一个问题需要注意一下:对于APACHE主机下访问的JSP文件,实际物理上不存在与APACHE的主机上,而是存在TOMCAT的主机目录里,例如:http:/localhost/rosealet.jsp 中rosealet.JSP文件实际不在 c:apachehtdocs下,而在C:Tomcat 4.0webappsROOT 下,请注意,不要混淆概念。3、数据库3.1、数据库的介绍3.1.1、数据库的定义数据库(Database)是按照数据结构来组织、存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数据,而转变成用户所需要的各种数据管理的方式。数据库有很多种类型,从最简单的存储有各种数据的表格到能够进行海量数据存储的大型数据库系统都在各个方面得到了广泛的应用。在信息化社会,充分有效地管理和利用各类信息资源,是进行科学研究和决策管理的前提条件。数据库技术是管理信息系统、办公自动化系统、决策支持系统等各类信息系统的核心部分,是进行科学研究和决策管理的重要技术手段。3.1.2、数据库的基本结构数据库的基本结构分为三个层次,反映了数据库的三个不同的角度。数据库称为物理数据库的概念模型的框架。数据库由框架组成,数据库称为用户数据库。(1)物理数据层。(2)数据层概念。(3)用户数据层。3.1.3、数据库的特点数据共享包括所有用户可以同时访问数据库中的数据,包括用户可以用各种方式使用界面数据库,并提供数据共享。如何减少数据冗余与文件系统相比,数据库实现了数据共享,从而避免了用户建立应用文件,减少了冗余数据量,减少了数据冗余,维护了数据的一致性。在这里我们对比下每种数据库的优缺点:(1)MySQL,MySQL是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于Oracle旗下公司。MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一。MySQL 是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。MySQL 所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策(本词条“授权政策”),它分为社区版和商业版,由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,一般中小型网站的开发都选择 MySQL 作为网站数据库。由于其社区版的性能卓越,搭配php和Apache课组成良好的开发环境。(2)SQL Server 是Microsoft 公司推出的关系型数据库管理系统。具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行Microsoft Windows 2012 的大型多处理器的服务器等多种平台使用。Microsoft SQL Server 是一个全面的数据库平台,使用集成的商业智能 (BI)工具提供了企业级的数据管理。Microsoft SQL Server数据库引擎为关系型数据和结构化数据提供了更安全可靠的存储功能,使您可以构建和管理用于业务的高可用和高性能的数据应用程序。(3)Oracle Database,又名Oracle RDBMS,或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统,系统可移植性好、使用方便、功能强,适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的 适应高吞吐量的数据库解决方案。通过对比不难发现,如果要实现最佳的配置,无疑Oracle是上上之选。但是考虑的成本的问题,还是选择了性能虽然欠佳的成本较小的Mysql数据库。3.2、数据库的应用而如果要实现动态交互,那么肯定是离不开很重要的数据库。而这其中,数据库的选择也是一个问题,传统的常用数据库有以下几种。(1)Mysql (2)SqlServer(3)Oracle选择好数据库之后就要下载安装并使用了,这里选择的是比较成熟的mysql-5.6.24-win32版本,下载完成后,按照步骤进行安装就能使用了,而使用数据库,就需要具备一些相应的知识了。列如,如何进入数据库,如何删除数据库,如何在数据库中建立表及数据。下面为大家一一介绍:(1)数据库的进入方法,一般安装完数据库之后,都会提供一个数据库的命令行登陆程序,即(2)输入登陆数据库的密码,这个密码,即是安装时提示你输入的root用户的登陆密码,输入完成后,按回车键即可完成登陆。(3)建立相应的表格,根据网站需要,首先建立了一个与用户注册相关的表格,里面存放的是用户的注册用户名和密码。而要建立这个表之前,必须要建立一个数据库。建立数据库的命令是:CREATE DATABASE XXX;其中XX为数据库的名字。(4)建立完数据库之后进入这个数据库,使用USE XXX;来进入新建的数据库。(5)进入相应的数据库之后我们就可以建立对应的表格了,建立表格的命令为:CREATE TABLE tableName 字段名 字段格式.;表建立完成,先进行试验,插入一个数据进行验证,使用INSERTINTOtableName(idname.)values(1admin、.);最后使用select * from tableName;进行查看。但是这里仅仅是对数据库进行了后台的建立,还要对数据库与对应的网页进行连接,才能实现相应的功能。为了进行快速及方便的代码编辑,选用了比较流行的Myeclipse作为这个网页开发的环境。MyEclipse,是在eclipse 基础上加上自己的插件开发而成的功能强大的企业级集成开发环境,主要用于Java、Java EE以及移动应用的开发。MyEclipse的功能非常强大,支持也十分广泛,尤其是对各种开源产品的支持相当不错。MyEclipse企业级工作平台(MyEclipseEnterprise Workbench ,简称MyEclipse)是对EclipseIDE的扩展,利用它我们可以在数据库和JavaEE的开发、发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境,包括了完备的编码、调试、测试和发布功能,完整支持HTML,Struts,JSP,CSS,Javascript,Spring,SQL,Hibernate。MyEclipse 是一个十分优秀的用于开发Java, J2EE的 Eclipse 插件集合,MyEclipse的功能非常强大,支持也十分广泛,尤其是对各种开源产品的支持十分不错。MyEclipse可以支持JavaServlet,AJAX,JSP,JSF,Struts,Spring,Hibernate,EJB3,JDBC数据库链接工具等多项功能。可以说MyEclipse是几乎囊括了目前所有主流开源产品的专属eclipse开发工具。安装好Myeclipse之后就可以进行相关网页的开发,首先需要对mysql数据库进行连接。在Oracle官网下载jdbc连接文件之后,打开。然后布置到Myeclipse中即可。要完成HTML与JAVA代码的连接,必须了解很多的JSP知识。JSP通过将动态代码嵌入到静态的HTML或者XML中,产生动态的输出。JSP技术是基于Java Servlet技术,而且JSP最终也是要转成Servlet来执行。最简单的JSP文件是直接将一个HTML文件另存为.jsp文件,然后将它放在Web应用服务的目录下即可。JSP技术为创建显示动态生成内容的Web页面提供了一种简洁而快速的方法。设计目的是是构造基于Web的应用程序更加容易和快捷,而这些应用程序能够与各种WEB服务器、应用服务器、浏览器和开发工具共同工作。 4、网络自学平台的设计网站的制作与设计,主要是为了改变现在教学的现状。现在教学大多数都是为了应试教育为主,但是我们这个自学平台是个人兴趣,对这门课程感兴趣,你可以选择学习,反之你可以不学习,也可以去其他的课程里面学习。为了更方便的展示网站运行效果,下面一个拓补图表示一下:JSP/HTMLhttpWeb服务器浏览器数据库数据库服务器JDBCWeb数据库体系系统结构图4.1、前台设计鹦鹉自学网是以教学为目的的免费的自学平台,为大学生的课余生活提供一些学习的机会,目前大学生的课余时间非常多,为大学生以后的创业和招工有很大帮助。鹦鹉自学网整体页面以大气为主,让使用者看着赏心悦目。是使用者更有兴趣在本网站学习是注册。目前的网站主要是在局域网中实行,现在是没有传到网上,还在测试阶段。网站用到了服务器、MySQL数据库、JavaScript脚本程序、div+css布局。后台使用server2003服务器和MySQL数据库。前台网页中使用了JavaScript脚本程序,实现网站的一些特效。先介绍一下网站的前台设计:如图:图:1上图的top是菜单栏。是客户能访问到自己想要去的页面,在菜单中用到的是a标签,因为a标签有个hover属性,这样更容易实现鼠标放上去的一些动作。整个的网站以div+css布局,这样可以是以后再前台布局工程师更好的找到想要修改的地方。实现的代码:div:图:2Css:图:3这些代码能实现上面top的鼠标放上去 颜色法伤改变。图3中top下面的是一个网站发不了一些特色课程,是客户一眼就能看到。当然,这个是个图片轮播特效,使整个网站显得更高端大气,是这个网站的灵魂,要实现这个效果,用到了js代码,这个代码不是很重要,网上多的是,下面就展示一下代码。代码如下:这个是引用你的js文件,type定义了使用的是哪种语言,前面css那章也说了,text/css是使用css。这个是使用了text/JavaScript脚本语言,src是用到js文件的位置,js所放置的位置/你要引用的文件。下面的代码是控制图片运动的JavaScript语言。代码如下:var _index=0;var cleartime=null; /按钮操控图片轮播$(.but span).click(function()/*click是点击事件 */$(this).addClass(active).siblings().removeClass(active);var _index=$(this).index();$(.flash2).animate(left:_index*-1349,500););function autoplay()/自动轮播图片cleartime=setInterval(function()_index+;if(_index3)_index=0;$(.but span).eq(_index).addClass(active).siblings().removeClass(active);$(.flash2).animate(left:_index*-1349,500);,3000);autoplay();/鼠标放在按钮上图片轮播暂停 移走图片轮播开始$(.but span).hover(function()clearInterval(cleartime);/*鼠标放在上面时,清除轮播事件*/,function()cleartime = setInterval(doMove(prve),3000);/*鼠标离开时,调用移动这个事件*/);/鼠标放在团上轮播结束 移走轮播开始$(#flash).hover(function()$(a.prve,a.next).show();/*显示左右的按钮*/clearInterval(cleartime);/*清除轮播*/,function()$(a.prve,a.next).hide();/*鼠标放上面,隐藏左右的按钮*/autoplay(););/按钮控制移动图片前一张后一张$(a.prve).click(function()_index-;if(_index3)_index=0;$(.but span).eq(_index).addClass(active).siblings().removeClass(active);$(.flash2).animate(left:_index*-1349,500););/*如果右面的_index的数值超过3 就会回到第一张图片*/图片轮播的拓补图:首先要建一个大的div,里面的放一些图片 然后点击就会使这个大的盒子像右或者想做移动大的盒子 随着大的盒子的移动里面的小图片就会跟着移动 ,这样就会实现图片轮播的效果。但是,在添加图片中会出现图片与图片之间会有缝隙,这个时候要在这个大的盒子里面添加一个浮动,folate:left;这些代码中最重要的,就是$这个符号,意思是查询的意思,比如:$(.but span).click(function()。这个里面的$的意思是找到.but span这个类,然后来定义它的动作。其中的function()是定义所要执行的动作。具体的注释都解释了!中间的“精品推荐”和上面的图片轮播的代码一样 就是时间不一样,上面图片轮播的时间是3000ms,而这个的时间为0ms,这样就会出现鼠标放到上面的时候就会马上出现下一张图片。还有一个鼠标放上面的动作,放上面就会出现这个效果。如图:其他部分:上图是鼠标放到上面时 图片会向上移动,用到的代码也是和轮播差不多。会在答辩的时候演示的。将来这个地方会放一些广告之类的图片!课程展示,主要展示一些特色的课题。下面的是登录页面,但是这个页面就是个辅助页面,在上面点击登录也会调到另一个页面,当人们浏览到最后一页的时候,就会想注册,心里作用。4.2、服务器配置在建立网站的时候,服务器还非常重要的一个东西,在服务器当中要配置很多的设置。比如:JDK、tomcat、DNS等等的配置。首先要配置jsp站点。首先,在安装jdk前要先看一下自己是否已安装好jdk测试,点击开始-运行 输入cmd 回车如果显示“不是内部或外部命令”就说明没有安装。我们要安装和配置。如下图:图上的安装位置如果默认的就不用记了,如果不是默认的,要记住,在后面的配置环境变量的时候会用的。安装好Java后配置系统文件,测试Java安装是否成功Java -version 出现Java的产品名称就算安装成功了 。环境变量的配置关系到你建的jsp站点是否成功的关键。在我的电脑属性高级环境变量系统变量中添加以下环境变量:JAVA_HOME=C:Program FilesJavajdk1.6.0_10 /java的安装目录CLASSPATH=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar;
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年绿色餐饮店租赁合同:环保设施升级改造专项协议
- 2025年星级酒店股权转让与度假村深度合作运营合同
- 2025年绿色智能家居销售代理权转让合作协议
- 2025年新能源电站变压器采购与安装一体化服务合同
- 2025年度生态环保材料代理销售与服务协议
- 2025年智能电网技术增资合作协议书-电力系统研发投资范本
- 2025年智能工厂设备租赁居间业务定制合同范本
- 2025年绿色产业环保合规审查及处罚裁量基准服务合同
- 2025年康复医院医生康复治疗及康复指导综合服务协议
- 2025年智能酒店式公寓绿色环保装修施工合同
- 2025至2030年中国应急产业市场供需现状及投资战略研究报告
- 中医院临床路径培训课件
- 湖南省岳阳市岳阳楼区2024-2025学年八年级下学期期末考试英语试题(含笔试答案无听力音频及原文)
- 基于SERVQUAL模型的物业公司服务质量提升研究
- 精索静脉曲张治疗-洞察及研究
- 服装厂开业搞活动方案
- 临水作业安全培训
- 清洁与消毒培训
- DB11∕T 637-2024 房屋结构综合安全性鉴定标准
- 2024年10月中级注册安全工程师《金属冶炼安全》真题及答案
- 《高值医用耗材临床应用点评制度》
评论
0/150
提交评论