3/24/2006

用VB将ASP代码封装成DLL

摘 要 主要介绍用VB将ASP代码封装成DLL以保护 ASP代码和加快ASP代码的执行速度、节省服务器的资源
关键词 ASP,DLL,编程
一、 引言
Server端的脚本运行环境,它简单易用,不需要编译和连接,脚本可以在 Server端直接运行,并且它支持多用户、多线程,在 Web开发中得到了广泛的应用。服务器端的组件有别于客户端的组件。客户端的组件是通过网络传输,依靠HTML来起作用,而且只能在IE上有用。但是服务器端的组件是运行在服务器端,它在服务器上执行各种操作。因此,所有的浏览器都能享用,它依靠的是服务器而不是浏览器。但是,因为 ASP脚本是纯文本格式,所以恶意者通过源代码可以很容易地看到原本不该看到的页面内容。因此,保护ASP源代码显得非常重要。将ASP代码封装成DLL,不仅加快了ASP代码的执行速度,而且也能保护原代码。当IIS被请求执行一个ASP程序,它首先会在ASP文件中找到标签之间的代码,并且执行它(也可以是<script runat="server"></script>

之间的代码)。如果这个ASP程序在先前被调用过,那么它就会用内存中的编译过的程序来向用户返回HTML代码,如果没有,那么它就重新编译。这样就大大节省了服务器的资源。
二、实现方法
启动你的VB,选择ActiveX图标。这个图标可以在新建工程找到!VB会提供一个默认的工程名(project1)和类名(class1)。在动手之前请首先确认我们拥有Microsoft ActiveX Data Object 2.0 Library,它在我们的程序非常有用。从菜单中选择"工程",然后在其中选择"引用",就会出现"引用"窗口从中选择Microsoft ActiveX Data Object 2.0 Library。
现在我们有了我们自己的工程(project1)和类名(class1)。以后我们就会在ASP代码中使用它们的名字来引用这个组件。在ASP中我们就这样引用,如下:
Set ObjReference = Server.CreateObject("ProjectName.ClassName")
为了在类中使用ASP的方法,你必须在此类中写上初始和终止这两个函数。输入如下代码:程序清单中Class1.cls中的Private Sub Class_Initialize()和Private Sub Class_Terminate()。
将ASP代码中的关键功能制作成动态链接库(.dll),部分隐藏 ASP源代码。 例如:程序清单中的Global.bas和Class1.cls中输入的代码(代码的主要功能是检索数据库中的记录并显示出来)。
在VB的下拉菜单中选择文件→生成article.dll→选择要保存的目录。找到article.dll将其复制到系统盘system32文件夹中,最后一步注册DLL文件。在开始菜单中选择运行输入regsvr32 c:\winnt\system32\article.dll。
三、程序清单
Global.bas中的代码:

Public objContext As ObjectContext
Public Application As ASPTypeLibrary.Application
Public Server As ASPTypeLibrary.Server
Public Session As ASPTypeLibrary.Session
Public Response As ASPTypeLibrary.Response
Public Request As ASPTypeLibrary.Request

Class1.cls中的代码:

Private Sub Class_Initialize()
On Error Resume Next
Set objContext = GetObjectContext
Set Application = objContext.Item("Application")
Set Server = objContext.Item("Server")
Set Session = objContext.Item("Session")
Set Request = objContext.Item("Request")
Set Response = objContext.Item("Response")
End Sub
Private Sub Class_Terminate()
On Error Resume Next
Set Application = Nothing
Set Server = Nothing
Set Session = Nothing
Set Request = Nothing
Set Response = Nothing
Set objContext = Nothing
End Sub
Public Sub AspClassInit()
On Error GoTo Err
Set conn = Server.CreateObject("ADODB.Connection")
strcon = "Provider=Microsoft.Jet.OLEDB.4.0;" & _
"Data Source=" & Server.MapPath("Article.mdb")
conn.Open strcon
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "select * from Article order by ArticleID desc"
rs.Open sql, conn, 1, 1
Response.Write "<html>" & vbCrLf
Response.Write "<head>" & vbCrLf
Response.Write "<meta http-equiv=""Content-Type"" content=""text/html; charset=gb2312"">" & vbCrLf
Response.Write "<title>文章管理系统-CSSTUDIO</title>" & vbCrLf
Response.Write "</head>" & vbCrLf
Response.Write "<body bgcolor=""#FFFFFF"" topmargin=""0"">" & vbCrLf
Response.Write "<table width=""100%"" border=""0"" cellpadding=""2"" cellspacing=""0"">" & vbCrLf
Response.Write " <tr>" & vbCrLf
Response.Write " <td width=""742"" height=""20"">文章标题</td>" & vbCrLf
Response.Write " <td width=""90"">点击</td>" & vbCrLf
Response.Write " <td width=""145"">添加日期</td>" & vbCrLf
Response.Write " </tr>" & vbCrLf
Response.Write "</table>" & vbCrLf
While Not rs.EOF And Rows < id=" Response.Write rs(" cellspacing="0" cellpadding="0" border="1" href="">" & vbCrLf
Response.Write " "
Response.Write rs("标题")
Response.Write "</a></td>" & vbCrLf
Response.Write " <td width=""94"">"
Response.Write rs("点击")
Response.Write "</td>" & vbCrLf
Response.Write " <td width=""148"">"
Response.Write rs("添加日期")
Response.Write "</td>" & vbCrLf
Response.Write " </tr>" & vbCrLf
Response.Write "</table>" & vbCrLf
rs.MoveNext
Wend
Response.Write "</body>" & vbCrLf
Response.Write "</html>" & vbCrLf
rs.Close
Set rs = Nothing
conn.Close
Set conn = Nothing
Exit Sub
Err:
If Err.Number = -13572468 Then Exit Sub
Resume Next
End Sub

使用article.dll后的index.asp中的代码:

<%Dim AspTransBuilderObject Set AspTransBuilderObject = Server.CreateObject("article.Class1") AspTransBuilderObject.AspClassInit Set AspTransBuilderObject = Nothing%>

使用article.dll前的index.asp中的代码:

<% Set conn=Server.CreateObject("ADODB.Connection")
strcon = "Provider=Microsoft.Jet.OLEDB.4.0;" & _
"Data Source=" & Server.MapPath("Article.mdb")
conn.Open strcon %>
<% Set rs = Server.CreateObject ("ADODB.Recordset")
sql="select * from Article order by ArticleID desc"
rs.Open sql, Conn,1,1 %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文章管理系统-CSSTUDIO</title>
</head>
<body bgcolor="#FFFFFF" topmargin="0">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="742" height="20">文章标题</td>
<td width="90">点击</td>
<td width="145">添加日期</td>
</tr>
</table>
<% While Not Rs.Eof And Rows<Rs.PageSize %>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="747" height="20">☆<a href="view.asp?id=<% = rs("ArticleID") %>">
<% =rs("标题") %></a></td>
<td width="94"><% = rs("点击") %></td>
<td width="148"><% = rs("添加日期") %></td>
</tr>
</table>
<% Rs.MoveNext
Wend %>
</body>
</html>
<% rs.close
set rs=nothing
conn.close
set conn=nothing %>


四、结论
因为这些代码是在服务器端运行的,所以客户端不需要安装任何东西。这仅仅是用ActiveX DLL所能实现的功能的小小的例子。你们可以写好自己的更大的组件,而且还可以用VB中的很多控件。让我们用组件来扩展我们的程序的功能吧!也希望多多的看到我们中国人的组件。但愿本文能起到抛砖引玉的作用。

3/22/2006

使用Web标准建站第11天:不用表格的菜单

布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:  样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}

  页面代码: 以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。
  接下来是定义菜单。
1.不用表格的菜单(纵向)
  我们先来看菜单的最终效果:


通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句:

  
没有用任何table,而用的是无序列
  • ,整个菜单的效果实现的秘密完全在于id="menu",我们再来看CSS中关于menu的定义:

      (1)首先定义了menu层的主要样式:#menu {
    MARGIN: 15px 20px 0px 15px; /*定义层的外边框距离*/
    PADDING:15px; /*定义层的内边框为15px*/
    BACKGROUND: #dfdfdf; /*定义背景颜色*/
    COLOR: #666; /*定义字体颜色*/
    BORDER:#fff 2px solid; /*定义边框为2px白色线条*/
    WIDTH:160px; /*定义内容的宽度为160px*/
    }

      (2)其次定义无序列表的样式:

    #menu ul {
    MARGIN: 0px;
    PADDING: 0px;
    BORDER: medium none; /*不显示边框*/
    LINE-HEIGHT: normal;
    LIST-STYLE-TYPE: none;

    }
    #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}

      说明:这里用的是id选择器的派生方法定义(参考第7天:CSS入门的介绍)了在menu层中的子元素
    • 的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式,即:不显示小圆点(我们后面用自己的图标来代替小圆点)。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。

        (3)定义onmouseover效果

      #menu li a {
      PADDING:5px 0px 5px 15px;
      DISPLAY: block;
      FONT-WEIGHT: bold;
      BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
      WIDTH: 100%;
      COLOR: #444;
      TEXT-DECORATION: none;
      }
      #menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
      COLOR: #fff; }

        解释如下:

      "display:block;"表示将标签a当作块级元素来显示,使得链接变成一个按钮;
      "BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明,"2px 8px"指定图标的位置是距左边2px,距上边8px。这一句也可以拆分写成四句:"BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
      "#menu li a:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。
        ok,不用表格的菜单就这样实现了。大家可以明显感觉到,原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。
  • 3/21/2006

    使用Web标准建站第10天:自适应高度

    如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面):


    例子的页面主要代码如下:<div id="header"></div><div id="mainbox"> <div id="menu"></div> <div id="sidebar"></div> <div id="content"></div></div><div id="footer"></div>
      具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加,#content的高度就会增高,同时#mainbox的高度也会撑开,#footer层就自动下移。这样就实现了高度的自适应。
      另外值得注意的是:#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;",这是浮动法定位,还可以采用绝对定位来实现这样的效果。
      这个方法存在另一个问题,就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色,因为在Mozilla等浏览器中#mainbox的背景色失效。)
      好了,主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。如果你希望尝试其他布局,推荐看看以下文章:
    CSS布局16例
    onestab:三栏复合布局演示
    onestab:自由伸展的三栏式版面
    Tips:[onestab 的"P.I.E"专题] 还有更多精彩介绍,推荐去看看。

    3/20/2006

    使用Web标准建站第9天:CSS布局入门

    接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:
    1.确定布局
      w3cn的最初设计草图如下:

    用表格的设计方法的话,一般都是上中下三行布局 。用DIV的话,我考虑使用三列来布局,成为这样

    2.定义body样式
      先定义整个页面的body的样式,代码如下:

    body { MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
    FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
    COLOR: #666;
    FONT-SIZE:12px;
    LINE-HEIGHT:150%; }
      以上代码的作用在上一天的教程有详细说明,大家应该一看就明白。定义了边框边距为0;背景颜色为#FEFEFE,背景图片为bg_logo.gif,图片位于页面右下角,不重复;定义了字体尺寸为12px;字体颜色为#666;行高150%。

    3.定义主要的div
      初次使用CSS布局,我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho,别滴彝道粒?仁迪旨虻サ模?黾拥阈判穆铮?。分别定义左中右的宽度为200:300:280,在CSS中如下定义:


    /*定义页面左列样式*/
    #left{ WIDTH:200px;
    MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: #CDCDCD;
    }
    /*定义页面中列样式*/
    #middle{ POSITION: absolute;
    LEFT:200px;
    TOP:0px;
    WIDTH:300px;
    MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: #DADADA;
    }
    /*定义页面右列样式*/
    #right{ POSITION: absolute;
    LEFT:500px;
    TOP:0px;
    WIDTH:280px;
    MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: #FFF; }

      注意:定义中列和右列div我都采用了POSITION: absolute;,然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键,我采用了层的绝对定位。定义中间列距离页面左边框200px,距离顶部0px;定义右列距离页面左边框500px,距离顶部0px;。

      这时候整个页面的代码是:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
    <head>
    <title>欢迎进入新《网页设计师》:web标准教程及推广</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="gb2312" />
    <meta content="all" name="robots" />
    <meta name="author" content="ajie(at)netease.com,阿捷" />
    <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
    <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." />
    <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
    </head>
    <body>
    <div id="left">页面左列</div>
    <div id="middle">页面中列</div>
    <div id="right">页面右列</div>
    </body>
    </html>

      这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?

    4.100%自适应高度?
      为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"height:100%;",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。

    3/19/2006

    使用Web标准建站第8天:CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。
    1.定义DIV分析一个典型的定义div例子:#sample{ MARGIN: 10px 10px 10px 10px;
    PADDING:20px 10px 10px 20px;
    BORDER-RIGHT: #CCC 2px solid;
    BORDER-BOTTOM: #CCC 2px solid;
    BORDER-LEFT: #CCC 2px solid;
    BORDER-TOP: #CCC 2px solid;
    BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
    COLOR: #666;
    TEXT-ALIGN: center;
    LINE-HEIGHT: 150%; WIDTH:60%; }
      说明如下:

    层的名称为sample,在页面中用<div id="sample">就可以调用这个样式。
    MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN: 10px;"。如果边距为零,要写成"MARGIN: 0px;"。注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。MARGIN是透明元素,不能定义颜色。
    PADDING是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素,不能定义颜色。
    BORDER是指层的边框,"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。
    BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bg_logo.gif)"来指定背景图片路径;其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复,如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
    COLOR用于定义字体颜色,上一节已经介绍过。
    TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。
    LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。
    WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。
    下面是这个层的实际表现:
      
    我们可以看到边框是2px的灰色,背景图片在右下没有重复,内容距离上和左边框20px,内容居中,一切和预想的一样。hoho,虽然不好看,但它是最基本的,掌握了它,你就已经学会一半的CSS布局技术了。就是这样,不算难吧!(另一半是什么?另一半是层与层之间的定位。我会在后面逐步讲解。)