Question

我正在开发一个简单的登录页面，其中我需要将用户名字段中任何用户输入的值与点击“登录按钮”的json数据存储进行比较。我的问题是，我们可以从数组中的json存储中获取用户名列表并与textfield值进行比较吗？如果是这样，怎么样？

我的nSpaceIndex.html

<html>
    <head>
        <title>nSpace | Expense / Project Solutions</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
        <script type="text/javascript" src="extjs/ext-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>

    <body>
    </body>
</html>

app.js：

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'nSpace',
    controllers: [
        'nSpaceController'
    ],
    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'loginView'
            }
        });
    }
});

我的nSpaceController.js：

Ext.define('nSpace.controller.nSpaceController', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    views: [
        'login.loginView'
    ],
    model: 'loginModel',
    init: function() {
        this.control({
            "#loginButton": {
                click: this.onLoginButtonClick
            }
        });
    },
    onLoginButtonClick: function(){
                //var jsonArray = store.Users.data.items
                //console.log(jsonArray);
                            // I NEED TO GET THE REFERENCE OF MY STORE: USERS TO COMPARE
                            var logUserName = Ext.getCmp('getUserName').getValue();
                var logPassword = Ext.getCmp('getPassword').getValue();             
                if(logUserName == 'user01' && logPassword == 'password01'){
                    Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
                }
                else if(logUserName == 'user02' && logPassword == 'password02'){
                    Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
                }
                else{
                    Ext.MessageBox.show({title: 'OOPS!!!', msg: 'Please Enter Valid Details', icon:Ext.MessageBox.WARNING});
                }
    },

});

我的loginModel.js：

Ext.define('nSpace.model.loginModel', {
    extend: 'Ext.data.Model',
    fields: ['loginusername', 'password']
});

Users.js：

Ext.define('nSpace.store.Users', {
    extend: 'Ext.data.Store',
    model: 'nSpace.model.loginModel',

    autoLoad : true,
    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

loginView.js：

Ext.define('nSpace.view.login.loginView' ,{
    extend: 'Ext.form.Panel',
    alias: 'widget.loginView',
    store: 'Users',
    title: 'nSpace | Login',
    frame:true,
    bodyPadding: 5,
    width: 350,
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'User Name',
        name: 'loginusername',
        id: 'getUserName',
        allowBlank: false
    },{
        fieldLabel: 'Password',
        inputType: 'password',
        id: 'getPassword',
        name: 'password',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Sign Up',
        handler: function() {
           // location.href = 'signUp.html';
        }
    },{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Login',
        id:'loginButton',
        formBind: true, //only enabled once the form is valid
        disabled: true,
    }],
    renderTo: Ext.getBody()
});

users.json：

{
    "success": true,
    "users": [
        {"loginusername": 'user01', "password": 'password01'},
        {"loginusername": 'user02', "password": 'password02'}
    ]
}

Answer 1

在this.control上面的init函数内部试着用这个..

var store = this.getUsersStore();
        store.load({
            callback:function(){
                  var l =  store.first();
                  console.log(l.get("password"));
          }
        });

这是你可以检查的方法

store.each(function(rec){
        if (rec.get('password') === value) {
            display = rec.get('username');
            return false;
        }
    });

Answer 2

正如其他用户所指出的那样，在应用程序的客户端执行授权是微不足道的。但是你已经声明这不是一个问题，因此我将回答你的问题而不解决这种方法明显的安全漏洞。

我发现您正在使用Ext.getCmp()，因此您的组件已分配了id。这通常被认为是不好的做法，因为id属性是全局的，因此如果有两个组件使用相同的id进行实例化，则应用程序将崩溃。您可能会发现将组件分配为itemId并创建引用以便轻松检索Controller的{{1}}定义中的组件非常有用。

例如：

refs[]

检索对商店的引用，并搜索提供的用户...

Ext.define('nSpace.controller.nSpaceController', {

... other store/model/view here ...

refs: [{
    name: 'userNameField', // makes magic method 'getUserNameField()'
    selector: 'textfield[name=loginusername]',
    xtype: 'textfield'
},{
    name: 'passwordField', // makes magic method 'getPasswordField()'
    selector: 'textfield[name=password]',
    xtype: 'textfield'
}],

this.control({ .. observe events here .. });
});

Extjs - 如何在控制器中引用json数据？

2 个答案: