Flash+ASP+XML+Access开发留言本(图文教程)_Flash教程-查字典教程网
Flash+ASP+XML+Access开发留言本(图文教程)
Flash+ASP+XML+Access开发留言本(图文教程)
发布时间:2016-12-24 来源:查字典编辑
摘要:开发Flash留言本一直都是Flash后台交互的进阶技术,本例通过ASP和XML简单高速地同数据库交互。教程介绍的很详细,思路也很清晰,教程...

开发Flash留言本一直都是Flash后台交互的进阶技术,本例通过ASP和XML简单高速地同数据库交互。教程介绍的很详细,思路也很清晰,教程很实用,转发过来,希望对大家有所帮助!

本例思路:

<1> 创建数据库。

<2> 编写ASP程序。

<3> 在Flash中制作留言本皮肤。

<4> 编写AS与ASP程序交互。

实例步骤:

(1)先安装IIS服务器,安装方法请查阅相关资料。

(2)交互流程:

显示:使用ASP读取数据库数据再输出成XML,Flash再去读取这个XML文件。

留言:Flash将用户输入留言内容发送给ASP,ASP接收到数据后再存入数据库。

交互流程如图所示。

图14-1 流程图

(3)本范例使用到的三个ASP文件为:

“head/conn.asp”打开数据库。

“listXML.asp”读取ACCESS数据库里的数据并转化为XML格式显示出来。

“post.asp”接收Flash里的值存入数据库。

(4)先创建数据库名为“db.mdb”,新建一个表名为“book”,各字段与作用如图14- 2所示.

图14-2 新建表

(5)先编写打到数据库的conn.asp文件。

ASP/Visual Basic代码

<%

Db = "head/db.mdb"

conn = "Provider = Microsoft.Jet.OLEDB.4.0;Data Source = " & Server.MapPath(db)

%>

(6)编写显示留言列表的ASP文件listXML.asp,先打开表“book”。

ASP/Visual Basic代码

<%@LANGUAGE="VBSCRIPT" %>

<>

<%

set rs = Server.CreateObject("ADODB.Recordset")

rs.ActiveConnection = conn

rs.Source = "SELECT * FROM book ORDER BY id DESC"

rs.CursorType = 0

rs.CursorLocation = 3

rs.LockType = 1

rs.Open()

%>

(7)在Flash中读取数据库数据时,还要考虑分页的问题,我们每次默认读取10条数据可以在调用时设置显示条数,使用变量“itemNum”。并判断当前显示的页码,使用变量“pageNum”。

ASP/Visual Basic代码

<%

Dim itemNum,pageNum,recordTotal

itemNum = Request.QueryString("itemNum")

If itemNum <> "" Then

itemNum = Int(itemNum)

else

itemNum =10

end if

recordTotal = rs.RecordCount

pageNum = Request.QueryString("pageNum")

If pageNum <> "" Then

pageNum = Int(pageNum)

rs.move(pageNum*itemNum)

end if

%>

(8)将数据打印成XML文件现显出来。

ASP/Visual Basic代码

<?xml version='1.0' encoding='gb2312'?>

<XML total='<%=(recordTotal)%>'>

<%

While ((itemNum <> 0) AND (NOT rs.EOF))

%>

<%

id=rs("id")

myname=Trim(rs("name"))

mytitle=Trim(rs("title"))

msg=Trim(rs("msg"))

qq=Trim(rs("qq"))

redate=Trim(rs("date"))

%>

<item id="<%=id%>" name="<%=myname%>" title="<%=mytitle%>" msg="<%=msg%>" qq="<%=qq%>" date="<%=redate%>"/>

<%

itemNum=itemNum-1

if NOT rs.EOF then

rs.MoveNext()

end if

Wend

%>

</XML>

技术看板:代码解释

第27行,标识XML版本与语言类型。

第28行,使用属性total记录数据库所有数据。

第40行,输出XML元素,每条记录着一条用户留言。

(9)使用IE浏览“listXML.asp”,这个XML文件的结构比较简单,每条留言记录都是一个XML节点名为“item”,使用节点属性来存放数据,XML结构可以更为简洁,如图14-4所示。

图14-3 listXML.asp

(10)打开Flash先制作一个用于显示留言列表的“显示条”,画个矩形背景再创建两个文本框名为“title”和“date”用来显示标题和日期,如图14-5所示。

图14-4 制作“显示条”

(11)将“显示条”转化为影片剪辑名为“item”,类路径为“com.GB4.Item”,如图1- 所示。

图14-5 转化为影片剪辑

(12)编写显示条的AS类文件“Item.as”。

AS3代码

package com.GB4{

import flash.display.*;

import flash.events.*;

import flash.events.IOErrorEvent;

import flash.system.System;

import flash.text.TextField;

public class Item extends MovieClip {

var id:Number;

public function Item() {

stop();

this.addEventListener(MouseEvent.MOUSE_OVER,overFun);

this.addEventListener(MouseEvent.MOUSE_OUT,outFun);

this.addEventListener(MouseEvent.CLICK,clickFun);

}

private function overFun(event:MouseEvent):void {

gotoAndStop(2);

date.textColor=0x000000;

title.textColor=0x000000;

}

private function outFun(event:MouseEvent):void {

gotoAndStop(1);

date.textColor=0xffffff;

title.textColor=0xffffff;

}

private function clickFun(event:MouseEvent):void {

main.showMsg(id)

}

}

}

(13)好了,再编写main文档类,我们先把数据读进去。

AS3代码

package com.GB4{

import flash.display.*;

import flash.events.*;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.events.IOErrorEvent;

import flash.system.System;

import flash.utils.*;//使用MC时引入

import flash.text.TextField;

import fl.transitions.Tween;

import fl.transitions.easing.*;

public class main extends Sprite {

private var pageNum:Number = 0;

private var item:Item;

private var itemBox:Sprite;

private var controlBar:ControlBar;

public static var showMsg:Function;

private var getXML:XML;

private var msgBox:MsgBox = new MsgBox;

private var writeBox:WriteBox = new WriteBox;

private var thenPage:Number=1;

private var allPage:Number=0;

public function main() {

showMsg=showMsgFun;

controlBar=new ControlBar;

controlBar.x=50;

controlBar.y=300;

addChild(controlBar);

loadPage(1);

addChild(msgBox);

msgBox.visible=false;

msgBox.x=120

msgBox.y = 50

writeBox.visible=false;

writeBox.x=120

writeBox.y = 50

addChild(writeBox);

writeBox.closeBt.addEventListener(MouseEvent.CLICK, hideWriteBox);

msgBox.closeBt.addEventListener(MouseEvent.CLICK, hideMsgBox);

controlBar.prevPage.addEventListener(MouseEvent.CLICK, prevPageFun);

controlBar.nextPage.addEventListener(MouseEvent.CLICK, nextPageFun)

controlBar.writeBt.addEventListener(MouseEvent.CLICK,writeFun)

}

/*加载数据库转化的XML文件*/

private function loadPage(_pageNum:Number):void {

var myLoader:URLLoader = new URLLoader();

System.useCodePage=true;

myLoader.addEventListener(Event.COMPLETE,loadComplete);

myLoader.addEventListener(IOErrorEvent.IO_ERROR,loadError);

myLoader.load(new URLRequest("http://localhost/GB4/listXML.asp?pageNum=" + (_pageNum-1) + "&tag=" + Math.random() * 50));

thenPage=_pageNum

}

/*XML文件获取转化*/

private function loadComplete(event:Event):void {

XML.ignoreWhitespace = true;

var str:String=event.target.data;

str=str.slice(0,str.lastIndexOf(">")+1);

getXML = new XML(str);

allPage =Number(getXML.@total)

if (allPage % 10==0) {

allPage=int(allPage/10)

}else {

allPage=int(allPage/10)+1

}

controlBar.showTxt.text="当前第"+thenPage+"页 总共"+allPage+"页"

printItem();

}

技术看板:AS代码解释

第20行,初始化时先读取第1页。

第23行,私有函数loadPage()带有一个参数“_pageNum”控制要加载的页数,加载listXML留言列表文件。

第24行,文件的加载路径,读者可以跟据自己在IIS中设置的路径来修改,最后一个“&tag=”的作用防止读取缓存中的数据,所以多设了个变量“tag”并使用随机值保证每次都从数据库从新加载资料。

第30行,将所加载的页面赋给变量“thenPage”将当前页存放起来在翻动页面时使用。

第37行,加载成功后转化为XML对象“getXML”。

第38~43行,读取数据库所有留言数计算出总共页数,每页为10条记录,如果能被整除则取整为总页数否则取整加一为总页数。

(14)解析完XML文件,将其打印出来。

AS3代码

/*XML文件获取转化*/

private function loadComplete(event:Event):void {

XML.ignoreWhitespace = true;

var str:String=event.target.data;

str=str.slice(0,str.lastIndexOf(">")+1);

getXML = new XML(str);

allPage =Number(getXML.@total)

if (allPage % 10==0) {

allPage=int(allPage/10)

}else {

allPage=int(allPage/10)+1

}

controlBar.showTxt.text="当前第"+thenPage+"页 总共"+allPage+"页"

printItem();

}

/*打印留言列表*/

private function printItem():void {

msgBox.visible = false;

writeBox.visible = false;

writeBox.inputBox.visible=true;

writeBox.sendDia.visible=false;

var setY=0;

if (itemBox!=null) {

removeChild(itemBox);

}

itemBox=new Sprite;

itemBox.x=50;

itemBox.y=50;

addChild(itemBox);

for (var i:uint; i<getXML.child("*").length(); i++) {

item=new Item();

item.y=setY;

setY+=23;

item.title.text=getXML.child(i).@title;

item.date.text=getXML.child(i).@date;

item.id=i;

itemBox.addChild(item);

}

}

技术看板:AS代码解释

第49~51行,如果itemBox已经有了,先移除。

第52行,itemBox用来放置所有item显示条。

第60行,读取XML中的“title”属性即留言标题。

第61行,读取XML中的“date”属性即留言日期。

(15)先测试下如图14-6 所示。

图14-6 XML列表转化测试

(16)接着往下做,制作控制框“ControlBar”,绘制翻页用的按钮和显示页数信息的框,各命名如图14-7 所示。

图14-7 代码

(17)翻页代码。

AS3代码

/*XML文件获取转化*/

private function loadComplete(event:Event):void {

XML.ignoreWhitespace = true;

var str:String=event.target.data;

str=str.slice(0,str.lastIndexOf(">")+1);

getXML = new XML(str);

allPage =Number(getXML.@total)

if (allPage % 10==0) {

allPage=int(allPage/10)

}else {

allPage=int(allPage/10)+1

}

controlBar.showTxt.text="当前第"+thenPage+"页 总共"+allPage+"页"

printItem();

}

private function prevPageFun(event:MouseEvent):void {

if (thenPage > 1) {

loadPage(thenPage-1)

}

}

private function nextPageFun(event:MouseEvent):void {

if (thenPage < allPage) {

loadPage(thenPage+1)

}

}

技术看板:AS代码解释

第65行,显示当前页和总页数信息。

第68~71行,上翻一页。

第73~77行,下翻一页。

(18)点击留言列表后,显示详细信息,制作信息显示框“msgBox”如图14- 8 所示。

图14- 8 信息显示框

(19)显示详细数据。

AS3代码

/*显视留言内容*/

private function showMsgFun(id:Number):void {

removeChild(itemBox);

itemBox=null;

msgBox.visible = true;

msgBox.showName.text = getXML.child(id).@name;

msgBox.qq.text = getXML.child(id).@qq;

msgBox.title.text = getXML.child(id).@title;

msgBox.msg.htmlText = getXML.child(id).@msg;

}

(20)测试下如图14-9 所示。

图14- 9测试

(21)显示数据制作完成,再编写留言发送和程序,提交留言数据的ASP程序“post.asp”。

ASP/Visual Basic代码

<%@LANGUAGE="VBSCRIPT"%>

<>

<%

postName=trim(request.form("in_name"))

qq=trim(request.form("in_qq"))

title=trim(request.form("in_title"))

msg=trim(request.form("in_content"))

set add = Server.CreateObject("ADODB.Recordset")

add.ActiveConnection = conn

add.Source = "SELECT * FROM book"

add.CursorType = 0

add.CursorLocation = 2

add.LockType = 2

add.Open()

add_numRows = 0

add.addnew

if qq<>"" then

add("qq")=int(qq)

else

add("qq")=0

end if

add("name")=postName

add("title")=title

add("msg")=msg

add.update

add.Close()

set add=nothing

%>

技术看板:ASP代码解释

第4~7行,接收Flash上传来的值。

第17~21行,因为“qq”字段是整型的,所以要先判断用户留言时是否有填写QQ号,默认为0。

第22~25行,写入数据库。

(22)在Flash中制作留言框“WriteBox”,如图14- 10 所示。

图14-10 留言发送框

(23)发送成功以后,会有一个提示框,制作提示框命名为“sendDia”如图14- 11 所示。

图14-11 提示框

(24)编写“WriteBox.as”代码。

AS3代码

package com.GB4{

import flash.display.*;

import flash.net.URLRequest;

import flash.net.URLLoader;

import flash.net.URLVariables;

import flash.net.URLRequestMethod;

import flash.text.TextField;

import flash.events.MouseEvent;

import flash.events.*;

public class WriteBox extends MovieClip {

public function WriteBox() {

stop();

inputBox.sendBt.addEventListener(MouseEvent.CLICK, sendData);

sendDia.visible=true;

}

private function sendData(event:MouseEvent):void {

if (inputBox.showName.text==""||inputBox.msg.text=="") {

return;

}

var myLoader:URLLoader = new URLLoader();

var loadUrl:URLRequest=new URLRequest("http://localhost/GB4/post.asp");

var variables:URLVariables = new URLVariables();

&nbs, p; , ; variable, , s.in_name=inputBox.showName.text;

variables.in_qq=inputBox.qq.text;

variables.in_title=inputBox.title.text;

variables.in_content = inputBox.msg.text

;

loadUrl.data=variables;

loadUrl.method=URLRequestMethod.POST;

myLoader.addEventListener(Event.COMPLETE,loadComplete);

myLoader.addEventListener(IOErrorEvent.IO_ERROR,loadError);

myLoader.load(loadUrl);

}

private function loadComplete(event:Event):void {

sendDia.visible=true;

inputBox.visible=false;

inputBox.showName.text=inputBox.qq.text=inputBox.title.text=inputBox.msg.text="";

//留言成功以后,清空所有输入框

}

private function loadError(event:IOErrorEvent):void {

trace("加载出错");

}

}

}

技术看板:ASP代码解释

第14行,先隐藏提示框。

第17行,如果用户没有输入文字则不发送。

第20~23行,发送Flash上传来的值。

第32行,发送成功,。

第22~25行,写入数据库。

(25)制作完成测试程序。

以上就是Flash+ASP+XML+Access开发留言本,虽然内容比较多,大部分都是利用代码编写,但每一步都介绍的也很详细,也对代码进行讲解,希望大家看完本教程之后有所收获!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Flash教程学习
    热门Flash教程学习
    网页设计子分类