《网站相册系统》PPT课件.ppt

第13章 网站相册系统13.1 系统概述,在以信息分享、用户参与为主题的Web2.0时代，越来越多的各种类型的传统网站升级为能够实现用户参Web2.0型的网站。本章通过实现一个简单的网站相册系统，向读者介绍使用Microsoft Visual Studio 2008在ASP.NET 3.5平台下开发Web 2.0应用程序的关键技术。尤其是利用Microsoft Visual Studio 2008提供的功能强大的内置控件，能帮助开发人员更加简便地实现Web 2.0中强调的各种用户参与、用户上传内容的功能。通过本章的学习，读者能够掌握如何用ASP.NET实现对文件系统的各种操作。,13.2 需 求 分 析,本例要开发一个简单的相册管理系统，对系统提出的需求是实现网站相册系统的核心功能。系统需要实现下列功能：(1)匿名访客可以浏览网站的全部图片内容。(2)注册用户可以建立不同的相册。(3)注册用户可以上传照片到自己的相册并实现对相册进行管理。(4)网站维护人员如发现有人上传非法内容可以进行删除。这里的删除功能需要实现级联删除。,13.2 需 求 分 析,由需求分析所得结果，可将该系统的功能分为前台和后台两个功能模块，每个模块实现的主要功能如下：前台：存在两种用户角色匿名访客：浏览图片注册用户：登录、密码修改、用户信息管理、创建相册、相册管理、相册查询、上传图片、图片查询 后台：网站管理员：登录、密码修改、用户管理、相册管理、图片管理,13.3 用 例 图,根据前面的需求分析，设计网站相册系统的用例图，如图13-1所示。,13.6 数据库结构,本例数据库设计如图13-3所示。,13.7 开发环境搭建,1、创建网站userPhoto2、创建数据库在网站目录App_Data下创建数据库photoData.mdf在数据库中添加表注册用户表（userinfo）、用户相册表（userPhotoSet）、用户相片表（userPhotos）、管理员表（adminuser）在表中添加字段,13.8 数据访问层的实现,本例的主要代码是使用ASP.NET控件实现的，但是对于访问数据库进行数据的插入、删除和更新等操作，使用ADO.NET类库直接执行SQL语句更为方便。在本系统开发过程中，引入了一个SqlHelper类，用以简化数据库相关操作的编程实现。3、创建SqlHelper类：在网站目录App_Code下创建类SqlHelper.cs。（如果网站中没有App_Code 目录，在网站名称处点击右键，选择添加ASP.NET文件夹，选择App_Code 即可）,13.9 前台程序代码,相册系统前台要实现的功能为：访问者可以浏览其他注册用户上传到网站的公开相册和相片信息，注册后可以上传自己的相片到网站上面。前台主要包括下面几个文件。Default.aspx：相册系统首页。userReg.aspx：用户注册页面。userMain.aspx：用户首页，包括用户信息管理和相册管理功能。addPhotSet.aspx：添加相册。modifyPhotosInfo.aspx：修改相册信息。photoAdmin.aspx：相册相片管理及上传。,13.9.1 系统首页实现,1、创建Default.aspx页面页面功能：登录、显示最新创建相册，最新上传相片，显示相册列表（使用DataList控件）在页面上插入一个隐藏线格式的表格，用于页面布局在上一步骤插入的表格中，向左上方单元格插入一个Login控件，从工具箱中拖入3个DataList控件到页面中，在每一个DataList控件上方插入一个SqlDataSource数据源控件，页面布局设置为如图所示,配置第一个SqlDataSource1数据源，保存连接字符串名字为“photoConnectionString”，进入“配置Select语句”界面，因为本例需要实现的查询语句相对复杂，无法使用开发环境提供的简单查询语句生成工具生成，这里选择“指定自定义SQL语句或存储过程”选项，单击“下一步”按钮在“定义自定义语句或存储过程”对话框的“SQL语句”文本框中输入查询语句：“select top 10*from userPhotoSet where photoSetState=0 order by createTime desc”，完成数据源的配置。配置SqlDataSource2数据源，将SQL语句配置为“select top 10*from userPhotos order by photoId desc”，其他步骤选择为与上一个数据源一样的配置。,配置SqlDataSource3数据源，设置数据源为从相册表中读取数据，设置排序规则为按编号降序排列设置3个DataList控件的数据源为前面添加的对应数据源控件,将显示最新创建相册的DataList控件的模板代码设置如下：（）,将显示最新上传相片的DataList控件的模板代码设置如下：width=160 height=160 alt=/(),将显示相册列表的DataList控件的模板代码设置如下：相册名称 创建用户 创建时间 相册状态 关键词,绑定表达式 区别:1.eval是只读数据，bind是可更新的 2.当对次表达式操作时候，必须用Eval 如Eval 单向绑定:数据是只读的Bind 双向绑定:数据可以更改,并返回服务器端,服务器可以处理更改后的数据,如存入数据库.,设置登录控件DestinationPageUrl属性为userMain.aspx，重载“Authenticate”事件protected void Login1_Authenticate(object sender,AuthenticateEventArgs e)/获得输入用户名与密码信息 string username=Login1.UserName.Replace(,);string userpass=Login1.Password.Replace(,);/生成程序语句 string sql=select count(*)from userinfo where username=username and userpass=userpass and isLock=0;SqlParameter param=new SqlParameter(username,SqlDbType.Char),new SqlParameter(userpass,SqlDbType.VarChar);param0.Value=username;param1.Value=userpass;/执行查询于语句，得到查询结果 int usercount=(int)(sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param);,if(usercount 0)/查询成功保存用户名 e.Authenticated=true;Sessionusername=username;sql=update userinfo set letLoginTime=getdate()where username=username;SqlParameter sqlParams=new SqlParameter new SqlParameter(username,SqlDbType.VarChar);sqlParams0.Value=username;sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams);,13.9.2 用户注册页面,2、创建页面“userReg.aspx”页面功能：实现注册，注册成功后应回到Default.aspx页面从标准工具区中拖放一些文本框、复选框和按钮控件，设置好控件位置，完成注册界面的开发将两个密码输入框的文本模式设置为“Password”在前面四个文本框后面分别插入一个RequiredFieldValidator控件，用于验证用户输入，设置各个验证控件的ControlToValidate属性值为对应的文本框控件名。并设置ErrorMessage属性值为“*”在确认密码的必填验证控件后面插入一个比较验证控件，设置比较验证控件的ControlToCompare属性为确认密码文本框ID，然后设置ControlToValidate属性为输入密码文本框ID，设置ErrorMessage属性值为“两次密码输入不一致”,13.9.2 用户注册页面,打开首页，在登录控件下插入一个HyperLink控件，设置NavigateUrl属性为注册页面，Text属性为“注册”.双击“注册”按钮，编写如下代码，完成用户注册功能：,protected void Button1_Click(object sender,EventArgs e)string sql=select count(*)from userinfo where username=username;SqlParameter sqlParams=new SqlParameter new SqlParameter(username,SqlDbType.VarChar);sqlParams0.Value=txtUserName.Text;if(int)sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)Response.Write(用户名已经存在！);else sql=insert into userinfo(username,userpass,regTime,letLoginTime,isLock,eMail,isOpen,userPost);sql+=values(username,userpass,regTime,letLoginTime,isLock,eMail,isOpen,userPost);,sqlParams=new SqlParameter new SqlParameter(username,SqlDbType.VarChar),new SqlParameter(userpass,SqlDbType.VarChar),new SqlParameter(regTime,SqlDbType.DateTime),new SqlParameter(letLoginTime,SqlDbType.DateTime),new SqlParameter(isLock,SqlDbType.Bit),new SqlParameter(eMail,SqlDbType.VarChar),new SqlParameter(isOpen,SqlDbType.Bit),new SqlParameter(userPost,SqlDbType.VarChar);sqlParams0.Value=txtUserName.Text;sqlParams1.Value=txtUserPass.Text;sqlParams2.Value=System.DateTime.Now;sqlParams3.Value=System.DateTime.Now;sqlParams4.Value=0;sqlParams5.Value=txtEMail.Text;sqlParams6.Value=cbIsOpen.Checked;sqlParams7.Value=txtPost.Text;if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)Response.Write(注册成功);else Response.Write(数据库操作失败);,13.9.3 用户及相册管理页面,3、创建页面“userMain.aspx”页面功能：修改密码，修改用户信息，显示相册列表在页面插入布局表格。在“修改密码”文字下方插入一个“ChangePassword”控件在修改密码部分下面插入一个表格，用于实现用户信息修改功能在布局表格下方插入一个GridView控件和一个HyperLink控件,为GridView控件创建数据源，在“配置Select语句”界面中，选择从“userPhotoSet”表中读取所有的数据，设置查询条件为用户名等于保存在Session中的用户名在列编辑对话框中，只保留相册名称、创建日期、关键词、相册状态四列数据，修改各列的HeaderText属性为对应的中文文字，,选中GridView控件，在属性面板重载RowDataBound方法，在RowDataBound方法中输入如下代码，将状态显示转换为中文：protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)if(e.Row.RowType=DataControlRowType.DataRow)if(e.Row.Cells3.Text=1)e.Row.Cells3.Text=正常;else e.Row.Cells3.Text=锁定;e.Row.Cells4.Enabled=false;e.Row.Cells5.Enabled=false;,在创建GridView控件时，必须先为GridView的每一行创建一个GridViewRow对象，创建每一行时，将引发一个RowCreated事件；当行创建完毕，每一行GridViewRow就要绑定数据源中的数据，当绑定完成后，将引发RowDataBound事件。如果说我们可以利用RowCreated事件来控制每一行绑定的控件，那么我们同样可以利用RowDataBound事件来控制每一行绑定的数据，也就是让数据如何呈现给大家。RowType可以确定GridView中行的类型，RowType是枚举变量DataControlRowType中的一个值。RowType可以取值包括 DataRow、Footer、Header、EmptyDataRow、Pager、Separator。很多时候，我们需要判断当前是否是数据行，通过如下代码来进行判断：if(=DataControlRowType.DataRow),RowDeleting和RowDeleted事件 RowDeleting发生在删除数据之前，RowDeleted发生在删除数据之后。使用RowDeleting事件，可以在真正删除前再次确认是否删除，可以通过设置GridViewDeleteEventArgs.Cancel=True来取消删除；也可以用于判断当前数据库记录数，如果只剩一条记录且数据库不能为空则提示并取消删除操作。使用RowDeleted事件，可以在删除后，通过GridViewDeletedEventArgs的Exception属性判断删除过程中是否产生异常，如无异常，则可以显示类似于”1 Records deleted”之类的提示信息。,Example：protected void GridView1_RowDeleting(object sender,GridViewDeleteEventArgs e)/取得当前行号，并取得当前行的GridViewRow对象 int index=e.RowIndex;GridViewRow gvr=GridView1.Rowsindex;/取得当前行第二个单元格中的文字 str1=gvr.Cells1.Text;/进行提示 Message.Text=您将删除一个用户，其姓名为+str1;protected void GridView1_RowDeleted(object sender,GridViewDeletedEventArgs e)/如果没有产生异常，则提示成功删除，否则提示删除失败 if(e.Exception=null)Message.Text+=您成功删除了+str1;else Message.Text+=删除失败，请联系管理员;,Keys集合 Keys集合中一般存放的是数据源中的主键字段的key和value的对应值，如果主键由多个字段组成，那么Keys为每个键字段添加其字段名称和值。,选中“创建相册”连接，设置NavigateUrl属性为“addPhotoSet.aspx”在Page_Load方法中加入如下代码，实现用户不登录不能访问本页面功能：if(Sessionusername=null)Response.Redirect(Default.aspx);重载ChangPassword1控件ChangingPassword事件，添加代码,protected void ChangePassword1_ChangingPassword(object sender,LoginCancelEventArgs e)e.Cancel=true;/获得次输入的新旧密码，及登陆时保存的用户名 string oldPassword=ChangePassword1.CurrentPassword;string newPassword=ChangePassword1.NewPassword;string username=Sessionusername.ToString();/查询数据库，验证旧密码是否正确 string sql=select count(*)from userinfo where username=username and userpass=userpass;SqlParameter param=new SqlParameter(username,SqlDbType.Char),new SqlParameter(userpass,SqlDbType.VarChar);param0.Value=username;param1.Value=oldPassword;int usercount=(int)(sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param);,if(usercount 0)Response.Write(修改成功);else Response.Write(操作错误);,双击信息“修改”按钮，输入代码 protected void Button1_Click(object sender,EventArgs e)string email=txtEMail.Text;bool isOpen=cbIsOpen.Checked;string username=Sessionusername.ToString();string sql=update userinfo set eMail=email,isOpen=isopen where username=username;SqlParameter param=new SqlParameter(eMail,SqlDbType.VarChar),new SqlParameter(isopen,SqlDbType.Bit),new SqlParameter(username,SqlDbType.VarChar);param0.Value=email;param1.Value=isOpen;param2.Value=username;if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param)0)Response.Write(修改成功);else Response.Write(操作错误);,13.9.4 增加相册页面,4、创建页面“addPhotSet.aspx”页面功能：增加相册在页面中插入需要的文本框和按钮控件，页面布局如图所示。双击“添加”按钮，编写代码，完成相册添加功能：,protected void Button1_Click(object sender,EventArgs e)string username=(string)(Sessionusername);string sql=insert into userPhotoSet(username,photoSetName,photoSetContent,createTime,photoSetKey,photoSetState);sql+=values(username,photoSetName,photoSetContent,createTime,photoSetKey,photoSetState);SqlParameter sqlParams=new SqlParameter new SqlParameter(username,SqlDbType.VarChar),new SqlParameter(photoSetName,SqlDbType.VarChar),new SqlParameter(photoSetContent,SqlDbType.Text),new SqlParameter(createTime,SqlDbType.DateTime),new SqlParameter(photoSetKey,SqlDbType.VarChar),new SqlParameter(photoSetState,SqlDbType.TinyInt);,sqlParams0.Value=username;sqlParams1.Value=txtPhotoSetName.Text;sqlParams2.Value=txtPhotoSetContent.Text;sqlParams3.Value=System.DateTime.Now;sqlParams4.Value=txtPhotoSetKey.Text;sqlParams5.Value=1;if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)Response.Write(添加成功);else Response.Write(数据库操作失败);,13.9.5 修改相册信息页面,5、创建页面“modifyPhotosInfo.aspx”页面功能：修改相册信息（可以使用FormView控件更新功能，或者使用代码实现）打开userMain.aspx，打开GridView控件列编辑对话框。添加一个HyperLinkField列，将添加列的DataNavigateUrlFields属性设置为“psId”，DataNavigateUrlFormatString属性设置为“modifyPhotosInfo.aspx?psId=0”，HeaderText属性设置为“修改相册”，Text属性设置为“修改相册”，将GridView控件的DataKeyNames属性设置为“psId”,在页面中添加一个SqlDataSource数据源，设置查询语句为从相册表读取编号、名称、介绍和关键词字段，配置查询条件为psId等于URL参数中的psid的属性值，选中“生成INSERT、UPDATE和DELETE语句”选项，在页面上插入一个FormView控件，设置FormView控件的数据源为前面步骤配置的数据源控件，修改FormView控件的默认视图为编辑视图。,13.9.6 用户查看相册及上传相片页面,6、创建页面“photoAdmin.aspx”页面功能：上传相片（FileUpload控件），查看相册中相片（DataList控件），删除相片注意：上传照片功能：将照片的各种信息存放在数据库userPhotos表中将照片文件上传到对应的用户目录下（该目录自动创建）删除照片功能：将照片记录从数据库表中删除将照片文件也删除,打开“userMain.aspx”，进入GridView控件的列编辑窗口，添加一个列，DataNavigateUrlFields属性设置为“psId”，DataNavigateUrlFormatString属性设置为“photoAdmin.aspx?psId=0”，HeaderText属性设置为“管理相片”，Text属性设置为“管理相片”。在“photoAdmin.aspx”页面添加一个FileUpload控件，在上传相片地址上放添加“相册名称”输入框及“上传照片”按钮，布局如图,在网站目录中添加一个upphoto目录，用户上传的相片均存入本目录，双击“上传照片”按钮，编写如下代码，完成照片上传功能：,using System.IO;protected void btnUpfile_Click(object sender,EventArgs e)if(filePhotoUrl.HasFile)/文件上传 string username=Sessionusername.ToString();string savePath=Server.MapPath(/upphoto)+/+username+/;if(!Directory.Exists(savePath)Directory.CreateDirectory(savePath);savePath+=filePhotoUrl.FileName;filePhotoUrl.SaveAs(savePath);/文件信息存储到数据库中 savePath=username+/+filePhotoUrl.FileName;string psId=Request.ParamspsId;string sql=insert into userPhotos(username,psId,photoName,photoUrl,postTime);sql+=values(username,psId,photoName,photoUrl,postTime);,SqlParameter sqlParams=new SqlParameter new SqlParameter(username,SqlDbType.VarChar),new SqlParameter(psId,SqlDbType.VarChar),new SqlParameter(photoName,SqlDbType.VarChar),new SqlParameter(photoUrl,SqlDbType.VarChar),new SqlParameter(postTime,SqlDbType.VarChar);sqlParams0.Value=username;sqlParams1.Value=psId;sqlParams2.Value=txtPhotoName.Text;sqlParams3.Value=savePath;sqlParams4.Value=System.DateTime.Now;if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)DataList1.DataBind();else Response.Write(数据库操作失败);,添加一个SqlDataSource数据源控件，查询语句设置为从userPhotos表读取数据，设置查询条件为相册编号等于URL地址中的相册编号，在页面中插入一个DataList控件，设置控件数据源为上一步骤添加的数据源控件，设置RepeatColumns属性为“5”，即设置DataList控件为一行显示5条记录，将显示相片列表的DataList控件的模板代码设置如下：,target=_blank width=160 height=160 style=border:0 alt=/名称：上传时间：&psId=删除,在Page_Load方法中添加如下代码段，实现权限控制及删除相片功能。protected void Page_Load(object sender,EventArgs e)if(Sessionusername=null)Response.Redirect(Default.aspx);string op=Request.Paramsop;if(op!=null,SqlDataReader dread=sqlHelp.ExecuteReader(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,psql,sqlParams);if(dread.Read()if(System.IO.File.Exists(Server.MapPath(upphoto/+dread.GetString(4)System.IO.File.Delete(Server.MapPath(upphoto/+dread.GetString(4);sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams);Response.Redirect(photoAdmin.aspx?psId=+psId);,13.10 后台代码实现,相册管理系统的后台功能主要是为管理员提供用户信息管理、相册信息管理和相片信息管理功能，实现对一些用户上传非法内容进行修改和删除。主要包含下面几个文件。Login.aspx：登录页面。必须通过本页面登录后才能使用后台功能。Default.aspx：后台首页。HTML框架页面。menu.htm：后台目录页面。modifyAdminPassword.aspx：修改管理员登录密码。userAdmin.aspx：用户管理。PhotoSetAdmin.aspx：相册管理。PhotoAdmin.aspx：相片管理。,13.10.1 管理员登录,7、在项目中新建一个“admin”目录，所有后台相关文件都将放入本目录，在admin目录中添加“Login.aspx”页面页面功能：管理员登录页面中添加一个“Login”控件，设置DestinationPageUrl属性为Default.aspx页面，重载Authenticate方法，编写代码：,protected void Login1_Authenticate(object sender,AuthenticateEventArgs e)/获得输入用户名与密码信息 string adminuser=Login1.UserName.Replace(,);string adminpass=Login1.Password.Replace(,);/生成程序语句 string sql=select count(*)from adminuser where adminname=adminname and adminpass=adminpass;SqlParameter param=new SqlParameter(adminname,SqlDbType.Char),new SqlParameter(adminpass,SqlDbType.VarChar);,param0.Value=adminuser;param1.Value=adminpass;/执行查询于语句，得到查询结果 int usercount=(int)(sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param);if(usercount 0)/查询成功保存用户名 e.Authenticated=true;Sessionadminuser=adminuser;else/查询失败 e.Authenticated=false;,13.10.6 后台目录及后台首页,8、在admin目录下新建一个Default.aspx作为后台首页，编写如下代码：相册管理系统后台 浏览器不支持框架页面！,9、在admin目录下建立一个menu.htm页面，作为首页左边显示的目录页，在menu.htm中添加如下代码：用户管理 相册管理 修改管理密码,13.10.2 用户管理,10、在admin目录添加一个文件，文件名为“userAdmin.aspx”页面功能：对用户列表信息进行删除、编辑当用户被删除时，他所创建的相册、上传的相片均被删除在页面中放置一个数据源控件，配置数据源的查询语句为从用户表读取除密码之外的所有字段，并启动生成数据操作语句，插入一个GridView控件，设置数据源为上一步配置的数据源，然后启用分页、编辑和删除功能，打开字段编辑对话框，将各个字段的HeaderText属性修改为中文，将用户名、注册时间、最后登录时间4个字段设置为只读字段，即将字段的ReadOnly属性设置为true,重载GridView1控件的RowDeleted方法，编写如下代码，实现删除用户同时删除相册数据、相片数据及上传相册文件的功能：protected void GridView1_RowDeleted(object sender,GridViewDeletedEventArgs e)string username=e.Keys0.ToString();string psql=select*from userPhotos where username=username;string sql=delete from userPhotoSet where username=username;string sql1=delete from userPhotos where username=username;SqlParameter sqlParams=new SqlParameter new SqlParameter(username,SqlDbType.VarChar);sqlParams0.Value=username;,SqlDataReader dread=sqlHelp.ExecuteReader(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,psql,sqlParams);while(dread.Read()System.IO.File.Delete(Server.MapPath(./upphoto/+dread.GetString(4);sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams);sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql1,sqlParams);,13.10.3 相册管理,11、在admin目录添加一个文件“PhotoSetAdmin.aspx”页面功能：对相册信息进行删除、编辑当相册被删除时，相册中的所有相片均被删除放置一个数据源控件到页面中，并启动配置向导。配置数据源为查询相册表的所有数据，并启用插入、修改和删除功能，插入一个GridView控件，设置数据源为上一步骤配置的数据源，然后启用分页、编辑和删除功能，打开列编辑对话框，修改username列的HeaderText属性为“用户名”，修改ReadOnly属性为true进入页面源代