9

我正在为正在构建的新应用程序学习 Backbone.js。我需要执行 AJAX 调用（REST SERVICE）来进行身份验证。

这个电话的正确位置在哪里？在模型、视图或其他地方？特别与 Backbone.js MVC 模型相关。

<html>
<head>
<script src="lib/jquery-1.6.1.min.js"></script>
<script src="lib/json2.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>   

<script language="javascript">
      $(function(){
         var LoginView = Backbone.View.extend({
          el: $("#login-form"),

          events: {
            "click #login": "login"
          },

          login: function(){
              alert("Hello");
           }
        });

        window.LoginView = new LoginView();
      });
    </script>   
  </head>
  <body>
    <form action="/login" id="login-form">
      Username: <input type="text" id="username"><br>
      Password: <input type="password" id="password"><br>
      <button id="login">Login</button>
    </form>
  </body>
</html>
4

3 回答 3

13

创建一个身份验证模型，它存储发布状态（用户名、密码、记住我）以及响应状态（登录失败、登录接受）...

App.Model.authentication= Backbone.Model.extend({
    defaults: {
        Username: "",
        Password: "",
        RememberMe: false,
        LoginFailed: false,
        LoginAccepted: false
    },
    url:"api/authentication"
});

更新视图以使用模型：

   $(function () {
    var LoginView = Backbone.View.extend({
        model: new App.Model.authentication(),
        el: $("#login-form"),
        events: {
            "click #login": "login"
        },

        login: function () {
            this.model.save({username: this.$el.find("#username"),
                password: this.$el.find("#password")}, {
                success: function () {
                    /* update the view now */
                },
                error: function () {
                    /* handle the error code here */
                }
            });
        }
    });
}

);

调用 Model.Save() 将向服务器发出一个发布请求，尽管在这种情况下在服务器上您实际上并没有保存任何东西，而是检查凭据并发送回具有相同模型但使用“LoginAccepted”的对象字段设置得当。

不要实现自定义 JQuery AJAX 帖子 - 它不符合骨干网的精神，它通过其 REST 接口在后台为您处理这一切。

有关 REST 接口以及主干在此处使用的各种 REST 操作和 URL 的更多详细信息：http: //codebyexample.info/2012/04/30/backbone-in-baby-steps-part-3/

关于 AJAX 与 model.save() 辩论的另一件事。如果您的应用程序是像 IRC 这样的无状态聊天室 - 它向聊天室中的其他用户发送消息但不集中保存消息......您是否会丢弃所有骨干网的 REST 功能并使用自定义 AJAX 调用重新实现它们因为您实际上并不是在“保存”，而实际上只是在“发送”。仅仅因为语义，这将花费你大量的工作来重新实现已经存在的功能。始终将 model.save() 读取为 model.post() - 它不仅仅是为了保存 - 它是为了发送。

于 2012-07-04T16:29:35.977 回答
11

您总是从视图开始，因为您的 DOM 交互（包括表单提交）发生在视图中。

然后，如果我是你，我会在 User 模型中添加一个自定义方法，并从视图中调用该方法。登录方法不完全适合本机 Backbone 同步，因为您没有尝试添加/更新/检索任何内容（请注意，出于安全原因，您不想从服务器加载用户密码或密码哈希）。因此，您可以在不调用 Backbone fetch() 的情况下进行常规 Ajax 调用。所以，给你：

var UserModel = Backbone.Model.extend({
  ...
  checkLogin: function(name, password) {
    var self = this;
    $.post('/login', { name: name, password: password }, function(data) {
      self.set(data); // data should be in JSON and contain model of this user
    }, 'json').error(
      self.trigger('loginError'); // our custom event
    );
  }
});

和观点：

var UserView = Backbone.View.extend({
  events: {
    'click .login': 'loginSubmit'
  },

  initialize: function() {
     _.bindAll(this, 'loginSubmit', 'loginSuccess', 'loginError');
     this.model.bind('change', this.loginSuccess);
     this.model.bind('loginError', this.loginError);
  },

  loginSubmit: function() {
    var name = 'username', // you get it from some element
        password = '***'; // you get it from another element
    this.model.checkLogin(name, password);
  },

  loginSuccess: function() {
    alert ('You have been logged in');
    console.log(this.model); // should log loaded user model
  },

  loginError: function() {
    alert ('Problem with login');
  }
});

确保将 UserModel 实例传递给 UserView 实例，例如：

var userModel = new UserModel,
    userView = new UserView({ model: userModel });
于 2012-07-04T16:24:03.770 回答
0

ReST不是一个标准，只是一个规范，任何实际的开发人员都会在适当的时候混合使用 ReST 和 RPC。也就是说，这些答案都没有指出服务器响应应该返回一个令牌（sessionID、JSON Web 令牌等）并删除纯文本密码的事实。不这样做会带来安全风险。

于 2014-12-14T14:27:45.847 回答