《Web體系結(jié)構(gòu)與開發(fā)技術(shù)》實(shí)驗(yàn)報(bào)告

《web體系結(jié)構(gòu)與開發(fā)技術(shù)》實(shí)驗(yàn)報(bào)告PAGE1/13《Web體系結(jié)構(gòu)與開發(fā)技術(shù)》實(shí)驗(yàn)報(bào)告班級(jí)：計(jì)軟二班學(xué)號(hào)：20095538姓名：郭凱實(shí)驗(yàn)日期：2011/12/16實(shí)驗(yàn)成績：實(shí)驗(yàn)?zāi)康牧私釽eb體系結(jié)構(gòu)與開發(fā)技術(shù)的基本知識(shí)掌握靜態(tài)頁面的標(biāo)簽結(jié)構(gòu)，能夠編寫靜態(tài)頁面。掌握Flash的基本原理，會(huì)使用AdobeFlash制作Flash動(dòng)畫。掌握動(dòng)態(tài)網(wǎng)站技術(shù)JSP，理解其原理，并使用JSP技術(shù)制作個(gè)人網(wǎng)站。二、實(shí)驗(yàn)原理JSP（JavaServerPages)是由SunMicrosystems公司倡導(dǎo)、許多公司參與一起建立的一種動(dòng)態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。JSP技術(shù)有點(diǎn)類似ASP技術(shù)，它是在傳統(tǒng)的網(wǎng)頁HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP標(biāo)記(tag)，從而形成JSP文件(*.jsp)。用JSP開發(fā)的Web應(yīng)用是跨平臺(tái)的，既能在Linux下運(yùn)行，也能在其他操作系統(tǒng)上運(yùn)行。JSP技術(shù)使用Java編程語言編寫類XML的tags和scriptlets，來封裝產(chǎn)生動(dòng)態(tài)網(wǎng)頁的處理邏輯。網(wǎng)頁還能通過tags和scriptlets訪問存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計(jì)和顯示分離，支持可重用的基于組件的設(shè)計(jì)，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。Web服務(wù)器在遇到訪問JSP網(wǎng)頁的請求時(shí)，首先執(zhí)行其中的程序段，然后將執(zhí)行結(jié)果連同JSP文件中的HTML代碼一起返回給客戶。插入的Java程序段可以操作數(shù)據(jù)庫、重新定向網(wǎng)頁等，以實(shí)現(xiàn)建立動(dòng)態(tài)網(wǎng)頁所需要的功能。JSP與JavaServlet一樣，是在服務(wù)器端執(zhí)行的，通常返回給客戶端的就是一個(gè)HTML文本，因此客戶端只要有瀏覽器就能瀏覽。三、實(shí)驗(yàn)步驟網(wǎng)站前期準(zhǔn)備工作。網(wǎng)站功能設(shè)計(jì)。網(wǎng)站為在線音樂網(wǎng)站，主要功能有：用戶在線聽音樂，管理員后臺(tái)登錄，添加、管理歌手，添加、管理歌曲等功能。數(shù)據(jù)庫設(shè)計(jì)。由于網(wǎng)站功能較少，結(jié)構(gòu)較簡單，數(shù)據(jù)庫設(shè)計(jì)也比較簡單，具體如下：數(shù)據(jù)庫名：music_db數(shù)據(jù)表設(shè)計(jì)：admin（管理員表）:idint主鍵自增namevarchar(10)登錄名pwdvarchar(20)登錄密碼typeint管理員權(quán)限song（歌曲表）：idint主鍵自增namevarchar(30)歌曲名artistvarchar(20)藝術(shù)家(歌手)albumvarchar(30)所屬專輯urlvarchar(50)硬盤路徑genrevarchar(10)流派durationvarchar(10)時(shí)長timesint點(diǎn)播次數(shù)(熱度)artist（歌手表）：idint主鍵自增namevarchar(20)藝術(shù)家名(歌手名)typevarchar(5)性別areavarchar(20)地區(qū)notevarchar(1000)簡介songsint歌曲數(shù)量hotint熱度目錄結(jié)構(gòu)設(shè)計(jì)。在開發(fā)工具M(jìn)yEclipse中新建WebProject工程music_player，并創(chuàng)建如下目錄：各目錄說明：/src資源目錄，包含編寫的各種Java類，Servlet源文件/WebRoot網(wǎng)站根目錄/WebRoot/admin后臺(tái)管理界面的所屬目錄/WebRoot/conn包含連接數(shù)據(jù)庫的代碼文件/WebRoot/csscss樣式表文件目錄/WebRoot/images網(wǎng)站排版所需圖片目錄/WebRoot/jsjs代碼文件目錄/WebRoot/META-INF系統(tǒng)自動(dòng)生成的目錄/WebRoot/music存放上傳的音樂文件目錄/WebRoot/WEB-INF存放Web信息目錄，包含所需類庫，配置文件網(wǎng)站代碼編寫。登錄界面。原理簡介：通過將login.jsp頁面表單的action設(shè)置為./admin/index.jsp，將表單填寫的用戶密碼值傳遞給后臺(tái)頁面，后臺(tái)index.jsp頁面通過查詢數(shù)據(jù)庫，比對用戶是否存在以及密碼是否正確，如果正確，則進(jìn)入后臺(tái)，并設(shè)置session保存登錄信息；否則返回登錄頁面，并通過url傳遞登錄出錯(cuò)信息并顯示。關(guān)鍵代碼：見附錄：代碼片段1。添加歌曲界面。原理簡介：后臺(tái)./admin/add_song.jsp界面顯示添加歌曲表單。將表單屬性設(shè)置為enctype=”multipart/form-data”使之能上傳二進(jìn)制文件，同時(shí)action設(shè)置為ServletUploadServlet.java，UploadServlet.java的主要功能為獲取上傳的表單域的值，將其轉(zhuǎn)碼為UTF-8格式以及將二進(jìn)制歌曲文件存儲(chǔ)到磁盤，并將數(shù)據(jù)寫入到數(shù)據(jù)庫中。關(guān)鍵代碼：見附錄：代碼片段2。管理歌曲及歌手。原理簡介：通過查詢數(shù)據(jù)庫，將現(xiàn)有歌手及歌曲的信息以表格形式顯示出來，為每一個(gè)數(shù)據(jù)添加操作（刪除，修改），通過點(diǎn)擊操作進(jìn)入相應(yīng)的操作頁面，然后進(jìn)行相應(yīng)的操作，并將操作結(jié)果存如數(shù)據(jù)庫，完成數(shù)據(jù)的修改。關(guān)鍵代碼：略。防止惡意登錄。為防止他人在未進(jìn)行登錄驗(yàn)證的情況下通過輸入恰當(dāng)?shù)膗rl登錄后臺(tái)，在登錄后臺(tái)頁面時(shí)均會(huì)檢驗(yàn)其是否已登錄，即檢驗(yàn)是否已設(shè)置session值，如已設(shè)置，才能登錄，否則會(huì)跳轉(zhuǎn)到登錄頁面。且session的設(shè)置只有在其登錄成功后才能設(shè)置生效。當(dāng)退出后，會(huì)立即清楚session值。關(guān)鍵代碼：略。前臺(tái)主頁面各功能邏輯。原理簡介：通過點(diǎn)擊導(dǎo)航條，主頁獲得查詢字符串中的值對，獲得要顯示的內(nèi)容及定位。例如導(dǎo)航條中的排行榜，其鏈接為./index.jsp?current=rank，則為鏈接到主頁（即本頁面），并傳遞current=rank值對，主頁通過獲得值對，知道要顯示的內(nèi)容為“排行榜”，于是進(jìn)行相應(yīng)的工作，如查詢數(shù)據(jù)庫，設(shè)置相應(yīng)的值，然后將數(shù)據(jù)顯示到頁面的相應(yīng)標(biāo)簽內(nèi)。關(guān)鍵代碼：見附錄：代碼片段3。前臺(tái)播放歌曲功能。原理簡介：播放歌曲功能主要通過加載WindowsMediaPlayer控件來實(shí)現(xiàn)歌曲的播放。其主要內(nèi)容為<object>標(biāo)簽，并通過<param>標(biāo)簽為其設(shè)置參數(shù)，加載控件。歌曲的播放，暫停，音量大小由js代碼控制控件實(shí)現(xiàn)。當(dāng)點(diǎn)擊歌曲后面的播放鏈接后，如./index.jsp?current=rank&play=13，主頁通過play=13獲得要播放歌曲的ID，通過查詢數(shù)據(jù)庫獲得歌曲的磁盤路徑，并將路徑值設(shè)置給一個(gè)隱藏的標(biāo)簽，在頁面初始化后，js代碼獲得路徑值，并傳遞給控件，然后點(diǎn)擊播放按鈕，則能通過js播放歌曲。關(guān)鍵代碼：見附錄：代碼片段4。四、實(shí)驗(yàn)結(jié)果代碼片段1（登錄驗(yàn)證）//判斷是否已登錄（即是否已設(shè)置session值）//已登錄則獲取值，未登錄則返回登錄頁面if(session.getAttribute("admin_name")!=null)//session已設(shè)置 admin_name=session.getAttribute("admin_name").toString();elseif(session.getAttribute("admin_name")==null&&request.getParameter("name")==null)//session未設(shè)置且不是從登錄頁面轉(zhuǎn)來此頁面 response.sendRedirect("../login.jsp?islogin=unlogin");else//從登錄頁面轉(zhuǎn)來此頁面，獲取表單，檢驗(yàn)正確性{ //獲取表單數(shù)據(jù) if(request.getParameter("name")!=null) name=request.getParameter("name").toString(); if(request.getParameter("pwd")!=null) pwd=request.getParameter("pwd").toString(); //轉(zhuǎn)碼 name=newString(name.getBytes("ISO-8859-1"),"UTF-8"); pwd=newString(pwd.getBytes("ISO-8859-1"),"UTF-8"); //查詢數(shù)據(jù)庫 sql="select*fromadminwherename='"+name+"'"; ResultSetrs=stmt.executeQuery(sql); Stringquery_pwd=""; if(rs.next()) query_pwd=rs.getString("pwd"); //比對密碼 if(query_pwd==""||!pwd.equals(query_pwd))//用戶名或密碼不對，重新登錄 response.sendRedirect("../login.jsp?islogin=wrong"); else//登錄成功，設(shè)置session session.setAttribute("admin_name",name);}代碼片段2（添加歌曲的ServletUploadServlet.java）importmons.fileupload.FileItem;importmons.fileupload.FileItemFactory;importmons.fileupload.FileUploadException;importmons.fileupload.disk.DiskFileItemFactory;importmons.fileupload.servlet.ServletFileUpload;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;importjava.util.Iterator;importjava.util.List;importjava.io.*;importjava.sql.*;importjavax.servlet.*;importjavax.servlet.http.*;publicclassUploadServletextendsHttpServlet{ publicvoidservice(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException { try { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriterout=response.getWriter(); FileItemFactoryfactory=newDiskFileItemFactory(); ServletFileUploadupload=newServletFileUpload(factory); List<FileItem>items=upload.parseRequest(request); InputStreamis=null; StringuploadPath="D:\\workspace\\music_player\\WebRoot\\music\\";//存儲(chǔ)路徑 Stringfilename=""; Stringresult="";//結(jié)果字符串 booleansuccess=false;//事務(wù)指示 booleansuccess1=false; booleansuccess2=false; String[]valuerow=newString[4]; inti=0; for(FileItemitem:items) { if(item.isFormField()) { Stringfieldname=item.getFieldName(); Stringvalue=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("無文件"); } //以時(shí)間命名文件 intindex=filename.indexOf("."); Datedt=newDate(); SimpleDateFormatsdf=newSimpleDateFormat("yyyyMMddHHmmssSSS"); filename=filename.substring(0,index)+sdf.format(dt)+filename.substring(index); filename=uploadPath+filename; //連接數(shù)據(jù)庫，檢查歌手是否已存在，后再則開始上傳 Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance(); Stringurl="jdbc:sqlserver://localhost:1433;DatabaseName=music_db;characterEncoding=UTF8"; Stringdb_user="sa"; Stringdb_pwd="sa"; Connectionconn=DriverManager.getConnection(url,db_user,db_pwd); Statementstmt=conn.createStatement(); Stringsql="select*fromartistwherename='"+valuerow[1]+"'"; booleanisexit=true; ResultSetrs1=stmt.executeQuery(sql); if(rs1.next()) isexit=true;//歌手已存在 else isexit=false;//歌手不存在 if(!isexit) { out.println("歌手不存在，請先<ahref=\"./admin/add_artist.jsp\">添加</a>"); } else { sql="insertintosong(name,artist,album,url,genre,times)values('"+valuerow[0]+"','"+valuerow[1]+"','"+valuerow[2]+"','"+filename+"','"+valuerow[3]+"',0)"; intrs=stmt.executeUpdate(sql); if(rs==1) success1=true; else success=false; //開始上傳 if(!filename.equals("")) { FileOutputStreamfos=newFileOutputStream(filename); byte[]buffer=newbyte[8192];//每次讀8K字節(jié) intcount=0; while((count=is.read(buffer))>0) { fos.write(buffer,0,count); } fos.close(); is.close(); success2=true; } } success=success1&&success2;//事務(wù)成功？ if(success) result="添加成功！<ahref=\"./admin/add_song.jsp\">返回</a>"; else { result="添加失敗，"; if(success1==false) result+="數(shù)據(jù)庫錯(cuò)誤，"; if(success2==false) result+="上傳錯(cuò)誤，"; result+="<ahref=\"./admin/add_song.jsp\">重新添加</a><br/>"; } if(success) out.println(result); } catch(Exceptione) { System.err.println(e.getMessage()); } }}代碼片段3（前臺(tái)頁面邏輯）Stringcurrent=""; if(request.getParameter("current")!=null) current=request.getParameter("current").toString();<% if(current.equals("rank"))///////////////////排行榜 {%><divclass="rank_left"> <div><h3>top10歌手</h3></div> <div><table> <tr> <td>歌手</td> <td>歌曲數(shù)</td> <td>熱度</td> </tr><% sql="selecttop10*fromartistorderbyhotDESC"; rs=stmt.executeQuery(sql); while(rs.next()) { intartistid=rs.getInt("id"); Stringname=rs.getString("name"); intsongs=rs.getInt("songs"); inthot=rs.getInt("hot");%> <tr> <td><%=name%></td> <td><ahref="./index.jsp?current=song&artistid=<%=artistid%>"><%=songs%></a></td> <td><%=hot%></td> </tr><% }%></table></div></div><divclass="rank_right"> <div><h3>top10歌曲</h3></div> <div><table> <tr> <td>歌名</td> <td>歌手</td> <td>播放次數(shù)</td> <td>播放</td> </tr><% sql="selecttop10*fromsongorderbytimesDESC"; rs=stmt.executeQuery(sql); while(rs.next()) { intsongid=rs.getInt("id"); Stringname=rs.getString("name"); Stringartist=rs.getString("artist"); inttimes=rs.getInt("times");%> <tr> <td><%=name%></td> <td><%=artist%></td> <td><%=times%></td> <td><ahref="./index.jsp?current=rank&play=<%=songid%>">播放</a></td> </tr><% }%></table></div></div><%代碼片段4（控件控制control.js）varstate;varvarb;varvarfullscreen=0;functionloop(){WindowsMediaPlayer.playCount=2;}functionopenfile(){ if(url.value=="")return; WindowsMediaPlayer.URL=url.value;}functionplayerinit(){WindowsMediaPlayer.url="";//定義你自己的文件WindowsMediaPlayer.settings.autoStart=false;}functionplay(){if(WindowsMediaPlayer.controls.isavailable('play')){WindowsMediaPlayer.controls.play();state=setInterval("updatetime()",1000);playerinfo.innerHTML="播放"varfullscreen=1;playerinfo2.innerHTML='音量:'+WindowsMediaPlayer.settings.volume;}}functionvoldown(){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='非靜音'; }}functionvolup(){ 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='非靜音';}}functionpause(){ if(WindowsMediaPlayer.controls.isavailable('pause')) {