检查 json 数据以在 extjs 中进行比较

Posted 2023-02-26

【中文标题】检查 json 数据以在 extjs 中进行比较

【英文标题】：check the json data for comparing in extjs

【发布时间】：2013-02-13 08:12:52

【问题描述】：

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

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

'view'文件夹 --> Code.js

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

'model'文件夹 --> Code.js

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

'store'文件夹 --> 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'
        
   
);

loginResponse.json

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

【参考方案1】：

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

查看here 了解如何在 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();
            
        
   )

你可以阅读referencinghere。

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

流程如下：

您使用this.getUsernameField() 和this.getPasswordField() 获得用户名和密码字段值； 你 query() 存储用户名 如果商店中存在用户名，则检查密码是否合适。

【讨论】：

感谢您的回复。 form 这里是什么？

+1 感谢您让我清楚地了解结构:)。问题是我的按钮没有绑定到任何形式，它只是存在于一个容器中。该容器还有两个文本字段，其中存在用户名和密码。我正在获取这些文本字段值并尝试在函数中进行匹配，即function checkJson(username, password)，如我的帖子中所示。

另外，我收到一个错误Uncaught ReferenceError: store is not defined 如何定义存储变量？(var store = ?) 请帮助我是新手。

谢谢，我刚刚添加了缩进以供理解。 （希望你不介意）

感谢您让我了解 extjs 中的精彩内容，但我认为您还没有理解我想要在这里得到什么。我想检查存在于'controller`文件夹中的函数中存在的'store'文件夹中的每个用户名和密码值，Code.js（从json中检索）（从'view'文件夹更改为'controller'文件夹好建议）。函数是“控制器”文件夹中的function checkJson(username, password)。如果用户名和密码匹配，此函数返回 true，否则返回 false。对不起，如果我早些时候因为我糟糕的英语让你感到困惑。 :)