个人网站设计报告.docx

个人网站设计报告.docx

《个人网站设计报告.docx》由会员分享，可在线阅读，更多相关《个人网站设计报告.docx（15页珍藏版）》请在冰豆网上搜索。

个人网站设计报告

个人网站设计报告

一、设计知识准备

1.静态网页与动态网页

1.1静态网页

1.1.1静态网页概念

所谓静态网页，就是说该网页文件里没有程序代码，只有HTML标志，这种网页一般以后缀.HTML或.HTM存放。

静态网页一经制成，内容就不会变化，不管何时何人访问，现时的内容都一样。

1.1.2静态网页工作原理

当大家在浏览器里输入一个静态网页网址回车后，就向服务器提出一个浏览网页的请求，服务器端接到请求后，就会找到大家要浏览的静态网页文件，然后发送给大家。

1.2动态网页

1.2.1动态网页概念

所谓动态网页，就是说该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的后缀一般根据不同的程序设计语言而不同，动态网页能够根据不同的时间、不同的来访者而显示不同的内容。

1.2.2动态网页的工作原理。

当大家在浏览器里输入一个动态网页网址回车后，就向服务器提出一个浏览网页的请求，服务器端接到请求后，首先会找到大家要浏览的动态网页的文件，然后就执行网页文件中的程序代码，将含有程序代码的动态网页转化成为标准的静态网页，然后将静态网页发送给大家。

2.简介

又称ASP+，但它不是ASP的简单升级，而是微软提出的.NET框架的一部分，它是一种以.NET框架为基础开发网上应用程序的全新模式。

.NET框架（.NETFRAMEWORK）主要由以下三部分组成：

（1）   公共语言运行库（Common Language Runtime,CLR）

（2）   基础类库（Base Class Library）

（3）   、、C#等语言运行库。

3.简介

（1）的前身是VisualBasic,这是一种简单好学、功能强大的卡发环境，也是世界上最为流行的程序语言。

（2）对VisualBasic进行了彻底的改革，对底层进行了重建，使其真正成为了面向对象的程序设计语言。

文件结构

HTML文件结构很简单，由头部和身体部分组成，结构严谨清晰，如下：

头部内容

文档主体内容

二、硬件及软件需求准备

（1）计算机一台,要求有256M内存，20G存储容量。

（2）Visual2005开发工具（选择语言为）。

（3）MicrosoftAccess数据库软件。

三、网站总体分析与设计。

1.网站介绍。

1.1网站主题：

☆雨衣☆的空间（类似于QQ空间）

1.2网站风格：

梦幻风格

1.3网站主页面构图及相关内容功能介绍：

首页中包含了导航栏目：

如心情、留言板、网站导航、上传图片、故事接龙，一些关于我的信息，可以在上网时写入急需的文件等等。

心情模块：

可以让网友把自己所想的，有感触的心事写成心情，记录在自己的空间中，可以随时随地的了解自己在生活中一路走过来的心情变化。

留言板模块：

让网友想对空间主人所说的话，留下个脚印，无论是亲切的关怀，还是善意的批评，提供交流，知道自己并不孤独！

网站导航模块：

有些人因为在找不到方便实用的网站而苦恼，“网站导航”就解决这个问题，让你可以轻松快速浏览、找到自己想要的网址。

上传图片模块：

可以每个人珍贵的记忆保留下来，让每个关心你的人都知道你的最近变化，不用为你担心。

故事接龙模块：

可以在线的玩故事接龙游戏，给每个人活跃的平台。

2.网站结构图。

3.MicrosoftAccess数据库的建立。

3.1依次选择菜单命令【开始】—【程序】—【MicrosoftAccess】就可以启动Access2003,点击“文件”在下拉菜单中选择“新建”，选择“空数据库”，指定后保存路径后出现如下所示对话框：

3.2双击上图【实用设计器创建表】选项，出现下图所示对话框：

说明:

（1）字段名称可以用中文，也可以用字母、数字和下划线，命名规则和变量类似，考虑系统的兼容的问题，建议不要用中文。

（2）至于数据类型，常用的有“文本”、“备注”、“数字”、“日期/时间”、“是/否”和“自动编号”等。

其中“文本”用于比较短的字符串（最长255个字符）；“备注”用于比较长的字符串，最长可以容纳65535个而字符；“是/否”用于布尔类型，只有True（真）或False（假）；“自动编号”是个特殊的类型，它可以自动的递增或随机产生一个数字，经常用它产生一个唯一的编号。

3.3正确输入所有字段后，单击Access主窗口的【保存】按钮，就会弹出下图所示的【另存为】对话框，在其中输入表的名称，然后单击【确定】按钮即可。

3.4当表保存后，可以看到下图所示对话框：

3.5双击【表1】可以在表中输入数据，当你建表完毕后，觉得数据不合理，想修改数据也可以双击【表1】进行修改，如果想修改表的字段，就右击【表1】，选择“设计视图”，就可以进行修改，下表为输入数据后的结果：

4.与的存取数据库。

存取数据库是开发网络程序中最重要也最常用的部分，.NET框架提供了，利用它就可以方便的存取数据库。

准确的说，是由很多类组成的一类库。

这些类库提供了很多对象，分别用来完成和数据库的连接、查询记录、插入记录、更新记录和删除记录等操作。

其中主要包括如下5个对象。

（1）Connection对象：

用来连接到数据库。

（2）Command对象：

用来对数据库执行SQL命令。

（3）DataReader对象：

用来从数据库返回只读数据。

（4）DataAdapter对象：

用来从数据库返回数据，并送到DataSet对象中，还要负责保证DataSet对象中的数据和数据库中的数据保持一致。

（5）DataSet对象：

它可以看做是内存中的数据库。

实用OLEDB的数据库，需要在页面中导入相关的名称空间：

<%@ImportNamespace=""%>

<%@ImportNamespace=".OleDb"%>

存取数据库：

（1）首先利用Connection对象建立和数据库的连接。

语法为：

“Provider=OLEDB      驱动程序；DataSource=数据库文件物理路径”

（2）然后建立Command对象，执行SQL语句命令。

（3）利用Command对象的ExecuteReader方法建立DataReader对象，从数据库获取数据。

（4）DataReader对象返回的数据在记录集移动指针就可依次显示所有记录。

（5）利用Command对象的Executenonquery（）方法可插入记录和更新记录。

四、网站的详细设计。

1.☆雨衣☆的空间网站的主要的功能模块的设计和编码。

1.1登陆界面。

登陆注册模块设计功能实现：

（1）当管理员输入正确用户名和口令时才能进入空间主页。

（2）对网站里内容进行管理和维护修改，包括对心情的修改，对留言的删除，对照片的上传等。

（3）提供新用户的注册。

登陆界面和注册界面如下：

其中登陆界面主要代码为：

与数据库相连登陆程序，当登陆成功时则直接跳转到网站的主页，其主要代码如下：

<%@ImportNamespace=""%>

<%@ImportNamespace=".OleDb"%>

       DimconnAsNewOleDbConnection（"Provider=.4.0;DataSource="+（""））

        DimstrSqlAsString

       strSql="Select*FromlinkWhereusername='"&&"'Andmypassword='"&&"'"

        DimcmdAsNewOleDbCommand（strSql,conn）

       （）

        DimdrAsOleDbDataReader=（）

        If（）=TrueThen                         

             （）          

           （"主页.aspx"）

        Else

             （）          

           ="您必须输入有效的用户名和密码，还没注册？

"

        EndIf

   当点击注册按钮时，跳转到注册页面，主要程序代码如下：

   ProtectedSubButton1_Click（ByValsenderAsObject,ByValeAs）

       （"注册.aspx"）

   EndSub

注册界面在数据库中插入新注册用户信息主要代码如下：

    DimstrSqlAsString

       strSql="InsertIntolink（username,mypassword,age,email,submit_date）Values（'"&user_&"','"&&"','"&&"','"&&"',#"&Now（）&"#）"

   当注册成功时，则跳回登陆界面，主要代码如下：

    DimcmdAsNewOleDbCommand（strSql,conn）

       DimExpAsException

       Try

           （）

           （）          

           （）

           （"登陆.aspx"）

       CatchExp

           ="发生错误，可能是用户名已经被人使用。

"

       EndTry

1.2心情模块的设计。

心情模块的设计功能实现：

（1）能在空间中显示和查看以前全部写过的心情。

（2）当管理员登陆后，可以在空间里写自己的心情。

（3）编辑修改以前写过的心情，同时也可以对以前写过的心情进行删除。

其中心情界面如下：

其中主要代码如下：

启动页面时调用数据绑定子程序：

DimconnAsOleDbConnection                                

SubPage_Load（SenderAsObject,EAsEventArgs）

       conn=NewOleDbConnection（"Provider=.4.0;DataSource="&（"心情.mdb"））

    IfNotIsPostBackThen

        CallBindData（）                                 

    EndIf

   EndSub

调用的子程序为：

SubBindData（）

    DimadpAsNewOleDbDataAdapter（"select*fromlinkOrderBytimeDESC",conn）

    DimdsAsNewDataSet（）                                 

    （ds,"xinqing"）                                     

    =（"xinqing"）.DefaultView         

    （）                                        

EndSub

 在本模块设计中，实用DataGrid控件存取数据库，当单击编辑时，Cint（）会返回选定的行号，对选定的行号进行编辑，其主要代码是：

SubMyDataGrid_Edit（SenderAsObject,EAsDataGridCommandEventArgs）

    =CInt（）

    CallBindData（）

EndSub

    在编辑过程中，单击更新时，主要执行的SQL语句的代码为：

    DimstrSqlAsString

       strSql="UpdatexinqingSetname='"&&"',text='"&&"',time=#"&Now（）&"#Whereid="&（CInt（））

    DimcmdAsNewOleDbCommand（strSql,conn）

    DimExpAsException

    Try

        （）                            

        （）

        （）                           

    CatchExp

        ="发生错误，没有正常更新记录"

    EndTry

    =-1

    CallBindData（）

   删除时主要是根据选中行号的ID来删除，其删除语句为：

    DimstrSqlAsString

    strSql="DeletefromlinkWhereid="& （CInt（））

1.3留言板模块的设计

留言板模块功能的实现：

（1）   显示以前所有人在空间里的留言。

（2）   当管理员登陆后，能对其留言进行删除和回复。

（3）   查看留言者的详细信息。

留言板界面如下：

其程序代码（同心情模块原理类似）。

1.4上传图片模块设计：

上传图片模块功能的实现：

（1）   可以上传照片。

（2）   网友可以浏览上传的图片。

（3）   管理员管理图片。

其中上传图片和浏览图片的界面如下：

上传照片模块与其他模块有些不相同，连接的数据库是SQL数据库，也本网站设计的重点和难点，其上传照片主要代码如下：

<%@ImportNamespace=""%>

<%@ImportNamespace=".sqlclient"%>

<%@PageLanguage="vb"Debug="true"%>

   ProtectedSubButton2_Click（ByValsenderAsObject,ByValeAs）

       DimimgdatastreamAs

       imgdatastream=

       DimimgdatalenAsInteger

       imgdatalen=

       DimcaptionAsString

       caption=

       Dimbytesoriginal（）AsByte

       ReDimbytesoriginal（imgdatalen）

       DimnAsInteger

       n=（bytesoriginal,0,imgdatalen）

       addphoto（caption,bytesoriginal）

       ="图片已经上传"

   EndSub

   PublicSubaddphoto（ByValcaptionAsString,ByValbytesoriginal（）AsByte）

       DimconnAsSqlConnection=NewSqlConnection（"server=localhost;uid=kid;;pwd=;database=Photos;Trusted_Connection=True"）

       （）

       'DimaAsInteger

       'DimrAsNew'随机生成函数

       'a=（500,10000）

       DimsqlstrAsString

       sqlstr="insertinto图片（[bytesoriginal],[caption],[bytesfull],[bytesposter],[bytesthumb]）"

       sqlstr&="values（@bytesoriginal,@caption,@bytesfull,@bytesposter,@bytesthumb）"

       DimcmdAsSqlCommand=NewSqlCommand（sqlstr,conn）

       （NewSqlParameter（"@bytesoriginal",bytesoriginal））

       （NewSqlParameter（"@caption",caption））

       （NewSqlParameter（"@bytesfull",resizeimagefile（bytesoriginal,600）））

       （NewSqlParameter（"@bytesposter",resizeimagefile（bytesoriginal,198）））

       （NewSqlParameter（"@bytesthumb",resizeimagefile（bytesoriginal,100）））

       （）

       （）

   EndSub

   PrivateFunctionresizeimagefile（ByValimagefileAsByte（）,ByValtargetsizeAsInteger）

       DimoldimageAs

       oldimage=.FromStream（New（imagefile））

       DimnewsizeAs

       newsize=calculatedimensions（,targetsize）

       DimnewimageAs

       newimage=New（,,）

       DimcanvasAs

       canvas=.FromImage（newimage）

       =

       =

       =

       （oldimage,New（New（0,0）,newsize））

       DimmAsNew

       （m,）

       Return（）

   EndFunction

   PrivateFunctioncalculatedimensions（ByValoldsizeAs,ByValtargetsizeAsInteger）

       DimnewsizeAsNew

       If>Then

           =（*（targetsize/））

           =targetsize

       Else

           =targetsize

           =（*（targetsize/））

       EndIf

       Returnnewsize

   EndFunction

其浏览照片的主要代码如下：

 <%@ImportNamespace=""%>

<%@PageLanguage="VB"%>

   PublicSharedsGreetingAsInteger

   ProtectedSubFirButton_Click（ByValsenderAsObject,ByValeAs）

       =False

       sGreeting=Session（"first_photoid"）

       ="第"&CStr（sGreeting）&"张"

       Session（"photoid"）=sGreeting

   EndSub

   ProtectedSubPreButton_Click（ByValsenderAsObject,ByValeAs）

       'IfsGreeting<=1Then

       IfsGreeting<=Session（"first_photoid"）Then

           ="这是第一张！

"

           ="第"&CStr（sGreeting）&"张"

           =True

       Else

           =False

           sGreeting-=1

           ="第"&CStr（sGreeting）&"张"

           Session（"photoid"）=sGreeting

       EndIf

   EndSub

   ProtectedSubNexButton_Click（ByValsenderAsObject,ByValeAs）

       IfsGreeting>=Session（"last_photoid"）Then

           ="第"&CStr（sGreeting）&"张"

           ="这是最后一张了！

"

           =True

       Else

           =False

           sGreeting+=1

           ="第"&CStr（sGreeting）&"张"

           Session（"photoid"）=sGreeting

       EndIf

   EndSub

   ProtectedSubLasButton_Click（ByValsenderAsObject,ByValeAs）

       =False

       sGreeting=Session（"last_photoid"）

       ="第"&CStr（sGreeting）&"张"

       Session（"photoid"）=sGreeting

   EndSub

   ProtectedSubPage_LOAD（ByValsenderAs