0

我使用 extjs MVC 创建了一个简单的登录页面，以了解 extjs 的 MVC 架构。正如您在下面看到的，我正在尝试将 json 数据放入存储中，然后我将使用输入的登录凭据检查该数据中的每个用户名和密码。我现在感到困惑的是，如何从文件夹中存在的检索到的 json 数据中检查用户名和密码store到view文件夹中？（以下代码只是有问题的相关代码）

我知道这可能会引发安全威胁，因为我正在客户端进行检查。

“查看”文件夹 --> Code.js

function checkJson(username, password){
    //if matched, return true.
    //else, return false.
}

“模型”文件夹 --> Code.js

Ext.define('AM.model.User', {
   extend: 'Ext.data.Model',
   fields: ['name', 'email']
});

“商店”文件夹-> Code.js

Ext.define('LoginPage.store.Code', {
   extend: 'Ext.data.Store',
   model: 'LoginPage.model.Code',
   autoLoad: true,


   proxy: {
        type: 'ajax',
        api: {
            read: 'data/loginResponse.json',
            update: 'data/checkCredentials.json'  //Contains:  {"success": true}
        },
        reader: {
            type: 'json',
            root: 'loginResponse',
            successProperty: 'success'
        }
   }
});

登录响应.json

{
"form": {
   "login": [
     {
       "username": "venkat",
       "password": "123"
     },
     {
       "username": "admin",
       "password": "345"
     }
   ]
}
4

1 回答 1

1

您应该将代码的检查部分放到控制器中（视图用于演示）。在视图中定义一些带有登录名和密码字段的表单。在 Controller catch clickevent on form OK( Login) 按钮中，获取表单值（登录名 + 密码），然后使用Ext.data.Store.query()方法来查找凭据是否适合：

在这里查看如何在 MVC 中使用控制器来捕获事件的示例；

在您的控制器中放置：

init: function() {
    this.control({
        '#form_ok_button': { // this is the `id` property of your form's Login button
            click: function(button) {
                 var fValues = button.up('form').getValues(); // Assume your button is bound to the form
                 // Or you can use `Controller.refs` property (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-cfg-refs) to get form
                 var matched = store.query('username', fValues.username);
                 if(matched.length && matched[0].get('password') === fValues.password) {
                     // login OK!
                 }
            }
        }
    });
},

如何使用refs（在控制器中）：

refs: [
   { ref: 'usernameField', selector: '#username_field' }, // username field id is "username_field"
   { ref: 'passwordField', selector: '#password_field' }, // password field id is "password_field"
],

init: function() {  
   this.control({
       '#form_ok_button': {
            click: function() {
                // with `refs` autogetters are created for every `ref`:
                var username_field = this.getUsernameField();
                var password_field = this.getPasswordField();
            }
        }
   })
}

你可以在referencing 这里阅读。

对于Ext.app.Controller.stores数组中的每个存储，也会创建自动获取器（在您的情况下，用于控制器内部的Code存储this.getCodeStore()）。

这是流程：

  1. this.getUsernameField()您可以使用and获得用户名和密码字段值this.getPasswordField()；
  2. 您query()存储用户名
  3. 如果用户名存在于商店中，则检查密码是否合适。
于 2013-02-13T08:21:34.353 回答