課程結束報告

1、課程結束報告課程名稱 ： 基于 WEB 的網(wǎng)站開發(fā)技術學生姓名:學號:學院:數(shù)學與統(tǒng)計學院專業(yè):信息與計算科學 1班任課教師:2012年12月26日目錄1. 基本網(wǎng)頁設計知識學習要點1.1關于Html的主要標記學習要點1.2我的Html設計與應用范例1.3關于JavaScript知識要點1.4 JavaScript在html頁面中的應用范例（如：菜單設計示例、顯示日期示例等）1.5表單設計主要標簽1.6表單設計范例（如登陸窗口）2. Jsp網(wǎng)站開發(fā)2.1如何在html中嵌入java腳本？設計一個學生類，并利用list存放一個班級的 基本信息（5人左右）并在頁面中利用表格顯示出來。2.2給出一個

2、范例說明在jsp中利用JDBC建立到SQLServer2005的過程（最好 給出一個范例及界面）3. Struts2.X學習要點3.1利用struts2.x頁面的主要要素，給出一個利用 struts2.x的示例頁面3.2請利用struts2.x設計一個登陸界面，若登陸成功返回登陸信息界面，否則返 回登陸界面。請給出完整的設計。3.3設計一個學生類，利用list存放一個班級的基本信息（5人左右）并在頁面中 利用struts2.0的標簽s:iterator、s:property在頁面中顯示出來。3.4利用s:tree設計一顆靜態(tài)樹。4. Hibernate3.x學習要點4.1 說明如何讓你的 we

3、b project 具有 Hibernate3.X Cap ability?4.2如何利用Hibernate Reserve Engineering生成某個表的基本 DAO類4.3請利用Hibernate DAO將相關表中的數(shù)據(jù)在頁面中展示出來。成績1. 基本網(wǎng)頁設計知識學習要點1.1關于Html的主要標記學習要點一: （html基本標記）：head頭部標記里面常用的標記（title） title標題標記 title/title 二:（文字與段落）:標題文字的對齊方式： align 屬性值（left center right）設置文字常用屬性：（face字體；size字號；color顏色）設置

4、文字常用標記：font=文本b粗體；em斜體；u下劃線；p段落標記br換行標記三：（超鏈接）：超鏈接語法：a href="鏈接地址" 新浪/a建立書簽：a name='書簽名稱"連接文字/a四：（插入圖像及圖像連接）圖像的格式： jpg 格式 ； png 格式； gif 格式 ; bmp;插入圖像語法： <img src=" 圖像的地址 ">注：圖片標記<img>不成對出現(xiàn)圖像的超鏈接：<a href="連接的地址"><img src="圖像的地址">

5、;</a>五 :（多媒體 ）滾動文字的標記與語法：<marquee>.滾動文字</marquee> 設置滾動文字常用屬性： 滾動方向： direction=（up;down;left;right)背景音樂的設置 ：vbgsound src='音樂的地址"loop="循環(huán)的次數(shù)">注：圖片標記vbgsound>不成對出現(xiàn)六（表格的插入）表格的插入： vtable><tr> 行<td> 列</td>vtd>v/td>v/tr>v/table>設置表

6、格的常用屬性：左 （left）=centre 對中標格的邊框： borderwidth 寬； height 高； align 對齊方式 （align= 缺省 對 =right 對右 ）；標格的邊框顏色： bordercolor行文字以及表格標題的對其方式： valign水平跨度： colspan垂直跨度： rowspan單元格的亮，暗邊框： bordercolorlightbordercolordark七 （框架） 框架的基本結構語法：vframeset>vframe>vframe>v/frameset>1.2 我的 Html 設計與應用范例圖 6.11. 分析與討論標

7、題欄顯示：vtitle> 計算機基礎知識 v/title>背景顏色： vbody bgcolor="#C0C0C0">水平線： <hr size="4"> 居中排列： <center>文本樣式：vfont size="7" face="華文行楷"color="#303030"> v/font>2. 操作步驟實現(xiàn)該網(wǎng)頁效果的 HTML 語言代碼如下：vhtml>vhead>vtitle> 計算機基礎知識 v/title>

8、v/head>vbody bgcolor="#C0C0C0">vcenter>vfont size="7" face=" 華文行楷 " color="#303030"> 計算機基礎知識 v/font>vhr size="4">vp>vfont face=" 華文新魏 " color="#303030" size="6"> 什么是計算機系統(tǒng)？ v/font> v/p>vp>

9、vfont face=" 華文新魏 " color="#303030" size="6"> 計算機的產(chǎn)生和發(fā)展 v/font> v/p>vp>vfont face=" 華文新魏 " color="#303030" size="6"> 計算機系統(tǒng)組成 v/font>v/p>vp>vfont face=" 華文新魏 " color="#303030" size="6">

10、; 數(shù)據(jù)在計算機中的表示 v/font>v/p>vp> vfont face=" 華文新魏 " color="#303030" size="6"> 計算機的應用領域 v/font> v/p>v/center>v/body>v/html>1.3 關于 JavaScript 知識要點1. JavaScript是一種運行在瀏覽器上的腳本語言2. JavaScript包含在一個 (X)HTML 文檔中的方法主要有以下幾種： 使用 script 元素在 XHTML 中直接嵌入 JavaScr

11、ipt 語句 將 JavaScript 源文件通過 script 元素的 src 屬性鏈接到 XHTML 文檔使用偽 URL 方式加入到超鏈接腳本包含在 XHTML 事件處理程序屬性中3.JavaScript 數(shù)據(jù)類型分為：原始類型和引用類型原始類型包括 5 種：undefined 、 null 、 boolean 、number 、string 以用數(shù)據(jù)類型包括：原生對象由 JavaScript 提供，獨立于瀏覽器的對象。Object,Array,String,Boolean,Number,Date,RegExp. 內(nèi)置對象 也是一種原生對象，只是在使用時不需要初始化。如： Global,M

12、ath宿主對象 與瀏覽器有關的對象。如： BOM,DOM自定義對象，得到的結果4.typeof 可以檢測原始數(shù)據(jù)類型，如果檢測 var obj=nulltypeof(obj) 是 object5. 創(chuàng)建數(shù)組有兩種方式，如：var ary = new Array(1,2,3,4);或var ary = 1,2,3,4;6. 訪問對象的屬性可以采取下面幾種方式：obj.attobj"att"obj"a"+"t"+"t"7. javascript 的全局函數(shù) (Global) 包括：isNaN()isFinite()pa

13、rseInt() parseFloat() eval_r() encodeURI() decodeURI() encodeURIComponent() decodeURIComponent()8. null=undefined成立， NaN=NaN 不成立9.javascript 中字符串可以用雙引號和單引號10.DOM 中創(chuàng)建元素節(jié)點的方法是 createElement_x()創(chuàng)建文本節(jié)點的方法是 createTextNode()改變文本節(jié)點的值可以用使用 nodeValue11.AJAX 的技術包括：JavaScript 、 XML、DOM、 XMLHttpRequest 、XHTML12

14、.XMLHttpRequest 的 readyStatus 屬性值為 4 時表示請求已經(jīng)完成13. 在 IE 上使用的 XMLHttpRequest 對象是 ActiveXObject14.onreadystatechange 用來設置在每次 XMLHttpRequest 對象改變時觸發(fā)的 JavaScript 事件處理器15. 用 XMLHttpRequest 對象發(fā)送 GET 請求和 POST 請求的步驟上區(qū)別包括：Get 請求的數(shù)據(jù)是加在 URL 后面的Post請求必須加上req.setRequestHeader("C on te nt-Type","app

15、licati on /x-www-fo rm-urle ncoded");16. javaScript的事件流包括以下以個階段：事件捕獲階段事件冒泡階段17. 瀏覽器對傳統(tǒng)事件處理程序的指派方法的支持，比對現(xiàn)代事件處理程序指派方法的支持更好。現(xiàn)代事件處理程序可以為一個事件指派多個處理方法。18. javascript可以實現(xiàn)創(chuàng)建對象，訪問對象，繼承對象，但是javascript不是面向對象語言，并不具備面向對象的特征19. 在FireFox 中on keypress事件中想要取得輸入的值使用事件對象的charCode 屬性20. 獲得網(wǎng)頁上表單對象的方式有以下幾種(假設form的na

16、me和id都是fm)dcocume nt.getEleme ntByld("fm");dcocume nt.forms"fm"dcocume nt.fm;1.4 JavaScript在html頁面中的應用范例(如:菜單設計示例、顯示日期示例等)1:用JavaScript設計一個樹形菜單<body ><div id ="Layer1" ></ div ><table width ="800" border ="0" alig n ="ce nte

17、r" ><tr ><td height ="60" valign ="middle" ><div align ="center" ><span class ="STYLE2" >樹形菜單 </ span ></ div ></ td ></ tr ><tr ><td height ="30" >&nbsp; </ td ></ tr &

18、gt;</ table >vSELECTalign 三"center" .style ="WIDTH_500px"on cha nge ="if(this.optio nsthis.selectedl ndex.value!=”)win dow.ope n(this.opti onsthis.selectedlndex.value,'blank'):"name=select2 ><OPTION value =.cn >蘋果 </OPTION*<OPTION value =>

19、;橘子 </ OPTION*<OPTION value =>香蕉 </ OPTION*<OPTION value =>梨</ OPTION*<OPTION value =>茄子 </ OPTION><OPTION value =>橙子 </ OPTION></body >2:顯示日期實例輸入以下代碼：<ce nter><script>docume nt.write("<spa n id=time>v/spa n>") set In

20、terval(f un cti on()with( new Date)time.innerText=(getYear()+1901)+"年"+(getMonth()+1)+"月"+getDate()+"日 星期"+"日一二三四五六".charAt(getDay()+""+getHours()+":"+getMi nu tes()+":"+getSeco nds(),1000)</script></ce nter>1.5表單設計主要標

21、簽表格標簽<table>行標簽<tr>列標簽<td><th>1) <table><table><caption> 標題 </caption><tr><td>1</td> </tr><tr> <td>2</td>v/tr> v/table>屬性 align:left center rightborder:表格邊線 <table border="">width:cellspac

22、 in g:清空格子之間距離cellpadding: 格子內(nèi)內(nèi)容邊距<th>和<td>用法一致，其中文字以粗體居中顯示2) <tr>屬性 <tr alig n="" bgcolor="">3) <td>屬性<td alig n="">屬性影響到所在行或者列colspan此表格占幾行rowspan此表格占幾列1.6表單設計范例(如登陸窗口)表單設計：(1) 文件有 Login.html(2) 運行效果，如右圖：(3) 代碼為：芳名: 密碼:<html>

23、<head><title> 登陸頁面 </title> </head> <body><form>芳名:<inpu type="text" size="20" /><br />密碼:<in put type="password" size="20"/> </form> </body></html>2.1 如何在 html 中嵌入 java 腳本？設計一個學生類，并利用 lis

24、t 存放一個班級 的基本信息( 5 人左右)并在頁面中利用表格顯示出來。1兩種方法：方法1.以<script>標簽直接嵌入java腳本。方法2.以一 vscript>標簽引入java腳本。<body>vfont color ="blue" ><b>學生類 </ b></ font ><hr ><%List<String>list=new ArrayList<String>();list.add(" 張三");list.add(" 李

25、四 ");list.add(" 王五 ");list.add(" 趙六 ");list.add(" 小七 ");list.add(" 丁八 ");request.setAttribute("students" ,list);out.println("<table border='10' bgcolor='whitewidth='100' height='60'>");for ( int i=0;i&

26、lt;list.size();i+)out.println( "<trbordercolor='white'><td>"+list.get(i)+ "</td></tr>");out.println( "</table>" );%></body>2.2 JSP 中使用 JDBC 連接 SQL Server 2005準備工作首先，操作系統(tǒng)中安裝好 SQL Server 2000/2005，如果系統(tǒng)中都裝有 2000和 2005 版，記得停用一個

27、，只開一個行了。然后，到微軟網(wǎng)站下載 Microsoft SQL Server 2005 JDBC Driver 1.1 ，也可以使用 這個地址直接下載。解壓sqljdbc_，把sqljdbc_1.1復制到ProgramFiles% (如果系統(tǒng)在 C盤則為 C:Program Files)。設置 ClasspathJDBC 驅動程序并未包含在 Java SDK 中。因此， 如果要使用該驅動程序，必須 將 classpath 設置為包含 sqljdbc.jar 文件。如果 classpath 缺少 sqljdbc.jar 項， 應用程序將引發(fā)“找不到類”的常見異常。 sqljdbc.jar 文件

28、的安裝位置如下：<安裝目錄 >sqljdbc_<版本 ><語言 >sqljdbc.jar下面是用于 Windows 應用程序的 CLASSPATH 語句實例：CLASSPATH =.;%ProgramFiles%sqljdbc_1.1chssqljdbc.jar下面是用于 Unix/Linux 應用程序的 CLASSPATH 語句實例：CLASSPATH =.:/home/usr1/mssqlserver2005jdbc/Driver/sqljdbc_1.1/chs/sqljdbc.jar 注意：在 Window 系統(tǒng)中，如果目錄名長于 8.3 或文件夾名中

29、包含空格，將 導致 classpath 出現(xiàn)問題。如果懷疑存在這類問題，應暫時將 sqljdbc.jar 文件移 動到名稱簡單的目錄中，例如C:Temp,更改classpath然后測試這樣是否解決了問題。直接在命令提示符運行的應用程序在操作系統(tǒng)中配置classpath將sqljdbc.jar追加到系統(tǒng)的 classpath 中?；蛘?使用 java -classpath 選項,可以在運行此應 用程序的 Java 命令行上指定 classpath。設置SQL Server服務器我使用的是SQL Server 2005標準版SP2,這些都默認即可，一般不用配置。如 果需要配置端口請看下面。1、開始

30、 ”f 程序 ”f “Microsoft SQL Server 2005 配置工具 ”f “SQL Serve配 置管理器 ”f “SQL Server 2005網(wǎng)絡配置 ”f “MSSQLSERVER的協(xié)議”2、如果“TCP/IP沒有啟用，右鍵單擊選擇 啟動”。3、 雙擊“TCP/IP0”入屬性設置，在IP地址”里，可以配置“IPAII中的“TCP端 口”，默認為 1433。4、重新啟動SQL Server或者重啟計算機。創(chuàng)建數(shù)據(jù)庫打開“SQL Server Management Studio登錄連接SQL Server服務器，新建數(shù)據(jù) 庫，命名為 test 在Eclipse中測試1、 打開

31、Eclipse，文件”f 新建”f 項目”f “Java項目”，項目名為Test2、在Eclipse中，選擇 窗口” f 首選項f “ Javf 已安裝的JRE',選擇已 安裝的JRE，點擊 編輯”f 添加外部”，選擇 ProgramFiles%sqljdbc_1.1chssqljdbc.jar3、 在Test項目的“JRE系統(tǒng)庫”中可以看見sqljdbc.jar，如果沒有可以右鍵單擊 項目Testf 構建路徑”f 配置構建路徑f “ Javaf勾建路徑”f 庫”f 添加外 部 JAR. ” 選擇 ProgramFiles%sqljdbc_1.1chssqljdbc.jar4、編寫Ja

32、va代碼，如下：import java.sql.*; public class Test public static void main(String srg) String driverName = "" /加載 JDBC 驅動String dbURL = "jdbc:; DatabaseName=test" /連接服務器和數(shù)據(jù)庫 testString userName = "sa" /默認用戶名String userPwd = "123456" /密碼Connection dbConn;try Class.fo

33、rName(driverName);dbCo nn = DriverMa nager.getC onn ecti on( dbURL, userName, userPwd);"Connection Successful!"); /如果連接成功 控制臺輸出 Connection Successful! catch (Excepti on e) e.pri ntStackTrace();3.1利用struts2.x頁面的主要要素，給出一個利用struts2.x的示例頁面struts.jsp<%page Ianguage ="java" import =

34、"java.util.*"pageEncoding ="UTF-8" %><! DOCTYPEHTML PUBLIC "-/W3C/DTD HTML4.01 Tran sitio nal/EN"><html ><head><title >Struts 跳K轉 </ title> </ head ><body ><form action ="gogo" method ="post" ><in

35、put type ="submit" value ="跳轉"></ form ></ body ></ html >tiaozhua n.jsp<%page Ianguage ="java" import ="java.util.*"pageEncoding ="UTF-8" %><! DOCTYPEHTMLPUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><htm

36、l ><head ><title >Welcome</ title ></ head><body >跳轉成功！ </ body ></ html >gogo.javapackage gogo;import ; public class gogo exte nds Acti on Support public String execute() return "gogo" ;struts.xml<?xml version ="1.0" encoding =&quo

37、t;UTF-8"?><! DOCTYPfstrutsPUBLIC "-/Apache Software Foundation/DTDStrutsCon figuratio n 2.1/EN""/struts-" ><struts ><package name="gogo" extends ="struts-default" ><actionname="gogo" class ="gogo.gogo" ><r

38、esult name="gogo" >/tiaozhuan.jsp</ r esult ></ action ></package ></ struts >口 li tt py/1 o cal h ost:8080/ww/StrutsJf http:/localhost:8080/ww/gogo. 亠 亠1" g StrutsffiRX 4 WelcomeXw跳轉成功！3.2請利用struts2.x設計一個登陸界面，若登陸成功返回登陸信息界面，否則 返回登陸界面1.編寫login.jsp頁面。代碼如下：<

39、% page Ian guage="java" import="java.util.*" pageE ncodi ng="UTF-8"%>v% taglib uri="/struts-tags" prefix="s" %><!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Tran siti on al/EN"><html><head><title>Logi n< /title

40、>vmeta http-equiv="pragma" conten t=" no-cache"vmeta http-equiv="cache-c on trol" content="no-cache"<meta http-equiv="expires" conten t="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

41、<meta http-equiv="descripti on" conten t="This is my page"></head><body><s:form acti on="log in" method="post"><s:label value="系統(tǒng)登陸"></s:label><s:textfield n ame="username" label="賬號"/><

42、;s:password n ame="password" label=" 密碼"/><s:submit value=" 登錄"/></s:form></body></html>2 編寫LoginAction類。代碼如下：package ; import ; public class Log inAction exte nds Action Support /該類繼承了 ActionSupport類。這樣就可以直接使用SUCCESS, LOGIN等變量和重寫 execute等方法pr

43、ivate static fin al l ong serialVersi on UID = 1L;private String user name;private String password;public Stri ng getUser name() retur n user name; public void setUsername(Stri ng user name) this.username = username; public String getPassword() return password; public void setPassword(String passwor

44、d) this.password = password; Override public String execute() throws Exception if("haha".equals(username) && "hehe".equals(password)/ 如果登錄的用戶名=haha并且密碼=hehe，就返回SUCCESS ;否則，返回LOGINreturn “SUCCESS ”;return “LOGIN ”; 3 配置 struts.xml 文件。代碼如下：<?xml version="1.0" e

45、ncoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-/Apache Software Foundation/DTD StrutsConfiguration 2.0/EN" "/struts-"><struts><package name="default" namespace="/" extends="struts-default"><action name="login"

46、 class="" method="execute"><result name="SUCCESS">/welcome.jsp</result><result name="LOGIN">/login.jsp</result></action></package></struts4 配置 web.xml 文件。代碼如下：<?xml version="1.0" encoding="UTF-8"

47、?> <web-app version="2.5" xmlns="/ns/javaee" xmlns:xsi="/XMLSchema-instance" xsi:schemaLocation="/ns/javaee /ns/javaee/web-app_2_5.xsd"><filter><filter-name>struts2</filter-name> <filter-class> </filter> <filter-mappin

48、g><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app5 根據(jù) struts.xml 里配置的內(nèi)容，還需要一個 welcome.jsp 頁面。編寫 welcome.jsp 頁面。代碼如下： <

49、% page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"> <html><head><title>My JSP 'welcome.jsp' starting page</title><meta http-equiv="pragm

50、a" content="no-cache"><meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv=&quo

51、t;description" content="This is my page"></head><body> 歡迎 $username ! </body></html> 經(jīng)過上述步驟， 登錄實例已經(jīng)編寫完畢。 啟動 tomcat ，在網(wǎng)頁地址 欄里輸入：，打開登錄頁面。如下所示：輸入用戶名： haha ，密碼： hehe ，點擊登錄，就來到了 welcome.jsp 頁面。 如下所示： 如果輸入的用戶名和密碼不是 haha 和 hehe ，那么，就來到了 login.jsp 頁面 .3.3設計一個學生類，利用l

52、ist存放一個班級的基本信息（5人左右）并在頁面中利用 struts2.0的標簽<s:iterator>、vs:property>在頁面中顯示出來。 package Student;public class Student privateStringID;privateStringname;privateintage;privateStringzy;privateStringgradegetter,setter方法略 ;ListStu.jsp 代碼如下：<%page language ="java" import ="java.util.*

53、,Student.Student"pageEncoding ="UTF-8" %><%taglib prefix ="s" uri ="/struts-tags" %><! DOCTYPEHTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html ><head><title >學生信息展示 </ title > </ head ><body ><%

54、Student stud1=new Student();stud1.setID( stud1.setName( stud1.setAge(21);stud1.setZy( stud1.setGrade( Student stud2="043" );" 王彩紅 ");II"信息與計算科學 ");"2010 級");new Student(); stud2.setID( "003" );stud2.setName( " 張一");stud2.setAge(21);stud2.se

55、tZy( "信息與計算科學 ");stud2.setGrade( "2010 級");Student stud3= new Student();stud3.setID( "045" );stud3.setName( 李二 " );stud3.setAge(21); stud3.setZy(" 信息與計算科學" );stud3.setGrade( "2010 級 ");Student stud4= new Student();stud4.setID( "027" );

56、stud4.setName( " 周三");stud4.setAge(20);stud4.setZy( "信息與計算科學 ");stud4.setGrade( "2010 級");Student stud5= new Student();stud5.setID( "065" );stud5.setName( " 王五");stud5.setAge(22);stud5.setZy( "信息與計算科學 ");stud5.setGrade( "2010 級");

57、List<Student> list= new ArrayList<Student>(); list.add(stud1); list.add(stud2);list.add(stud3);list.add(stud4);list.add(stud5); request.setAttribute( "list" , list);%> <form action ="" ><table border =1 ><tr style =" background-color : orange &q

58、uot;> <th >學號 </ th ><th >姓名 </ th >vth > 年齡 </ th ><th > 專業(yè) </ th ><th > 年級 </ th ></ tr ><s:iterator value ="#request.list" var ="item" ><tr ><td ><s:property<td ><s:property<td &

59、gt;<s:property<td ><s:property <td ><s:property </ tr ></ s:iterator ></ table ></ form ></body >v/html>333運行效果：value ="#itemD"/></ td >value ="#" /></ td > value ="#item.age" /></ td

60、 > value ="#item.zy" /></ td > value ="#item.grade" /></ td >f-ittp/ioca I hotSOSO/T reeTot/口 tstujp* 電節(jié)節(jié)X 卜邱的2O1OI315Q43匚影紅21僞息與廿暮科學201020101314003ME11信恵與計策科學2010；20I01315045爭二21|績尾為計算科學工3毋及2010111502周三20 一W言恵焉計算科羋201201013150651信息與計算科學細嚥3.4利用vs:tree>設計一顆

61、靜態(tài)樹。<h3>使用s:tree和s:treenode標簽生成靜態(tài)樹</h3><s:tree label="新維電腦專修學校"id="edu" theme="ajax" showRootGrid="true" showGrid="true" treeSelectedTopic="treeSelected"><s:treenode theme="ajax" label=軟件開發(fā)"id="1"><s:treenode theme="ajax" label=軟件一班"id="r1" onclick=""/><s:treenode theme="ajax" label=軟件二班"id="r2"/><s:treenode theme="ajax" label=軟件三班"id="r3"/></s:treenode