《Web体系结构与开发技术》实验报告
《Web体系结构与开发技术》实验报告
班级： 计软二班 学号： 20095538 姓名： 郭凯
实验日期： 2011/12/16 实验成绩：
一、 实验目的
1. 了解Web体系结构与开发技术的基本知识
2. 掌握静态页面的标签结构，能够编写静态页面。
3. 掌握Flash的基本原理，会使用Adobe Flash 制作Flash动画。
4. 掌握动态网站技术JSP，理解其原理，并使用JSP技术制作个人网站。
二、实验原理
JSP（Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。
Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。
JSP与JavaServlet一样，是在服务器端执行的，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。
三、实验步骤
1. 网站前期准备工作。
1) 网站功能设计。
网站为在线音乐网站，主要功能有：用户在线听音乐，管理员后台登录，添加、管理歌手，添加、管理歌曲等功能。
2) 数据库设计。
由于网站功能较少，结构较简单，数据库设计也比较简单，具体如下：
数据库名：music_db
数据表设计：
admin（管理员表）:
id int 主键自增
name varchar(10) 登录名
pwd varchar(20) 登录密码
type int 管理员权限
song（歌曲表）：
id int 主键自增
name varchar(30) 歌曲名
artist varchar(20) 艺术家(歌手)
album varchar(30) 所属专辑
url varchar(50) 硬盘路径
genre varchar(10) 流派
duration varchar(10) 时长
times int 点播次数(热度)
artist（歌手表）：
id int 主键自增
name varchar(20) 艺术家名(歌手名)
type varchar(5) 性别
area varchar(20) 地区
note varchar(1000) 简介
songs int 歌曲数量
hot int 热度
3) 目录结构设计。
在开发工具MyEclipse中新建Web Project 工程music_player，并创建如下目录：
各目录说明：
/src 资源目录，包含编写的各种Java类，Servlet源文件
/WebRoot 网站根目录
/WebRoot/admin 后台管理界面的所属目录
/WebRoot/conn 包含连接数据库的代码文件
/WebRoot/css css样式表文件目录
/WebRoot/images 网站排版所需图片目录
/WebRoot/js js代码文件目录
/WebRoot/META-INF 系统自动生成的目录
/WebRoot/music 存放上传的音乐文件目录
/WebRoot/WEB-INF 存放Web信息目录，包含所需类库，配置文件
2. 网站代码编写。
1) 登录界面。
原理简介：通过将login.jsp页面表单的action设置为./admin/index.jsp ，将表单填写的用户密码值传递给后台页面，后台index.jsp 页面通过查询数据库，比对用户是否存在以及密码是否正确，如果正确，则进入后台，并设置session保存登录信息；否则返回登录页面，并通过url传递登录出错信息并显示。
关键代码：见附录：代码片段1。
2) 添加歌曲界面。
原理简介：后台./admin/add_song.jsp界面显示添加歌曲表单。将表单属性设置为enctype=”multipart/form-data”使之能上传二进制文件，同时action设置为Servlet UploadServlet.java，UploadServlet.java的主要功能为获取上传的表单域的值，将其转码为UTF-8格式以及将二进制歌曲文件存储到磁盘，并将数据写入到数据库中。
关键代码：见附录：代码片段2。
3) 管理歌曲及歌手。
原理简介：通过查询数据库，将现有歌手及歌曲的信息以表格形式显示出来，为每一个数据添加操作（删除，修改），通过点击操作进入相应的操作页面，然后进行相应的操作，并将操作结果存如数据库，完成数据的修改。
关键代码：略。
4) 防止恶意登录。
为防止他人在未进行登录验证的情况下通过输入恰当的url登录后台，在登录后台页面时均会检验其是否已登录，即检验是否已设置session值，如已设置，才能登录，否则会跳转到登录页面。且session的设置只有在其登录成功后才能设置生效。当退出后，会立即清楚session值。
关键代码：略。
5) 前台主页面各功能逻辑。
原理简介：通过点击导航条，主页获得查询字符串中的值对，获得要显示的内容及定位。例如导航条中的排行榜，其链接为./index.jsp?current=rank，则为链接到主页（即本页面），并传递current=rank值对，主页通过获得值对，知道要显示的内容为“排行榜”，于是进行相应的工作，如查询数据库，设置相应的值，然后将数据显示到页面的相应标签内。
关键代码：见附录：代码片段3。
6) 前台播放歌曲功能。
原理简介：播放歌曲功能主要通过加载Windows Media Player 控件来实现歌曲的播放。其主要内容为<object>标签，并通过<param>标签为其设置参数，加载控件。歌曲的播放，暂停，音量大小由js代码控制控件实现。
当点击歌曲后面的播放链接后，如./index.jsp?current=rank&play=13，主页通过play=13获得要播放歌曲的ID，通过查询数据库获得歌曲的磁盘路径，并将路径值设置给一个隐藏的标签，在页面初始化后，js代码获得路径值，并传递给控件，然后点击播放按钮，则能通过js播放歌曲。
关键代码：见附录：代码片段4。
四、实验结果
代码片段1（登录验证）
//判断是否已登录（即是否已设置session值）
//已登录则获取值，未登录则返回登录页面
if(session.getAttribute("admin_name") != null)//session已设置
admin_name = session.getAttribute("admin_name").toString();
elseif(session.getAttribute("admin_name") == null && request.getParameter("name") == null)//session未设置且不是从登录页面转来此页面
response.sendRedirect("../login.jsp?islogin=unlogin");
else//从登录页面转来此页面，获取表单，检验正确性
{
//获取表单数据
if(request.getParameter("name") != null)
name = request.getParameter("name").toString();
if(request.getParameter("pwd") != null)
pwd = request.getParameter("pwd").toString();
//转码
name = new String(name.getBytes("ISO-8859-1"), "UTF-8");
pwd = new String(pwd.getBytes("ISO-8859-1"), "UTF-8");
//查询数据库
sql = "select * from admin where name = '" + name + "'";
ResultSet rs = stmt.executeQuery(sql);
String query_pwd = "";
if(rs.next())
query_pwd = rs.getString("pwd");
//比对密码
if(query_pwd == "" || !pwd.equals(query_pwd))//用户名或密码不对，重新登录
response.sendRedirect("../login.jsp?islogin=wrong");
else//登录成功，设置session
session.setAttribute("admin_name",name);
}
代码片段2（添加歌曲的Servlet UploadServlet.java）
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
importorg.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import java.text.SimpleDateFormat;
importjava.util.Calendar;
import java.util.Date;
importjava.util.Iterator;
import java.util.List;
importjava.io.*;
import java.sql.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
publicclassUploadServletextends HttpServlet {
publicvoid service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
try
{
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
FileItemFactory factory= new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);
InputStream is =null;
String uploadPath = "D:\\workspace\\music_player\\WebRoot\\music\\";//存储路径
String filename = "";
String result = "";//结果字符串
boolean success = false;//事务指示
boolean success1 = false;
boolean success2 = false;
String[] valuerow = new String[4];
int i=0;
for(FileItem item : items)
{
if(item.isFormField())
{
String fieldname = item.getFieldName();
String value = item.getString("UTF-8");
valuerow[i] = value;
i++;
}
elseif(item.getName() != null && !item.getName().equals(""))
{
filename = item.getName().substring(item.getName().lastIndexOf("\\") + 1);
is = item.getInputStream();
}
elseif(item.getName() == null && item.getName().equals(""))
out.println("无文件");
}
//以时间命名文件
int index = filename.indexOf(".");
Date dt = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
filename = filename.substring(0,index) + sdf.format(dt) + filename.substring(index);
filename = uploadPath + filename;
//连接数据库，检查歌手是否已存在，后再则开始上传
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance();
String url = "jdbc:sqlserver://localhost:1433;DatabaseName=music_db;characterEncoding=UTF8";
String db_user = "sa";
String db_pwd = "sa";
Connection conn = DriverManager.getConnection(url, db_user, db_pwd);
Statement stmt = conn.createStatement();
String sql = "select * from artist where name = '" + valuerow[1] + "'";
boolean isexit = true;
ResultSet rs1 = stmt.executeQuery(sql);
if(rs1.next())
isexit = true;//歌手已存在
else
isexit = false;//歌手不存在
if(!isexit)
{
out.println("歌手不存在，请先<a href=\"./admin/add_artist.jsp\">添加</a>");
}
else
{
sql = "insert into song(name,artist,album,url,genre,times) values('"+valuerow[0]+"','"+valuerow[1]+"','"+valuerow[2]+"','"+filename+"','"+valuerow[3]+"',0)";
int rs = stmt.executeUpdate(sql);
if(rs == 1)
success1 = true;
else
success = false;
//开始上传
if(!filename.equals(""))
{
FileOutputStream fos = new FileOutputStream(filename);
byte[] buffer = newbyte[8192];//每次读8K字节
int count = 0;
while((count = is.read(buffer)) > 0)
{
fos.write(buffer,0,count);
}
fos.close();
is.close();
success2 = true;
}
}
success = success1 && success2;//事务成功？
if(success)
result = "添加成功！<a href= \"./admin/add_song.jsp\">返回</a>";
else
{
result = "添加失败，";
if(success1 == false)
result += "数据库错误，";
if(success2 == false)
result += "上传错误，";
result += "<a href=\"./admin/add_song.jsp\">重新添加</a><br />";
}
if(success)
out.println(result);
}
catch(Exception e)
{
System.err.println(e.getMessage());
}
}
}
代码片段3（前台页面逻辑）
String current = "";
if(request.getParameter("current") != null)
current = request.getParameter("current").toString();
<%
if(current.equals("rank"))///////////////////排行榜
{
%>
<div class="rank_left">
<div><h3>top 10 歌手</h3></div>
<div><table>
<tr>
<td>歌手</td>
<td>歌曲数</td>
<td>热度</td>
</tr>
<%
sql = "select top 10 * from artist order by hot DESC";
rs = stmt.executeQuery(sql);
while(rs.next())
{
int artistid = rs.getInt("id");
String name = rs.getString("name");
int songs = rs.getInt("songs");
int hot = rs.getInt("hot");
%>
<tr>
<td><%=name %></td>
<td><a href="./index.jsp?current=song&artistid=<%=artistid %>"><%=songs %></a></td>
<td><%=hot %></td>
</tr>
<%
}
%>
</table></div>
</div>
<div class="rank_right">
<div><h3>top 10 歌曲</h3></div>
<div><table>
<tr>
<td>歌名</td>
<td>歌手</td>
<td>播放次数</td>
<td>播放</td>
</tr>
<%
sql = "select top 10 * from song order by times DESC";
rs = stmt.executeQuery(sql);
while(rs.next())
{
int songid = rs.getInt("id");
String name = rs.getString("name");
String artist = rs.getString("artist");
int times = rs.getInt("times");
%>
<tr>
<td><%=name %></td>
<td><%=artist %></td>
<td><%=times %></td>
<td><a href="./index.jsp?current=rank&play=<%=songid %>">播放</a></td>
</tr>
<%
}
%>
</table></div>
</div>
<%
代码片段4（控件控制control.js）
var state;
var varb;
var varfullscreen=0;
function loop()
{
WindowsMediaPlayer.playCount=2;
}
function openfile()
{
if(url.value=="")
return;
WindowsMediaPlayer.URL=url.value;
}
function playerinit()
{
WindowsMediaPlayer.url=""; //定义你自己的文件
WindowsMediaPlayer.settings.autoStart = false ;
}
function play()
{
if (WindowsMediaPlayer.controls.isavailable('play'))
{
WindowsMediaPlayer.controls.play();
state=setInterval("updatetime()",1000);
playerinfo.innerHTML = "播放"
varfullscreen=1;
playerinfo2.innerHTML = '音量:'+WindowsMediaPlayer.settings.volume;
}
}
function voldown()
{
if ( WindowsMediaPlayer.settings.volume < 5 )
{
WindowsMediaPlayer.settings.volume = 0;
playerinfo2.innerHTML = "音量:0";
playerinfo1.innerHTML = '沉默中 ';
}
else
{
WindowsMediaPlayer.settings.volume -= 5;
playerinfo2.innerHTML = '音量:'+WindowsMediaPlayer.settings.volume;
playerinfo1.innerHTML = '非静音 ';
}
}
function volup()
{
if ( WindowsMediaPlayer.settings.volume > 95 )
{
WindowsMediaPlayer.settings.volume = 100;
playerinfo2.innerHTML = "音量:100";
playerinfo1.innerHTML = '最大音 ';
}
else
{
WindowsMediaPlayer.settings.volume += 5;
playerinfo2.innerHTML = '音量:'+WindowsMediaPlayer.settings.volume;
playerinfo1.innerHTML = '非静音 ';
}
}
function pause()
{
if (WindowsMediaPlayer.controls.isavailable('pause'))
{
WindowsMediaPlayer.controls.pause();
clearInterval(state);
varfullscreen=1;
}
}
function mute()
{
WindowsMediaPlayer.settings.mute = !WindowsMediaPlayer.settings.mute;
if(varb!=1)
{
playerinfo1.innerHTML = '静音中 ';
document.all.volup.disabled=true;
document.all.voldown.disabled=true;
document.all.balance.disabled=true;
varb=1;
}
else
{
playerinfo1.innerHTML = '非静音 ';
document.all.volup.disabled=false;
document.all.voldown.disabled=false;
document.all.balance.disabled=false;
varb=0;
}
}
function updatetime()
{
if(WindowsMediaPlayer.controls.currentPositionString=='')
{
playerinfo.innerHTML = "00:00" + " / " + WindowsMediaPlayer.currentMedia.durationString;
varfullscreen=0;
}
else
playerinfo.innerHTML = WindowsMediaPlayer.controls.currentPositionString + " / " + WindowsMediaPlayer.currentMedia.durationString;
}
五、实验结果分析
网站运行结果截图：
图1.前台运行结果
图2.后代管理歌手界面
六、实验总结
通过制作个人网站，知道了网站运行的基本原理，网页设计的一些技术，JSP、SSH、CSS+DIV、JS。这些技术都很高深，我只是运用了其中的一点来建立我的网站。在编写代码过程中，遇到了很多麻烦，比如由于数据库的设计不够完善，考虑的不够周全，在编写代码的过程中还临时修改了数据库的设计，以及由于没有写一些功能函数，导致实现一个功能时要重写代码，代码利用率不高，而且在改动时要付出几倍的时间。我深深体会到前期的设计，规划的重要性，只有设计好了，才能在代码编写时水到渠成。
在以后的代码编写
-
Web技术实验报告2
实验名称实验二新闻网站管理页面动态网页实现实验时间20xx年12月4号内容介绍Web技术是计算机专业学生的一门专业课程着重讲述We…
-
《Web应用开发实验报告》
请使用苏州大学实验报告纸实验1JavaWeb应用开发环境搭建一实验目的简单写一下二实验设备简单写一下三相关知识储备与实验相关知识点…
-
Web应用系统开发综合实验 课程报告
装订Web应用系统开发综合实验课程报告第1页第2页第3页第4页第5页第6页后台管理的首页里面有列出所有商品添加商品删除商品修改商品…
- web实验报告
-
Web开发技术实验报告模板
计科111班陆志伟090511111实验二HTMLDom编程一实验目的1掌握Javascript脚本编程方法2掌握使用wordex…
-
web实验报告
华北电力大学科技学院实验报告实验名称课程名称Web技术及应用专业班级学生姓名号成绩指导教师实验日期20xx521学华北电力大学科技…
-
实验报告模板(Web技术及应用)
华北电力大学实验报告实验名称课程名称专业班级计科1103学生姓名高新星学号20xx09010303成绩指导教师王蓝婧实验日期20x…
- web实验报告七
-
Web技术实验报告
Web技术实验报告实验一姓名齐晓妍学号20xx18441432班级计算机科学与技术一班学院计算机科学与技术学院时间20xx年9月2…
-
web实验报告
本科实验报告课程名称web程序设计基础A实验项目HTML语言二网页程序设计JavaScript实验地点专业班级软件1219学号学生…