个人网站设计报告

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

1、个人网站设计报告 一、设计知识准备1. 静态网页与动态网页1.1静态网页1.1.1静态网页概念所谓静态网页，就是说该网页文件里没有程序代码，只有HTML标志，这种网页一般以后 缀.HTML或.HTM存放。静态网页一经制成，内容就不会变化，不管何时何人访问，现时 的内容都一样。1.1.2静态网页工作原理当大家在浏览器里输入一个静态网页网址回车后，就向服务器提出一个浏览网页的请求，服 务器端接到请求后，就会找到大家要浏览的静态网页文件，然后发送给大家。1.2动态网页1.2.1动态网页概念所谓动态网页，就是说该网页文件不仅含有HTML标记，而且含有程序代码，这种网页的 后缀一般根据不同的程序设计语言

2、而不同，动态网页能够根据不同的时间、不同的来访者而 显示不同的内容。1.2.2动态网页的工作原理。当大家在浏览器里输入一个动态网页网址回车后，就向服务器提出一个浏览网页的请求，服 务器端接到请求后，首先会找到大家要浏览的动态网页的文件，然后就执行网页文件中的程 序代码，将含有程序代码的动态网页转化成为标准的静态网页，然后将静态网页发送给大家。2. 简介又称ASP+，但它不是ASP的简单升级，而是微软提出的.NET框架的一部分，它是一种 以.NET框架为基础开发网上应用程序的全新模式。.NET框架(.NET FRAMEWORK)主要由以下三部分组成：(1) 公共语言运行库(Common Lang

3、uage Runtime, CLR)(2) 基础类库(Base Class Library)(3) 、C#等语言运行库。3.简介（1）的前身是Visual Basic,这是一种简单好学、功能强大的卡发环境，也是世界上最为 流行的程序语言。（2）对Visual Basic进行了彻底的改革，对底层进行了重建，使其真正成为了面向对象 的程序设计语言。文件结构HTML文件结构很简单，由头部和身体部分组成，结构严谨清晰，如下： 标题文字头部内容文档主体内容二、硬件及软件需求准备（1）计算机一台,要求有256M内存，20G存储容量。（2）Visual 2005开发工具（选择语言为）。（3）Microsof

4、t Access数据库软件。三、网站总体分析与设计。1. 网站介绍。1.1网站主题：雨衣的空间（类似于QQ空间）1.2网站风格：梦幻风格 1.3网站主页面构图及相关内容功能介绍:首页中包含了导航栏目：如心情、留言板、网站导航、上传图片、故事接龙，一些关于我的 信息，可以在上网时写入急需的文件等等。心情模块：可以让网友把自己所想的，有感触的心事写成心情，记录在自己的空间中，可以 随时随地的了解自己在生活中一路走过来的心情变化。留言板模块：让网友想对空间主人所说的话，留下个脚印，无论是亲切的关怀，还是善意的 批评，提供交流，知道自己并不孤独！网站导航模块：有些人因为在找不到方便实用的网站而苦恼，网

5、站导航就解决这个问题， 让你可以轻松快速浏览、找到自己想要的网址。上传图片模块：可以每个人珍贵的记忆保留下来，让每个关心你的人都知道你的最近变化， 不用为你担心。故事接龙模块：可以在线的玩故事接龙游戏，给每个人活跃的平台。2. 网站结构图。3. Microsoft Access数据库的建立。3.1依次选择菜单命令【开始】一【程序】一【Microsoft Access就可以启动Access2003, 点击文件在下拉菜单中选择新建，选择空数据库，指定后保存路径后出现如下所示对 话框：3.2双击上图【实用设计器创建表】选项，出现下图所示对话框：说明：（1）字段名称可以用中文，也可以用字母、数字和下划

6、线，命名规则和变量类似，考虑系 统的兼容的问题，建议不要用中文。（2）至于数据类型，常用的有文本、备注、数字、日期/时间、“是/否和自动编 号等。其中文本用于比较短的字符串（最长255个字符）； 备注用于比较长的字符串， 最长可以容纳65535个而字符；、是/否用于布尔类型，只有True （真）或False （假）； 、自动编号是个特殊的类型，它可以自动的递增或随机产生一个数字，经常用它产生一个唯 一的编号。3.3正确输入所有字段后，单击Access主窗口的【保存】按钮，就会弹出下图所示的【另 存为】对话框，在其中输入表的名称，然后单击【确定】按钮即可。3.4当表保存后，可以看到下图所示对话框

7、：3.5双击【表1】可以在表中输入数据，当你建表完毕后，觉得数据不合理，想修改数据也 可以双击【表1】进行修改，如果想修改表的字段，就右击【表1】，选择设计视图，就 可以进行修改，下表为输入数据后的结果：4.与的存取数据库。存取数据库是开发网络程序中最重要也最常用的部分，.NET框架提供了，利用它就可以方 便的存取数据库。准确的说，是由很多类组成的一类库。这些类库提供了很多对象，分别用来完成和数据库的 连接、查询记录、插入记录、更新记录和删除记录等操作。其中主要包括如下5个对象。（1）Connection对象：用来连接到数据库。（2）Command对象：用来对数据库执行SQL命令。（3）Dat

8、aReader对象：用来从数据库返回只读数据。（4）DataAdapter对象：用来从数据库返回数据，并送到DataSet对象中，还要负责保 证DataSet对象中的数据和数据库中的数据保持一致。（5）DataSet对象：它可以看做是内存中的数据库。实用OLEDB的数据库，需要在页面中导入相关的名称空间：存取数据库：（1）首先利用Connection对象建立和数据库的连接。语法为：、Provider=OLEDB驱动程序；Data Source=数据库文件物理路径（2）然后建立Command对象，执行SQL语句命令。（3）利用Command对象的ExecuteReader方法建立DataRead

9、er对象，从数据库获 取数据。（4）DataReader对象返回的数据在记录集移动指针就可依次显示所有记录。（5）利用Command对象的Executenonquery（）方法可插入记录和更新记录。四、网站的详细设计。1. 雨衣的空间网站的主要的功能模块的设计和编码。1.1登陆界面。登陆注册模块设计功能实现：（1）当管理员输入正确用户名和口令时才能进入空间主页。（2）对网站里内容进行管理和维护修改，包括对心情的修改，对留言的删除，对照片的上 传等。（3）提供新用户的注册。登陆界面和注册界面如下:其中登陆界面主要代码为：与数据库相连登陆程序，当登陆成功时则直接跳转到网站的主页，其主要代码如下：D

10、im conn As New OleDbConnection(Provider=.4.0; Data Source= + ()Dim strSql As StringstrSql = Select * From link Where username= & & And mypassword = & & Dim cmd As New OleDbCommand(strSql, conn)()Dim dr As OleDbDataReader =()If ()=True Then()(”主页.aspx)Else()=”您必须输入有效的用户名和密码，还没注册？End If当点击注册按钮时，跳转到注册页

11、面，主要程序代码如下：Protected Sub Button1_Click(ByVal sender As Object, ByVal e As )(”注册.aspx)End Sub注册界面在数据库中插入新注册用户信息主要代码如下：Dim strSql As StringstrSql = Insert Into link(username,mypassword,age,email,submit_date) Values( & user_ & , & & , & & , & & ,# & Now() & #)当注册成功时，则跳回登陆界面，主要代码如下：Dim cmd As New OleDbC

12、ommand(strSql,conn)Dim Exp As ExceptionTry()()()(”登陆.aspx)Catch Exp=发生错误，可能是用户名已经被人使用。End Try1.2心情模块的设计。心情模块的设计功能实现：(1) 能在空间中显示和查看以前全部写过的心情。(2) 当管理员登陆后，可以在空间里写自己的心情。(3) 编辑修改以前写过的心情，同时也可以对以前写过的心情进行删除。其中心情界面如下：其中主要代码如下：启动页面时调用数据绑定子程序:Dim conn As OleDbConnectionSub Page_Load(Sender As Object, E As Even

13、tArgs)conn = New OleDbConnection(Provider=.4.0;Data Source= & (心 情.mdb)If Not IsPostBack ThenCall BindData()End IfEnd Sub调用的子程序为：Sub BindData()Dim adp As New OleDbDataAdapter(select * from link Order By time DESC”, conn)Dim ds As New DataSet()(ds, xinqing)= (xinqing).DefaultView()End Sub在本模块设计中，实用Da

14、taGrid控件存取数据库，当单击编辑时，Cint()会返回选定的 行号，对选定的行号进行编辑，其主要代码是：Sub MyDataGrid_Edit(Sender As Object, E As DataGridCommandEventArgs)=CInt()Call BindData()End Sub在编辑过程中，单击更新时，主要执行的SQL语句的代码为:Dim strSql As StringstrSql = Update xinqing Set name= & & ,text= & & ,time =# & Now() & # Where id = & (CInt()Dim cmd As

15、 New OleDbCommand(strSql, conn)Dim Exp As ExceptionTry()()()Catch Exp=”发生错误，没有正常更新记录”End Try=-1Call BindData()删除时主要是根据选中行号的ID来删除，其删除语句为：Dim strSql As StringstrSql = Delete from link Where id = & (CInt()1.3留言板模块的设计留言板模块功能的实现：(1) 显示以前所有人在空间里的留言。(2) 当管理员登陆后，能对其留言进行删除和回复。(3) 查看留言者的详细信息。留言板界面如下： 其程序代码(同心

16、情模块原理类似)。1.4上传图片模块设计：上传图片模块功能的实现：(1) 可以上传照片。(2) 网友可以浏览上传的图片。(3) 管理员管理图片。其中上传图片和浏览图片的界面如下：上传照片模块与其他模块有些不相同，连接的数据库是SQL数据库，也本网站设计的重点 和难点，其上传照片主要代码如下：Protected Sub Button2_Click(ByVal sender As Object, ByVal e As )Dim imgdatastream Asimgdatastream =Dim imgdatalen As Integerimgdatalen =Dim caption As Str

17、ingcaption =Dim bytesoriginal() As ByteReDim bytesoriginal(imgdatalen)Dim n As Integern = (bytesoriginal, 0, imgdatalen)addphoto(caption, bytesoriginal)=”图片已经上传”End SubPublic Sub addphoto(ByVal caption As String, ByVal bytesoriginal() As Byte)Dim conn As SqlConnection = NewSqlConnection(server=local

18、host;uid = kid;pwd = ;database=Photos;Trusted_C onnection=True)()Dim a As IntegerDim r As New 随机生成函数a = (500, 10000)Dim sqlstr As Stringsqlstr = insert into 图片(bytesoriginal,caption,bytesfull,bytesposte门,bytesthumb)”sqlstr &= values (bytesoriginal,caption,bytesfull,bytesposter,bytesthumb)”Dim cmd As

19、 SqlCommand = New SqlCommand(sqlstr, conn)(New SqlParameter(bytesoriginal, bytesoriginal)(New SqlParameter(caption”, caption)(New SqlParameter(bytesfull”, resizeimagefile(bytesoriginal, 600)(New SqlParameter(bytesposter, resizeimagefile(bytesoriginal, 198)(New SqlParameter(bytesthumb”, resizeimagefi

20、le(bytesoriginal, 100)()()End SubPrivate Function resizeimagefile(ByVal imagefile As Byte(), ByVal targetsize As Integer)Dim oldimage Asoldimage = .FromStream(New (imagefile)Dim newsize Asnewsize = calculatedimensions(, targetsize)Dim newimage Asnewimage = New (,)Dim canvas Ascanvas = .FromImage(new

21、image)(oldimage, New (New (0, 0), newsize)Dim m As New(m,)Return ()End FunctionPrivate Function calculatedimensions(ByVal oldsize As , ByVal targetsize As Integer)Dim newsize As NewIf Then=(* (targetsize / )=targetsizeElse=targetsize =(* (targetsize / )End IfReturn newsizeEnd Function其浏览照片的主要代码如下：Pu

22、blic Shared sGreeting As IntegerProtected Sub FirButton_Click(ByVal sender As Object, ByVal e As )=FalsesGreeting = Session(first_photoid)=第& CStr(sGreeting) & ”张”Session(photoid) = sGreetingEnd SubProtected Sub PreButton_Click(ByVal sender As Object, ByVal e As )If sGreeting = 1 ThenIf sGreeting =

23、Session(last_photoid) Then=第& CStr(sGreeting) & ”张”=”这是最后一张了！”=TrueElse=FalsesGreeting += 1=第& CStr(sGreeting) & ”张”Session(photoid) = sGreetingEnd IfEnd SubProtected Sub LasButton_Click(ByVal sender As Object, ByVal e As )=FalsesGreeting = Session(last_photoid)=第& CStr(sGreeting) & ”张”Session(photo

24、id) = sGreetingEnd SubProtected Sub Page_LOAD(ByVal sender As Object, ByVal e As )Session(photoid) = 1Dim sqlstrl, sqlstr2 As StringDim conn1 As SqlConnection = NewSqlConnection(server=localhost;uid = kid;pwd = ;database=Photos;Trusted_C onnection=True)()sqlstr1 = select max(photoid)什om 图片sqlstr2 =

25、select min(photoid) from 图片Dim cmd1, cmd2 As New SqlCommandcmd1 = New SqlCommand(sqlstr1, conn1)Session(last_photoid)=()()cmd2 = New SqlCommand(sqlstr2, conn1)Session(first_photoid)=()()()End Sub2. 本网站数据库结构介绍。本网站的数据库主要是对心情模块，留言板模块，网络导航模块，和上传照片模块的管理。2.1登陆注册模块数据库。ID为自动生成的编号，username为用户名，mypassword为用户登

26、陆密码，age为用 户注册的年龄，email为用户注册的邮箱，sumbit_date为用户注册的时间。用户在登陆 时只要输入用户名和用户密码就可以登陆了。2.2心情模块数据库。Id为自动生成的编号，fenlei为心情所属的类别，name为心情的主题，text为心情的内 容，time为写心情时提交的时间。2.3留言板模块数据库。Id为自动生成的编号，name为留言者的用户名，text为留言的内容，data为用户留言的 时间。2.3网络导航模块数据库。Link_id为自动生成的编号，sitename为网站名称，URL为网站的网址，intro为网站的 介绍，grade为对网站的评分，submit_d

27、ate为网站提交的时间。2.4上传照片模块数据库。上传照片模块的数据库与以上数据库不同，是用SQL Server数据库设计的，其中，主要 photoid为照片的编号，caption为上传照片的名称。五、网站的运行与实现。安装Visual 2005软件后，打开软件，新建一个网站，将制作好的文件（后缀名为aspx） 包括建好的ACCESS数据库，和需要添加的背景图片，全部复制放置新建网站的文件夹里 面，在软件里刷新文件夹，打开登陆界面，按下Ctrl + F5后便可以运行。六、实验总结及心得体会。这个实例还不是很完善，因为时间、条件和个人能力的限制，系统还存在不完善的地方，希 望能在今后的不断学习与应用中把它扩充得更加丰富，以适应不同层次使用者的需求。这次 编写雨衣的空间网站，对我来说是一个将所学知识从书本运用到实际操作的初次体验。 在设计过程中，我了解了一个网站形成的基本过程和基本纲领构架，加深了我对现在计算机 技术、通讯技术、英特网技术等的认识，相信这些知识都将对我的工作带来很大的帮助。