您所在位置：网站首页 > 资格认证/考试 > 自考 > 图片管理系统

图片管理系统.ppt

89页

卖家[上传人]：M****1

文档编号：593562951

上传时间：2024-09-25

文档格式：PPT

文档大小：2.87MB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

20金贝

下载

/ 89 举报版权申诉马上下载

文本预览

下载提示

常见问题

图片管理系统图片管理系统1需求分析1.创建专辑创建专辑/修改专辑封皮图片及简介修改专辑封皮图片及简介/删除专辑删除专辑/ 按名称查询专辑按名称查询专辑;2.为专辑添加图片为专辑添加图片/浏览专辑图片浏览专辑图片/删除选中图片删除选中图片/ 修改图片简介及所属专辑名修改图片简介及所属专辑名;3.分页查询分页查询2用力图用力图创建专辑创建专辑修改专辑修改专辑删除专辑删除专辑查询专辑查询专辑添加图片添加图片浏览图片浏览图片删除图片删除图片修改图片修改图片3图片管理系统图片管理系统创建专辑创建专辑修改专辑修改专辑删除专辑删除专辑查询专辑查询专辑添加图片添加图片浏览图片浏览图片删除图片删除图片修改图片修改图片功能结构图功能结构图4数据表设计数据表设计5数据表设计数据表设计6模块类别功能创建建专辑创建建专辑名称，添加封面名称，添加封面图片、添加片、添加专辑简介介修改修改专辑修改修改专辑封面封面图片和片和简介信息介信息删除除专辑删除除专辑信息包括信息包括专辑中中图片信息片信息查询专辑按按专辑名称名称查询或分或分页查询,浏览专辑编号、号、专辑名称、名称、专辑封面封面图片、片、专辑简介等信息介等信息添加图片添加图片上传图片及图片简介上传图片及图片简介查询图片查询图片显示图片的名称、地址、上传时间、简介、显示图片的名称、地址、上传时间、简介、所属专辑名以及图片本身所属专辑名以及图片本身修改图片修改图片修改图片的简介信息及所属的专辑修改图片的简介信息及所属的专辑删除图片删除图片删除图片相关信息删除图片相关信息系统模块划分系统模块划分7开发步骤1、文件—新建网站，在站点下新建App_Code和 App_Data 文件夹；2、将数据库文件及数据库日志文件，存放在App_Data中；3、右击App_Code，添加新项，添加类文件SqlHelper.cs 和DB.cs；4、右击站点—添加配置文件 web.config5、添加两个文件夹image和 logo分别存放图片8利用利用SqlDataSource生成数据库连接字符串生成数据库连接字符串9 将SqlDataSource生成的数据库连接字符串复制到web.config中，然后就可以删除该SqlDataSource，如下所示： 10 为了代码重用，为了体现分层思想，我们将数据库连接代码写在SqlHelper.cs公共类中，将数据库操作代码写在DB.cs公共类中。

SqlHelper.cs中：1、右击站点—添加引用—.NET—System.Configuration2、代码中添加using System.Data; using System.Data.SqlClient;11SqlHelper.cs代码如下：代码如下：public class SqlHelper{ private static readonly string ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; SqlConnection conn = new SqlConnection(ConnectionString); public SqlCommand GetCommand(string sqlStr, params SqlParameter[] cmdparms) { SqlCommand cmd = new SqlCommand(); cmd.Connection = conn; cmd.CommandText = sqlStr; cmd.CommandType = CommandType.Text; if (cmdparms != null) { foreach (SqlParameter p in cmdparms) { cmd.Parameters.Add(p); } } return cmd; } public SqlHelper(){ conn.Open();}}12DB.cs代码（首先引用using System.Data.SqlClient;）public class DB{public DB(){//// TODO: 在此处添加构造函数逻辑//} //在首页上显示所有专辑信息 public DataTable GetAll() { SqlHelper helper = new SqlHelper(); string strsql = "select * from album"; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql,null); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }13//在首页上按名称查询专辑信息 public DataTable GetByID(int id) { SqlHelper helper = new SqlHelper(); string strsql = "select * from album where albumID=@albumID"; SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@albumID",id) }; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }14//为首页的专辑名称下拉菜单绑定名称 public DataTable GetAlbumName() { SqlHelper helper = new SqlHelper(); string strsql = "select albumID,albumName from album"; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql, null); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }}15 当当SqlHelper.cs和和DB.cs两个公共类写好后，右击站点，两个公共类写好后，右击站点，生成网站，检查是否生成成功。

生成网站，检查是否生成成功如果生成成功，做如下操作：如果生成成功，做如下操作：16171819202122 利用GridView显示专辑信息，用上述方法新建数据源—对象，与上述方法中不同的是，选择的DB方法不同注意：GridView的属性设置：AllowPaging=True,AutoGenerateColumns=False,DataKeyNames=albumID,PageSize=2.23 利用GridView显示专辑信息，用上述方法新建数据源—对象，与上述方法中不同的是，选择的DB方法不同24给给GridView编辑列，如下所示：编辑列，如下所示：BoundField:专辑编号、专辑名称、专辑创建时间专辑编号、专辑名称、专辑创建时间TemplateField:专辑封面专辑封面HyperLinkField:为专辑添加图片、浏览专辑图片、修改专辑为专辑添加图片、浏览专辑图片、修改专辑CommandField:删除删除2526Height:100pxwidth:100px2728注意检查注意检查GridView的属性设置：的属性设置：AllowPaging=“True”AutoGenerateColumns=“False”DataKeyNames=“albumID”PageSize=“2”29增加查询按钮增加查询按钮Button30新建ObjectDataSource,配置数据源，选择DB中的GetByID3132双击查询按钮buttton1，进入Default.aspx.cs代码中编辑： protected void Button1_Click(object sender, EventArgs e) { GridView1.DataSourceID = ObjectDataSource3.ID; GridView1.DataBind(); }33 对于”创建专辑”按钮按下后,应该打开新的窗体AddAlbum.aspx,实现专辑名称,专辑封面图片和专辑简介信息的添加.如下图:34在在DB.cs中继续添加功能块中继续添加功能块,实现添加专辑信息的功能实现添加专辑信息的功能public void AddAlbum(string albumName, DateTime albumTime, string logoUrl, string albumDesc) { SqlHelper helper = new SqlHelper(); string strsql = "insert into album (albumName,albumTime,logoUrl,albumDesc) values(@name,@time,@logourl,@desc)"; SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@name",albumName), new SqlParameter("@time",albumTime), new SqlParameter("@logourl",logoUrl), new SqlParameter("@desc",albumDesc) }; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); }35双击双击”提交提交”按钮按钮,将专辑信息添加到将专辑信息添加到album数据表中数据表中.36 protected void Button1_Click(object sender, EventArgs e) { DB db = new DB(); string albumName = TextBox1.Text; DateTime albumTime = DateTime.Now; string logourl = "image/" + ; string exname = ('.')[1]; string albumDesc = TextBox2.Text; if (exname.ToLower() == "jpg" || exname.ToLower() == "gif" || exname.ToLower() == "png") { (Server.MapPath(logourl)); } db.AddAlbum(albumName, albumTime, logourl, albumDesc); Response.Write(""); }37为专辑添加图片功能的实现为专辑添加图片功能的实现:右击站点添加新页面右击站点添加新页面addimage.aspx,给给image数据表添加信息数据表添加信息38再次给再次给GridView编辑列，如下所示：编辑列，如下所示：查看查看HyperLinkField列列:为专辑添加图片为专辑添加图片39DataNavigateUrlFields: albumID绑定到超链接的绑定到超链接的NavigateUrl属性字段属性字段;DataNavigateUrlFormatString: addimage.aspx?id={0}对绑定到超链接的对绑定到超链接的NavigateUrl属性的值应用的格式设置属性的值应用的格式设置.给给image数据表添加信息数据表添加信息:40414243444546//打开打开DB.cs,添加方法添加方法,实现实现给专辑添加照片功能给专辑添加照片功能:public void addimage(int albumID,string imageName,string imageUrl,DateTime imageTime,string imageDesc) { SqlHelper helper = new SqlHelper(); string addimage = "insert into image (albumID,imageName,imageUrl,imageTime,imageDesc) Values(@albumID,@imageName,@imageUrl, @imageTime,@imageDesc)"; SqlParameter[] parm = new SqlParameter[] {new SqlParameter("@albumID",albumID), new SqlParameter("@imageName",imageName), new SqlParameter("@imageUrl",imageUrl), new SqlParameter("@imageTime",imageTime), new SqlParameter("@imageDesc",imageDesc) }; SqlCommand cmd = helper.GetCommand(addimage, parm); cmd.ExecuteNonQuery(); }47//点击点击addimage.aspx的的 “提交按钮提交按钮”时时:protected void Button1_Click(object sender, EventArgs e) { DB db = new DB(); int albumID =Convert.ToInt32(DropDownList1.SelectedValue); DateTime imageTime = DateTime.Now; string imageUrl = "image/" + ; string imageType = ('.')[1]; string imageName = ('.')[0]; string imageDesc = TextBox1.Text.ToString(); if (imageType.ToLower() == "jpg" || imageType.ToLower() == "gif" || imageType.ToLower() == "png") { (Server.MapPath(imageUrl)); } db.addimage(albumID,imageName,imageUrl,imageTime,imageDesc);Response.Write(""); }48浏览专辑图片功能的实现浏览专辑图片功能的实现:右击站点添加新页面右击站点添加新页面ViewImage.aspx49 首先对首先对default.aspx的的GridView进行编辑列操作，使得进行编辑列操作，使得 “浏览专辑图片按钮浏览专辑图片按钮”具有超链接功能具有超链接功能,可链到可链到ViewImage.aspx如下所示如下所示:50//在在DB.cs中编写方法中编写方法,实现实现浏览某个专辑中的所有照片浏览某个专辑中的所有照片首先引用命名空间首先引用命名空间:using System.Text;和和using System.Collections; public DataTable showImage(int albumID) { SqlHelper helper = new SqlHelper(); StringBuilder strsql_show = new StringBuilder(); strsql_show.Append("select imageID,alb.albumID,alb.albumName, imageName,imageUrl,imageTime,imageDesc"); strsql_show.Append(" from image as img,album as alb where img.albumID=alb.albumID and img.albumID=@id"); SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@id",albumID) }; SqlCommand cmd = helper.GetCommand(strsql_show.ToString(), parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }有空格51 设计ViewImage.asp页面页面52535455对对GridView进行编辑列操作进行编辑列操作:CommandField:选择选择— showselectButton:true;BoundField:HeaderText:图片编号图片编号—DataField:imageIDHeaderText:图片地址图片地址—DataField:imageUrl HeaderText:图片名称图片名称—DataField:imageNameHeaderText:所属专辑名所属专辑名—DataField:albumNameHeaderText:图片上传时间图片上传时间—DataField:imageTime,HeaderText:图片简介图片简介—DataField:imageDescHyperLinkField:Text:修改图片所属专辑修改图片所属专辑TemplateField56 编辑模板:TemplateField,其中HeaderTemplate和ItemTemplate设计如下:注意将GridView的属性设置如下:AllowPaging:True, AutoGenergateColumns:False,PageSize:2,DataKeyNames:imageID57//在在DB.cs中编写方法中编写方法,实现在实现在DetailsView中显示某张照片的详细信息中显示某张照片的详细信息注意是否引用命名空间注意是否引用命名空间:using System.Text;和和using System.Collections; public DataTable showMoreImage(int id) { SqlHelper helper = new SqlHelper(); StringBuilder strsql_show = new StringBuilder(); strsql_show.Append("select imageID,alb.albumID,alb.albumName, imageName,imageUrl,imageTime,imageDesc"); strsql_show.Append(" from image as img,album as alb where img.albumID=alb.albumID and img.imageID=@id"); SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@id",id) }; SqlCommand cmd = helper.GetCommand(strsql_show.ToString(), parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }空格58设计ViewImage.aspx增加Button和DetailsView控件59606162给DetailsView控件编辑字段---添加模板63给DetailsView控件编辑模板,如下所示:Label1—Text:Eval(“imageName”)Label2—Text:Eval(“albumName”)Image1—imageUrl:Eval(“imageUrl”)Label3—Text:Eval(“imageTime”)Label4—Text:Eval(“imageDesc”)并将DetailsView的AutoGenerateRows属性设为False6465修改专辑功能的实现修改专辑功能的实现66 为站点添加新页面为站点添加新页面updateAlbum.aspx,然后在然后在Default.aspx中单击中单击 “修改专辑修改专辑”导航到导航到updateAlbum.aspx页面页面 67 在在DB.cs中编写中编写updateAlbum方法实现方法实现修改专辑信息的功能修改专辑信息的功能 public void updateAlbum(int id, string albumDesc, string albumName, DateTime albumTime, string logourl) { SqlHelper helper = new SqlHelper(); string strsql = "update album set albumName=@albumName,albumTime=@albumTime, albumDesc=@albumDesc,logoUrl=@logourl where albumID=@albumID"; SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@albumID",id), new SqlParameter("@albumDesc",albumDesc), new SqlParameter("@albumName",albumName), new SqlParameter("@logourl",logourl), new SqlParameter("@albumTime",albumTime) }; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); }68Textbox:TextMode:SingleLineImageTextbox:TextMode:MultiLinebutton69 因为进行修改时，要先把旧的数据显示在控件中，在此基础上修改再提交，所以要先按照从Default.aspx传过来的albumID查找出该专辑的所有信息，然后再修改提交。

我们在DB.cs中写入新的方法select_albumMore,代码如下：public DataTable select_albumMore(int id) { SqlHelper helper = new SqlHelper(); string strsql = "select albumName,logoUrl,albumDesc from album where albumID=@albumID"; SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@albumID",id) }; SqlCommand cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }70 当点击default.aspx的修改专辑时，会打开updateAlbum.aspx页面，并触发该页面的Page_Load事件，代码如下所示： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DB db = new DB(); int albumID = Convert.ToInt32(Request.QueryString["id"]); TextBox1.Text = db.select_albumMore(albumID).Rows[0][0].ToString(); TextBox2.Text = db.select_albumMore(albumID).Rows[0][2].ToString(); Image1.ImageUrl = db.select_albumMore(albumID).Rows[0][1].ToString(); } } 71在在updateAlbum.aspx中点击中点击 ”提交修改提交修改“按钮时，触发以下方法：按钮时，触发以下方法：protected void Button1_Click(object sender, EventArgs e) { DB db = new DB(); int albumID = Convert.ToInt32(Request.QueryString["id"]); string albumDesc = TextBox2.Text.ToString(); string albumName = TextBox1.Text.ToString(); DateTime albumTime = DateTime.Now; string logourl = "image/" + ; string exname = ('.')[1]; if (exname.ToLower() == "jpg" || exname.ToLower() == "png" || exname.ToLower() == "gif") { (Server.MapPath(logourl)); } db.updateAlbum(albumID, albumDesc, albumName, albumTime, logourl); Response.Write(""); }72在在default.aspx中点击中点击 “删除删除”按钮时，删除专辑的方法在按钮时，删除专辑的方法在DB中：中： public void deleteAlbum(int albumID) { SqlHelper helper = new SqlHelper(); string strsql = "delete from image where image.albumID=@albumID; delete from album where albumID=@albumID"; SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@id",albumID) }; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); }73在objectdatasource2中的DELETE方法中选择DB中的deleteAlbum方法。

74 删除专辑功能的实现，在default.aspx中编辑列时，将删除按钮启动注意：注意：如果通过查询按钮查出某个专辑后，再点删除按钮，不能实现删除，因为查询功能是通过ObjectDataSource3实现的，而它不支持CommandField的删除钮，除非再编写相应的删除方法75修修改改图图片片所所属属专专辑辑和和简简介介76 给站点添加新页面update.aspx,用于修改图片所属的专辑名和修改图片简介77 在DB.cs中编写需要的方法，因为修改先要显示旧的专辑名和专辑简介信息，所以要有一个按imageID查找所属albumID和imageDesc的方法select_Desc(),代码如下所示： public DataTable select_Desc(int imageID) { SqlHelper helper = new SqlHelper(); string strsql = "select imageDesc from image where imageID=@imageID"; SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@imageID",imageID) }; SqlCommand cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader()) { dt.Load(rdr); } return dt; }78 在DB.cs中编写需要的方法，因为点击提交修改按钮后，实现修改，所以要有一个修改图片所属专辑和图片简介的方法，代码如下所示： public void update(int albumID,string imageDesc,int imageID) { SqlHelper helper = new SqlHelper(); string strsql="update image set albumID=@albumID, imageDesc=@imageDesc where imageID=@imageID"; SqlParameter[] parm = new SqlParameter[] {new SqlParameter("@albumID",albumID), new SqlParameter("@imageDesc",imageDesc), new SqlParameter("@imageID",imageID), }; SqlCommand cmd = helper.GetCommand(strsql,parm); cmd.ExecuteNonQuery(); }79点击按钮，导航到update.aspx页面时触发该页的page_load事件，代码如下： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DB db = new DB(); int imageID = Convert.ToInt32(Request.QueryString["imageID"]); TextBox1.Text = db.select_Desc(imageID).Rows[0][0].ToString(); } }80当点击update.aspx的时，触发下面的事件：protected void Button1_Click(object sender, EventArgs e) { DB db = new DB(); int albumID = Convert.ToInt32(DropDownList1.SelectedValue); string imageDesc = TextBox1.Text.ToString(); int imageID = Convert.ToInt32(Request.QueryString["imageID"]); db.update(albumID,imageDesc,imageID); Response.Write(""); }81 通过通过ViewImage.aspx页面的页面的“全选全选”框，实现全部选择功框，实现全部选择功能，并且可以任意多选或单选，翻页可以保存选择状态。

能，并且可以任意多选或单选，翻页可以保存选择状态当显示图片信息的GridView1翻页时，触发以下事件，代码如下：protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { RememberOldValues(); //调用RememberOldValues()方法，保存选中状态到session中 GridView1.PageIndex = e.NewPageIndex; GridView1.DataBind(); RePopulateValue(); //调用RePopulateValue()方法，将session中保存的状态表现在CheckBox中 e.Cancel = true; //退出事件，如果没有此动作，GridView将会再次 DataBind()，将覆盖CheckBox的选中状态82 //保存选中状态到session中 private void RememberOldValues() { ArrayList al = null; //声名集合 // 创建一个Session并检查是否为空，这个Session用来保存集合 //这里是判断是否是第一次进行分页 if (Session["checked_items"] != null) { //将Session对象保存到集合中 al = (ArrayList)Session["checked_items"]; } else { al = new ArrayList(); } //声明一个变量用来保存相应数据从而判断操作的是哪个check控件 int index = -1;续下页 83foreach (GridViewRow row in GridView1.Rows) //遍历GridViewRow { index = (int)GridView1.DataKeys[row.RowIndex].Value; //从gridview中取得行的绑定值bool result = ((CheckBox)row.FindControl("CheckBox2")).Checked; //从每行的check中取得选中状态 if (result) //判断选中状态 { //当check为选中,并且集合中不包含这个值时,将此绑定值添加进集合中 if (!al.Contains(index)) { al.Add(index); } } else { //当状态为不选中,并且集合中包含这个值时,将帮定值从集合中移除 if (al.Contains(index)) { al.Remove(index); } } }84//最后判断集合是否为空或者没有值,如果有则将集合添加到Session中,以便保存数据 if (al != null && al.Count > 0) { Session["checked_items"] = al; } }85//将session中保存的状态表现在CheckBox中 private void RePopulateValue() //将Session中的值赋给集合 { ArrayList al = (ArrayList)Session["checked_items"]; if (al != null && al.Count > 0) //判断集合是否为空或者没有记录 { foreach (GridViewRow row in GridView1.Rows) {//遍历GridViewRow从中取得每行的绑定值,如果集合中存在的话,找到 GridView中的这个控件,改变选中状态 int index = (int)GridView1.DataKeys[row.RowIndex].Value; if (al.Contains(index)) {CheckBox mycheckbox = (CheckBox)row.FindControl("CheckBox2"); mycheckbox.Checked = true; } } } }86//点击“全选”后，触发CheckedChanged事件的代码： protected void allchecked(object sender, EventArgs e) {//注意修改checkbox1的AutoPostBack属性为true CheckBox cbx = (CheckBox)sender; //遍历GridViewRow将其中的check控件的状态设置 foreach (GridViewRow gvr in GridView1.Rows) { CheckBox ch = (CheckBox)gvr.FindControl("CheckBox2"); ch.Checked = cbx.Checked; } }87为了实现删除选中的图片记录，在DB.cs中编写如下方法： public void deletemore(ArrayList al) { SqlHelper helper = new SqlHelper(); StringBuilder str = new StringBuilder(); str.Append("delete from image where imageID in ("); for (int i = 0; i < al.Count; i++) { str.Append(al[i] + ","); } string s = str.ToString().Substring(0,str.ToString().Length-1); s += ")"; SqlCommand cmd = helper.GetCommand(s, null); cmd.ExecuteNonQuery(); }88//删除所选记录 protected void Button1_Click(object sender, EventArgs e) { DB db = new DB(); //首先判断gridview是否有值，如果有才可以进行删除 if (GridView1.Rows.Count > 0) {//通过调用保存状态方法盘判断那个记录被选中 RememberOldValues(); //从Session对象中取得集合的内容 ArrayList al = (ArrayList)Session["checked_items"]; if (al != null) {//调用删除多条的方法进行删除操作 db.deletemore(al); GridView1.DataBind(); } } }89。

点击阅读更多内容