Sencha touch 2用户登录示例

时间:2013-03-28 16:10:53

标签: sencha-touch sencha-touch-2

我是sencha touch的新手,并尝试制作一个用户必须登录才能使用该应用的应用。此外,我已经为用户身份验证创建了restful api,如果身份验证正确,则会以json格式响应用户。用户身份验证的api url如下所示:http://api-url/user/$username/$password.

我的登录视图:

Ext.define('NCAPP.view.tablet.LoginForm', {
extend: 'Ext.form.Panel',
xtype:'loginForm',
id:'loginForm',

requires:[
    'Ext.form.Panel',
    'Ext.form.FieldSet',
    'Ext.field.Password',
    'Ext.Img',
    'Ext.field.Toggle'
],
config: {
    items: [
        {
            xtype: 'image',
            src:'resources/img/netcenter_logo.png',
            height: 100
        },
        {
            xtype: 'fieldset',
            title: 'NCAPP LOGIN:',
            items: [

                {
                    xtype: 'textfield',
                    id:'fldUsername',
                    name:'username',
                    placeHolder: 'Username'
                },
                {
                    xtype: 'passwordfield',
                    id:'fldPassword',
                    name:'passowrd',
                    placeHolder: 'Password'
                }
            ]
        },
        {
            xtype: 'button',
            id: 'btnLogin',
            text: 'Login'

        }
    ]
}

});

我也有用户模型:

Ext.define('NCAPP.model.User', {
extend:'Ext.data.Model',

config:{
    fields:[
        { name:'id', type: 'int'},

        { name: 'username', type: 'string'},
        { name: 'netshop_id', type:'int'},
        { name: 'firstname', type: 'string'},
        { name: 'lastname', type: 'string'},
        { name: 'address', type: 'string'},
         { name:'password', type:'string'},
        ]


}

});

和我的登录控制器:

Ext.define('NCAPP.controller.tablet.LoginController', {
extend: 'Ext.app.Controller',    
config: {
    refs: {   
        loginForm:'loginForm'
    },
    control: {
        '#btnLogin':{
            tap:'onLoginButtonTap'
        }            
    }
},
onLoginButtonTap:function(){

},
init:function(application){

}    

});

正如我前面提到的,我的api完全是宁静的。我想我不能使用ajax代理,我必须使用rest代理。我最大的问题是如何将用户名和密码传递给restful api?

任何身体都可以帮助我(最好用例子)吗?

1 个答案:

答案 0 :(得分:3)

您的RESTful API只需要几个精度。在您尝试对用户进行身份验证时,登录名和密码即使加密/加密也应该从不在您的网址中。相反,更喜欢带有url api-url / user /的POST请求和包含用户名和密码的POST消息(例如json)。

对于ajax请求,在你的控制器中,你应该做一些事情(假设一切正常):

Ext.define('NCAPP.controller.tablet.LoginController', {
    extend: 'Ext.app.Controller',    
    config: {
        refs: {   
            loginForm:'loginForm'
        },
        control: {
            '#btnLogin':{
                tap:'onLoginButtonTap'
            }            
        }
    },
    onLoginButtonTap:function(){
        var values = this.getLoginForm().getValues();
        var jsonToPost = {};
        jsonToPost.user = values.username;
        jsonToPost.passwd = values.password;
        Ext.Ajax.request({
            url: 'your-url/user',
            method: 'POST',
            params: jsonToPost,
            success: function(response) {
                // Server send a 200 code response. it means it understood the request and was able to deal with it
                // you should check whether or not it is a success. Your answer JSON should contain this information
            },
            failure: function(response) {
                // any other response than a 200
            }
        });
    },
    init:function(application){

    }    
});

代码已经过测试。