Web 应用开发技术 实验报告
专业：计算机科学与技术 班级：
学号：
姓名：
一、设计题目
个人网站 二、目的
１、本次设计是学生在学完 ASP 动态网站开发课程后的一次实践性很强的课程设计，是对 ASP 进行动态网站开发所学知识的综合运用。
2、掌握使用 ASP 技术进行网站开发设计。
3、通过本次实习，使学生加深所学知识内容的理解，并能积极地调动学生的学习兴趣，结合实际应用操作环境，真正做到理论与实际相结合。
三、功能需求描述
此网站可以对主人留言，来发表自己的心情，也可以把自己的联系方式写入其中，达到和睦相处、心灵的驿站的目的等。
四、总体设计
主页 留言板 通讯录 添加 查看留言 添加留言 删除
五、详细设计
（ 一）
）
、我的主页
此页面为网站的主页 ，通过发布新心情，点击通讯录可以查看通讯录好友信息，点击留言板可以查看好友留言。
主要代码：<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>个人空间</title> <meta name="keywords" content="个人空间" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" href="css/style.css"/> <script type="text/javascript" src="js/jquery1.42.min.js"></script> <script type="text/javascript"
src="js/jquery.SuperSlide.2.1.1.js"></script> <!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]--> </head>
<body>
<!--header start-->
<div id="header">
<h1>个人空间</h1>
<p>念念不忘，必有回响。</p>
</div>
<!--header end-->
<!--nav-->
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="riji.html">通讯录&nbsp;</a></li>
<li><a href="guestbook.html">留言板</a></li>
<div class="clear"></div>
</ul>
</div>
<!--nav end-->
<!--content start--> <div id="content">
<!--left-->
<div class="left" id="c_left"> <div class="content_text">
<!--wz-->
<div class="wz">
<dl>
<dt><img src="images/s.jpg" width="200"
height="279" alt=""></dt>
<dd>
<p class="dd_text_1"><strong style="font-size: 24px; color: #B71E1E;">心情：</strong>藏起来的目的就是为了被找到。</p>
<p class="dd_text_1"><strong style="color: #B71E1E; font-size: 24px;">心情：
</strong>待人友善是修养，独来独往是性格。</p>
<p class="dd_text_1"><strong style="color: #B71E1E">心情：</strong>何以致契阔，绕腕双跳脱。</p>
<table width="500" height="108" border="5">
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p class="dd_text_1">
<input type="button" name="button2" id="button2" value="发布">
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--left end-->
<!--right-->
<div class="right" id="c_right">
<div class="s_about">
<h2>我</h2>
<img src="images/my.jpg" width="249" height="303" alt="主人"/>
<p>姓名：薛皓</p>
<p>班级：2015 级计科一班</p>
<p>学号：201513030112</p>
<div class="clear"></div>
<div class="clear"></div>
</div>
<!--content end-->
<!--footer start-->
<div id="footer">
<p>Design by：15 级计科一班薛皓 201513030112</p>
</div>
<!--footer end-->
<script type="text/javascript">jQuery(".lanmubox").slide({easing:"easeOutBounce",delayTime:400});</script>
<script
type="text/javascript" src="js/nav.js"></script> </body> </html> （二）、留言板
1 1 、我 的留言板
点击留言板标后直接进入留言板详细页面，从而看见很多朋友在此留言来吸引游客的好奇心，此页面主要应用以下知识点：
1）Session 、application。
2) 数据库连接 主要代码：
以下为数据库连接建立一个 Connection 对象实例 db 代码 留言：
<% set conn=server.createobject("adodb.connection") connstr="Provider=Microsoft.jet.oledb.4.0;data source="&server.mappath("db1.mdb") conn.open connstr %>
<% Dim sql,bh,xm,ly,rq Set rs=Server.CreateObject("ADODB.Recordset") sql="select bh,xm,ly,rq from lyb" rs.Open sql,conn,1,3
rs.AddNew %> Connection 对象与数据库建立连接，并对数据库执行添加、删除、等相关操作。AddNew 是添加操作。
当表单内容通过 post 方法提交时，asp 的 request 对象的 form 方法可以取得提交数据并进行相应的操作。如留言板中的添加操作：
提交数据：
<%
<form method="post" action="add-mess.asp">
<div class="tit2"></div> <div id="five"><font color="#9933CC">高级编辑器</font></div> <div><textarea id="area" cols="141" rows="15" name="ly">在这里输入你的信息</textarea></div>
<div id="six"><input type="submit" value=" 提 交 留 言
" ></div>
</form> %> 接受数据：
<% Dim sql,bh,xm,ly,rq Set rs=Server.CreateObject("ADODB.Recordset") sql="select bh,xm,ly,rq from lyb" rs.Open sql,conn,1,3
rs.AddNew
bh=Request.Form("bh")
xm=Request.Form("xm")
ly=Request.Form("ly") rs("xm")=xm
rs("ly")=ly
rs.Update
rs.Close
Set rs=Nothing
conn.Close
Set Conn=Nothing
%>
2 2 、我的留言界面
此界面为静态页，主要应用而文本框、多行文本框等知识点，将 Method的属性设置为 POST。
主要代码：
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>留言板-个人空间</title> <meta name="keywords" content="个人空间" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" href="css/style.css"/> <script type="text/javascript" src="js/jquery1.42.min.js"></script> <script type="text/javascript"
src="js/jquery.SuperSlide.2.1.1.js"></script> <!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]--> </head>
<body>
<!--header start-->
<div id="header">
<h1>个人空间</h1>
<p>念念不忘，必有回响。
</p>
</div>
<!--header end-->
<!--nav-->
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li>通讯录 </li>
<li><a href="guestbook.html">留言板</a></li>
<div class="clear"></div>
</ul>
</div>
<!--nav end-->
<!--content start-->
<div id="content">
<!--left-->
<div class="left" id="guestbook">
<div class="weizi">
<div class="wz_text">当前位置：
<h1>留言板</h1></div>
<table width="725" border="5">
<tbody>
<tr>
<td width="54">姓名 </td>
<td width="555">内容 </td>
<td width="86">时间 </td>
<p>提交新留言</p>
<table width="721" border="5">
<tbody>
<tr>
<th width="50" scope="row">姓名</th>
<td width="558">留言内容</td>
<td width="83">时间</td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p>
<input type="button" name="button" id="button" value="提交">
</p>
</div> </div>
<!--end left -->
<!--right-->
<div class="right" id="c_right">
<div class="s_about">
<h2>我</h2>
<img src="images/my.jpg" width="230" height="280" alt="博主"/>
<p>姓名：薛皓</p>
<p>班级：2015 级计科一班</p>
<p>学号：201513030112</p>
<p>
<a href="#" title="联系博主"></a><a href="#" title="加入 QQ 群，一起学习！"></a>
<div class="clear"></div>
</p>
</div>
<!--栏目分类-->
<!--end-->
</div>
<!--end
right-->
<div class="clear"></div>
</div>
<!--content end-->
<!--footer-->
<div id="footer">
<p>Design by:15 计科一班薛皓 201513030112</p>
</div>
<!--footer end-->
<script type="text/javascript">jQuery(".lanmubox").slide({easing:"easeOutBounce",delayTime:400});</script>
<script
type="text/javascript" src="js/nav.js"></script> </body>
</html>
（三）、通讯录
1 1 、我的通讯录
主要代码：
1）
）
数据库的连接
2)循环的输出。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
<style type="text/css">
.auto-style1 {
text-align: right;
font-weight: bold;
font-size: larger;
}
.auto-style4 {
border-style: outset;
}
</style> </head> <body style="background-image:url(image/back.png);background-size:cover;">
<form id="form1" runat="server">
<div class="auto-style4">
<div class="auto-style1">
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1" DataSourceID="SqlDataSource1" GridLines="None" Height="410px" Width="100%" style="text-align: center">
<Columns>
<asp:BoundField DataField=" 姓 名 " HeaderText="姓名" SortExpression="姓名" />
<asp:BoundField DataField=" 性 别 " HeaderText="性别" SortExpression="性别" />
<asp:BoundField DataField=" 电 话 " HeaderText="电话" SortExpression="电话" />
<asp:BoundField DataField=" 邮 箱 " HeaderText="邮箱" SortExpression="邮箱" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle Bac...
