WEB個人主頁課程設(shè)計

WEB個人主頁課程設(shè)計 Web 應(yīng)用開發(fā)技術(shù) 實驗報告 專業(yè)：計算機科學(xué)與技術(shù) 班級： 學(xué)號： 姓名： 一、設(shè)計題目 個人網(wǎng)站 二、目的 、本次設(shè)計是學(xué)生在學(xué)完 ASP 動態(tài)網(wǎng)站開發(fā)課程后的一次實踐性很強的課程設(shè)計，是對 ASP 進(jìn)行動態(tài)網(wǎng)站開發(fā)所學(xué)知識的綜合運用。 2、掌握使用 ASP 技術(shù)進(jìn)行網(wǎng)站開發(fā)設(shè)計。 3、通過本次實習(xí)，使學(xué)生加深所學(xué)知識內(nèi)容的理解，并能積極地調(diào)動學(xué)生的學(xué)習(xí)興趣，結(jié)合實際應(yīng)用操作環(huán)境，真正做到理論與實際相結(jié)合。 三、功能需求描述 此網(wǎng)站可以對主人留言，來發(fā)表自己的心情，也可以把自己的聯(lián)系方式寫入其中，達(dá)到和睦相處、心靈的驛站的目的等。 四、總體設(shè)計 主頁 留言板 通訊錄 添加 查看留言 添加留言 刪除 五、詳細(xì)設(shè)計 （ 一） ） 、我的主頁 此頁面為網(wǎng)站的主頁 ，通過發(fā)布新心情，點擊通訊錄可以查看通訊錄好友信息，點擊留言板可以查看好友留言。 主要代碼：lt;!DOCTYPE HTMLgt; lt;html lang=quot;zh-CNquot;gt; lt;headgt; lt;meta charset=quot;UTF-8quot;gt; lt;titlegt;個人空間lt;/titlegt; lt;meta name=quot;keywordsquot; content=quot;個人空間quot; /gt; lt;meta name=quot;descriptionquot; content=quot;quot; /gt; lt;link rel=quot;stylesheetquot; href=quot;css/index.cssquot;/gt; lt;link rel=quot;stylesheetquot; href=quot;css/style.cssquot;/gt; lt;script type=quot;text/javascriptquot; src=quot;js/jquery1.42.min.jsquot;gt;lt;/scriptgt; lt;script type=quot;text/javascriptquot; src=quot;js/jquery.SuperSlide.2.1.1.jsquot;gt;lt;/scriptgt; lt;!-if lt IE 9gt; lt;script src=quot;js/html5.jsquot;gt;lt;/scriptgt; lt;!endif-gt; lt;/headgt; lt;bodygt; lt;!-header start-gt; lt;div id=quot;headerquot;gt; lt;h1gt;個人空間lt;/h1gt; lt;pgt;念念.，必有回響。lt;/pgt; lt;/divgt; lt;!-header end-gt; lt;!-nav-gt; lt;div id=quot;navquot;gt; lt;ulgt; lt;ligt;lt;a href=quot;index.htmlquot;gt;首頁lt;/agt;lt;/ligt; lt;ligt;lt;a href=quot;riji.htmlquot;gt;通訊錄amp;nbsp;lt;/agt;lt;/ligt; lt;ligt;lt;a href=quot;guestbook.htmlquot;gt;留言板lt;/agt;lt;/ligt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;/ulgt; lt;/divgt; lt;!-nav end-gt; lt;!-content start-gt; lt;div id=quot;contentquot;gt; lt;!-left-gt; lt;div class=quot;leftquot; id=quot;c_leftquot;gt; lt;div class=quot;content_textquot;gt; lt;!-wz-gt; lt;div class=quot;wzquot;gt; lt;dlgt; lt;dtgt;lt;img src=quot;images/s.jpgquot; width=quot;200quot; height=quot;279quot; alt=quot;quot;gt;lt;/dtgt; lt;ddgt; lt;p class=quot;dd_text_1quot;gt;lt;strong style=quot;font-size: 24px; color: #B71E1E;quot;gt;心情：lt;/stronggt;藏起來的目的就是為了被找到。lt;/pgt; lt;p class=quot;dd_text_1quot;gt;lt;strong style=quot;color: #B71E1E; font-size: 24px;quot;gt;心情： lt;/stronggt;待人友善是修養(yǎng)，獨來獨往是性格。lt;/pgt; lt;p class=quot;dd_text_1quot;gt;lt;strong style=quot;color: #B71E1Equot;gt;心情：lt;/stronggt;何以致契闊，繞腕雙跳脫。lt;/pgt; lt;table width=quot;500quot; height=quot;108quot; border=quot;5quot;gt; lt;tbodygt; lt;trgt; lt;tdgt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; lt;p class=quot;dd_text_1quot;gt; lt;input type=quot;buttonquot; name=quot;button2quot; id=quot;button2quot; value=quot;發(fā)布quot;gt; lt;/pgt; lt;/ddgt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;/dlgt; lt;/divgt; lt;!-left end-gt; lt;!-right-gt; lt;div class=quot;rightquot; id=quot;c_rightquot;gt; lt;div class=quot;s_aboutquot;gt; lt;h2gt;我lt;/h2gt; lt;img src=quot;images/my.jpgquot; width=quot;249quot; height=quot;303quot; alt=quot;主人quot;/gt; lt;pgt;姓名：薛皓lt;/pgt; lt;pgt;班級：2021 級計科一班l(xiāng)t;/pgt; lt;pgt;學(xué)號：202113030112lt;/pgt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;/divgt; lt;!-content end-gt; lt;!-footer start-gt; lt;div id=quot;footerquot;gt; lt;pgt;Design by：15 級計科一班薛皓 202113030112lt;/pgt; lt;/divgt; lt;!-footer end-gt; lt;script type=quot;text/javascriptquot;gt;jQuery(quot;.lanmuboxquot;).slide(easing:quot;easeOutBouncequot;,delayTime:400);lt;/scriptgt; lt;script type=quot;text/javascriptquot; src=quot;js/nav.jsquot;gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt; （二）、留言板 1 1 、我 的留言板 點擊留言板標(biāo)后直接進(jìn)入留言板詳細(xì)頁面，從而看見很多朋友在此留言來吸引游客的好奇心，此頁面主要應(yīng)用以下知識點： 1）Session 、application。 2) 數(shù)據(jù)庫連接 主要代碼： 以下為數(shù)據(jù)庫連接建立一個 Connection 對象實例 db 代碼 留言： lt;% set conn=server.createobject(quot;adodb.connectionquot;) connstr=quot;Provider=Microsoft.jet.oledb.4.0;data source=quot;amp;server.mappath(quot;db1.mdbquot;) conn.open connstr %gt; lt;% Dim sql,bh,xm,ly,rq Set rs=Server.CreateObject(quot;ADODB.Recordsetquot;) sql=quot;select bh,xm,ly,rq from lybquot; rs.Open sql,conn,1,3 rs.AddNew %gt; Connection 對象與數(shù)據(jù)庫建立連接，并對數(shù)據(jù)庫執(zhí)行添加、刪除、等相關(guān)操作。AddNew 是添加操作。 當(dāng)表單內(nèi)容通過 post 方法提交時，asp 的 request 對象的 form 方法可以取得提交數(shù)據(jù)并進(jìn)行相應(yīng)的操作。如留言板中的添加操作： 提交數(shù)據(jù)： lt;% lt;form method=quot;postquot; action=quot;add-mess.aspquot;gt; lt;div class=quot;tit2quot;gt;lt;/divgt; lt;div id=quot;fivequot;gt;lt;font color=quot;#9933CCquot;gt;高級編輯器lt;/fontgt;lt;/divgt; lt;divgt;lt;textarea id=quot;areaquot; cols=quot;141quot; rows=quot;15quot; name=quot;lyquot;gt;在這里輸入你的信息lt;/textareagt;lt;/divgt; lt;div id=quot;sixquot;gt;lt;input type=quot;submitquot; value=quot; 提 交 留 言 quot; gt;lt;/divgt; lt;/formgt; %gt; 接受數(shù)據(jù)： lt;% Dim sql,bh,xm,ly,rq Set rs=Server.CreateObject(quot;ADODB.Recordsetquot;) sql=quot;select bh,xm,ly,rq from lybquot; rs.Open sql,conn,1,3 rs.AddNew bh=Request.Form(quot;bhquot;) xm=Request.Form(quot;xmquot;) ly=Request.Form(quot;lyquot;) rs(quot;xmquot;)=xm rs(quot;lyquot;)=ly rs.Update rs.Close Set rs=Nothing conn.Close Set Conn=Nothing %gt; 2 2 、我的留言界面 此界面為靜態(tài)頁，主要應(yīng)用而文本框、多行文本框等知識點，將 Method的屬性設(shè)置為 POST。 主要代碼： lt;!DOCTYPE HTMLgt; lt;html lang=quot;zh-CNquot;gt; lt;headgt; lt;meta charset=quot;UTF-8quot;gt; lt;titlegt;留言板-個人空間lt;/titlegt; lt;meta name=quot;keywordsquot; content=quot;個人空間quot; /gt; lt;meta name=quot;descriptionquot; content=quot;quot; /gt; lt;link rel=quot;stylesheetquot; href=quot;css/index.cssquot;/gt; lt;link rel=quot;stylesheetquot; href=quot;css/style.cssquot;/gt; lt;script type=quot;text/javascriptquot; src=quot;js/jquery1.42.min.jsquot;gt;lt;/scriptgt; lt;script type=quot;text/javascriptquot; src=quot;js/jquery.SuperSlide.2.1.1.jsquot;gt;lt;/scriptgt; lt;!-if lt IE 9gt; lt;script src=quot;js/html5.jsquot;gt;lt;/scriptgt; lt;!endif-gt; lt;/headgt; lt;bodygt; lt;!-header start-gt; lt;div id=quot;headerquot;gt; lt;h1gt;個人空間lt;/h1gt; lt;pgt;念念.，必有回響。 lt;/pgt; lt;/divgt; lt;!-header end-gt; lt;!-nav-gt; lt;div id=quot;navquot;gt; lt;ulgt; lt;ligt;lt;a href=quot;index.htmlquot;gt;首頁lt;/agt;lt;/ligt; lt;ligt;通訊錄 lt;/ligt; lt;ligt;lt;a href=quot;guestbook.htmlquot;gt;留言板lt;/agt;lt;/ligt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;/ulgt; lt;/divgt; lt;!-nav end-gt; lt;!-content start-gt; lt;div id=quot;contentquot;gt; lt;!-left-gt; lt;div class=quot;leftquot; id=quot;guestbookquot;gt; lt;div class=quot;weiziquot;gt; lt;div class=quot;wz_textquot;gt;當(dāng)前位置： lt;h1gt;留言板lt;/h1gt;lt;/divgt; lt;table width=quot;725quot; border=quot;5quot;gt; lt;tbodygt; lt;trgt; lt;td width=quot;54quot;gt;姓名 lt;/tdgt; lt;td width=quot;555quot;gt;內(nèi)容 lt;/tdgt; lt;td width=quot;86quot;gt;時間 lt;/tdgt; lt;pgt;提交新留言lt;/pgt; lt;table width=quot;721quot; border=quot;5quot;gt; lt;tbodygt; lt;trgt; lt;th width=quot;50quot; scope=quot;rowquot;gt;姓名lt;/thgt; lt;td width=quot;558quot;gt;留言內(nèi)容lt;/tdgt; lt;td width=quot;83quot;gt;時間lt;/tdgt; lt;/trgt; lt;trgt; lt;th scope=quot;rowquot;gt;amp;nbsp;lt;/thgt; lt;tdgt;amp;nbsp;lt;/tdgt; lt;tdgt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; lt;pgt; lt;input type=quot;buttonquot; name=quot;buttonquot; id=quot;buttonquot; value=quot;提交quot;gt; lt;/pgt; lt;/divgt; lt;/divgt; lt;!-end left -gt; lt;!-right-gt; lt;div class=quot;rightquot; id=quot;c_rightquot;gt; lt;div class=quot;s_aboutquot;gt; lt;h2gt;我lt;/h2gt; lt;img src=quot;images/my.jpgquot; width=quot;230quot; height=quot;280quot; alt=quot;博主quot;/gt; lt;pgt;姓名：薛皓lt;/pgt; lt;pgt;班級：2021 級計科一班l(xiāng)t;/pgt; lt;pgt;學(xué)號：202113030112lt;/pgt; lt;pgt; lt;a href=quot;#quot; title=quot;聯(lián)系博主quot;gt;lt;/agt;lt;a href=quot;#quot; title=quot;加入 群，一起學(xué)習(xí)！quot;gt;lt;/agt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;/pgt; lt;/divgt; lt;!-欄目分類-gt; lt;!-end-gt; lt;/divgt; lt;!-end right-gt; lt;div class=quot;clearquot;gt;lt;/divgt; lt;/divgt; lt;!-content end-gt; lt;!-footer-gt; lt;div id=quot;footerquot;gt; lt;pgt;Design by:15 計科一班薛皓 202113030112lt;/pgt; lt;/divgt; lt;!-footer end-gt; lt;script type=quot;text/javascriptquot;gt;jQuery(quot;.lanmuboxquot;).slide(easing:quot;easeOutBouncequot;,delayTime:400);lt;/scriptgt; lt;script type=quot;text/javascriptquot; src=quot;js/nav.jsquot;gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt; （三）、通訊錄 1 1 、我的通訊錄 主要代碼： 1） ） 數(shù)據(jù)庫的連接 2)循環(huán)的輸出。 lt;% Page Language=quot;C#quot; AutoEventWireup=quot;truequot; CodeFile=quot;Default6.aspx.csquot; Inherits=quot;Default6quot; %gt; lt;!DOCTYPE htmlgt; lt;html xmlns=quot;lquot;gt; lt;head runat=quot;serverquot;gt; lt;meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;/gt; lt;titlegt;lt;/titlegt; lt;style type=quot;text/cssquot;gt; .auto-style1 text-align: right; font-weight: bold; font-size: larger; .auto-style4 border-style: outset; lt;/stylegt; lt;/headgt; lt;body style=quot;background-image:url(image/back.png);background-size:cover;quot;gt; lt;form id=quot;form1quot; runat=quot;serverquot;gt; lt;div class=quot;auto-style4quot;gt; lt;div class=quot;auto-style1quot;gt; lt;asp:GridView ID=quot;GridView1quot; runat=quot;serverquot; AllowPaging=quot;Truequot; AutoGenerateColumns=quot;Falsequot; BackColor=quot;Whitequot; BorderColor=quot;Whitequot; BorderStyle=quot;Ridgequot; BorderWidth=quot;2pxquot; CellPadding=quot;3quot; CellSpacing=quot;1quot; DataSourceID=quot;SqlDataSource1quot; GridLines=quot;Nonequot; Height=quot;410pxquot; Width=quot;100%quot; style=quot;text-align: centerquot;gt; lt;Columnsgt; lt;asp:BoundField DataField=quot; 姓 名 quot; HeaderText=quot;姓名quot; SortExpression=quot;姓名quot; /gt; lt;asp:BoundField DataField=quot; 性 別 quot; HeaderText=quot;性別quot; SortExpression=quot;性別quot; /gt; lt;asp:BoundField DataField=quot; 電 話 quot; HeaderText=quot;電話quot; SortExpression=quot;電話quot; /gt; lt;asp:BoundField DataField=quot; 郵 箱 quot; HeaderText=quot;郵箱quot; SortExpression=quot;郵箱quot; /gt; lt;asp:CommandField ShowDeleteButton=quot;Truequot; /gt; lt;/Columnsgt; lt;FooterStyle BackColor=quot;#C6C3C6quot; ForeColor=quot;Blackquot; /gt; lt;HeaderStyle BackColor=quot;#4A3C8Cquot; Font-Bold=quot;Truequot; ForeColor=quot;#E7E7FFquot; /gt; lt;PagerStyle BackColor=quot;#C6C3C6quot; ForeColor=quot;Blackquot; HorizontalAlign=quot;Rightquot; /gt; lt;RowStyle BackColor=quot;#DEDFDEquot; ForeColor=quot;Blackquot; /gt; lt;SelectedRowStyle BackColor=quot;#9471DEquot; Font-Bold=quot;Truequot; ForeColor=quot;Whitequot; /gt; lt;SortedAscendingCellStyle BackColor=quot;#F1F1F1quot; /gt; lt;SortedAscendingHeaderStyle Bac.