Dreamweaver MX 打造我们的留言本4046.docx

《Dreamweaver MX 打造我们的留言本4046.docx》由会员分享，可在线阅读，更多相关《Dreamweaver MX 打造我们的留言本4046.docx（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Dreamweaver MX 打造我们的留言本大家好，我们又见面了。：）在前面几章里我们讲述了如何利用DW MX的服务器行为来操作数据库和生成动态页面，但是不是觉得有点乱，不怎么好理解呢？是的，前面我们讲的都是单个的服务器行为，好像都没什么联系一样。在这一章里呢，我们将学习如果灵活的应用DW MX的服务器行为打造我们的留言本！（没错，就是留言本，将用到绝大部分的服务器行为，而且不用书写一行代码。）先做做准备工作，新建几个页面，分别取名为：index.asp：留言本首页，用于显示留言等。new.asp：发布新的留言。rep.asp：用于站长回复留言的页面。edit.asp：对一些不健康的留言内容

2、进行编辑的页面。del.asp：同上，不过方法更狠，直接删除。：）login.asp：上面所说的回复，编辑，删除等操作都应只有站长才有权力，站长通过这个页面来登陆管理留言本。sorry.asp：登陆不正确的时候所返回的页面。如图（7-1）所示。 7-1 数据库方面我们需要用到两张表，如图（7-2）所示。其中表admin用于存放超级用户的姓名及密码，表f_bbs里存放的发贴信息，在后面我们会详细讲解。7-2 在表admin里新建两个字段，名为f_name和f_password，数据类型分别设为文本，如图（7-3）所示。7-3 表b_bbs就有点麻烦了，不过不用怕，让我们一步步来，先看图（7-4）

3、。7-4 字段ID为留言内容的关键字段，因为它的作用很多，把它的数据类型设为自动编号，并把它设置为主键，即选中它，再点一下图（7-4）中红圆中的按钮。f_name为留言用户的姓名，很简单的。f_content中存放的是留言内容，由于文本数据类型最多只能存放255个字符，对我们的留言内容来说少了点，所以这里要把它设置成备注，因为备注这种数据类型最多可以存放65,535 个字符，完全够用了。：）f_oicq为留言用户的OICQ号码，设置同用户名。f_email为留言用户的Email地址，设置同用户名。f_homepage为留用户的主页地址，设置同用户名。f_time为提交留言的时间，这里要注意一下

4、，数据类型要改成日期/时间，并要设置一个默认值。如图（7-5）所示。这个now()是一个VBA内置的函数，它的作用是当提交一条留言的时候如果不指明该字段的值，则系统会用当前的日期的时间来填充该字段。f_repcontent为站长回复的内容，同留言内容。不过要注意的是也要添加一个默认值，如图（7-6）所示。它的作用是如果当前这条留言内容还没有回复的话则显示“暂无回复”。要注意那两个双引号哦，一定要在英文输入状态下的才行，如，如果中文下输入的“”则就会报错。 7-5 7-6 准备好数据库后就轮到我们的主角了，index.asp，这个页面用于显示留言和一些功能性的连接，先来看看它的大体样子，如图（7

5、-7）所示。同时要记得建立记录集，取名为guestbook。7-7 在这里我只是为了方便起见，所以没用什么图片，大概的样子就是上面这样了。最重要的就是要显示留言人的姓名，留言内容和站长回复，下面的暂无回复是用来确保当没有任何留言内容的时候所显示的，这样也能保证了不会出错。那么可能有些细心的读者会问到，我在上面数据库里建立的像OICQ号码和主页地址怎么还没看到呢？呵。不用急，这些当然要用到，见图（7-8），这是一个基本成型的样子了。7-8 怎么样，OICQ、邮箱、主页、发表时间都出来吧，看起来好像又蛮麻烦的。不用怕，其实都很简单，只是几个小小的服务器行为而已，lets go！我们一步一步来吧。在

6、前面我们提到，先要保证留言的正常显示就要做到在有留言的时候才显示留言，如果没有留言则显示“暂无留言”，那这些在DW MX里怎么做呢？在这里呢，我们要学习一个新的服务器行为show region（显示区域），即根据库里的资料来显示不同的资料。先说说它的基本概念吧，拿我们上面的留言内容来打个比方：如果我留言内容为空，则显示什么；如果留言内容不为空，则又显示什么。如图（7-9）所示。7-9 Dreamweaver MX 打造我们的留言本选中整个留言内容表格后运用Application-Server Behaviors-Show Region-Show Region If Recordset Is N

7、ot Empty(当记录集不为空)，也就是当留言内容不为空时显示这个表格。说到这里就不得不说说其它几个服务器行为了。 Show Region If Recordset Is Empty（如果记录集为空）：当记录集为空时，显示选中的区域。show Region If Recordset Is Not Empty（如果记录集不为空）：当记录集中包含记录时，显示所选区域。Show Region If First Record（如果是第一条记录）：当处于记录集中的第一条记录时，显示选中的区域。Show Region If Not First Record（如果不是第一条记录）：当没有处于记录集中第一条

8、记录时，显示所选的区域。Show Region If Last Record（如果是最后一条记录）：当处于记录集中最后一条记录时，显示所选的区域。Show Region If Not Last Record（如果不是最后一条记录）：当没有处于记录集中最后一条记录时，显示所选的区域。单击它，出现如图（7-10）所示对话框。7-10 在这个对话框中选择与本行为对应的记录集，在这个页面我们只建立了一个记录集，名字为guestbook。应用服务器行为后的效果如图（7-11）所示。7-11 为了防止当没有留言内容的时候会出错，在这里我们还要运用Show Region If Recordset Is Em

9、pty(当记录集为空时)行为，把它运用到“暂无留言”的表格上，最终效果如图（7-12）所示。7-12 下一步，让我们来完善它，通过在显示留言的大表格里插入一些小表格，排好，并插入相关图片（这里放的是网上最常见的小图片。：），如图（7-13）所示。这里是一些最基本的Dreamweaver表格功夫，详情情参见本系列教程其它章节。7-13 现在要做的呢，就是把数据库里的数据拖到相应表格里，如把用户名拖到姓名后面的单元格里，留言内容要放到留言内容后的单元格里，记得把f_name拖到发表于前面，f_time拖到发于于后面，这样显示的时候就变成了“发表于”。见图（7-14）所示。7-14 这里有个小小的b

10、ug，即我们所显示的留言无法进行格式化，即你会发现在你的留言中无论有多少个回车，在显示的时候都不会换行，并且两个以上的空格都会变成一个空格。这个问题可以利用spdformat.mxt插件来解决（点这里下载插件！）。安装好插件后，方法如图（7-48）所示。留言内容和站长回复都要运用这个插件。7-48可能又人要问了，那我数据库里那些OICQ之类的怎么做啊。这个呢，不知道大家知不知道html里img标签的一个alt属性，即鼠标移上去的时候显示相应的说明文字。在这里呢，我们把它和图片进行相应的动态绑定。至于主页地址则做成点击后联接到相应的地址就行了，邮箱呢就点击后打开OUTLOOK对留言者发信。具体方

11、面如图（7-15）所示。7-15 这里有个先后顺序之分，先选中OICQ的图片，再从右边的记录集里选定相应的数据集（这里选中数据库里存放OICQ号码的字段（f_oicq），再从Bind To:下拉菜单里选择img.alt，即我们在前面讲到的img标签属性，再单击后面的Bind就行了，如果绑定正确的话则会产生和前面记录集一样的颜色，以标明在这里应用了一个服务器行为，如图（7-16）所示。在这里呢我们还要将它美化一下。7-16 打开源码和设计视图，你会发现刚才插入的东东在代码里是alt=,COPY这段代码放到它的前面，并把其中的f_oicq改成f_name（数据库里发贴人的姓名字段），使它的最终代码

12、为alt=的OICQ号码是，这样当它显示的时候便为“的OICQ号码是”，都动态绑定了，多好啊，呵。7-17 OK，接下来就是邮箱和主页地址了，和前面的做法稍有点不同，如图（7-18）和（7-19）所示。7-18 7-19 同样，要注意有个顺序，先选中邮箱这个图片，再从下面的属性面板中点击Link按钮。出现如图（7-20）所示的对话框，这里的意思就是如果点击这张图片的话连接到哪里去。7-20 以前呢，我们这个功能是连接到本地的某个页面去，但在DW MX里我们能通过选择Data Sources连接到动态的页面去。这里我们从记录集中email的字段，并记得在前面加上“mailto:”这里为什么加这个

13、呢？是因为这个“mailto”是个html标签，即连接以OUTLOOK打开来发信。同时，记得要给这个email图片加上alt属性，即alt=的邮箱是,点击这里给他/她发信。主页地址的连接方法如图（7-21）所示。7-21 绑定好连接后记得对图片加上alt属性，改成alt=的邮箱是,点击这里给他/她发信是的，这里的确有点烦燥，不过加油吧，胜利在向我们招手呢。：）看看现在的效果吧，如图（7-22）所示。7-22 接下来要做的呢，就是给回复该主题和编辑、删除加上连接，并动态化。这里运用的服务器行为是跳转到细节页（Go To Detail Page）。在前面我们建立了回复页（rep.asp），编辑页（

14、edit.asp）和删除页（del.asp），在这里我们也不一一详述如何进行连接了，效果如图（7-23，7-24，7-25）所示。7-23 7-24 7-25 做好上面这三步后还要记得做一件事哦，如果我们留言内容有很多条怎么办？这里要用DW MX服务器行为中的Repeat Region（重复区域），选中显示留言的整个大表格，Application-Server Behaviors-Repeat Region，如图（7-26）所示。7-26 我们定义它为每页显示14条记录，这样看起来简练一点，单击OK按钮。做到这一步的时候不得不考虑一个问题了，浏览的用户怎么知道我有多少条留言记录呢？其实当我们在

15、建立记录集的时候，DW MX早就为我们考虑好这些了，如图（7-27）所示。7-27 First record index:索引中的第一条记录。Last record index:索引中的最后一条记录。total records:所有记录总和。有了这些，我们要做的只是把他们拖到页上去，加上相应的说明文字就行了，如图（7-28）所示。7-28 坚持，就要成功了！我们还需要一个导行条，因为前面我们用到了Repeat Region（重复区域），如图（7-29）所示。7-29 Insert-Application Objects-Recordset Navigation Bar（插入-应用程序对像-记录

16、集导行条），点击后出现如图（7-30）所示对话框。7-30 Recordset:这里选择要导行的记录集。Display Using:这里选择导行条的显示方式，text为文字，images为图片，这里我们选择images。单击OK按钮，显示效果如图（7-31）所示。7-31 可能它太大了，我们可以把这个表格缩一下，选中这个表格后在属性面板里把它的width=50%改成width=15%就行了，最终效果如图（7-32）所示。Dreamweaver MX 打造我们的留言本现在进行最后完善阶段，把“发表新主题”连接到new.asp页面，下面的“管理人员入口”连接到login.asp页面，“退出登陆！”

17、上运用一个服务器行为，这个功能其实是为超级用户准备的。如图（7-33）所示。7-33 User Authentication:用户鉴定。Log Out user:登陆用户退出。单击后出现如图（7-44）所示对话框。7-44 Log Out When:哪种方式退出登陆，Link clicked：当点击这个连接后就退出。Page Loads：当页面关闭后就算退出。When Done, Go To:当退出后转到哪个页面，这里我们定义转到index.asp首页。还有在上面看到的其实也是为超级用户准备的，当你没有登陆的时候就显示“欢迎您”，如果有超级用户登陆了，则会显示“欢迎您！”。在这里我们要建立一个

18、Session变量，如图（7-34）所示，至于这个Session变量的问题，我们在后面的章节里会详细介绍。：）7-347-35 点击后出现如图（7-35）所示的对话框，在对话框里输入MM_username。这个MM_username变量是DW MX在运用登陆的服务器行为（我们将在后面详细介绍）后自动产生的。同时把它拖到“欢迎您！”之间的感叹号之前。 啊，让我们来一起吼吼终于把最难的这部分做完了，恭喜啊，呵。现在要做的呢，就是增加留言的页面，new.asp。原理就是向我们在前面设计好的数据库里增加数据，这里我们也不一一详述，如图（7-36）所示。7-36记得要把它定义提交数据后转到index.a

19、sp首页哦。为了防止它出错，我们还要对它用一个行为，不过这次不要用服务器行为了，就用DW MX自带的行为就行了。选中表单form后Design-Behaviors-Validate Form（设计-行为-验证表单），如图（7-37）所示。7-37 记得要为f_name和f_content划上那个必填字段的勾，f_oicq的可接受类型改为Number，f_email的可接受类型改为Email Address。至于edit.asp（编辑页），rep.asp（回复页）和del.asp（删除页）则简单的接受前面我们传递过来的值显示相应的数据，然后再运用Updata Recordt和Delete Rec

20、ord服务器行为，在这里我们也不一一详述了，效果如图（7-38，7-39，7-40）所示。7-38 这里是edit.asp页，建立记录集的时候和前面相同，不过要记得应用Move To Specific Record服务器行为，这样才能找到对应的记录集。还有上面表格制作的问题和index.asp的一样，只不过要把显示的用户名，用户留言和站长回复改成文本框，并把相应数据库字段拖到文本框里，最后应用Updata Recordt服务器行为，再定义更新数据后返回到index.asp页面就行了。这里还有一点要注意，要把整个大表格放到表单里才有效。7-39 这个是del.asp页，同样要建立表单哦，不过不用

21、把姓名等改成文本框了，因为只是删除数据，重要的还有Move To Specific Record服务器行和Delete Record服务器行为，最后定义删除后转到index.asp页面。7-40 这是rep.asp页，这个页面和上面的edit.asp页面差不多，也是运用了Updata Recordt服务器行为，不过不同的是它只更新了一个字段内容，同上要运用Move To Specific Record服务器行为，把站长回复改成文本框，以便超级用户可以输入内容。OK，只差一点点了，努力努力再努力啊！我们这里要考虑一个问题，怎么让拥有管理权限的超级用户管理留言呢？即可以编辑、删除、回复等。这里就要

22、用到登陆，这是一个我们以前没接触过的服务器行为Log In User服务器行为。同样，它很简单易学的。：）打开login.asp页面，建立表单、表格、文本框，并把上面那个文本框取名为f_name，下面那个取名为f_password，并把它的类型（type）改为password，如图（7-41）所示。7-41 做好这一切后运用Application-User Authentication-Log In User（应用程序-用户鉴定-用户登陆），如图（7-42）所示。7-42 点击后出现如图（7-43）所示对话框。7-43 Get Input Form Form:在这个下拉列表中选择接受哪个表单的

23、提交，我们这里只有一个表单，所以不用选择。Username Field:在这里选择用户名所对应的文本框。我们刚才定义了用户名的文本框名为f_name，所以这里也选择f_name。Password Field:在这里选择用户密码所对应的文本框，同上。Validate Using Connection:这里选择要使用哪一个数据库连接。Table:要使用数据库中的哪个表。这里要注意一下，在这里我们要使用admin表，虽然以前我们一直用f_bbs表。Username Column:选择用户名对映的字段，这里选择数据库里的f_name字段。Password Column:选择用户密码对映的字段，同上。I

24、f Login Succeeds, Go To:如果通过验证后到哪个页面，这里我们定义返回主页index.asp。If Login Fails, Go To:如果没有通过验证到哪个页面，这里我们定义返回到sorry.asp。Restrict Access Based On:因为我们要对一些页面进行访问限制，如编辑和删除等，所以要用到这个。在后面的类型选择Username and Password，即用户名和密码。单击OK完成这个页面的设置。现在我们要回一下头了，我们的edit，asp，del.asp，rep.asp都是不能让别人随随便便访问的，这里就要用到页面保护的服务器行为。Applicat

25、ion-Server Behaviors-User Authentication-Restrict Access To Pags（应用程序-服务器行为-用户鉴定-页面数据保护），如图（7-45）所示。7-45 单击后出现如图（7-46）所示对话框。7-46 Restrict Ased On:页面保护的类型，这里我们选择username and password（用户名和密码）。If Access Denied, Go To:如果非法访问，则转到哪个页面，这里我们选择让非法访问的转到login.asp(登陆页)。需要保护的页面有edit.asp、del.asp、rep,asp，每个页面的设置都相

26、同，记得要设置哦。至于最后的sorry.asp页，则是一个简单的页面，如图（7-47）所示。在这个“这里”加上一个连接，到login.asp页面。 幸苦了这么久，测试一下吧。打开index.asp，按F12。如图（7-49）所示。7-49 一切尽在掌握中，因为没有留言，所以显示暂无留言。发表一条留言看看，如图（7-50）所示。7-50 这个页面也正常，点击提交留言看看，如图（7-51）所示。7-51啊，显示出来也耶！好高兴哦，由于还没有回复，所以显示的暂无回复。好，再试试回得留言，如图（7-52）所示。7-52 咦，怎么到这来了？哦，记起来了，这个页面（rep.asp）设置了页面保护，我们定义

27、了非正常访问的时候转到登陆页（login.asp），这个就是登陆页了。没办法，登陆一下吧，用户名为admin，密码也是admin，这是我在数据库里自定义的。登陆后再点一下“回复该主题”，如图（7-53）所示。7-53这里呢，就可以对这个默认的“暂无回复”进行修改了，即可以对留言内容进行回复。我们把它改成“写这么久才写完了，笨！”。 点击回复按钮后如图（7-54）所示。7-54 啊，实在高兴啊，回复也成功啦！还有哦，大家注意到没有，上面那个“欢迎您！”在我们登陆后也自动变成了“欢迎您admin!”，这就是我们在前面建立session的成果。再测试一下。如图（7-55）所示。7-55 当鼠标在OICQ头像上停一下的时候则会出现“hmily的oicq号码是7142554”，这些也是我们前面辛勤劳动的成果，其它如邮箱和主页等在这里也不一一测试了。至于其它功能如编辑，导行条等等在这里也不一一测试了，这个小小的留言本当然还不是在完美，但我在这里只提供一种思路，希望大家能更好的改进它，同时我也对这个小留言本提供下载，由于建立的是DSN连接，下载回去后请自行建系统DSN连接，名字为textmx。7-47 完了！哦，我是说是终于做完了。：）