1、新乡职业技术学院毕业设计(论文) 第 1 页基于 WEB的网络自学平台的设计与实现摘要：随着信息技术的发展不仅使工业生产力突飞猛进的发展外，而且也深刻地改变着人们的日常生活，大致国民教育，小至生活方式，无一不受信息技术的影响。正所谓“百年大计，教育为本”，信息化发展的成功也充分影响着当今教育的发展。相对于传统教学的面面相授，基于信息化的现代教学优势是不言而喻的。首先，基于互联网以浏览器为客户端的现代远程教育系统突破了时间和空间的限制，可以在很大程度上削弱“知识沟”所形成的地区间教学水平的差异，其次，基于 Web 教学系统可以打破传统教学中的条条框框，可以让学生随时随地接受现代教育，不在拘泥于校
2、园课堂中。最后，远程教学系统可以提高教学的效率，每个学生可以因人而异，选择自己学习的内容，在学习上充分体现了自主性。本系统是基于 Web 的网络教学系统建立在 JSP 模式下，以互联网为传输媒介，以浏览器为客户终端的远程网络教学系统。在改系统的设计前期，做了充分的调查，分析了本系统所具有的适用范围和潜在市场。在系统的设计阶段，充分借鉴了各大网络教学网站，结合利弊，设计了系统平台，即基于 JSP 的系统主页，并实现了预期的功能和目标。关键词：网页、自学平台、JSP、数据库、服务器新乡职业技术学院毕业设计(论文) 第 2 页The design and implementation of the
3、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
4、 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-evid
5、ent. 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 teach
6、ing 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 thei
7、r 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 f
8、ull 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 a
9、chieve the expected function and target.Key word：Webpage、Self study platform、database、server、jsp新乡职业技术学院毕业设计(论文) 第 3 页目录1、网站前端的设计 .51.1、认识 web.51.2 、HTML 51.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
10、、可用性 102.2.2、可扩展性 112.2.3、易用性 112.2.4、可管理性 112.3 、认识 apache+jsp+tomcat： .122.3.1、服务器安装 jdk.122.3.2、安装 apache.123、数据库 .163.1、数据库的介绍 163.1.1、数据库的定义 163.1.2、数据库的基本结构 163.1.3、数据库的特点 163.2、数据库的应用 174、网络自学平台的设计 .214.1、前台设计 214.2、服务器配置 284.3数据库的调式 .33新乡职业技术学院毕业设计(论文) 第 4 页5 、设计中所遇困难和解决方案 376、 结论 .39致谢： .40
11、参考文献 .411、网站前端的设计1.1、认识 webWeb 前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代产物，那时网站的主要内容是静态的，用户使用网站的行为也以浏览为主。2005 年以后，互联网进入 Web2.0 时代，各种类似桌面软件新乡职业技术学院毕业设计(论文) 第 5 页的 Web 应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。随着人们对用户体验的要求越来越高，前端开发的技
12、术难度越来越大，前端设计师这一职业开发技术包括三个要素：HTML、CSS 和 JavaScript，但随着 RIA 的流行和普及，Flash/Flex、Silverlight、XML 和服务器端语言也是前端开发设计师应该掌握的。前端设计师既要与上游的交互设计师，视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对前端设计师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才是够用呢？对于很多初级前端设计师来说这个问题是非常令人迷惑的。前端开发的门槛其实非常
13、低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事 IT 工作的人来说，前端开发是个不错的初入点。在 Web 前端中 css 的应用也是非常重要的。以前人们通常用的都是 table 布局，table布局虽然很简单，好用。但是随着社会的发展和科技的进步，越来越不能满足人们的需求。现在手机和平板电脑的兴起，人们大多数都是用手机和平板电脑浏览网页或网上购物。那么问题来了！当用户在不同的手机和平板上浏览网页时，会不会出现“错位”的现象？比如说，一个网页中的图片大小是 1024*765 分辨率的，那么你的手机或平板的分辨率是 500*800 的，会不会图片显示不全，这
14、种情况是有的，所以现在都是用 css 布局，这样和解决了用户用不同的终端浏览网页而出现的“错位”现象。1.2 、HTMLHTNL 是超文本标记语言，标准通用标记语言下的一个应用,是网页编写的基本语言。要实现 Web 网页的正文提取，必须对 HTML 的语法结构有个清楚的认识。对于搜狐、新浪、网易等包含大量信息的大型门户网站而言，其各类网页中包含信息标题、文摘、超链接等可供用户检索用的有用信息，且这类网站结构稳定、类似具有普遍代表性，所以只要对这些网站信息做到高效滤除，则等于可以对这类网站的信息做到批量处理的目的。经对比得到该类网站普遍拥有相似的结构如下：网页标题及其它与网页标题无关的信息新乡职
15、业技术学院毕业设计(论文) 第 6 页正文标题，正文内容及其它与网页正文标题，正文内容无关的信息1.3 、css 样式布局在界面设计中，层叠样式表（CSS）扮演着十分重要的角色。它是一种通过定义页面元素的位置、布局、颜色及字体来控制应用外观的代码。怎样引用 CSS 呢？首先我们要现在网页的页面定义好。在网页的页面当中可以做很多事情，例如，定义 web 的所用的语言，定义文字显示格式，用那种文字显示出来。1.3.1、引用 css样式表引用有两种定义方式。一种是,另一种。后者是应用在新建一个 css 样式表中，不和网页一个页面，这样用的看着舒服，也比较清晰，时候来维护人员一眼就能找到所要修改的内容
16、，前者是建立在网页页面中的，一个网页代码本来就比较多，要是在加上一些 css 样式，看着比较麻烦，不容易找出你找的内容。那么首先 我们在 head 中定义一个 css 样式。代码如下：定义的 css 样式定义 css 样式1.3.2、 CSS 样式表CSS 代码中的每条规则由两个部分组成：选择器和声明，它用来作用于整个页面距离上边距为 0px。在 CSS 中提供三种选择器机制来选取中对应的元素：（1）元素选择器：直接使用元素，如 P:first-chilsfont-size:24px;及 spantile=”home”font-style-size:24px;分别使用元素与元素。并且前者元素后
17、接这是一种带伪类的选择器，后者元素后接是一种带有属性的选择器。（2）ID 选择器：以#开头，用来匹配中带有对应值的元素。例如：#top /*上标题设置*/width:1349px;新乡职业技术学院毕业设计(论文) 第 7 页height:90px;margin:opx auto;/*上边距为 0px 右边距自动*/background-image:url(/images/top.jpg); /*填充背景图片*/（3）类选择器：以.开头，用来匹配中带有对应值的元素。例如：.carte_1 a /*超链接设置*/text-decoration:none;/*去除超链接样式 下面的下划线去掉了*/c
18、olor: #FFFFFF; /*颜色为#FFFFFF*/display:block; /*块状化，使超链接有个形状*/1.4、 js 脚本代码1.4.1、 js 脚本的介绍脚本是批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等。JS 即 Javascript，Javascript 是一种由 Netscape 的 LiveScript 发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如 Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有 28.8kbps，验证
19、步骤浪费的时间太多。于是 Netscape 的浏览器Navigator 加入了 Javascript，提供了数据验证的基本功能。是一个网看着美观，使用户用着赏心悦目，绝大多数的网站都是使用了 js 脚本来调试的，Java Script 的突出特点有以下几种：（1）是一种解释性的脚本语言，编写功能代码段很方便，这些 Java Script 程序不需要提前编译，它是在浏览器加载运行的过程中，一行一行解释执行的。新乡职业技术学院毕业设计(论文) 第 8 页（2）是面向对象的。开发人员可以用它创建自己的需要对象也可以使用其本身具有一些内置对象比如日期、正则表达式等。（3）具有事件驱动特性。就是因为 J
20、ava Script 是事件驱动的，它正好满足了前端开发交互页面的需要。当把一个页面对象与相应的某个事件（比如单击 click）监听绑定在一起后，对这个页面元素所进行的相应操作（比如单击操作）被监听到之后，就会调用已绑定的事件处理程序，完成特定的功能。（4）具有安全性。代码只能运行在用户客户端浏览器中以确保安全。（5）具有平台无关性。因为它是由浏览器解释执行的，所以在不同的操作平台下它都能运行，只和运行它的浏览器相关。网站前端开发主要的宗旨就是尽可能提高用户体验，当下，浏览器用户要求越来越高，用户也是互联网的重要参与者，要求在互联网中也有所参与与创造，所以交互将是互联网的重要主题之一。Java
21、 Script 凭借自身的这些特点成为 Web 前端开发的最热门的设计语言。1.4.2、如何使用 js脚本语言在使用 JavaScript 语言之前要先完成一个 jQuery 代码，保存成一个js 文件，然后在网页中调用，jQuery 也是网页前台设计师必备的技能。每个网页前台设计师都会 jQuery 不会就不是网站前台设计。所以说网站前台比后台管理者会的技能更多。在使用 js 脚本语言的时候，我们只需要把脚本独立完成，保存成一个 js 文件，然后在网页中引用，例如：上面的这句代码就是你要引用的代码。Type 是类型的意思，就是你使用的语言是那种类型的，例如“style type=text/c
22、ss” 这是使用 css 语言，而上面“type=text/JavaScript”的是使用 JavaScript 语言。然后我们新乡职业技术学院毕业设计(论文) 第 9 页要在网页中是用 JavaScript 语言了，JavaScript 语言中间或者写在中间，这两个地方没有啥多的区别。如下图：2 、服务器2.1、 服务器的介绍服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安
23、全性、可扩展性、可管理性等方面要求较高。在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器，应用程序服务器，WEB 服务器等。新乡职业技术学院毕业设计(论文) 第 10 页按照体系架构来区分，服务器主要分为两种：非 x86 服务器x86 服务器按应用层次划分可以分为五类：（1）入门级服务器（2）工作组服务器（3）部门级服务器（4）企业级服务器2.2、服务器的特性：从这四个方面来衡量服务器是否达到了其设计目的；A：Availability 可用性；S：Scalability 可扩展性；U：Usability 易用性；M：Manageability 可管理性，即服务器的 RA
24、SUM 衡量标准。2.2.1、可用性对于一个服务器来说，一个非常重要的方面就是它的“可用性”，即所选服务器可以满足长期稳定的要求，而且不能经常出问题。事实上，相当于太阳的可靠性（可靠性）。因为在服务器端是整个网络用户，而不是个人用户，在大、中型企业中，通常需要服务器从不中断。在一些特殊的领域，即使没有用户，服务器必须不间断地工作，因为它必须继续为用户提供连接服务，无论是在工作，还是工作，无论是工作，还是休息，节假日。这是服务器必须具有高稳定性的根本原因。一般来说，7X24 小时不间断工作，特别是一些大型的网络服务器，如大型公司使用服务器，Web 服务器，并提供公共服务 iqdeweb 服务器，
25、这些服务器，实际工作的次数只有一次，那就是它刚买回来的时候正式使用后完全安装，它没有工作，直到结束。2.2.2、可扩展性服务器必须具有一定的可扩展性，这是不可能的，这是不可能的，特别是在今天的信息时代。如果服务器没有一定的可扩展性，当用户不能胜任，一个价值的几万，甚至几百上千的服务器在短时间内被淘汰，为了保持可扩展性，通常需要有一定数量的可扩展空间和冗余部件（如磁盘阵列、支架等）。新乡职业技术学院毕业设计(论文) 第 11 页可扩展性具体体现在硬盘可以扩展，CPU 可以升级或扩展，系统支持 Windows NT，Linux 或 Unix，和其他主流的操作系统，等等，只是为了保持充分利用早期投资
26、。2.2.3、易用性服务器的功能比个人电脑更复杂，不仅是指硬件配置，更指的是软件系统的配置。服务器实现了这么多的功能，没有全面的软件支持是无法想象的。但一个软件系统，使用性能下降可能导致服务器、管理人员无法有效地控制。服务器的设计中很多服务器厂商，除了服务器的可用性、稳定性等方面都要考虑，还必须易于使用在服务器下的脚。服务器使用的易用性主要体现在服务器不易操作，用户的导航系统不完善，机箱设计不人性化，没有关键的恢复功能，是否存在操作系统备份，还有没有足够的培训支持等方面。2.2.4、可管理性服务器的主要特点是，有另一个重要功能的服务器，这是很容易管理。虽然我们说服务器需要继续工作，但是好的产品
27、很可能发生，人们常说的一句话是：不知道它可能是坏的，但它应该是必要的，以避免错误，并及时发现问题，并不仅可以减少服务器错误，而且还大大提高了服务器的维护效率。服务器也体现在服务器的管理上，不是智能管理系统，没有自动报警功能，是不是一个独立的系统管理系统，没有液晶显示器等。只有这样，管理员才能轻松管理、高效的工作。2.3 、认识 apache+jsp+tomcat：2.3.1、服务器安装 jdk安装的是 jdk1.3 版下面的安装目录等都可以根据自己的版本进行修改，之后是添加 jdk 的环境变量：如下：变量名： path变量值： c:jdk1.3bin变量名： JAVA_HOME变量值： c:j
28、dk1.3新乡职业技术学院毕业设计(论文) 第 12 页变量名： 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 windo
29、ws 版，比如安装到 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 工作所需要的工作文件的位置JkWorker
30、sFile “c:Tomcat 4.0confworker.properties“JkLogFile 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
31、 4.0.4，如安装到 c:tomcat4.0 下。之后我们需要创建一个文本文件，内容为：因我们只用 ajp13 所以其内容可精简为下面几行:新乡职业技术学院毕业设计(论文) 第 13 页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
32、 /本机,若上面的 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是没有启用 Ap
33、j13 的 8009 的端口即 mod_jk 所使用，修改后如下：然后保存，目前为止配置基本完成了。重新启动计算机，开始整体测试。测试首先，启动 Apache，然后在浏览器里输入 http:/localhost，如果能看到 Apache 的欢迎页面，那么第一步成功了。然后，运行 startup.bat 启动 Tomcat，再打开浏览器输入： http:/localhost:8080/如果看到 Tomcat，那么 Tomcat 也没有问题。新乡职业技术学院毕业设计(论文) 第 14 页最后最重要的是 Apache 下可以解释 JSP 和 Servlet,需要敲一些代码写进一个文档并将其命名为 r
34、osealet.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 下，请注意，不要混淆概念。新乡职业
35、技术学院毕业设计(论文) 第 15 页3、数据库3.1、数据库的介绍3.1.1、数据库的定义数据库（Database）是按照数据结构来组织、存储和管理数据的仓库，它产生于距今六十多年前，随着信息技术和市场的发展，特别是二十世纪九十年代以后，数据管理不再仅仅是存储和管理数据，而转变成用户所需要的各种数据管理的方式。数据库有很多种类型，从最简单的存储有各种数据的表格到能够进行海量数据存储的大型数据库系统都在各个方面得到了广泛的应用。在信息化社会，充分有效地管理和利用各类信息资源，是进行科学研究和决策管理的前提条件。数据库技术是管理信息系统、办公自动化系统、决策支持系统等各类信息系统的核心部分，是进
36、行科学研究和决策管理的重要技术手段。3.1.2、数据库的基本结构数据库的基本结构分为三个层次，反映了数据库的三个不同的角度。数据库称为物理数据库的概念模型的框架。数据库由框架组成，数据库称为用户数据库。（1）物理数据层。（2）数据层概念。（3）用户数据层。新乡职业技术学院毕业设计(论文) 第 16 页3.1.3、数据库的特点数据共享包括所有用户可以同时访问数据库中的数据，包括用户可以用各种方式使用界面数据库，并提供数据共享。如何减少数据冗余与文件系统相比，数据库实现了数据共享，从而避免了用户建立应用文件，减少了冗余数据量，减少了数据冗余，维护了数据的一致性。在这里我们对比下每种数据库的优缺点：
37、（1）MySQL，MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。MySQL 是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL 所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策（本词条“授权政策”
38、），它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库。由于其社区版的性能卓越，搭配 php 和 Apache 课组成良好的开发环境。（2）SQL Server 是 Microsoft 公司推出的关系型数据库管理系统。具有使用方便可伸缩性好与相关软件集成程度高等优点，可跨越从运行 Microsoft Windows 98 的膝上型电脑到运行 Microsoft Windows 2012 的大型多处理器的服务器等多种平台使用。Microsoft SQL Server 是一个全面的数据库平台，使用集成的商业智能
39、 (BI)工具提供了企业级的数据管理。Microsoft SQL Server 数据库引擎为关系型数据和结构化数据提供了更安全可靠的存储功能，使您可以构建和管理用于业务的高可用和高性能的数据应用程序。（3）Oracle Database，又名 Oracle RDBMS，或简称 Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说 Oracle数据库系统是目前世界上流行的关系数据库管理系统，系统可移植性好、使用方便、功能强，适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的 适应高吞吐量的数据库解决方案。新乡职业技术学院毕业设计(论文) 第
40、17 页通过对比不难发现，如果要实现最佳的配置，无疑 Oracle 是上上之选。但是考虑的成本的问题，还是选择了性能虽然欠佳的成本较小的 Mysql 数据库。3.2、数据库的应用而如果要实现动态交互，那么肯定是离不开很重要的数据库。而这其中，数据库的选择也是一个问题，传统的常用数据库有以下几种。（1）Mysql （2）SqlServer（3）Oracle选择好数据库之后就要下载安装并使用了，这里选择的是比较成熟的 mysql-5.6.24-win32 版本，下载完成后，按照步骤进行安装就能使用了，而使用数据库，就需要具备一些相应的知识了。列如，如何进入数据库，如何删除数据库，如何在数据库中建立
41、表及数据。下面为大家一一介绍：（1）数据库的进入方法，一般安装完数据库之后，都会提供一个数据库的命令行登陆程序，即新乡职业技术学院毕业设计(论文) 第 18 页（2）输入登陆数据库的密码，这个密码，即是安装时提示你输入的 root 用户的登陆密码，输入完成后，按回车键即可完成登陆。（3）建立相应的表格，根据网站需要，首先建立了一个与用户注册相关的表格，里面存放的是用户的注册用户名和密码。而要建立这个表之前，必须要建立一个数据库。建立数据库的命令是：CREATE DATABASE XXX；其中 XX 为数据库的名字。（4）建立完数据库之后进入这个数据库，使用 USE XXX;来进入新建的数据库。
42、（5）进入相应的数据库之后我们就可以建立对应的表格了，建立表格的命令为：CREATE TABLE tableName 字段名 字段格式.；表建立完成，先进行试验，插入一个数据进行验证，使用 INSERTINTOtableName(idname.)values(1admin、.);最后使用 select * from tableName;进行查看。但是这里仅仅是对数据库进行了后台的建立，还要对数据库与对应的网页进行连接，才能实现相应的功能。为了进行快速及方便的代码编辑，选用了比较流行的 Myeclipse 作为这个网页开发的环境。MyEclipse，是在 eclipse 基础上加上自己的插件开发
43、而成的功能强大的企业级集成开发环境，主要用于 Java、Java EE 以及移动应用的开发。MyEclipse 的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持相当不错。MyEclipse 企业级工作平台（MyEclipseEnterprise Workbench ，简称 MyEclipse）是对 EclipseIDE 的扩展，利用它我们可以在数据库和 JavaEE 的开发、发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的 JavaEE 集成开发环境，包括了完备的编码、调试、新乡职业技术学院毕业设计(论文) 第 19 页测试和发布功能，完整支持HTML，Struts
44、，JSP，CSS，Javascript，Spring，SQL，Hibernate。MyEclipse 是一个十分优秀的用于开发 Java, J2EE 的 Eclipse 插件集合，MyEclipse 的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持十分不错。MyEclipse 可以支持JavaServlet，AJAX，JSP，JSF，Struts，Spring，Hibernate，EJB3，JDBC 数据库链接工具等多项功能。可以说 MyEclipse 是几乎囊括了目前所有主流开源产品的专属eclipse 开发工具。安装好 Myeclipse 之后就可以进行相关网页的开发，首先需要对
45、 mysql 数据库进行连接。在 Oracle 官网下载 jdbc 连接文件之后，打开。然后布置到 Myeclipse 中即可。要完成 HTML 与 JAVA 代码的连接，必须了解很多的 JSP 知识。JSP 通过将动态代码嵌入到静态的 HTML 或者 XML 中，产生动态的输出。JSP 技术是基于 Java Servlet 技术，而且 JSP 最终也是要转成 Servlet 来执行。最简单的 JSP文件是直接将一个 HTML 文件另存为.jsp 文件，然后将它放在 Web 应用服务的目录下即可。JSP 技术为创建显示动态生成内容的 Web 页面提供了一种简洁而快速的方法。设计目的是是构造基于
46、 Web 的应用程序更加容易和快捷，而这些应用程序能够与各种 WEB服务器、应用服务器、浏览器和开发工具共同工作。 新乡职业技术学院毕业设计(论文) 第 20 页4、网络自学平台的设计网站的制作与设计，主要是为了改变现在教学的现状。现在教学大多数都是为了应试教育为主，但是我们这个自学平台是个人兴趣，对这门课程感兴趣，你可以选择学习，反之你可以不学习，也可以去其他的课程里面学习。为了更方便的展示网站运行效果，下面一个拓补图表示一下：Web 数据库体系系统结构图4.1、前台设计鹦鹉自学网是以教学为目的的免费的自学平台，为大学生的课余生活提供一些学习的机会，目前大学生的课余时间非常多，为大学生以后的
47、创业和招工有很大帮助。鹦鹉自学网整体页面以大气为主，让使用者看着赏心悦目。是使用者更有兴趣在本网站学习是注册。浏览器 Web 服务器数据库服务器 数据库JDBChttp JSP/HTML新乡职业技术学院毕业设计(论文) 第 21 页目前的网站主要是在局域网中实行，现在是没有传到网上，还在测试阶段。网站用到了服务器、MySQL 数据库、JavaScript 脚本程序、div+css 布局。后台使用server2003 服务器和 MySQL 数据库。前台网页中使用了 JavaScript 脚本程序，实现网站的一些特效。先介绍一下网站的前台设计：如图：图：1上图的 top 是菜单栏。是客户能访问到自
48、己想要去的页面，在菜单中用到的是 a 标签，因为 a 标签有个 hover 属性，这样更容易实现鼠标放上去的一些动作。整个的网站以div+css 布局，这样可以是以后再前台布局工程师更好的找到想要修改的地方。实现的代码：div:图：2Css:新乡职业技术学院毕业设计(论文) 第 22 页图：3这些代码能实现上面 top 的鼠标放上去 颜色法伤改变。图 3 中 top 下面的是一个网站发不了一些特色课程，是客户一眼就能看到。当然，这个是个图片轮播特效，使整个网站显得更高端大气，是这个网站的灵魂，要实现这个效果，用到了 js 代码，这个代码不是很重要，网上多的是，下面就展示一下代码。代码如下：这个
49、是引用你的 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();新乡职业技术学院毕业设计(论文) 第 23 页$(“.flash2“).animate(“left“:_index*-1349,500););function autoplay()/自动轮播图片cleartime=setInterval(function
