网站相册系统课件.pptx

1、13.2 需 求 分 析 本例要开发一个简单的相册管理系统，对系统提出的需求是实现网站相册系统的核心功能。系统需要实现下列功能：(1)匿名访客可以浏览网站的全部图片内容。(2)注册用户可以建立不同的相册。(3)注册用户可以上传照片到自己的相册并实现对相册进行管理。(4)网站维护人员如发现有人上传非法内容可以进行删除。这里的删除功能需要实现级联删除。 牛牛文库文档分享13.2 需 求 分 析 由需求分析所得结果，可将该系统的功能分为前台和后台两个功能模块，每个模块实现的主要功能如下：q前台：存在两种用户角色匿名访客：浏览图片注册用户：登录、密码修改、用户信息管理、创建相册、相册管理、相册查询、上

2、传图片、图片查询 q后台：网站管理员：登录、密码修改、用户管理、相册管理、图片管理 牛牛文库文档分享13.3 用 例 图 根据前面的需求分析，设计网站相册系统的用例图，如图13-1所示。 牛牛文库文档分享13.6 数据库结构本例数据库设计如图13-3所示。 牛牛文库文档分享13.7 开发环境搭建1、创建网站userPhoto2、创建数据库n在网站目录App_Data下创建数据库photoData.mdfn在数据库中添加表注册用户表（userinfo）、用户相册表（userPhotoSet）、用户相片表（userPhotos）、管理员表（adminuser）n在表中添加字段 牛牛文库文档分享13

3、.8 数据访问层的实现 本例的主要代码是使用ASP.NET控件实现的，但是对于访问数据库进行数据的插入、删除和更新等操作，使用ADO.NET类库直接执行SQL语句更为方便。在本系统开发过程中，引入了一个SqlHelper类，用以简化数据库相关操作的编程实现。3、创建SqlHelper类：在网站目录App_Code下创建类SqlHelper.cs。（如果网站中没有App_Code 目录，在网站名称处点击右键，选择添加ASP.NET文件夹，选择App_Code 即可） 牛牛文库文档分享13.9 前台程序代码 相册系统前台要实现的功能为：访问者可以浏览其他注册用户上传到网站的公开相册和相片信息，注册

4、后可以上传自己的相片到网站上面。前台主要包括下面几个文件。qDefault.aspx：相册系统首页。quserReg.aspx：用户注册页面。quserMain.aspx：用户首页，包括用户信息管理和相册管理功能。qaddPhotSet.aspx：添加相册。qmodifyPhotosInfo.aspx：修改相册信息。qphotoAdmin.aspx：相册相片管理及上传。 牛牛文库文档分享13.9.1 系统首页实现1、创建Default.aspx页面页面功能：登录、显示最新创建相册，最新上传相片，显示相册列表（使用DataList控件）n在页面上插入一个隐藏线格式的表格，用于页面布局n在上一步骤

5、插入的表格中，向左上方单元格插入一个Login控件，n从工具箱中拖入3个DataList控件到页面中，n在每一个DataList控件上方插入一个SqlDataSource数据源控件，页面布局设置为如图所示 牛牛文库文档分享n配置第一个SqlDataSource1数据源，保存连接字符串名字为“photoConnectionString”，n进入“配置Select语句”界面，因为本例需要实现的查询语句相对复杂，无法使用开发环境提供的简单查询语句生成工具生成，这里选择“指定自定义SQL语句或存储过程”选项，单击“下一步”按钮n在“定义自定义语句或存储过程”对话框的“SQL语句”文本框中输入查询语句：

6、“select top 10*from userPhotoSet where photoSetState=0 order by createTime desc”，完成数据源的配置。n配置SqlDataSource2数据源，将SQL语句配置为“select top 10*from userPhotos order by photoId desc”，其他步骤选择为与上一个数据源一样的配置。 牛牛文库文档分享n配置SqlDataSource3数据源，设置数据源为从相册表中读取数据，设置排序规则为按编号降序排列n设置3个DataList控件的数据源为前面添加的对应数据源控件 牛牛文库文档分享n将显示最

7、新创建相册的DataList控件的模板代码设置如下：n n n n n n n n （）n nnn 牛牛文库文档分享将显示最新上传相片的DataList控件的模板代码设置如下：nn n n n n nimg src=upphoto/width=160 height=160 alt=/n n ()nn n 牛牛文库文档分享n将显示相册列表的DataList控件的模板代码设置如下：n nn n n 相册名称n 创建用户n 创建时间n 相册状态n 关键词n n n n 牛牛文库文档分享nn n n n n n n n n n n n 牛牛文库文档分享绑定表达式 区别:1.eval是只读数据，bind

8、是可更新的 2.当对次表达式操作时候，必须用Eval 如 Eval 单向绑定:数据是只读的Bind 双向绑定:数据可以更改,并返回服务器端,服务器可以处理更改后的数据,如存入数据库 牛牛文库文档分享n设置登录控件DestinationPageUrl属性为userMain.aspx，重载“Authenticate”事件nprotected void Login1_Authenticate(object sender,AuthenticateEventArgs e)n /获得输入用户名与密码信息n string username=Login1.UserName.Replace(,);n strin

9、g userpass=Login1.Password.Replace(,);n /生成程序语句n string sql=select count(*)from userinfo where username=username and userpass=userpass and isLock=0;n SqlParameter param=n new SqlParameter(username,SqlDbType.Char),n new SqlParameter(userpass,SqlDbType.VarChar)n ;n param0.Value=username;n param1.Value

10、=userpass;n /执行查询于语句，得到查询结果n int usercount=(int)(sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param); 牛牛文库文档分享nif(usercount 0)n n /查询成功保存用户名n e.Authenticated=true;n Sessionusername=username;n sql=update userinfo set letLoginTime=getdate()where username=username

11、;n SqlParameter sqlParams=new SqlParameter n new SqlParameter(username,SqlDbType.VarChar)n ;n sqlParams0.Value=username;n sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams);n n 牛牛文库文档分享13.9.2 用户注册页面2、创建页面“userReg.aspx”页面功能：实现注册，注册成功后应回到Default.aspx页面n从标准

12、工具区中拖放一些文本框、复选框和按钮控件，设置好控件位置，完成注册界面的开发n将两个密码输入框的文本模式设置为“Password”n在前面四个文本框后面分别插入一个RequiredFieldValidator控件，用于验证用户输入，设置各个验证控件的ControlToValidate属性值为对应的文本框控件名。并设置ErrorMessage属性值为“*”n在确认密码的必填验证控件后面插入一个比较验证控件，设置比较验证控件的ControlToCompare属性为确认密码文本框ID，然后设置ControlToValidate属性为输入密码文本框ID，设置ErrorMessage属性值为“两次密码输

13、入不一致” 牛牛文库文档分享13.9.2 用户注册页面n打开首页，在登录控件下插入一个HyperLink控件，设置NavigateUrl属性为注册页面，Text属性为“注册”.n双击“注册”按钮，编写如下代码，完成用户注册功能： 牛牛文库文档分享nprotected void Button1_Click(object sender,EventArgs e)n n string sql=select count(*)from userinfo where username=username;n SqlParameter sqlParams=new SqlParameter new SqlPara

14、meter(username,SqlDbType.VarChar);n sqlParams0.Value=txtUserName.Text;n if(int)sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)n n Response.Write(用户名已经存在！);n n elsen n sql=insert into userinfo(username,userpass,regTime,letLoginTime,isLock,eMail,isOpen,

15、userPost);n sql+=values(username,userpass,regTime,letLoginTime,isLock,eMail,isOpen,userPost);n 牛牛文库文档分享nsqlParams=new SqlParameter n new SqlParameter(username,SqlDbType.VarChar),n new SqlParameter(userpass,SqlDbType.VarChar),n new SqlParameter(regTime,SqlDbType.DateTime),n new SqlParameter(letLoginT

16、ime,SqlDbType.DateTime),n new SqlParameter(isLock,SqlDbType.Bit),n new SqlParameter(eMail,SqlDbType.VarChar),n new SqlParameter(isOpen,SqlDbType.Bit),n new SqlParameter(userPost,SqlDbType.VarChar);n sqlParams0.Value=txtUserName.Text;n sqlParams1.Value=txtUserPass.Text;n sqlParams2.Value=System.DateT

17、ime.Now;n sqlParams3.Value=System.DateTime.Now;n sqlParams4.Value=0;n sqlParams5.Value=txtEMail.Text;n sqlParams6.Value=cbIsOpen.Checked;n sqlParams7.Value=txtPost.Text;n if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)n Response.Write(注册成功);n els

18、e Response.Write(数据库操作失败); 牛牛文库文档分享13.9.3 用户及相册管理页面3、创建页面“userMain.aspx”页面功能：修改密码，修改用户信息，显示相册列表n在页面插入布局表格。n在“修改密码”文字下方插入一个“ChangePassword”控件n在修改密码部分下面插入一个表格，用于实现用户信息修改功能n在布局表格下方插入一个GridView控件和一个HyperLink控件 牛牛文库文档分享n为GridView控件创建数据源，在“配置Select语句”界面中，选择从“userPhotoSet”表中读取所有的数据，设置查询条件为用户名等于保存在Session中的

19、用户名n在列编辑对话框中，只保留相册名称、创建日期、关键词、相册状态四列数据，修改各列的HeaderText属性为对应的中文文字， 牛牛文库文档分享n选中GridView控件，在属性面板重载RowDataBound方法，在RowDataBound方法中输入如下代码，将状态显示转换为中文：n protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)n n if(e.Row.RowType=DataControlRowType.DataRow)n n if(e.Row.Cells3.Text=1)n e.

20、Row.Cells3.Text=正常;n elsen n e.Row.Cells3.Text=锁定;n e.Row.Cells4.Enabled=false;n e.Row.Cells5.Enabled=false;n n n 牛牛文库文档分享 在创建GridView控件时，必须先为GridView的每一行创建一个GridViewRow对象，创建每一行时，将引发一个RowCreated事件；当行创建完毕，每一行GridViewRow就要绑定数据源中的数据，当绑定完成后，将引发RowDataBound事件。如果说我们可以利用RowCreated事件来控制每一行绑定的控件，那么我们同样可以利用Ro

21、wDataBound事件来控制每一行绑定的数据，也就是让数据如何呈现给大家。RowType可以确定GridView中行的类型，RowType是枚举变量DataControlRowType中的一个值。RowType可以取值包括 DataRow、Footer、Header、EmptyDataRow、Pager、Separator。很多时候，我们需要判断当前是否是数据行，通过如下代码来进行判断：if(e.Row.RowType=DataControlRowType.DataRow) 牛牛文库文档分享 RowDeleting和和RowDeleted事件事件 RowDeleting发生在删除数据之前，R

22、owDeleted发生在删除数据之后。使用RowDeleting事件，可以在真正删除前再次确认是否删除，可以通过设置GridViewDeleteEventArgs.Cancel=True来取消删除；也可以用于判断当前数据库记录数，如果只剩一条记录且数据库不能为空则提示并取消删除操作。使用RowDeleted事件，可以在删除后，通过GridViewDeletedEventArgs的Exception属性判断删除过程中是否产生异常，如无异常，则可以显示类似于”1 Records deleted”之类的提示信息。 牛牛文库文档分享Example：protected void GridView1_Ro

23、wDeleting(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)/如果没有产生异常，则

24、提示成功删除，否则提示删除失败 if(e.Exception=null)Message.Text+=您成功删除了+str1;else Message.Text+=删除失败，请联系管理员; 牛牛文库文档分享Keys集合集合 Keys集合中一般存放的是数据源中的主键字段的key和value的对应值，如果主键由多个字段组成，那么Keys为每个键字段添加其字段名称和值。 牛牛文库文档分享n选中“创建相册”连接，设置NavigateUrl属性为“addPhotoSet.aspx”n在Page_Load方法中加入如下代码，实现用户不登录不能访问本页面功能：if(Sessionusername=null)R

25、esponse.Redirect(Default.aspx);n重载ChangPassword1控件ChangingPassword事件，添加代码 牛牛文库文档分享n protected void ChangePassword1_ChangingPassword(object sender,LoginCancelEventArgs e)n n e.Cancel=true;/获得次输入的新旧密码，及登陆时保存的用户名n string oldPassword=ChangePassword1.CurrentPassword;n string newPassword=ChangePassword1.N

26、ewPassword;n string username=Sessionusername.ToString();n /查询数据库，验证旧密码是否正确n string sql=select count(*)from userinfo where username=username and userpass=userpass;n SqlParameter param=n new SqlParameter(username,SqlDbType.Char),n new SqlParameter(userpass,SqlDbType.VarChar)n ;n param0.Value=username;

27、n param1.Value=oldPassword;n int usercount=(int)(sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,n CommandType.Text,sql,param); 牛牛文库文档分享nif(usercount 0)n Response.Write(修改成功);n else Response.Write(操作错误);n n 牛牛文库文档分享n双击信息“修改”按钮，输入代码n protected void Button1_Click(object sender,EventArgs

28、 e)n n string email=txtEMail.Text;n bool isOpen=cbIsOpen.Checked;n string username=Sessionusername.ToString();n string sql=update userinfo set eMail=email,isOpen=isopen where username=username;n SqlParameter param=n new SqlParameter(eMail,SqlDbType.VarChar),n new SqlParameter(isopen,SqlDbType.Bit),n

29、 new SqlParameter(username,SqlDbType.VarChar)n ;n param0.Value=email;n param1.Value=isOpen;n param2.Value=username;n if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param)0)n Response.Write(修改成功);n else Response.Write(操作错误); 牛牛文库文档分享13.9.4 增加相册页面4、创建页面“addPho

30、tSet.aspx”页面功能：增加相册n在页面中插入需要的文本框和按钮控件，页面布局如图所示。n双击“添加”按钮，编写代码，完成相册添加功能： 牛牛文库文档分享 protected void Button1_Click(object sender,EventArgs e)string username=(string)(Sessionusername);string sql=insert into userPhotoSet(username,photoSetName,photoSetContent,createTime,photoSetKey,photoSetState);sql+=value

31、s(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.D

32、ateTime),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;sqlPa

33、rams5.Value=1;if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)Response.Write(添加成功);else Response.Write(数据库操作失败); 牛牛文库文档分享13.9.5 修改相册信息页面5、创建页面“modifyPhotosInfo.aspx”页面功能：修改相册信息（可以使用FormView控件更新功能，或者使用代码实现）n打开userMain.aspx，打开GridView控件列编辑对话框。添加一个Hy

34、perLinkField列，将添加列的DataNavigateUrlFields属性设置为“psId”，DataNavigateUrlFormatString属性设置为“modifyPhotosInfo.aspx?psId=0”，HeaderText属性设置为“修改相册”，Text属性设置为“修改相册”，n将GridView控件的DataKeyNames属性设置为“psId” 牛牛文库文档分享n在页面中添加一个SqlDataSource数据源，设置查询语句为从相册表读取编号、名称、介绍和关键词字段，配置查询条件为psId等于URL参数中的psid的属性值，选中“生成INSERT、UPDATE和

35、DELETE语句”选项，n在页面上插入一个FormView控件，设置FormView控件的数据源为前面步骤配置的数据源控件，修改FormView控件的默认视图为编辑视图。 牛牛文库文档分享13.9.6 用户查看相册及上传相片页面6、创建页面“photoAdmin.aspx”页面功能：上传相片（FileUpload控件），查看相册中相片（DataList控件），删除相片注意：上传照片功能：n将照片的各种信息存放在数据库userPhotos表中n将照片文件上传到对应的用户目录下（该目录自动创建）删除照片功能：n将照片记录从数据库表中删除n将照片文件也删除 牛牛文库文档分享n打开“userMain.

36、aspx”，进入GridView控件的列编辑窗口，添加一个列，DataNavigateUrlFields属性设置为“psId”，DataNavigateUrlFormatString属性设置为“photoAdmin.aspx?psId=0”，HeaderText属性设置为“管理相片”，Text属性设置为“管理相片”。n在“photoAdmin.aspx”页面添加一个FileUpload控件，在上传相片地址上放添加“相册名称”输入框及“上传照片”按钮，布局如图 牛牛文库文档分享n在网站目录中添加一个upphoto目录，用户上传的相片均存入本目录，n双击“上传照片”按钮，编写如下代码，完成照片上传

37、功能： 牛牛文库文档分享n using System.IO;n protected void btnUpfile_Click(object sender,EventArgs e)n n if(filePhotoUrl.HasFile)n /文件上传文件上传n string username=Sessionusername.ToString();n string savePath=Server.MapPath(/upphoto)+/+username+/;n if(!Directory.Exists(savePath)n Directory.CreateDirectory(savePath);n

38、 savePath+=filePhotoUrl.FileName;n filePhotoUrl.SaveAs(savePath);n /文件信息存储到数据库中文件信息存储到数据库中n savePath=username+/+filePhotoUrl.FileName;n string psId=Request.ParamspsId;n string sql=insert into userPhotos(username,psId,photoName,photoUrl,postTime);n sql+=values(username,psId,photoName,photoUrl,postTim

39、e); 牛牛文库文档分享nSqlParameter sqlParams=new SqlParameter n new SqlParameter(username,SqlDbType.VarChar),n new SqlParameter(psId,SqlDbType.VarChar),n new SqlParameter(photoName,SqlDbType.VarChar),n new SqlParameter(photoUrl,SqlDbType.VarChar),n new SqlParameter(postTime,SqlDbType.VarChar);n sqlParams0.Va

40、lue=username;n sqlParams1.Value=psId;n sqlParams2.Value=txtPhotoName.Text;n sqlParams3.Value=savePath;n sqlParams4.Value=System.DateTime.Now;n if(sqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams)0)n DataList1.DataBind();n elsen Response.Write(数据库操作失败);n

41、 n 牛牛文库文档分享n添加一个SqlDataSource数据源控件，查询语句设置为从userPhotos表读取数据，设置查询条件为相册编号等于URL地址中的相册编号，n在页面中插入一个DataList控件，设置控件数据源为上一步骤添加的数据源控件，设置RepeatColumns属性为“5”，即设置DataList控件为一行显示5条记录，n将显示相片列表的DataList控件的模板代码设置如下： 牛牛文库文档分享 a href=upphoto/target=_blank img src=upphoto/width=160 height=160 style=border:0 alt=/名称：上传

42、时间：a href=?op=del&id=&psId=删除 牛牛文库文档分享n在Page_Load方法中添加如下代码段，实现权限控制及删除相片功能。n protected void Page_Load(object sender,EventArgs e)n n if(Sessionusername=null)n Response.Redirect(Default.aspx);n string op=Request.Paramsop;n if(op!=null&op.Equals(del)n n string id=Request.Paramsid;n string psId=Request.P

43、aramspsId;n string psql=select*from userPhotos where photoId=id;n string sql=delete from userPhotos where photoId=id;n SqlParameter sqlParams=new SqlParameter new SqlParameter(id,SqlDbType.Int);n sqlParams0.Value=id; 牛牛文库文档分享n SqlDataReader dread=sqlHelp.ExecuteReader(sqlHelp.ConnectionStringLocalTr

44、ansaction,CommandType.Text,psql,sqlParams);n if(dread.Read()n n if(System.IO.File.Exists(Server.MapPath(upphoto/+dread.GetString(4)n System.IO.File.Delete(Server.MapPath(upphoto/+dread.GetString(4);n nsqlHelp.ExecuteNonQuery(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,sqlParams);n

45、Response.Redirect(photoAdmin.aspx?psId=+psId);n n 牛牛文库文档分享13.10 后台代码实现 相册管理系统的后台功能主要是为管理员提供用户信息管理、相册信息管理和相片信息管理功能，实现对一些用户上传非法内容进行修改和删除。主要包含下面几个文件。qLogin.aspx：登录页面。必须通过本页面登录后才能使用后台功能。qDefault.aspx：后台首页。HTML框架页面。qmenu.htm：后台目录页面。qmodifyAdminPassword.aspx：修改管理员登录密码。quserAdmin.aspx：用户管理。qPhotoSetAdmin.a

46、spx：相册管理。qPhotoAdmin.aspx：相片管理。 牛牛文库文档分享13.10.1 管理员登录7、在项目中新建一个“admin”目录，所有后台相关文件都将放入本目录，在admin目录中添加“Login.aspx”页面页面功能：管理员登录n页面中添加一个“Login”控件，设置DestinationPageUrl属性为Default.aspx页面，重载Authenticate方法，编写代码： 牛牛文库文档分享n protected void Login1_Authenticate(object sender,AuthenticateEventArgs e)n n /获得输入用户名与密

47、码信息n string adminuser=Login1.UserName.Replace(,);n string adminpass=Login1.Password.Replace(,);n /生成程序语句n string sql=select count(*)from adminuser where adminname=adminname and adminpass=adminpass;n SqlParameter param=n new SqlParameter(adminname,SqlDbType.Char),n new SqlParameter(adminpass,SqlDbTyp

48、e.VarChar)n ;n 牛牛文库文档分享n param0.Value=adminuser;n param1.Value=adminpass;n/执行查询于语句，得到查询结果n int usercount=(int)(sqlHelp.ExecuteScalar(sqlHelp.ConnectionStringLocalTransaction,CommandType.Text,sql,param);n if(usercount 0)n n /查询成功保存用户名n e.Authenticated=true;n Sessionadminuser=adminuser;n n else/查询失败n

49、e.Authenticated=false;n 牛牛文库文档分享13.10.6 后台目录及后台首页8、在admin目录下新建一个Default.aspx作为后台首页，编写如下代码：nnn 相册管理系统后台nnn nn浏览器不支持框架页面！ 牛牛文库文档分享9、在admin目录下建立一个menu.htm页面，作为首页左边显示的目录页，在menu.htm中添加如下代码：nn 用户管理n 相册管理n 修改管理密码 牛牛文库文档分享13.10.2 用户管理10、在admin目录添加一个文件，文件名为“userAdmin.aspx”页面功能：对用户列表信息进行删除、编辑当用户被删除时，他所创建的相册、上

50、传的相片均被删除n在页面中放置一个数据源控件，配置数据源的查询语句为从用户表读取除密码之外的所有字段，并启动生成数据操作语句，n插入一个GridView控件，设置数据源为上一步配置的数据源，然后启用分页、编辑和删除功能，n打开字段编辑对话框，将各个字段的HeaderText属性修改为中文，将用户名、注册时间、最后登录时间4个字段设置为只读字段，即将字段的ReadOnly属性设置为 牛牛文库文档分享n重载GridView1控件的RowDeleted方法，编写如下代码，实现删除用户同时删除相册数据、相片数据及上传相册文件的功能：n protected void GridView1_RowDelet