网页教学网
首 页 | 业界新闻 | 建站指南 | 网页制作 | 动画制作 | 网页特效 | 网络编程 | 书籍教程 | 网页素材 | 视频教程 | 教学论坛
  当前位置:  首 页  >>  网页制作 >> Dreamweaver制作技术 >> 内容浏览
  [ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据库 ]

用NoahWeb表现层制作动态网站

http://www.webjx.com  更新日期:2005-06-25  网页教学网  浏览次数:

欢迎大家继续第四天的学习!前三天都是准备和环境的搭建,今天开始真正的教怎么做动态站点,呵呵。

我们先来仔细看一下安装设计器以后在Macromedia Dreamweaver MX 2004加入的NoahWeb扩展菜单,在“插入”里可以看到如下的界面:

这个是NoahWeb Base Object下的内容

这个是NoahWeb Objects下的内容

好了。可以开始制作了。我们先在Macromedia Dreamweaver MX 2004中新建一个“空页面”。

然后存放在e:\webroot\mysite下,命名为"default.aspx"。在这说明一下,如果各位对Macromedia Dreamweaver MX 2004熟悉的话可以在DW中为e:\webroot\mysite建一个站点(DW中建站点不是必须的,各位如果会的话不妨建一下这样用起来会更方便!)。

接下来我们在DW中在"default.aspx"页面的代码头部加插入"NoahWeb Base Objects"下的"NoahPageHeadTag"标签,如下图:

插入以后的代码如下:

呵呵现在就已经表示这个aspx页面采用NoahWeb的引擎来进行解析。这个标签十分重要,否则页面就不能正常的被NoahWeb引擎解析。

我们可以先来测试一下运行是否正常,写个测试内容在body区域里,可以先插入一个"NoahWeb Objects"下的"NoahValue"标签。具体的方法如下:

插入后的代码如下:

然后在ValueName="" 里调用NoahWebInfo()函数,如图所示:

保存"default.aspx"文件以后在IE浏览器里输入"localhost"回车后能看到

Ok,看到上面的内容就表示我们做的都是正确的,"default.aspx"页面已经被NoahWeb的引擎解析。

在此回头看一下刚才使用到的两个命令。第一个命令是

<%@ Page language="c#" AutoEventWireup="false" Inherits="NoahWeb.Engine" %>

这个命令是来告诉系统该页面将使用NoahWeb的引擎来做解析,大家只要记得把这段代码插入到所需要被引擎解析的aspx文件的最头部就可以了。

 

另一个命令是

<!-- NoahValue ValueName="" MaxChar="" DChar="" Safety="False" -->

这个是一个大家所熟悉的HTML注释标签写法,可他在这不是一个普通注释标签,而就是我们的学习的NoahWeb表现层的语法,NoahWeb的13个表现层指令全部都是类似的注释标签,而此刻这个指令是用来回显变量内容到该标签所在的位置的,比如刚才我们调用了一个NoahWebInfo()的函数,这个函数执行出来的结果就会被放在NoahValue标签所在的位置。

OK!知道这两个命令以后我们接着往下讲,今天的内容会比之前几天多一点。

为了后面的动态显示内容。我们先给数据库内的mynews表准备一点内容,用企业管理器添加些内容,如下:

然后我们可以使用设计器建立一个数据库操作集,具体的方法就是在设计器里的"mynews"表上面点鼠标右键然后选择"由此创建Select",如下图:

选择后会看到设计器里出现下面的界面

我们完善一下其中的内容,有修改的部分我用红字给大家做了一下标注,如下:

改动的地方很少。很容易的做的。然后点上图我用蓝色的字标注的地方可以把这个界面关闭并将内容保存,然后就能看到在操作集下出现了一个mynews_S_All的操作集,如下图:

这就相当于我们手写了一个数据库查询“select * from mynews”,然后呢我们回到DW中,在DW中我们可以在刚才的"default.aspx"里做好一个为显示新闻的静态样子。小弟美术水平有限,做的不漂亮大家多多包涵,大概样子如下:

我们看一下,如果我们要希望呈现按照静态的样子来动态显示成后台数据库中的内容,要做的其实就是循环"<tr>"到下一个"</tr>"之间的内容,了解这点以后就很容易做了。我们可以在设计器中先选中"<tr>"至"</tr>"之间的一段内容,然后插入"NoahWeb Objects"下的"NoahLoop"标签,具体如下:

然后会看到下面的内容

这样LOOP就把"<tr>"至"</tr>"之间的内容包住了,然后我们把之前在设计器中做好的"mynews_S_All"数据库操作集的名称放到SQLLinkId=""中,如下

保存以后运行一下看看,呵呵在浏览器里就能看到这样的结果,如下:

可以看到,现在多了6条"准备做新闻的第1条"这样的内容,我们继续做一下,就可以把内容显示出来了,在DW中用上面我们讲过的方式插入一个

<!-- NoahValue ValueName="" MaxChar="" DChar="" Safety="False" -->

替换掉

"准备做的新闻第1条"

然后在ValueName=""里写入"[_LOOP.*.title]",如下图所示:

存盘以后在浏览器中的显示结果如下:

再接再力,把发布时间也替换了……,方法就是把

发布时间

替换成

<!-- NoahValue ValueName="[_LOOP.*.newdate]" MaxChar="" DChar="" Safety="False" -->

如下图:

存盘保存以后,在浏览器里查看显示结果如下:

哇,后面把时间也显示出来了~,得改改……,要不太难看,改的方法查了查NoahWeb的文档可以调用date函数,稍微修改一下:

<!-- NoahValue ValueName="[_LOOP.*.newdate]" MaxChar="" DChar="" Safety="False" -->

改成

<!-- NoahValue ValueName="date('O',mktime([_LOOP.*.newdate]))" MaxChar="" DChar="" Safety="False" -->

如下图:

刷新一下浏览器就能看到下面的结果

现在好多了。不过下面刚才静态做的那些也应该去掉,这样才漂亮

在DW中删掉那些代码就可以了。如下

在浏览器里刷新就看到

苦闷呀,实际操作的时候其实非常简单的,我写的整个过程最多1-2分钟的操作。可写出来害我截了那么多张图片……,命苦。今天就教大家到这吧,明天接着再讲。累了。

回忆一下吧,昨天我们实现了从数据库把内容动态显示到页面上。用到了两个NoahWeb表现层的指令。

一个是

<!-- NoahLoopStart SQLLinkId="mynews_S_All" AutoMode="True" AutoReset="True" NewRunMode="False" --><!-- NoahLoopEnd -->

该指令通俗点说就是根据数据库操作返回的结果行数产生循环,循环的内容就是Start标签和End标签之间的内容。比如查询返回的内容有6行,那么就会将此标签所包含的内容产生6次循环。而SQLLinkId属性就是指定根据那一个数据库操作来产生循环,我们现在使用的是"mynews_S_All",那就表示会根据mynews_S_All这个操作集的返回结果来产生循环。

接着我们看另外一个指令

<!-- NoahValue ValueName="[_LOOP.*.title]" MaxChar="" DChar="" Safety="False" -->

<!-- NoahValue ValueName="date('O',mktime([_LOOP.*.newdate]))" MaxChar="" DChar="" Safety="False" -->

这两个指令是同一个指令标签,昨天的课程已经和大家讲过NoahValue指令是用来回显变量内容到该标签所在的位置的,这两个标签内的ValueName是不相同的,一个是"[_LOOP.*.title]"另一个是"date('O',mktime([_LOOP.*.newdate]))"。

我们先看一下"[_LOOP.*.title]",在NoahWeb中用"[]"来包住的内容都是一个变量内容,而变量内容又通过变量前缀关键词来区分访问不同种类的变量。我们在这用到的是_LOOP变量前缀关键词。_LOOP从字意上就能理解它指的就是指产生当前这个循环的数据库操作,_LOOP后面的"."是分割符号,'*'指是就是循环时所指示的行,最后的title就是指的数据库字段"title"中的内容。发散思维想一想就可以知道,如果我要返回的不是数据库中的title,而是newcontent,则就写成"[_LOOP.*.newcontent]",如果是访问author就写成"[_LOOP.*.author]",如此照搬就行,其实很容易。

再来看另一段指令中的ValueName内容,我们一开始写的时候是直接写成"[_LOOP.*.newdate]"了,按我们刚才的学的就知道这是返回数据库中的newdate这个字段。可是显示出来的日期会显示出"YYYY-MM-DD hh:mm:ss"这样的格式,显示的时候我只想要显示出"YYYY-MM-DD"部分,所以使用了NoahWeb的两个日期函数来返回该部分,NoahWeb的函数和PHP的很接近,使用过PHP的人不会对这样的函数格式陌生。

上面是昨天遗留没讲的内容,下面接着讲今天要讲的内容。

我们现在已经做出新闻列表,剩下的工作就是点击查看某条新闻以后能显示出新闻的详细内容。传统的做法是另外建一个新的页面,比如新建一个"content.aspx"这样的页面来做。可是我们今天可以用一下NoahWeb中很有意思的一个新东西“动作”来做。有关“动作”的理论内容比较长,在这我就不多说了。有兴趣的同学可以上官方站点看看文档,我们今天仅是讲一下在表现层里怎么使用。

我们先把昨天的新闻列表的代码继续修改成一个HTML中的超链接。修改的方式如下

在显示<!-- NoahValue ValueName="[_LOOP.*.title]" MaxChar="" DChar="" Safety="False" -->前后加上<a href="">和</a>

这样在浏览器里显示出来的就是一个带链接的列表。如下:

然后我们来指定一下链接后打开的地址,方式是把<a href="">写成<a href="default.aspx?action=view&newsid=<!-- NoahValue ValueName="[_LOOP.*.id]" MaxChar="" DChar="" Safety="False" -->">,内容的意思是链接打开的地址是default.aspx,并且传递一个名为action的变量等于view,action是NoahWeb中默认的动作变量名,这样的话就会激发view的动作,连接的地址内容上还带一个名为newsid的变量值。传递的是新闻表中的id字段内容,如下

存盘以后在浏览器里打开的就是

<tr>
<td><a href="default.aspx?action=view&newsid=1">有关MYSITE的开发消息</a>(2005-06-21)</td>
</tr><tr>
<td><a href="default.aspx?action=view&newsid=2">MYSITE所使用技术</a>(2005-06-21)</td>
</tr><tr>
<td><a href="default.aspx?action=view&newsid=3">开发周期安排</a>(2005-06-21)</td>
</tr><tr>
<td><a href="default.aspx?action=view&newsid=4">MYSITE其他安排</a>(2005-06-21)</td>
</tr><tr>
<td><a href="default.aspx?action=view&newsid=5">招聘公告</a>(2005-06-21)</td>
</tr><tr>
<td><a href="default.aspx?action=view&newsid=6">10日发薪水通告</a>(2005-06-21)</td>
</tr>

类似上面的代码。

接下来我们为了让同一个页面又能显示列表又能显示指定ID的新闻我们在DW中继续对default.aspx做改动。

新加一个HTML的表格在里面用来准备显示新闻的内容。具体如下图:

这样在保存以后在浏览器中显示的结果如下图:

为了让新闻显示的部分只出现在执行动作view的时候,我们可以DW来帮助我们插入另一个指令"NoahWeb Objects"下的"NoahIfAction",具体方式如下:

然后在Action属性里输入"view",如下图:

这样就表示当执行动作view的时候才会显示此部分内容,我们可以存盘以后在浏览器里刷新一下,看看输出的样子,如下:

显示内容的表格在default.aspx默认打开的已经不显示,只有当我们点中其中某条新闻链接后才会看到下面的内容,如图:

我们如果把新闻列表的这个表格也用一个动作指令来划分的话,就可以让执行view动作的时候不显示出列表,操作方法如下:

这次插入后不用在Action的属性里填写任何内容,这样也就表示在不执行任何动作的时才执行该部分代码,存盘保存以后刷新浏览器就能看到下面的结果:

OK,现在就差一步了!把要选择的新闻内容显示在这个表格里,我们还是仅借助一下NoahLoop指令和NoahValue指令配合查询集就能做到,为了此目的,我们还是再通过设计器建一个数据库操作集出来,不知道大家是否还记得怎么建呢?我放几张截图吧,大家看看图回忆一下,话就不多说了。

请看截图:

第一步:建一个操作集

第二步:修改操作集的各种参数,被修改过的地方我用红圈标记出来,注意一下,这次我加了一个局部变量的内容,并加了一个查询的条件。

第三步:保存以后看到操作集中出现下面的内容。

上面的操作就相当于我们写了一个"select * from mynews where id='[newsid]'"的数据库查询。

然后我们继续在DW中对显示新闻内容的表格插入NoahLoop指令,具体操作我们以前也做过,现在还是回忆一下,如下:

当执行完插入操作以后因为我们准备调用的mynews_S_newid是需要传递一个局部变量的,所以这次我们使用NoahWeb设计器自带的辅助功能来获得LoopStart的代码,方式很简单,就是在设计器中操作集"mynews_S_newid"上面用鼠标右键点出辅助功能,如下图:

然后设计器就会为我们生成一段代码放入计算机的剪贴板中。我们把他直接贴到DW中替换掉刚才新建的LoopStart指令,如下图:

仔细看的话会发现,贴进去的代码除了帮我们自动填写了SQLLinkId成为"mynews_S_newid"外,还多了一个Value属性,我们现在需要的就是填写一下这个属性。

那应该填写什么内容呢?我们这样做是为了显示出新闻的内容,而这部分代码又只有在执行view动作的时候才被执行,为了显示新闻我们已经通过了链接传递了一个叫newsid的变量过来。现在我们就是需要填写这个变量作为查询的条件,具体写法如下:

我们刚才已经讲过"[]"在NoahWeb表示的都是变量,而现在的_root又是一个变量前缀关键词,表示的是访问全局变量内容或是客户端用GET和POST方式提交上来的变量值。这样我们就可以在这获得从地址上面传递进来的newsid的值内容。并传递给数据库操作集去进行查询。

接下来把表格内的文字

"标题部分"用之前学过的方式替换成<!-- NoahValue ValueName="[_LOOP.*.title]" MaxChar="" DChar="" Safety="False" -->

"新闻内容部分"也替换成<!-- NoahValue ValueName="[_LOOP.*.newcontent]" MaxChar="" DChar="" Safety="False" -->

OK,大功告成!

保存以后在浏览器里刷新一下

怎么样可以看到内容了吧!这样就完成了。我们可以重新进入一下,看一下默认进来的时候是如下的:

然后这次我点一下"MYSITE所使用的技术",看到内容就是

这个是动态页面的做法,小弟近期使用下来对NoahWeb表现层的感觉是熟悉DW的人可以非常快的通过DW开发出动态站点,灵活使用设计器配合DW开发起来更加容易。表现层里面还有大半指令没有提到大家有兴趣可以自己学一下,每个都非常有用,而且编写时也类似这样的方式,最近小弟还在学习NoahWeb逻辑层的东西,过段时间再写教材给大家共享。谢谢各位同学的捧场!有不足的地方也请同学们多多包涵!

上一页

作者:jasoncode  来源:蓝色理想  (责任编辑:webjx)    

推荐给好友】【打印】【关闭】    

  相关评论

您的姓名:
评论内容:
 

版权声明 | 关于我们 | 联系我们 | 客户反馈 | 付费方式 | 广告服务 | 建站服务 | 友情链接 | 投 稿
网页教学网 版权所有©2004-2024 转载本站文章请注明出处
电子邮件:WEBMASTER@WEBJX.COM  冀ICP备05002422号