0

extjs の MVC アーキテクチャを理解するために、extjs MVC を使用して簡単なログイン ページを作成しました。以下に示すように、json データをストアに取得しようとしています。次に、入力されたログイン資格情報を使用して、そのデータ内の各ユーザー名とパスワードを確認します。私が今混乱しているのは、storeフォルダーに存在する取得されたjsonデータからユーザー名とパスワードをフォルダーにチェックする方法viewですか? (以下のコードは、問題のある関連コードのみです)

クライアント側でチェックしているため、これがセキュリティ上の脅威を引き起こす可能性があることを認識しています。

「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'
        }
   }
});

loginResponse.json

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

1 に答える 1

1

コードのチェック部分をコントローラーに配置する必要があります（ビューはプレゼンテーション用です）。ビューで、ログインフィールドとパスワードフィールドを使用してフォームを定義します。フォーム（ ）ボタンのコントローラーキャッチclickイベントで、フォーム値（ログイン+パスワード）を取得し、メソッドを使用して、資格情報が適合するかどうかを確認します。OKLoginExt.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()とthis.getPasswordField();を使用してユーザー名とパスワードのフィールド値を取得します。
  2. query()ユーザー名用に保存します
  3. ユーザー名がストアに存在する場合は、パスワードが適合するかどうかを確認します。
于 2013-02-13T08:21:34.353 に答える