中国矿业大学web技术实验报告.docx

中国矿业大学计算机学院2013 级本科生课程报告课程名称 Web技术 学生姓名 学 号 专 业 任课教师 廖红梅 报告时间 2016.11.1 目录实验一、静态web页面设计实验11 实验要求12 实验目的13 详细设计13.1 实验内容13.2 实验步骤13.2.1 环境的搭建13.2.2 建立Web工程并进行网页设计23.2.3 网页设计24 设计心得17实验二、动态web页面设计实验181实验要求182实验目的183详细设计183.1实验内容183.2实验步骤183.2.1 将html改写成JSP183.2.2 JSP内置对象的使用以及内置对象的作用域203.2.3 设计JavaBean并实现服务器端的验证213.2.4 使用session对象实现登录、注销功能263.2.5 练习使用客户端跳转、服务器端跳转293.3 实验结果截图294设计心得35实验三、Web数据库实验361实验要求362实验目的363详细设计363.1实验内容363.2实验步骤363.2.1数据库的设计373.2.2 DAO模式的设计393.2.3 Servlet与jsp界面的交互设计493.2.4不同类型用户的登录控制的实现643.2.5 Servlet过滤器的实现653.2.6登录时间和次数的记录673.3 实验结果截图694设计心得84Web技术实验报告实验一、静态web页面设计实验1 实验要求1、使用HTML 5 开发Web静态页面。按照HTML 5的规范设计与开发网站。2、练习HTML 5的新HTML5新特性和效果。3、练习使用Web页面开发工具。（MyEclipse、Dreamwear、VS.NET或其它）4、完成实验报告和实验成果。2 实验目的1.配置Web(TOMCAT)服务器，了解Web工作原理。2.熟悉常用HTML 5标记的含义，能够熟练使用这些标记设计静态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环境的搭建：首先下载java jdk 1.8，并进行安装，然后进行相应的环境配置即在环境变量中创建一个新的变量名为JAVA_HOME，输入jdk的安装路径如图所示：然后在path中添加%JAVA_HOME%/bin;在classpath中添加.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar（2）安装Myeclipse在这里用的是Myeclipse 2016 stable 1.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-Web Project即可建立一个web工程。 建立好后如图所示： 然后通过File-new-other中找到HTML建立一个新的HTML3.2.3 网页设计（1）第一个静态页面MyHtml.html页面效果如下： 源码如下：第一个页面body font-size:18px; color:#FFF; a color:#FFF.classname border:solid 1px #2d2d2d; text-align:center; background:#575757; padding:350px 100px 350px 100px; -moz-border-radius: 100px; -webkit-border-radius: 5px; border-radius: 5px;.classnameborder:dashed 7px #7f9eeb;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;.alspfont-family:幼圆;font-size:20pxclean 然后重启 Build Automatic -function judge()var psd,us;psd=document.getElementById(password).value;us= document.getElementById(user).value;var reg=/A-Za-z+$/;if(!isNaN(psd)|reg.test(psd)&(!isNaN(us)|reg.test(us)alert(格式符合要求);else alert(格式不符合要求);用户名：密  码：      其中采用两个独立的class选择符用来进行页面的装饰，并自定义一个用于装饰字体的alsp选择符来修改字体的样式。其中用JavaScript脚本简单的对输入框进行了格式检查，如果格式不符合要求将会弹出窗口提示，格式符合要求也会弹出窗口提示正确。（2）第二个静态页面MyHtml2.html页面效果如下：关键源码如下：function fun(thisurl)window.location = thisurl ;/ 重定向function judge()var reg_email = /(a-zA-Z0-9+_|_|.?)*a-zA-Z0-9+(a-zA-Z0-9+_|_|.?)*a-zA-Z0-9+.a-zA-Z2,3$/;var psd,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).value;email=document.getElementById(email).value;repsd=document.getElementById(repassword).value;if(document.form1.sex_0.checked)sex=document.form1.sex_0.value;else sex=document.form1.sex_1.value;for(i=0;idocument.form1.aihao.length;i+)if(document.form1.aihaoi.checked)aihao+=document.form1.aihaoi.value+ ;/两种方式得到输入框中的值var reg=/A-Za-z+$/;var reg2=/0-9a-zA-Z_1,18/;var reg3=/0-9a-zA-Z_6,18/;var kongge=/s+/;var age2=/1-9d*$/;if(psd=|us=|age=|email=|nicheng=)alert(该项不能为空);else if(!reg2.test(us)alert(用户名请输入英文数字下划线的组合);else if(psd!=repsd)alert(两次密码不一致);else if(!reg3.test(psd)alert(密码太短)else if(kongge.test(nicheng)alert(昵称里请不要带空格)else if(isNaN(age)alert(年龄格式错误)else if(age90)alert(年龄输入错误);else if(!reg_email.test(email)alert(邮箱格式错误);else alert(注册成功!n+用户名:+us+n昵称:+nicheng+n+年龄:+age+n性别:+sex+n邮箱:+email+n爱好:+aihao);/alert(用户名格式不符合要求);/alert(昵称格式不符合要求);/alert(年龄格式不符合要求);/alert(邮箱格式不符合要求);/alert(ceshi)请输入符合要求的数据用户名：密  码：密  码：昵  称：年  龄：性  别：   男      女邮  箱：爱  好：看电影聊天唱歌          = 请选择要浏览的站点 =百度新浪微博这个页面是一个注册页面，其中使用form表单来提交数据，并通过javascript来判断提交的数据是否合格。其中的主要控件是输入框、单选框、复选框、下拉菜单，对于输入框，主要用正则表达式以及isNaN函数进行用JavaScript判断是否符合规范，下拉菜单通过JavaScript实现了重定向操作，而单选框和复选框也通过document.表单名称.控件名称.value的方式来得到值，除此之外还用了getElementById的方式得到输入框中的值，判断操作在自己定义的函数中进行，会对正确或错误用弹出对话框（alert）的方式进行提示。（3）第三个静态页面index2.html页面效果如下：在这里只贴关键代码： 小吃简介牛肉面 .art-content .art-postcontent-0 .layout-item-0 padding-right: 10px;padding-left: 10px; .ie7 .art-post .art-layout-cell border:none !important; padding:0 !important; .ie6 .art-post .art-layout-cell border:none !important; padding:0 !important; 我的个人网站 小吃简介牛肉面个人简介个人照片个人收藏Blog 网站导航 小吃简介牛肉面个人简介个人照片个人收藏Blog 振奋人心的话. 这个世界并不是掌握在那些嘲笑者的手中，而恰恰掌握在能够经受得住嘲笑与批评忍不断往前走的人手中 . 如果我们做与不做都会有人笑，如果做不好与做得好还会有人笑，那么我们索性就做得更好，来给人笑吧. 小吃简介牛肉面    牛肉拉面是兰州的传统名食，它具有“一清、二白、三绿、四红、五黄”的特征，且色香味美，誉满全国。然而，在全国各地都会有“兰州正宗牛肉拉面”的招牌，但其实都并不正宗，都还填加了些其他蔬菜（如菠菜）。因此，国内大部分地区消费者很难吃到真正的“兰州牛肉面”，而兰州牛肉面只有在兰州才能达到原汁原味。 阅读全文 回族老人马保子首创挑担经营，在近百年的漫长岁月里，以一碗面而享誉金城肉烂汤鲜、面质精细而蜚声中外兰州牛肉拉面最为著名 百度搜索 | 新浪微博Copyright 2016. All Rights Reserved. 其中使用链接css的形式将css应用到该html界面上，体现整体网页的一个美化效果。除此之外，div节点的应用对整个网页进行了分块，看起来更加美观。在这里面还有一个重要的元素就是超链接，用href来标注链接的跳转目的地址，其中个人简介、小吃简介牛肉面、百度等是可以实现真正的链接跳转的，跳转到xiaochijianjie文件夹下的new-page.html（4）第四个静态页面xiaochijianjie/new-page.html效果如下：在这里会有一个HTML5的小动画即运动的小球，主要代码如下： 是结合CSS3来实现动态的场景的，其中主要有CSS3的animation用来实现简单的动画效果。除此之外，该页还使用了HTML5的新特性用来实现布局。（5）第五个静态页面blog.html在这里只贴出表格的代码：日程任务内容10.10完成实验报告暂无10.11完成课程设计暂无10.12暂无暂无 这几行代码实现了该页面中的表格布局。（6）JS动画展现页面MyHtml3.html页面效果如下：鼠标放入到白块上时，白块会水平向右增长，鼠标离开，白块会渐渐恢复原状，这里贴出实现动态运动的代码：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td margin:0;padding:0; font-size:12px; table border-collapse:collapse;border-spacing:0; fieldset,img border:0 address,caption,cite,code,dfn,em,strong,th,var font-style:normal;font-weight:normal ol,ul list-style:none caption,th,tdtext-align:center h1,h2,h3,h4,h5,h6 font-size:100%;font-weight:normal q:before,q:after content: abbr,acronym border:0.odivposition:relative;.odiv ul liwidth:200px; height:100px; background:white; margin-bottom:20px; 以上用于绘制白块。window.onload = function() var olist = document.getElementsByTagName(li); for(var i=0; i0?Math.ceil(speed):Math.floor(speed);/向上取整和向下取整 if(obj.offsetWidth = itarget) clearInterval(obj.timer);/回复到要求的长度时，停止 else obj.style.width = obj.offsetWidth+speed+px;/否则继续运动 ,30); 以上JavaScript代码用于实现白快的增长和减少。4 设计心得 在开始安装Myeclipse的时候，遇到的困难重重，所幸最后在通过查阅资料的情况下，总算解决了所有的问题。学习HTML的过程中，从一开始的不熟悉到后来的上手编写，经历了非常多的困难，但是从对HTML语言的熟悉和对HTML5的学习过程中，学到了非常多的东西，HTML布局的构建与CSS美化页面的结合，受益颇多。实验二、动态web页面设计实验1实验要求1.实验之前认真查阅相关资料，准备好实验方案。2.认真实验，对实验过程、结果进行分析，注意验证实验效果。3.完成实验报告和实验成果。2实验目的1、熟悉JSP的开发工具，掌握服务器端Web程序的工作原理。2、熟悉JSP编译指令，动作标记。3、熟悉JSP的隐含对象，正确理解request、session、application三个对象的作用域。4、掌握编写JavaBean的方法，使用JSP 、 3个动作指令。5、掌握JSP中表单和表单Bean的映射。3详细设计3.1实验内容1、修改实验1中的静态页面，改为JSP页面。2、依据注册页面，设计1个JavaBean并实现服务器端的验证，防止错误数据的录入。3、使用JSP技术设计Web页面，至少有5个页面，一定要能够体现JSP内置对象不同的作用域。4、使用session对象，实现登录、注销功能。5、练习使用客户端跳转、服务器端跳转。3.2实验步骤3.2.1 将html改写成JSP（1）在工程下新建一个JSP文件，过程如下：自定义名字新建一个jsp文件即可。（2）将html文件中的代码复制到jsp文件中，复制后在jsp文件中的第一行写：目的是为了防止乱码。（3）右键jsp文件Run AsMyeclipse Server Application 运行结果如图：html文件与jsp文件对应关系如下：MyHtml.html index.jspMyHtml2.html MyJsp2.jspMyHtml3.html MyJsp3.jspindex2.html index2.jspxiaochijianjieniuroumian.html xiaochijianjieniuroumian.jspblog.html blog.jspxiaochijianjieniuroumian/new-page.html xiaochijianjieniuroumian/new-page.jsp3.2.2 JSP内置对象的使用以及内置对象的作用域（1）page对象及page对象的作用域在MyJsp.jsp中，通过pageContext对象定义了一个变量，并在此页面获取该变量，由于page的范围只在本页上，所以本页是可以获取的，但跳转之后不能获取。（2）request对象及request对象的作用域在loginBean.jsp中， 使用request内置对象，传递参数；同时在success.jsp中，获得来自loginBean.jsp中的参数。其中，loginBean是通过jsp:forward服务器端跳转到success.jsp中的，故可以获取request对象的参数。（3）session对象及session对象的作用域在success.jsp中用session对象传递参数，变量名为name和psd，参数来自javaBean，通过javaBean获取变量内容。当通过客户端跳转到register_.jsp时，此时通过session对象获取到了参数。（4）application对象及application对象的作用域在logout.jsp中，通过application定义了两个参数（其中name和password是字符串变量），在register_.jsp中，获取application对象的参数内容，变转换成字符串，由于application对象是保存在服务器上的，所以每一个session都可以访问。3.2.3 设计JavaBean并实现服务器端的验证（1）创建JavaBean文件新建一个工程名为test2，在test2下的src中建一个包为com.bean，包中新建一个java文件，名为mybean.javamybean.java的结构如下：用于和网页传递的变量： private static String username;/用于接收用户名 private static String psd;/用于接收密码 private String nicheng;/用于接收昵称 private String age;/用于接收年龄 private String email;/用于接收邮箱名 private String repassword;/用于接收第二次填写的密码 验证两次密码是否一致 private String sex_;/用于接收性别 private String aihao;/用于接收爱好 private boolean finish; private Map errors =null;/用于存储错误信息 static private ArrayList loginname=new ArrayList();/用于以后与数据库/结合的时候扩展用，这里无用 static private ArrayList loginpassword=new ArrayList();/同上验证输入数据是否正确的方法： public boolean check() boolean flag=true;/ if(loginname.size()1)/ for(int i=loginname.size()-2;i=0;i-)/检查是否有重复的用户名/ if(loginname.get(i).equals(username)/ / flag=false;/ this.username=;/ this.errors.put(errname, 用户已存在); / / else if(this.username.equals()/ flag=false;/ System.out.print(用户名为空);/ this.errors.put(errname,