有后台管理系统支持的asp新闻系统
上学期老师要我们做web编程的课程设计,由于老师课上介绍的是用ASP制作动态网页。我考虑一下,虽然asp+access制作动态网页已经过时了,但是能运用那些知识写一个新闻上传系统也是一个不错的挑战。之前我还没学过asp,所以我就简单的看了一下相关的教程,花了一个星期的时间写了一下这个有后台管理系统支持的asp新闻上传系统。虽然很简单,但我的目的在于给web编程初学者一点启示。如有错误之处,敬请指正。下面就是该系统的论文。
一、 网站前期准备
在制作本网站之前,我们组员共同做了需求分析,通过网上搜集资料,我们了解到制作动态网页需要由以下几个步骤:
于是,我们开始了第一步,网站的需求分析。通过走访同学与组员商议,我们决定网站的基本组成部分如下:
1.主页和子页布局方面大部分由框架完成,而且主页LOGO部分,TOP部分,导航条等部分由主页生成模块应用到各个子页里。
2.主页:主要分布有导航条,模块如下:
物联网背景
物联网概念
基本原理
相关新闻
技术前沿
产品在线
3.主页还特别添加后台管理功能,可由管理员负责网站内容的动态更新。
4.网站的前端由css和JavaScript技术实现。
5. 网站主要由文本,图片,flash等元素构成。
二、 网页布局与前端页面编写
首页的布局如图:
由图可知,首页由以下几个部分组成:
1. 头部,主要是标志图片。
2. 菜单栏,分别是网站的3个模块的链接:相关新闻、技术前沿和产品在线。
3. 图片新闻。
4. 最新发表文章的列表(以文章发表的先后排列,没有全部列出)。
5. 3个主要模块的分类列表(以文章发表的先后排列,没有全部列出)。
6. 底部,主要是相关链接和后台管理模块的入口
技术介绍:
1.纵观整个网站系统,是由asp文件、css文件、JavaScript文件构成的,asp文件在前期是html文件。为了使样式与框架的分离,css和JavaScript技术在网页中由外部文件导入。代码分别如下:
<link href="css/css.css" rel="Stylesheet" type="text/css">
<script type="text/javascript" src="script/slide.js"></script>
前端页面主要由以下三个页面组成:
(1) index.html,网站首页
(2) list.html,文章列表页面
(3) article.html,文章内容页面
2.在网页布局方面,我摒弃了漏洞百出的表格布局方式,而采用了css+div的技术,主要布局的div代码如下:
1 <div class=”wrap-left”>
2 <div class=”wrap-right”>
3 <div class=”top”>
4 ……
5 </div>
6 <div class=”content”>
7 ……
8 </div>
9 <div class=”bottom”>
10 ……
11 </div>
12 </div>
13 </div>
wrap-left和wrap-right两个div是包揽整个网页内容的大“容器”,包两层的目的就是为了给网页添加阴影,使网页更加美观,一个添加左阴影,一个添加右阴影。阴影是由图片来体现的。样式代码如下:
1 .wrap-left
2 {
3 width:996px;
4 margin:0 auto;
5 background:url(../img/bodyBg.png) repeat-y left top;
6 }
7 .wrap-right
8 {
9 width:996px;
10 margin:0 auto;
11 background:url(../img/bodyBgR.png) repeat-y right top;
12 }
3.网页中前端技术的亮点就是图片新闻的滑动效果了。首先需要对图片框进行样式的设置。
三张图片设置成一样大,连成一个整体,被包在一个大的div中,这三张图片整体是以绝对定位的方式布局的。而大div设置为其中一张图片那么大,它的overflow属性设置为hidden,相当于只有那么一个和一张图片一样大小的区域是可见图片的,其他位置图片不可见。这样,只要用每次控制图片整体相对于大div的位置即可实现滑动的效果了。
动态效果用JavaScript实现,为了编写更加方便,我引入第三方插件——jQuery,可以非常方便地实现图片的动画。例如,将图片整体横向移动仅需如下一句代码实现:$('#bp-box').animate({left:-333},700)。代码中700是移动图片整体这过程所需的时间(700毫秒),-333是图片的目的地的left属性值。当然,使用jQuery技术必须在头文件中引入相应的第三方已写好的js文件:
<script type="text/javascript" src="script/jquery.js"></script>
三、 后端部分编写
将网站与数据库链接,通过后台管理系统进行网页内容的动态更新,则需要用到后端技术。目前网上较为流行的是ASP.NET技术、php技术与jsp技术。Asp技术发展已较为成熟,但是缺点很多,目前正在被淘汰,但是还是有很多功能比较强大,在一定条件下,使用asp编写网页还是较为合适的。因此,在这里,我使用asp技术编写后端代码。
1. 建立数据库
在这里,我用微软出品的access作为数据库平台。建立一个叫iot.mdb的数据库文件,里面供有两个表:admin和news,admin用于存放管理员登录的用户名和密码,news用于存放每篇新闻相关的信息。字段分别如下:
2. 连接数据库。建立好数据库后,接下来的工作就是把自己前一个阶段写的静态网页的html文件改写成asp文件。为了操作数据库,首先得和数据库链接,代码如下:
1 on error resume next
2 dim oConn,sConnString,sDBPath
3 sDBPath="iot.mdb"
4 sConnString="driver={Microsoft Access Driver (*.mdb)};dbq="&server.MapPath(sDBPath)
5 set oConn=Server.CreateObject("ADODB.Connection")
6 oConn.Open sConnString
7 if err then
8 response.Write(err)
9 err.clear
10 response.Write("错误")
11 response.End
12 end if
13
14 ……
15
16 oConn.close
17 set oConn=nothing
代码中省略号处是,需要对数据库进行的相关操作的代码。任何数据库的操作都是在和数据库链接的前提下进行的。这里要注意,数据库一旦打开,必须在操作完毕后关闭连接,否则会对服务器造成负担。
3. 数据库的查询。首先连接数据库,编写一个查询数据库的sql语句,然后建立一个查询数据库的对象,代码是set rs=server.CreateObject("ADODB.RecordSet"),通过该对象,执行sql语句。然后通过这个对象可以获取查询到的结果的各字段的值。
如下代码是对新闻内容的查询:
1 sql="select * from [news] where type='"&typ&"' order by dat desc"
2 set rs=server.CreateObject("ADODB.RecordSet")
3 rs.open sql,oConn
4 num=0
5 if rs.eof and rs.bof then
6 response.Write("<li>无相关文章</li>")
7 else
8 if flag=0 then
9 do while num<5 and (not rs.eof)
10 response.Write("<li><a href='article.asp?id="&rs("ID")&"'>"&rs("title")&"</a><span class='Date'>"&rs("dat")&"</span></li>")
11 rs.movenext
12 num=num+1
13 loop
14 else
15 do while not rs.eof
16 response.Write("<li><a href='article.asp?id="&rs("ID")&"'>"&rs("title")&"</a><span class='Date'>"&rs("dat")&"</span></li>")
17 rs.movenext
18 num=num+1
19 loop
20 end if
21 end if
22 rs.close
23 set rs=nothing
4. 删除记录。删除记录是通过该sql语句实现的:"delete from [news] where ID="&delid。例如,删除新闻仅需以下语句实现:
1 delsql="delete from [news] where ID="&delid
2 oConn.Execute delsql
5. 添加记录。本站通过后台管理系统的表单添加新闻,首先首先需要获取表单的值,用sql语句查找所有记录,然后再用rs.addnew语句表示要添加,然后给每一字段赋予表单中的相应的值,最后用rs.update表示更新。代码如下:
1 set rs=server.CreateObject("ADODB.RecordSet")
2 sql="select * from [news]"
3 rs.open sql,oConn,2,3
4 rs.addnew
5 rs("title")=title
6 rs("type")=typ
7 rs("author")=session("useronline")
8 rs("content")=ShowBrandBlank(content)
9 rs("dat")=date()
10 rs("time")=time()
11 rs.update
12 rs.close
13 set rs=nothing
6. 更改记录。更改记录的方法和添加记录的方法类似。本站通过后台管理系统修改新闻记录的相关信息,首先需要获取表单的值,用sql语句查找相应的一条记录,然后再给需要的字段赋予表单中的新值,代码如下:
1 set rs=server.CreateObject("ADODB.RecordSet")
2 sql="select * from [news]"
3 rs.open sql,oConn,2,3
4 rs.addnew
5 rs("title")=title
6 rs("type")=typ
7 rs("author")=session("useronline")
8 rs("content")=ShowBrandBlank(content)
9 rs("dat")=date()
10 rs("time")=time()
11 rs.update
12 rs.close
13 set rs=nothing
7. 后台管理。管理网站需要安全保障,也就是说中有正确用户名和密码的人才可以登录进行管理。在这里,由后台登陆页面获取用户的用户名和密码。当用户提交后,后台程序通过获取表单中的用户名和密码的值查询数据库admin表中结果,sql语句为"select * from [admin] where username='"&user&"' and pwd='"&pwd&"'"。仅有通过执行该语句查到的结果数非0时(也就是说相应的用户名和密码的配对存在),才可允许登录。若登录成功,则设置session("useronline")。为了确保进一步的安全,仅有session("useronline")被赋值的情况下,数据库操作才可以被执行。
8. 前台页面的呈现。首页上可以很明显的看到,每篇新闻被按分类列了出来,这是通过执行该查询语句的结果:sql="select * from [news] where type='"&typ&"' order by dat desc",也就是说,按照文章类型来查询的。
当需要查找每个分类的所有文章时,可点击相应的分类进入list.asp页面,该页面可以传递一个参数type,如list.asp?type=news。通过参数给程序执行按照文章类型查找记录的sql语句。
当点击每一篇文章的链接时,进入文章内容页面,即article.asp,同样该页面也有一个参数,是id,则是通过执行该sql语句实现:"select * from [news] where ID="&id。而该id市包含在文章列表页面上每一个结果的链接url中的,这id早在文章列表查询数据库时就被赋予在每个结果的url中了。
四、 调试运营
网站写好了,接下来的工作就是给网站添加内容了,最主要是通过后台管理系统,在这里,我给自己添加一个管理员的号码,用户名是admin,密码是admin。通过后台登录页面进入管理系统。然后通过网上查找与自己的知识储备给网站添加文章。当然如果要使一个网站经久不衰,必须有个管理员定期进行文章的添加与更新。
五、 总结
制作一个网站需要付出大量的经历。首先用户需求分析很重要,这是网站存在的灵魂,离开用户体验,网站将会毫无意义。在网页前端和后端代码的编写时,需要有强大的知识储备和长期编写代码的经验,这样才能保证网页的高质量与高安全性。另外,网站的编写离不开组员的相互合作。由于组员经验不足,该网站问题也很多。
存在的问题:
- 没有实现记录的分页显示技术,一旦记录很多,将会把网页的纵向高度加到很大,从而影响阅读。
- 安全性有待提高。密码没有进行编码,没有引入验证码技术。
- 编辑和添加新闻时,未实现“富文本”编辑技术,这样使得文章内容呈现时,样式单一。
六、 参考文献
1. 柯华坤, 王太平, 管西京。ASP网络编程学习笔记。北京:电子工业出版社,2008
2. 韩国峰。ASP第一步。北京:清华大学出版社,2008