有后台管理系统支持的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. 没有实现记录的分页显示技术,一旦记录很多,将会把网页的纵向高度加到很大,从而影响阅读。
  2. 安全性有待提高。密码没有进行编码,没有引入验证码技术。
  3. 编辑和添加新闻时,未实现“富文本”编辑技术,这样使得文章内容呈现时,样式单一。

六、     参考文献

1.  柯华坤, 王太平, 管西京。ASP网络编程学习笔记。北京:电子工业出版社,2008

2.  韩国峰。ASP第一步。北京:清华大学出版社,2008

posted @ 2011-02-21 21:30  彩虹の天堂  阅读(5406)  评论(16编辑  收藏  举报