Blog

Blog

PHODAL

Nodejs Backbone RESTify 用户登陆二

So,继上篇Nodejs Backbone RESTify 创建一个前后端分离的用户登 之后,我们简单地说说,如何用Backbone创建一个简单的用户登陆。

Backbone 用户登陆

1.创建模板

首先我们需要创建一个login.html

<form>
    <label>User</label>
    <input type='text' id="username" name='username' placeholder="Username"></td>

    <label>Password</label>
    <input type="password" id="password" name="password" placeholder="Password">

    <button type="submit" name="submit" id="login">Sign in</button>

</form>

创建一个LoginView.js

复制一个简单的View.js,创建一个简单地events。

define([
    'jquery',
    'underscore',
    'mustache',
    'text!/templates/login.html',
    'js/User',
    'js/UserSession'
],function($, _, Mustache, loginTemplate, User, UserSession){
    'use strict';
    var user = new User();

    var LoginView = Backbone.View.extend ({
        el: $("#content"),

        initialize: function(){

        },
        events: {
            "click #login": "login"
        },
        login: function(event){
            event.preventDefault();
            var userInfo = {
                name: $('#username').val(),
                password: $('#password').val()
            };
            user.login(userInfo, function(){
                UserSession.save({
                    name: userInfo.name,
                    accessToken: userInfo.name
                });
                window.app.navigate('userProfile', true);
            });
        },
        render: function(){
            this.$el.html(Mustache.to_html(loginTemplate, {data:"data"}));
        }
    });

    return LoginView;
});

这样当我们点击id为login的按钮就会促发login函数,在login函数中会读取name和password验证,成功的话然后调用Usersession的save()

创建User.login

一个简单的User.login代码如下所示,

define([
    'jquery',
    'underscore',
    'mustache',
    'js/UserSession'
],function($, _, Mustache, UserSession){
    'use strict';
    function User(){

    }
    User.prototype.login = function(userObject, callback) {
        var LoginAccount = Backbone.Model.extend({
            defaults: {
                name: null,
                password: null
            },
            url: function() {
                return 'http://localhost:8080/login/user';
            }
        });

        var login = new LoginAccount({
            name: userObject.name,
            password: userObject.password
        });

        login.save({}, {
            success: function(model, response) {
                if(response.status === "success"){
                    var name = userObject.name;
                    UserSession.save({
                        "name": name,
                        "accessToken": response.accessToken
                    });
                    callback();
                } else {
                }
            },
            error: function(model, response) {
                callback();
            }
        });
    };

    return User;
});

创建UserSession

下面的代码是谷歌过来的,加了一点小小的修改

define([
    'jquery',
    'underscore',
    'backbone',
    'jquery-cookie'
],function($, _, Backbone){
    'use strict';
    var UserSession = Backbone.Model.extend({
        defaults: {
            'accessToken': null,
            "userName": null
        },
        initialize: function(){
            this.load();
        },
        authenticated: function(){
            return !_.isEmpty($.cookie('accessToken'));
        },
        save: function(authHash){
            $.cookie('name', authHash.name);
            $.cookie('accessToken', authHash.accessToken);
        },
        load: function(){
            this.userName = $.cookie('name');
            this.accessToken = $.cookie('accessToken');
        }
    });

    return new UserSession();
});

这里会在cookie在保存name和accessToken

修改router

如果用户不是登陆的话,就跳转到account/login

    router.on('route:userProfile', function(action) {
        console.log(UserSession);
        if (UserSession.authenticated() == true) {
            var userProfileView = new UserProfileView();
            userProfileView.render();
        } else {
            router.navigate('account/login', true)
        }
    });

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签