资源描述
成都理工大学课程设计报告
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">通讯录 </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> </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） 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、我的留言界面
此界面为静态页，主要应用而文本框、多行文本框等知识点，将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"> </th>
<td> </td>
<td> </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）数据库的连接
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 BackColor="#594B9C" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#33276A" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WANGJConnectionString %>" SelectCommand="SELECT * FROM [Table_1]"></asp:SqlDataSource>
</div>
</div>
</form>
</body>
</html>
2、添加新记录
主要代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>添加</title>
<style type="text/css">
.title {
text-align:center;
font-family:'Microsoft YaHei';
font-size:50px;
padding:60px 0 0 0;
color:#ccc;
}
body {
background-image:url(image/back.png);background-size:cover;
}
.auto-style1 {
width: 969px;
border: 5px solid #00FF00;
}
.auto-style6 {
border: 3px solid #008000;
width: 182px;
height: 150px;
font-weight: bold;
font-size: larger;
}
.auto-style7 {
border-style: solid;
border-color: #008000;
width: 618px;
height: 150px;
}
.textbox {
margin-left:5px;
}
.bottom {
margin-left:400px;
margin-top:10px;
}
.sex1 {
margin-left:10px;
}
.sex {
margin-left:20px;
}
.auto-style9 {
border: 3px solid #008000;
width: 182px;
height: 50px;
font-weight: bold;
font-size: larger;
}
.auto-style10 {
color: #A0A0A0;
}
.auto-style11 {
text-decoration: none;
}
.auto-style12 {
color: #000000;
font-size: larger;
font-weight: bold;
}
.auto-style13 {
font-size: larger;
color: #CCCCCC;
padding:0 0 0 180px;
}
.auto-style14 {
font-size: larger;
color: #000000;
padding: 0 0 0 180px;
font-weight: bold;
}
.auto-style15 {
margin-left: 5px;
}
.auto-style16 {}
.auto-style17 {
border-style: solid;
border-color: #008000;
width: 618px;
height: 50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="title">
<asp:Label ID="Label1" runat="server" Text="添加新成员" style="color: #000000; font-weight: 700; font-family: serif" CssClass="auto-style16"></asp:Label>
</div>
<table align="center" class="auto-style1">
<tbody class="auto-style16">
<tr>
<td class="auto-style9" style="margin-left:5px;">姓名</td>
<td class="auto-style17" style="border-width: medium">
<asp:TextBox ID="TextBox7" runat="server" Height="30px" style="margin-left: 5px" Width="100px" CssClass="auto-style16"></asp:TextBox>
</td>
<tr>
<td class="auto-style9">电话</td>
<td class="auto-style17" style="border-width: medium">
<asp:TextBox CssClass="auto-style15" ID="TextBox4" runat="server" Height="30px" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style9">E-mail</td>
<td class="auto-style17" style="border-width: medium">
<asp:TextBox CssClass="auto-style15" ID="TextBox5" runat="server" Height="30px" Width="300px"></asp:TextBox>
</td>
</tr>
<asp:TextBox ID="TextBox10" runat="server" Height="16px" Width="150px"></asp:TextBox>
</span><span class="auto-style13">：</span><asp:Button ID="Button1" CssClass="bottom" runat="server" Text="提交" Height="40px" Width="70px" OnClick="Button1_Click" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WANGJConnectionString %>" OnInserted="SqlDataSource1_Inserted" OnInserting="SqlDataSource1_Inserting" OnSelected="SqlDataSource1_Selected" OnSelecting="SqlDataSource1_Selecting" OnUpdated="SqlDataSource1_Updated" OnUpdating="SqlDataSource1_Updating" SelectCommand="SELECT * FROM [Table_1]"></asp:SqlDataSource>
<br />
<span class="auto-style10"> </span> <a href="Default6.aspx" class="auto-style11"><span class="auto-style12">
</form>
</body>
</html>
（四）部分CSS外部样式主要代码
CSS：
body {
text-align:center;
cursor:url('images/2828.ani');
}
#header {
width:1024px;
height:200px;
background:transparent;
}
#name {
text-align:left;
padding-top:50px;
padding-left:25px;
}
#miaoshu {
text-align:left;
padding-left:25px;
}
#left {
float:left;
width:350px;
height:200px;
background:tran
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
