把QQ爱墙搬回家
技术与开发
QQ网站上有许多我们喜爱的功能，我就特别喜欢QQ爱墙,现实中我们不能在墙上胡乱张贴，在这里我们可以带上爱意与祝福随意张贴。可是我也想在我们自己的网页中加入类似的功能,供好友们写下留言。我该怎么去做呢?
要实现这样的功能，首先我们需要能够动态地添加留言并显示留言，留言条在留言墙上的位置需要保存，我们借助JSP+数据库的方式来实现，其次在留言墙上可以随意地拖动和关闭留言条,使用JavaScript+CSS就可以来完成这个功能。JavaScript+CSS的组合在网络设计中有很大的用处，JavaScript用来监听用户的事件，CSS用来规定网页元素的表现方式，两者结合可以实现网络交互的功能。
小知识：CSS是一种标记语言,不需要编译,可以被浏览器解释执行,它负责网页内容的表现形式,可以嵌入到HTML页面中。
第一步：创建数据库表
先打开Office 2000中的Microsoft Access 2000，在“文件”菜单中选择“新建”，在弹出的对话框中选择“空数据库”选项，填写文件名为Message,然后点击“创建”按钮,就创建了我们后面要用到的Message.db数据库文件。
数据库文件创建后，在初始对话框中双击“使用设计器创建表”选项，打开一张表并在表中输入字段名称和数据类型（见表），最后点击工具栏的“保存”按钮即可。
第二步：设计留言条的样式
打开Dreamwearer 8.0，选择“文件”菜单中的“新建”,在弹出对话框的常规选项卡中的“类别”处选择“常规”，基本页选择“CSS”,然后点击“创建”按钮.，在其中输入代码（代码下载地址为http://www.cpcw.com/bzsoft），最后保存为“c.css”文件。
第三步：编写鼠标操作代码
这一步是我们设计的关键点，我们选择通过页面调用外部JS文件的方式来实现，在Dreamwearer 8.0中点击“新建”后，在弹出对话框的常规选项卡中，在“类别”中选择“常规”，再选择”JavaScript”，输入如下代码并保存为Myjs.js文件。
var scrip =‘’;
var iLayerMaxNum = 10000;
//当页面中用鼠标按键点击时,则执行me函数
document.onmouseup = me;
//当页面中用鼠标拖动事件时,则执行ms函数
document.onmousemove = ms;
var scripX;
var scripY;
//当留言条被点击时所要执行的函数
function Move(Object, event)
{
scrip = Object.id;
document.getElementById(scrip).setCapture();
scripX = event.x - document.getElementById(scrip).style.pixelLeft;
scripY = event.y - document.getElementById(scrip).style.pixelTop;
//将被点击的留言条置于顶层
document.getElementById(scrip).style.zIndex = iLayerMaxNum;
iLayerMaxNum = iLayerMaxNum + 1;
}
//鼠标拖动留言条时,需要改变留言条的位置
function ms(evt)
{
if(scrip!=‘’){
document.getElementById(scrip).style.left = event.x - scripX;
document.getElementById(scrip).style.top = event.y - scripY;
}
}
//鼠标释放时,要释放占用的资源
function me(evt){
if(scrip!=‘’){
document.getElementById(scrip).releaseCapture();
scrip=‘’;
}
}
//点击关闭按钮执行的函数
function delMessage(n)
{
var Messageid = n;
document.getElementById(Messageid).style.display = ‘none’;
}
第四步：设计留言墙界面
在Dreamweaver 8.0中，我们新建一个名为Add.jsp的动态页JSP文件,在其中添加表单Message，在表单mesage中添加相关表单元素,并设定相应的名称。
第五步：保存及读取留言数据
因为在此应用中需要多次进行数据库操作，我们可以创建一个Java类 DbConnect用于连接数据库。在Dreamwearer 8.0也能完成创建Java文件的任务，点击“新建”，在弹出对话框的常规选项卡的“类别”中选择“其他”，然后选择“Java”，输入代码（代码下载地址http://www.cpcw.com/bzsoft）。
第六步：试用程序
我们在Resion安装目录下的Conf文件夹中，用写字板或者记事本打开Resin.conf文件，定位到web-app处，加入代码＜web-app id=“/qq” app-dir=“E:\\qqwall” character-encoding=“GBK” /＞,保存此文件即可完成程序的部署。部署好后，在浏览器中输入http://localhost/st登录留言墙，点击“我要留言”即可发表自己的个性留言了。
总结
通过本例，大家看到做一个基于网络的项目需要多种技术的相互协作才能完成。利用这些技术我们不仅可完成我们的个性留言墙，还可以开发如网络办公、MIS管理、业务管理等大的信息管理系统。