Flex和Jsp创建用户登入系统

在开始之前我们先来看下效果：【userName==password都是test】

这个例子中出了使用Flex与JSP验证用户登入之外呢，另外一个看点就是登入之后配合了states使用的resize效果来展示用户正确登入后的界面。

本文是根据Viper Creaitons中的Create a Login System with Flex and PHP 例子上把后台的php更改成JSP来实现的。【理由很简单，我不会PHP 】,后台数据的验证的方法是采用HttpService的，至于前台的参数传递使用的是<mx:Request>方式。网上找了下，还有一种方法是使用URLVariables对象。具体参考：http://blog.youkuaiyun.com/cjd007/archive/2007/05/25/1625823.aspx 。

先来看前台UserLogin.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
        <mx:State name="Logged In">
            <mx:SetProperty target="{panel1}" name="width" value="95%"/>
            <mx:SetProperty target="{panel1}" name="height" value="95%"/>
            <mx:RemoveChild target="{password}"/>
            <mx:RemoveChild target="{username}"/>
            <mx:RemoveChild target="{label1}"/>
            <mx:RemoveChild target="{Submit}"/>
            <mx:RemoveChild target="{label2}"/>
            <mx:SetProperty target="{panel1}" name="title" value="Today is Present"/>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="10" y="10" text="Today is a gift"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="10" y="36" text="That's way we call it the present!"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="10" y="62" text="Liceven"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            
        ]]>
    </mx:Script>
    <mx:Script>
    

<![CDATA[

private function checkLogin(evt:ResultEvent):void
{

    if(evt.result.loginResult == "yes")

    {

    currentState = "Logged In";

    }

    if(evt.result.loginResult == "no")

    {
        
        mx.controls.Alert.show('Invalid username/password');

    }        
}

]]>

</mx:Script>
    <mx:HTTPService id="login_user" result="checkLogin(event)" showBusyCursor="true" method="POST" url="http://localhost:8080/UserLogin/loginCheck.jsp" useProxy="false">
        <mx:request xmlns="">
            <username>
                {username.text}
            </username>
            <password>
                {password.text}
            </password>
        </mx:request>
    </mx:HTTPService>
    
    <mx:Panel resizeEffect="Resize" width="250" height="200" layout="absolute" title="Login System" horizontalCenter="0" verticalCenter="-2" id="panel1">
        <mx:Label x="10" y="10" text="Username:" id="label1"/>
        <mx:TextInput x="10" y="36" id="username"/>
        <mx:Label x="10" y="66" text="Password:" id="label2"/>
        <mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>
        <mx:Button x="10" y="122" label="Submit" id="Submit" click="login_user.send();"/>
    </mx:Panel>
    
</mx:Application>

 下面是后台loginCheck.jsp

<%
    response.setContentType("text/xml");
    out.println("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
    String userName = request.getParameter("username");
    String password = request.getParameter("password");

    //Here we do a simple checking to make sure userName equals to password

    //and then outprints yes or not

    String loginResult = "<loginResult>";
    if (userName.equals(password)) {
        loginResult += "yes";
    } else {
        loginResult += "no";
    }
    loginResult += "</loginResult>";

    out.println(loginResult);
%>

 我的实现很简单，只要判断用户名和密码是否一样就可以了。其实这里可以自己实现数据库的连接，然后来判断用户资料的正确与否比较使用。有时间在完善吧。先这样。