中国矿业大学web技术实验报告11xWord下载.docx
《中国矿业大学web技术实验报告11xWord下载.docx》由会员分享，可在线阅读，更多相关《中国矿业大学web技术实验报告11xWord下载.docx（88页珍藏版）》请在冰豆网上搜索。
3.2实验步骤 18
3.2.1将html改写成JSP 18
3.2.2JSP内置对象的使用以及内置对象的作用域 20
3.2.3设计JavaBean并实现服务器端的验证 21
3.2.4使用session对象实现登录、注销功能 26
3.2.5练习使用客户端跳转、服务器端跳转 29
3.3实验结果截图 29
4设计心得 35
实验三、Web数据库实验 36
1实验要求 36
2实验目的 36
3详细设计 36
3.1实验内容 36
3.2实验步骤 36
3.2.1数据库的设计 37
3.2.2DAO模式的设计 39
3.2.3Servlet与jsp界面的交互设计 49
3.2.4不同类型用户的登录控制的实现 64
3.2.5Servlet过滤器的实现 65
3.2.6登录时间和次数的记录 67
3.3实验结果截图 69
4设计心得 84
1实验要求
实验一、静态web页面设计实验
1、使用HTML5开发Web静态页面。
按照HTML5的规范设计与开发网站。
2、练习HTML5的新HTML5新特性和效果。
3、练习使用Web页面开发工具。
（MyEclipse、Dreamwear、VS.NET或其它）
4、完成实验报告和实验成果。
2实验目的
1.配置Web（TOMCAT）服务器，了解Web工作原理。
2.熟悉常用HTML5标记的含义，能够熟练使用这些标记设计静态Web页面，实现Web页面上的各种元素的合理布局，如表单、表格、图片以及框架等标记
的使用。
3.了解CSS样式表的定义和使用方法，能够使用CSS美化和布局Web页面。
4.掌握JavaScript脚本语言的基本语法。
5.能够使用JavaScript与浏览器对象进行交互。
6.能够使用JavaScript处理表单和表单元素事件。
3详细设计
3.1实验内容
1.能够独立安装Web服务器,TOMCAT，理解Web服务器的常用配置，并利用其搭建网站，设计一组静态的网页，至少5个页面，其中包括1个注册页面。
2.利用CSS技术布局并美化页面。
3.使用JavaScript脚本对注册页面进行验证，防止错误数据输入。
4.使用一些JavaScript脚本实现网面部分内容的动态显示，加入时钟等
（不限于此）。
3.2实验步骤
3.2.1环境的搭建
（1）Java环境的搭建：
首先下载javajdk1.8，并进行安装，然后进行相应的环境配置即在环境变量中创建一个新的变量名为JAVA_HOME，输入jdk的安装路径如图所示：
然后在path中添加%JAVA_HOME%/bin;
在classpath中添加.
;
%JAVA_HOME%\lib\dt.jar;
%JAVA_HOME%\lib\tools.jar
（2）安装Myeclipse
在这里用的是Myeclipse2016stable1.0安装过程及破解过程不再赘述
（3）配置tomcat
在环境变量中添加一个新变量CATALINA_HOME
变量值为tomcat的安装路径（在这里用的是解压缩版）然后在path变量中添加%
CATALINA_HOME%\bin;
%CATALINA_HOME%\lib即可完成
（由于后续的运行中发现tomcat8和Myeclipse并不兼容，但可以和eclipse
兼容，所以在Myeclipse中使用的是eclipse自带的tomcat7）
3.2.2建立Web工程并进行网页设计
通过File->
new->
WebProject即可建立一个web工程。
建立好后如图所示：
然后通过File->
other中找到HTML建立一个新的HTML
3.2.3网页设计
（1）第一个静态页面——MyHtml.html页面效果如下：
源码如下：
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
第一个页面<
/title>
styletype="
text/css"
br>
/br>
body{font-size:
18px;
color:
#FFF;
}
a{color:
#FFF}
.classname{border:
solid1px#2d2d2d;
text-align:
center;
background:
#575757;
padding:
350px100px350px100px;
-moz-border-radius:
100px;
-webkit-border-radius:
5px;
border-radius:
}
.classname{border:
dashed7px#7f9eeb;
-moz-border-radius:
-webkit-border-radius:
border-radius:
/style>
style>
.alsp{font-family:
"
幼圆"
font-size:
20px}
--JAVASCRIPT代码 如果编译过程中不提示错误Project->
clean然后重启BuildAutomatic -->
scriptlanguage="
JavaScript"
functionjudge（）{
varpsd,us;
psd=document.getElementById（"
password"
）.value;
us=document.getElementById（"
user"
varreg=/^[A-Za-z]+$/;
if（（!
isNaN（psd）||reg.test（psd））&
&
（!
isNaN（us）||reg.test（us）））
{
alert（"
格式符合要求"
）;
else{alert（"
格式不符合要求"
/script>
--JAVASCRIPT代码-->
/head>
body>
divclass="
classname"
FORMname="
form1"
method="
post"
action="
alsp"
Pstyle="
color:
white"
用户名：
INPUTtype="
text"
id="
value="
请输入您的用户名"
size="
20"
/P>
密&
nbsp;
码：
请输入您的密码"
/div>
P>
button"
name="
register"
注册"
login"
登陆"
onclick="
judge（）"
/FORM>
/body>
/html>
其中采用两个独立的class选择符用来进行页面的装饰，并自定义一个用于装饰字体的alsp选择符来修改字体的样式。
其中用JavaScript脚本简单的对输入框进行了格式检查，如果格式不符合要求将会弹出窗口提示，格式符合要求也会弹出窗口提示正确。
（2）第二个静态页面——MyHtml2.html
页面效果如下：
关键源码如下：
scriptlanguage="
javascript"
functionfun（thisurl）{window.location=thisurl;
//重定向
varreg_email=/^（[a-zA-Z0-9]+[_|\_|\.]?
）*[a-zA-Z0-9]+@（[a-zA-Z0-
9]+[_|\_|\.]?
）*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
varpsd,repsd,us,nicheng,age,sex,email,aihao;
aihao="
psd=document.form1.psd.value;
us=document.form1.username.value;
nicheng=document.form1.nicheng.value;
age=document.getElementById（"
age"
email=document.getElementById（"
email"
repsd=document.getElementById（"
repassword"
if（document.form1.sex_[0].checked）{sex=document.form1.sex_[0].value;
}elsesex=document.form1.sex_[1].value;
for（i=0;
i<
document.form1.aihao.length;
i++）if（document.form1.aihao[i].checked）{aihao+=document.form1.aihao[i].value+"
//两种方式得到输入框中的值
varreg2=/[0-9a-zA-Z_]{1,18}/;
varreg3=/[0-9a-zA-Z
升级会员 