工学“新闻发布系统”网站制作过程

1、综合实例：“新闻发布系统”网站通过一个后台功能较为完备的“新闻发布系统”网站的制作，首页效果如图1所示。 图1内容利用asp.net技术开发一个具有后台管理功能的“新闻发布系统”网站，该网站应具备如下功能。(1)管理员输入用户名和密码，登录成功后可以进入网站后台对新闻进行管理。(2)管理员能发布新闻，发布的新闻包括标题、内容、提交时间、新闻图片、附件。(3)管理员能够根据新闻的标题或者新闻的发布时间查找新闻，并能对查找到的新闻进行修改或者删除等操作。(4)管理员可以修改密码。(5)用户访问网站首页，可以浏览网站上的所有新闻。(6)网站要求有较为统一的风格。网站结构如下图所示。 图2网站操作流程

2、如下：(1)用户访问网站首页，出现如图1所示的页面。(2)单击【更多】链接，出现如图3所示的更多新闻页面。(3)单击第一条新闻的链接，出现如图4所示的新闻明细页面。 图3图4(4)管理员访问如图5所示的登录页面，输入正确的用户名和密码，进入后台管理界面，默认显示的是新闻发布页面，如图6所示。(5)选择【新闻查询】选项，出现如图 7所示的新闻查询页面。(6)单击【修改】链接，跳转到如图 8所示的新闻修改页面。(7)选择【修改密码】选项，出现如图 9所示的修改密码页面。 图5 图6图7图8 图9设计“新闻发布系统”程序前的思考设计“新闻发布系统”前需要思考如下问题。(1) 如何合理地设计网站目录结

3、构，使得信息能够被有效地分类，同时访问控制又比 较方便。由于需要保存新闻的图片和附件，因此需要在网站根目录下分别创建文件夹来保 存这两类文件。另外由于本系统存在“管理员”和“用户”两种角色，因此需要把只有管 理员才能访问的页面放到同一文件夹中，统一进行权限设置。(2) 如何合理地设计数据库字段，使得信息维护和检索都较为方便。由于新闻发布系 统涉及到的信息项比较少，因此只需要建一张表来保存新闻标题、新闻内容、附件、图片， 另外为了保证每条记录的唯一性，需要在表中建自动编号字段。(3) 采用怎样的导航方式，使得操作界面清晰，便于用户操作。由于本系统涉及页面 较少、目录结构比较简单，因此采用导航控件

4、中的 menu 控件、sitemappath 控件、treeview 控件都可以轻松地实现导航功能，其中 menu 控件使用较为方便。(4) 采用怎样的设计方法，使得页面风格统一。要使页面风格统一，asp .net 提供了 多种方法如用户控件、母版页、主题、皮肤。在本案例中，为了统一后台界面的风格，采 用母版页技术，为了让控件有统一的风格采用主题技术。(5) 采用怎样的开发方法，开发效率高，程序又不失灵活性。逻辑较为简单的显示部 分采用数据访问控件 sqldatasource 结合具有内置分页功能的 gridview 控件，新闻发布和 修改等逻辑较为复杂的部分采用代码实现。有关“新闻发布系统”

5、程序开发的预备知识(1) 掌握 textbox、label、dropdownlist、image、fileupload、hyperlink 等常用 asp .net标准控件的属性、方法和用法。(2) 掌握验证控件的知识，特别是 requiredfieldvalidator 控件的用法。(3) 了解导航控件，掌握 menu 控件的用法。(4) 熟悉 sql server，能够在 sql server 中创建数据库和表。(5) 掌握数据访问控件 sqldatasource 以及数据显示控件 gridview、formview 的用法。(6) 熟悉 ado .net 编程技术，熟练掌握 sqlcon

6、nection、sqlcommand、sqldatareader、dataset、sqldataadapter 等对象的属性、方法以及用法。(7) 掌握 web 站点配置文件 web.config 的设置方法。(8) 掌握登录控件，特别是 login 、changepassword 控件的用法。(9) 掌握 asp .net 的 5 大对象，特别是 request 对象的用法。(10) 掌握主题和母版页的使用方法，能够用主题统一的网站风格。实现“新闻发布系统”的开发过程1)数据库设计打开sql server企业管理器，新建一个aspnetdb数据库。新建一张news表，设置完字段及数据类型后的

7、表设计器如图 10所示。图 102)网站目录结构打开visual studio.net 2005开发环境，选择【文件】|【新建】|【网站】命令，在弹出的【新建网站】对话框中，输入网站的保存路径。在【解决方案资源管理器】项目目录上右击，选择【新建文件夹】命令，依次新建3个文件夹，名字分别叫做picture、attachment、admin。3)创建母版页(1)在【解决方案资源管理器】项目目录中右击admin文件夹，选择【添加新项】命令，从【添加新项】对话框中选择“母版页”选项，如图 11所示，单击【添加】按钮。图11(2)打开masterpage.master页面，选择【布局】|【插入表】命令，

8、弹出【插入表】对话框，在【自定义】选项组中将【行】文本框的值修改为2，【列】文本框的值修改为1，如图 12所示。图 12(3)拖动contentplaceholder1控件到表格的第2行。从工具箱中拖动到表格的第1行，单击控件右上方的箭头，选择【编辑菜单项】选项。在弹出的【菜单项编辑器】对话框中单击按钮添加根项，text属性设置为“新闻发布”，navigateurl属性设置为“/admin/addnews.aspx”。单击按钮添加根项，text属性设置为“新闻查询”，navigateurl属性设置为“/admin/querynews.aspx”。单击按钮添加根项，text属性设置为“修改密码”

9、，navigateurl属性设置为“/admin/changepassword.aspx”。单击按钮添加根项，text属性设置为“首页”，navigateurl属性设置为“/default.aspx”，如图 13所示。图 13(4)单击菜单控件，将【属性】窗口的borderstyle属性修改为“dotted”，将orientation属性修改为“horizontal”，将target属性修改为“_self”，母版页的设计界面如图 14所示。 图144)发布新闻(1)在【解决方案资源管理器】项目目录中右击admin文件夹，选择【添加新项】命令，在【添加新项】对话框中输入文件名“addnews.a

10、spx”，选中【选择母版页】复选框，在【选择母版页】对话框中选择masterpage.master。(2)从工具箱中拖动到中心工作区，将【属性】窗口的text属性修改为“标题”。(3)从工具箱中拖动一个到中心工作区，将【属性】窗口的id属性修改为“txttitle”，清除text属性的内容。(4)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“rfvtitle”，controltovalidate属性修改为“txttitle”，maxlength属性修改为“50”。(5)从工具箱中拖动到中心工作区，将【属性】窗口的text属性修改为“内容”。(6)从工具箱中拖动一个到中心工作区，将

11、【属性】窗口的id属性修改为txtcontent，textmode属性修改为“multiline”，maxlength属性修改为“255”。(7)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为fuppicture。(8)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为fupattachment。(9)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“btnadd”，text属性修改为“添加”。(10)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“labmsg”,清空text属性的内容，将forecolor属性修改为“red”。最终界面如图 15所示

12、。(11)双击【添加】按钮，进入addnews.aspx.cs页面，在命名空间的引用部分加入system.data.sqlclient;。在“protected void btnadd_click(object sender,eventargs e)”下面的一对花括号之间填入如下代码。try/获取连接字符串string connectionstring=configurationmanager.connectionstringsaspnetdbconnectionstring.tostring();sqlconnection conn=new sqlconnection(connections

13、tring);conn.open();/打开连接sqldataadapter oda=new sqldataadapter(select title,content,submitdate,picture,attachment from news,conn);dataset ds=new dataset();oda.fill(ds,news);conn.close();datarow dr=ds.tablesnews.newrow();/新建一个数据行string fileattention=system.io.path.getextension(fuppicture.postedfile.fi

14、lename);/获取图片文件的扩展名datetime submitdate=system.datetime.now;string currentdate=submitdate.tostring(yyyymmddhhmmssffff);/格式化日期string picturefilename=/picture/+currentdate+fileattention;/获取附件的扩展名fileattention=system.io.path.getextension(fupattachment.postedfile.filename);string attachmentfilename=/atta

15、chment/+currentdate+fileattention;drtitle=txttitle.text;drcontent=txtcontent.text;drsubmitdate=submitdate.tostring();if(fuppicture.hasfile)/判断有没有附件drpicture=picturefilename;if(fupattachment.hasfile)drattachment=attachmentfilename;ds.tablesnews.rows.add(dr);/将数据行添加到表中sqlcommandbuilder ocb=new sqlcomm

16、andbuilder(oda);oda.update(ds,news);/提交更改fuppicture.saveas(server.mappath(picturefilename);/上传图片fupattachment.saveas(server.mappath(attachmentfilename);/上传附件labmsg.text=新闻发布成功！;catchlabmsg.text=新闻发布失败！;5)显示新闻(1)在【解决方案资源管理器】项目目录中右击，选择【添加新项】命令，在【添加新项】对话框中输入文件名“default.aspx”。(2)拖动一个到中心工作区，在右下角的【属性】窗口中找

17、到id属性，修改为“sdsquerynews”。单击控件右上角的箭头，选择【配置数据源】命令，弹出【配置数据源】对话框，单击【新建连接】按钮，弹出【添加连接】对话框，单击【更改】按钮，弹出【更改数据源】对话框，选择“microsoft sql server”选项，单击【确定】按钮，弹出【添加连接】对话框，在【服务器】文本框中输入服务器的名字，选中【sql server身份认证】单选按钮，在【用户名】文本框中输入“sa”，在【密码】文本框中输入“123”(123可以根据用户设置的sa的密码的具体情况进行修改)，在【选择或者输入一个数据库名】下拉列表框中选择“aspnetdb”选项，单击【下一步】

18、按钮，弹出【配置数据源】对话框，选中【是，将此连接另存为】单选按钮，在下面的文本框中输入“aspnetdbconnectionstring”，单击【下一步】按钮，选中【指定自定义sql语句或存储过程】单选按钮，如图 16所示，单击【下一步】按钮，在出现的【sql语句】文本框中输入“select top 10id,title,submitdate from news order by submitdate desc”，如图 17所示。单击【下一步】按钮，单击【完成】按钮。 图 16图 17(3)从工具箱中拖动到中心工作区，在【属性】窗口中找到datasourceid属性，修改为“sdsquery

19、news”，单击控件右上角的箭头，从弹出的菜单中选择【编辑列】命令，弹出【字段】对话框。(4)选中hyperlinkfield，单击【添加】按钮，将【属性】窗口中的datanavigateurlfields属性修改为“id”，datanavigateurlformatstring属性修改为“newsdetail.aspx?id=0”，datatextfield属性修改为“title”，headertext属性修改为“标题”，展开itemstyle属性列表，将width属性修改为“300”。(5)选中boundfield，单击【添加】按钮，将【属性】窗口的datafield属性修改为“submi

20、tdate”，headertext属性修改为“发布日期”，展开itemstyle，将width属性修改为“150”，将datasourceid属性修改为“sdsquerynews”，如图 18所示。(6)从工具箱中拖动到中心工作区，将【属性】窗口的text属性修改为“更多”，将navigateurl属性修改为“/showmorenews.aspx”。 图 18(7)在gridview控件上方输入一行文字“欢迎光临新闻发布系统”。最终界面如图 19图 196)显示更多新闻(1)在【解决方案资源管理器】项目目录中右击，选择【添加新项】命令，在【添加新项】对话框中输入文件名“showmorenews

21、.aspx”，选中【选择母版页】单选按钮，在【选择母版页】对话框中选择masterpage.master。(2)拖动一个到中心工作区，在右下角的【属性】窗口中找到id属性，修改为“sdsmorenews”，在【属性】窗口中找到connectionstring属性，单击右边的按钮，选择“aspnetdbconnectionstring”选项。在【属性】窗口中找到selectquery属性，单击右边的按钮，弹出【命令和参数编辑器】对话框，在【select命令】文本框中，输入“select id,title,submitdate from news order by submitdate desc”

22、。(3)从工具箱中拖动到中心工作区，单击控件右上角的箭头，从弹出的菜单中选择【编辑列】命令，弹出【字段】对话框。(4)选中boundfield，单击【添加】按钮，在【属性】窗口中将datafield属性修改为“id”，headertext属性修改为“编号”，visible属性修改为“false”。(5)选中hyperlinkfield，单击【添加】按钮，在【属性】窗口中将datanavigateurlfields属性修改为“id”，datanavigateurlformatstring属性修改为“newsdetail.aspx?id=0”，datatextfield属性修改为“title”，h

23、eadertext属性修改为“标题”，展开itemstyle属性列表，将width属性修改为“300”。(6)选中boundfield，单击【添加】按钮，将datafield属性修改为“submitdate”，headertext属性修改为“发布日期”，展开itemstyle属性列表，将width属性修改为“150”。在右下角的【属性】窗口中找到datasourceid属性，修改为“sdsquerynews”，allowpaging属性修改为“true”，pagesize属性修改为“20”。最终界面如图 20所示。7)查询新闻(1)在【解决方案资源管理器】项目目录中右击admin文件夹，选择【

24、添加新项】命令，在【添加新项】对话框中输入文件名“querynews.aspx”，选中【选择母版页】单选按钮，在【选择母版页】对话框中选择masterpage.master。(2)拖动一个到中心工作区，在右下角的【属性】窗口中找到id属性，修改为sdsquerynews”，在【属性】窗口中找到connectionstring属性，单击右边的按钮，选择“aspnetdbconnectionstring”选项，在【属性】窗口中找到selectquery属性，单击右边的按钮，弹出【命令和参数编辑器】对话框，在【select命令】文本框中，输入“select id,title,content,atta

25、chment,picture,submitdate from news order bysubmitdate desc”，在【属性】窗口中找到deletequery属性，单击右边的按钮，弹出【命令和参数编辑器】对话框，在【delete命令】文本框中，输入“delete from newswhere(id=id)”，单击【刷新】按钮，从【参数源】下拉列表框中选择“control”选项，从【controlid】下拉列表框中选择“gridview1”选项，如图 21所示。(3)从工具箱中拖动到中心工作区，在【属性】窗口中将控件的text属性修改为“查询类别”。(4)从工具箱中拖动到中心工作区，在右下

26、角的【属性】窗口中找到items属性，单击属性右边的展开按钮，弹出【listitem集合编辑器】对话框。单击【添加】按钮，添加一个成员，将成员的text属性修改为“标题”，value属性修改为“title”。单击【添加】按钮，添加成员，将text属性修改为“发布日期”，value属性修改为“submitdate”。 图 21(5)从工具箱中拖动到中心工作区，在【属性】窗口中将控件的id属性修改为“btnquery”，text属性修改为“查询”。(6)从工具箱中拖动到中心工作区，在【属性】窗口中将控件的id属性修改为“txtvalue”，清空text属性的内容。(7)从工具箱中拖动到中心工作区，

27、在【属性】窗口中找到datasourceid属性，修改为“sdsquerynews”，单击控件右上角的箭头，从弹出的菜单中选择【编辑列】命令。选中boundfield选项，单击【添加】按钮，将datafield属性修改为“id”，headertext属性修改为“编号”。选中hyperlinkfield选项，单击【添加】按钮，将datanavigateurlfields属性修改为“id”，datanavigateurlformatstring属性修改为“newsdetail.aspx?id=0”，datatextfield属性修改为“title”，headertext属性修改为“标题”，展开it

28、emstyle属性列表，将width属性修改为“300px”。选中boundfield选项，单击【添加】按钮，将datafield属性修改为“submitdate”，headertext属性修改为“发布日期”，展开itemstyle属性列表，将width属性修改为“150px”。选中commandfield选项，单击【添加】按钮，将headtext属性修改为“修改”。选中commandfield选项，单击【添加】按钮，将headtext属性修改为“删除”，取消选中【自动生成字段】复选框。最终界面如图 22所示。单击【查询】按钮，进入querynews.aspx.cs页面，在命名空间的引用部分输

29、入system.data.sqlclient;。在“protected void btnquery_click(object sender,eventargs e)”下面的一对花括号之间填入如下代码。string sql=select*from news;if(txtvalue.text.trim().length!=0)sql=sql+where+ddlqueryitem.selectedvalue+like%+txtvalue.text+%;sdsquerynews.selectcommand=sql;sdsquerynews.select(datasourceselectargument

30、s.empty);8)新闻明细(1)在【解决方案资源管理器】项目目录中右击，选择【添加新项】命令，在【添加新项】对话框中输入文件名“newsdetail.aspx”。(2)拖动一个到中心工作区，在右下角的【属性】窗口中找到id属性，修改为“sdsnewsdetail”，在【属性】窗口中找到connectionstring属性，单击右边的按钮，选择“aspnetdbconnectionstring”选项。在【属性】窗口中找到selectquery属性，单击右边的按钮，在弹出的【命令和参数编辑器】对话框中，输入“select id,title,content,attachment,submitda

31、te,picture from news where id=id”，如图 23所示。单击【刷新参数】按钮，从【参数源】下拉列表框中选择“querystring”选项，在【querystringfield】文本框中输入“id”。(3)从工具箱中拖动到中心工作区，单击控件右上角的箭头，从弹出的菜单中选择【编辑模板】命令，在【属性】窗口中找到datasourceid属性，修改为“sdsnewsdetail”。(4)从工具箱中拖动到formview控件的模板，将该控件的id属性修改为“labtitle”，清除该控件的text属性，单击labtitle右上角的箭头，选择【编辑databindings】命

32、令，弹出如图 24所示的【labtitle databindings】对话框，选中【自定义绑定】单选按钮，输入“bind(“title”)”。 图 23 图 24(5)从工具箱中拖动一个到formview控件的模板，在【属性】窗口中将控件的id属性修改为“txtcontent”,textmode属性修改为“multiline“，maxlength属性修改为“255”，单击txtcontent右上角的箭头，选择【编辑databindings】命令，弹出如图 24所示的对话框。选中【自定义绑定】单选按钮，输入“bind(“content”)”。(6)从工具箱中拖动一个到formview控件的模板，

33、选择【编辑databindings】命令，选中【自定义绑定】单选按钮，输入“bind(“picture”)”。最终界面效果如图 25所示。9)修改新闻(1)在【解决方案资源管理器】项目目录中右击admin文件夹，选择【添加新项】命令，在【添加新项】对话框中输入文件名“updatenews.aspx”，选中【选择母版页】单选按钮，在【选择母版页】对话框中选择masterpage.master。 图 25(2)从工具箱中拖动到中心工作区，将【属性】窗口的text属性修改为“标题”。(3)从工具箱中拖动一个到中心工作区，将【属性】窗口的id属性修改为“txttitle”，清除text属性的内容。(4

34、)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“rfvtitle”，controltovalidate属性修改为“txttitle”，maxlength属性修改为“50”。(5)从工具箱中拖动到中心工作区，将【属性】窗口的text属性修改为“内容”。(6)从工具箱中拖动一个到中心工作区，将【属性】窗口的id属性修改为“txtcontent”，textmode属性修改为“multiline”，maxlength属性修改为“255”。(7)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“fuppicture”。(8)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改

35、为fupattachment。(9)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“btnsave”，text属性修改为“保存”。(10)从工具箱中拖动到中心工作区，将【属性】窗口的id属性修改为“labmsg”，清空text属性的内容，将forecolor属性修改为“red”。界面的最终效果如图26所示。(11)双击【保存】按钮，进入代码页面，在命名空间的引用部分加入using system.data.sqlclient;。找到“public partial class updatenews:system.web.ui.page”，在下面的一对花括号之间填入如下代码。string

36、 picturefilepath,attachmentfilepath;在“protected void page_load(object sender,eventargs e)”下面的一对花括号之间填入如下代码。if(!page.ispostback)string connectionstring=configurationmanager.connectionstringsaspnetdbconnectionstring.tostring();sqlconnection conn=new sqlconnection(connectionstring);conn.open();string s

37、ql=select*from news where id=+request.querystringid.tostring();sqlcommand odc=new sqlcommand(sql,conn);sqldatareader odr=odc.executereader();odr.read();txttitle.text=odrtitle.tostring();txtcontent.text=odrcontent.tostring();picturefilepath=odrpicture.tostring();attachmentfilepath=odrattachment.tostr

38、ing();odr.close();conn.close();在“protected void btnsave_click(object sender,eventargs e)”下面的一对花括号之间填入如下代码。/修改string connectionstring=configurationmanager.connectionstringsaspnetdbconnectionstring.tostring();sqlconnection conn=new sqlconnection(connectionstring);conn.open();string sql=update news set title=+txttitle.text+,content=+txtcontent.text+where id=+request.querystringid.tostring();sqlcommand odc=new sqlcommand(sql,conn);odc.executenonquery();conn.close();if(fuppicture.hasfile)/图片改变，重新上传图片fuppicture.saveas(pictur