商城新闻系统首页的设计.docx
- 文档编号:8223986
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:12
- 大小:266.12KB
商城新闻系统首页的设计.docx
《商城新闻系统首页的设计.docx》由会员分享,可在线阅读,更多相关《商城新闻系统首页的设计.docx(12页珍藏版)》请在冰豆网上搜索。
商城新闻系统首页的设计
目录
1.任务目的1
2.任务目标2
3.任务实现3
3.1商城新闻系统首页的设计3
3.2单条新闻详细内容的显示4
3.3更多新闻分页的实现6
3.4新闻后台登录页的设计8
3.5商城新闻系统后台管理页面9
3.6商城新闻的删除9
3.7商城新闻的添加10
3.8商城新闻的修改11
4.心得体会13
上机报告
1.任务目的
此次的任务是制作商城新闻系统,以及提供一些不用编程的快捷方式设计完成一个相对比较完整的新闻系统项目,并且掌握商城新闻系统的数据库设计;新闻的添加、删除与修改;网站首页新闻的显示;新闻的分页显示。
2.任务目标
主要的功能是:
在建立的商城新闻系统中,实现首页最新10条新闻的显示和新闻的分页显示,同时实现商城新闻系统的后台管理,管理员在后台可以添加、删除、查询和修改新闻。
本任务的重点是新闻的添加、删除、显示与修改,需要克服的难点是新闻的分页显示,通过这些便捷方式可以实现一些较简单的功能,提高开发效率。
3.任务实现
3.1商城新闻系统首页的设计
(1)在新闻系统首页显示最新的8条新闻,浏览者可以点击每条新闻对应的链接查看新闻详细情况,同时还可以点击“更多新闻”超链接,查看更多的新闻。
在商城数据库shop.mdb中新建数据表news,新闻系统的数据表的设计比较简单,只有新闻编号id、新闻标题title、新闻正文contents和新闻添加时间addtime。
(2)数据库效果图如图所示:
图1
最终生成的界面如图:
图2
(3)界面源代码如下:
GridViewID="GridView1"runat="server"AutoGenerateColumns="False"CssClass="style1"DataKeyNames="id" DataSourceID="AccessDataSource1"GridLines="None"ShowHeader="False"> TemplateFieldShowHeader="false"> HyperLinkID="HyperLink1"runat="server"NavigateUrl='<%#Eval("id","show.aspx? id={0}")%>'Text='<%#Eval("title")%>'ToolTip='<%#Eval("title")%>'> HyperLink>
TemplateField>
BoundFieldDataField="addtime"DataFormatString="{0: d}"SortExpression="addtime"/>
GridView>
AccessDataSourceID="AccessDataSource1"runat="server"DataFile="~/App_Data/shop.mdb" SelectCommand="SELECT[addtime],[title],[id]FROM[news]ORDERBY[id]DESC">
AccessDataSource>
3.2单条新闻详细内容的显示
(1)当点击首页中的新闻标题链接时,会连接到一个网页show.aspx,同时根据传递过来的新闻id号,显示该编号对应新闻的详细内容。
(2)效果如图:
图3
(3)界面生成的源代码如下:
id:
LabelID="idLabel1"runat="server"Text='<%#Eval("id")%>'/> TextBoxID="titleTextBox"runat="server"Text='<%#Bind("title")%>'/> contents: TextBoxID="contentsTextBox"runat="server"Text='<%#Bind("contents")%>'/> addtime: TextBoxID="addtimeTextBox"runat="server"Text='<%#Bind("addtime")%>'/> LinkButtonID="UpdateButton"runat="server"CausesValidation="True"CommandName="Update" Text="更新"/> LinkButtonID="UpdateCancelButton"runat="server"CausesValidation="False"CommandName="Cancel" Text="取消"/> title: TextBoxID="titleTextBox"runat="server"Text='<%#Bind("title")%>'/> contents: TextBoxID="contentsTextBox"runat="server"Text='<%#Bind("contents")%>'/> addtime: TextBoxID="addtimeTextBox"runat="server"Text='<%#Bind("addtime")%>'/> LinkButtonID="InsertButton"runat="server"CausesValidation="True"CommandName="Insert" Text="插入"/> LinkButtonID="InsertCancelButton"runat="server"CausesValidation="False"CommandName="Cancel" Text="取消"/> LabelID="titleLabel"runat="server"Text='<%#Bind("title")%>'/> LabelID="idLabel"runat="server"Text='<%#Eval("id")%>'/> LabelID="addtimeLabel"runat="server"Text='<%#Bind("addtime")%>'/> LabelID="contentsLabel"runat="server"Text='<%#Bind("contents")%>'/> 3.3更多新闻分页的实现 (1)使用GridView控件实现分页显示所有新闻,并设置分页显示的样式。 (2)效果如图: (3)界面生成的源代码如下: GridViewID="GridView1"runat="server"AllowPaging="True"AutoGenerateColumns="False" CellPadding="4"DataSourceID="AccessDataSource1"ForeColor="#333333"GridLines="None" PageSize="8"DataKeyNames="id"> NextPageText="下一页"PreviousPageText="上一页"/> BoundFieldDataField="title"HeaderText="title"SortExpression="title"/> BoundFieldDataField="addtime"HeaderText="addtime"SortExpression="addtime"/> GridView> AccessDataSourceID="AccessDataSource1"runat="server"DataFile="~/App_Data/shop.mdb" SelectCommand="SELECT[title],[addtime],[id]FROM[news]ORDERBY[id]DESC"> AccessDataSource> 3.4新闻后台登录页的设计 (1)设计新闻后台管理的登录页,在登录时添加一个验证码,只有 管理员才能登录商城新闻系统的后台管理页面,实现新闻的添加、删除与修改。 (2)效果图如图: 图4 (3)单击“登录”按钮生成的代码: if(TextBox3.Text! =Request.Cookies["CheckCode"].Value.ToString()) Response.Write(""); else { stringstrSQL="select*from[用户表]where用户名='"+TextBox1.Text+"'and密码='"+TextBox2.Text+"'"; DataTabledt=DbManger.ExecuteQuery(strSQL); if(dt.Rows.Count>0) { Session["pass"]=1; Response.Redirect("manager.aspx"); } else Response.Write(""); } 3.5商城新闻系统后台管理页面 (1)设计新闻后台管理页面,管理员可以对当前的新闻分页查看,并可以删除、修改、插入新的新闻。 (2)新建一个Web用户控件fenye.aspx,效果如图: 图5 (3)界面生成的代码如下: id=<%#Eval("id")%>"target="_blank"> <%#Eval("title")%> <%#Eval("addtime")%> id=<%#Eval("id")%>"target="_blank"> 删除 id=<%#Eval("id")%>"target="_blank"> 修改 3.6商城新闻的删除 (1)当点击新闻管理页mananger.aspx中的“删除”链接时,将删除有关这条新闻的所有信息。 (2)新建窗体文件del.aspx,双击后切换到del.aspx.cs,在文件中加入删除功能的相关代码即可,文件del.aspx.cs的代码如下: protectedvoidPage_Load(objectsender,EventArgse) { if(Convert.ToInt32(Session["pass"])==0) Response.Redirect("login.aspx"); stringstrSQL="deletefromnewswhereid="+Request.QueryString["id"]; if(DbManger.ExecuteNonQuery(strSQL)>0) { Response.Write(""); Response.Write(""); } } 3.7商城新闻的添加 (1)在文本框中输入新闻标题和新闻征文内容,单击“添加新闻”按钮时即可完成新闻的添加。 (2)新建网页insert.aspx,设计图如图所示: 图6 3.8商城新闻的修改 (1)当在管理页中点击“修改”连接时,将跳转到edit.aspx页面,在文本框中显示该新闻的原内容,进行修改后,单击“修改完成”按钮即可完成修改,单击“恢复原样”按钮将放弃修改。 (2)效果图如图: 图7 (3)单击“修改完成”按钮生成的代码: protectedvoidButton1_Click(objectsender,EventArgse) { stringstrContent=Server.HtmlDecode(txtContent.Text); strContent=strContent.Replace("\r\n"," strContent=strContent.Replace("'","''"); strContent=strContent.Replace(""," "); stringstrTitle=Server.HtmlDecode(txtTitle.Text); strTitle=strTitle.Replace("\r\n"," strTitle=strTitle.Replace("'","''"); strTitle=strTitle.Replace(""," "); stringstrSQL="update[news]set[title]='"+strTitle+"',[contents]='"+strContent+"',addtime='"+DateTime.Now+"'whereid="+Request.QueryString["id"]; if(DbManger.ExecuteNonQuery(strSQL)>0) { Response.Write(""); Response.Write(""); } else Response.Write(""); } 单击“恢复原样”按钮生成的代码如下: protectedvoidPage_Load(objectsender,EventArgse) { if(Convert.ToInt32(Session["pass"])! =1) Response.Redirect("login.aspx"); if(! IsPostBack) { stringstrSQL="select*fromnewswhereid="+Request.QueryString["id"]; DataTabledt=DbManger.ExecuteQuery(strSQL); txtTitle.Text=Server.HtmlDecode(dt.Rows[0]["title"].ToString().Replace(" txtContent.Text=Server.HtmlDecode(dt.Rows[0]["title"].ToString().Replace(" } } 4.心得体会 本任务的难点在于处理文字、空格、html代码、换行等符号在修改和显示时的状态,在文本框中显示新闻时,换行的处理方法是将
title:
");
");
","\r\n"));
","\r\n"));
替换成回车,这样才能在文本框中到达换行的效果,这和直接输出到网页中不一样,而在添加到数据库前,要将回车符反向替换成
,这样在页面中显示新闻时才能正常换行。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商城 新闻 系统 首页 设计
![提示](https://static.bdocx.com/images/bang_tan.gif)