个人网站设计报告.doc

个人网站设计报告一、设计知识准备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框架（.NET FRAMEWORK）主要由以下三部分组成：（1） 公共语言运行库(Common Language Runtime, CLR)（2） 基础类库（Base Class Library）（3） 、C#等语言运行库。3.简介（1）的前身是Visual Basic,这是一种简单好学、功能强大的卡发环境，也是世界上最为流行的程序语言。（2）对Visual Basic进行了彻底的改革，对底层进行了重建，使其真正成为了面向对象的程序设计语言。文件结构HTML文件结构很简单，由头部和身体部分组成，结构严谨清晰，如下：标题文字头部内容文档主体内容 二、硬件及软件需求准备（1）计算机一台,要求有256M内存，20G存储容量。（2）Visual 2005开发工具（选择语言为）。（3）Microsoft Access数据库软件。三、网站总体分析与设计。1.网站介绍。1.1网站主题：雨衣的空间（类似于QQ空间）1.2网站风格：梦幻风格1.3网站主页面构图及相关内容功能介绍：首页中包含了导航栏目：如心情、留言板、网站导航、上传图片、故事接龙，一些关于我的信息，可以在上网时写入急需的文件等等。心情模块：可以让网友把自己所想的，有感触的心事写成心情，记录在自己的空间中，可以随时随地的了解自己在生活中一路走过来的心情变化。留言板模块：让网友想对空间主人所说的话，留下个脚印，无论是亲切的关怀，还是善意的批评，提供交流，知道自己并不孤独！网站导航模块：有些人因为在找不到方便实用的网站而苦恼，“网站导航”就解决这个问题，让你可以轻松快速浏览、找到自己想要的网址。上传图片模块：可以每个人珍贵的记忆保留下来，让每个关心你的人都知道你的最近变化，不用为你担心。故事接龙模块：可以在线的玩故事接龙游戏，给每个人活跃的平台。2.网站结构图。3. Microsoft Access数据库的建立。3.1依次选择菜单命令【开始】【程序】【Microsoft Access】就可以启动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的数据库，需要在页面中导入相关的名称空间：存取数据库：（1）首先利用Connection对象建立和数据库的连接。语法为：“Provider=OLEDB 驱动程序；Data Source=数据库文件物理路径”（2）然后建立Command对象，执行SQL语句命令。（3）利用Command对象的ExecuteReader方法建立DataReader对象，从数据库获取数据。（4）DataReader对象返回的数据在记录集移动指针就可依次显示所有记录。（5）利用Command对象的Executenonquery()方法可插入记录和更新记录。四、网站的详细设计。1. 雨衣的空间网站的主要的功能模块的设计和编码。1.1登陆界面。登陆注册模块设计功能实现：（1）当管理员输入正确用户名和口令时才能进入空间主页。（2）对网站里内容进行管理和维护修改，包括对心情的修改，对留言的删除，对照片的上传等。（3）提供新用户的注册。登陆界面和注册界面如下：其中登陆界面主要代码为：与数据库相连登陆程序，当登陆成功时则直接跳转到网站的主页，其主要代码如下： Dim conn As New OleDbConnection(Provider=.4.0; Data Source= + () Dim strSql As String strSql = 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 当点击注册按钮时，跳转到注册页面，主要程序代码如下： Protected Sub Button1_Click(ByVal sender As Object, ByVal e As ) (注册.aspx) End Sub注册界面在数据库中插入新注册用户信息主要代码如下： Dim strSql As String strSql = Insert Into link(username,mypassword,age,email,submit_date) Values( & user_ & , & & , & & , & & ,# & Now() & #) 当注册成功时，则跳回登陆界面，主要代码如下： Dim cmd As New OleDbCommand(strSql,conn) Dim Exp As Exception Try () () () (登陆.aspx) Catch Exp = 发生错误，可能是用户名已经被人使用。 End Try1.2心情模块的设计。心情模块的设计功能实现：（1）能在空间中显示和查看以前全部写过的心情。（2）当管理员登陆后，可以在空间里写自己的心情。（3）编辑修改以前写过的心情，同时也可以对以前写过的心情进行删除。其中心情界面如下：其中主要代码如下：启动页面时调用数据绑定子程序：Dim conn As OleDbConnection Sub Page_Load(Sender As Object, E As EventArgs) conn = New OleDbConnection(Provider=.4.0;Data Source= & (心情.mdb) If Not IsPostBack Then Call BindData() End If End 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在本模块设计中，实用DataGrid控件存取数据库，当单击编辑时，Cint()会返回选定的行号，对选定的行号进行编辑，其主要代码是：Sub MyDataGrid_Edit(Sender As Object, E As DataGridCommandEventArgs) = CInt() Call BindData()End Sub 在编辑过程中，单击更新时，主要执行的SQL语句的代码为： Dim strSql As String strSql = Update xinqing Set name= & & ,text= & & ,time =# & Now() & # Where id= & (CInt() Dim cmd As New OleDbCommand(strSql, conn) Dim Exp As Exception Try () () () Catch Exp =发生错误，没有正常更新记录 End Try = -1 Call BindData() 删除时主要是根据选中行号的ID来删除，其删除语句为： Dim strSql As String strSql=Delete from link Where id= & (CInt()1.3留言板模块的设计留言板模块功能的实现：（1） 显示以前所有人在空间里的留言。（2） 当管理员登陆后，能对其留言进行删除和回复。（3） 查看留言者的详细信息。留言板界面如下：其程序代码（同心情模块原理类似）。1.4上传图片模块设计：上传图片模块功能的实现：（1） 可以上传照片。（2） 网友可以浏览上传的图片。（3） 管理员管理图片。其中上传图片和浏览图片的界面如下：上传照片模块与其他模块有些不相同，连接的数据库是SQL数据库，也本网站设计的重点和难点，其上传照片主要代码如下： Protected Sub Button2_Click(ByVal sender As Object, ByVal e As ) Dim imgdatastream As imgdatastream = Dim imgdatalen As Integer imgdatalen = Dim caption As String caption = Dim bytesoriginal() As Byte ReDim bytesoriginal(imgdatalen) Dim n As Integer n = (bytesoriginal, 0, imgdatalen) addphoto(caption, bytesoriginal) = 图片已经上传 End Sub Public Sub addphoto(ByVal caption As String, ByVal bytesoriginal() As Byte) Dim conn As SqlConnection = New SqlConnection(server=localhost;uid=kid;pwd=;database=Photos;Trusted_Connection=True) () Dim a As Integer Dim r As New 随机生成函数 a = (500, 10000) Dim sqlstr As String sqlstr = insert into 图片 (bytesoriginal,caption,bytesfull,bytesposter,bytesthumb) sqlstr &= values (bytesoriginal,caption,bytesfull,bytesposter,bytesthumb) Dim cmd As 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, resizeimagefile(bytesoriginal, 100) () () End Sub Private Function resizeimagefile(ByVal imagefile As Byte(), ByVal targetsize As Integer) Dim oldimage As oldimage = .FromStream(New (imagefile) Dim newsize As newsize = calculatedimensions(, targetsize) Dim newimage As newimage = New (, , ) Dim canvas As canvas = .FromImage(newimage) = = = (oldimage, New (New (0, 0), newsize) Dim m As New (m, ) Return () End Function Private Function calculatedimensions(ByVal oldsize As , ByVal targetsize As Integer) Dim newsize As New If Then = ( * (targetsize / ) = targetsize Else = targetsize = ( * (targetsize / ) End If Return newsize End Function其浏览照片的主要代码如下： Public Shared sGreeting As Integer Protected Sub FirButton_Click(ByVal sender As Object, ByVal e As ) = False sGreeting = Session(first_photoid) = 第 & CStr(sGreeting) & 张 Session(photoid) = sGreeting End Sub Protected Sub PreButton_Click(ByVal sender As Object, ByVal e As ) If sGreeting = 1 Then If sGreeting = Session(last_photoid) Then = 第 & CStr(sGreeting) & 张 = 这是最后一张了！ = True Else = False sGreeting += 1 = 第 & CStr(sGreeting) & 张 Session(photoid) = sGreeting End If End Sub Protected Sub LasButton_Click(ByVal sender As Object, ByVal e As ) = False sGreeting = Session(last_photoid) = 第 & CStr(sGreeting) & 张 Session(photoid) = sGreeting End Sub Protected Sub Page_LOAD(ByVal sender As Object, ByVal e As ) Session(photoid) = 1 Dim sqlstr1, sqlstr2 As String Dim conn1 As SqlConnection = New SqlConnection(server=localhost;uid=kid;pwd=;database=Photos;Trusted_Connection=True) () sqlstr1 = select max(photoid) from 图片 sqlstr2 = select min(photoid) from 图片 Dim cmd1, cmd2 As New SqlCommand cmd1 = New SqlCommand(sqlstr1, conn1) Session(last_photoid) = () () cmd2 = New SqlCommand(sqlstr2, conn1) Session(first_photoid) = () () () End Sub2.