Backbone.js RESTful API #

RESTful API设计原则
├── 资源导向：URL表示资源
├── HTTP方法：使用标准HTTP方法
├── 无状态：每个请求独立
└── 统一接口：一致的API设计

var User = Backbone.Model.extend({
    urlRoot: '/api/users'
});

var user = new User({ id: 1 });
console.log(user.url());

var User = Backbone.Model.extend({
    urlRoot: '/api/users',
    
    url: function() {
        if (this.isNew()) {
            return this.urlRoot;
        }
        return this.urlRoot + '/' + this.id;
    }
});

var Users = Backbone.Collection.extend({
    model: User,
    url: '/api/users'
});

var users = new Users();
console.log(users.url);

var User = Backbone.Model.extend({
    urlRoot: function() {
        return '/api/' + this.get('type') + '/users';
    }
});

var user = new User({ type: 'admin', id: 1 });
console.log(user.url());

var Comment = Backbone.Model.extend({
    initialize: function(attrs, options) {
        this.postId = options.postId;
    },
    
    urlRoot: function() {
        return '/api/posts/' + this.postId + '/comments';
    }
});

var comment = new Comment({ id: 1 }, { postId: 123 });
console.log(comment.url());

var User = Backbone.Model.extend({
    urlRoot: '/api/users'
});

var user = new User();
user.save({ name: '张三', email: 'zhangsan@example.com' });

{
    "name": "张三",
    "email": "zhangsan@example.com"
}

user.save(attrs, {
    headers: {
        'X-Custom-Header': 'value',
        'Accept': 'application/json'
    }
});

Backbone.ajax = function(request) {
    request.contentType = 'application/json';
    return $.ajax(request);
};

var User = Backbone.Model.extend({
    urlRoot: '/api/users',
    
    sync: function(method, model, options) {
        if (method === 'create' || method === 'update') {
            options.data = JSON.stringify({
                user: model.toJSON()
            });
        }
        return Backbone.sync(method, model, options);
    }
});

var User = Backbone.Model.extend({
    urlRoot: '/api/users',
    
    parse: function(response) {
        return response.data || response;
    }
});

var User = Backbone.Model.extend({
    parse: function(response) {
        response.profile = new Profile(response.profile);
        return response;
    }
});

var Users = Backbone.Collection.extend({
    url: '/api/users',
    
    parse: function(response) {
        this.total = response.total;
        this.page = response.page;
        return response.items;
    }
});

var Users = Backbone.Collection.extend({
    url: '/api/users',
    
    parse: function(response) {
        this.pagination = {
            total: response.total,
            page: response.page,
            perPage: response.per_page,
            totalPages: response.total_pages
        };
        return response.data;
    }
});

var User = Backbone.Model.extend({
    urlRoot: '/api/users',
    
    defaults: {
        name: '',
        email: '',
        role: 'user'
    },
    
    validate: function(attrs) {
        if (!attrs.name) return '姓名不能为空';
        if (!attrs.email) return '邮箱不能为空';
    },
    
    parse: function(response) {
        return response.user || response;
    }
});

var Users = Backbone.Collection.extend({
    model: User,
    url: '/api/users',
    
    parse: function(response) {
        return response.users || response;
    },
    
    getActive: function() {
        return this.filter(function(user) {
            return user.get('active');
        });
    }
});

var Post = Backbone.Model.extend({
    urlRoot: '/api/posts',
    
    defaults: {
        title: '',
        content: '',
        author: null,
        tags: [],
        published: false
    },
    
    publish: function() {
        this.save({ published: true }, {
            url: this.url() + '/publish'
        });
    },
    
    unpublish: function() {
        this.save({ published: false }, {
            url: this.url() + '/unpublish'
        });
    },
    
    addComment: function(content) {
        var self = this;
        return $.ajax({
            url: this.url() + '/comments',
            method: 'POST',
            data: JSON.stringify({ content: content }),
            contentType: 'application/json'
        });
    }
});

var SearchCollection = Backbone.Collection.extend({
    url: '/api/search',
    
    search: function(query, options) {
        options = options || {};
        options.data = { q: query };
        return this.fetch(options);
    },
    
    parse: function(response) {
        this.query = response.query;
        this.total = response.total;
        return response.results;
    }
});

var searchResults = new SearchCollection();
searchResults.search('backbone').then(function() {
    console.log('找到', searchResults.total, '条结果');
});

$(document).ajaxError(function(event, xhr, settings, error) {
    if (xhr.status === 401) {
        console.log('未授权，请登录');
    } else if (xhr.status === 403) {
        console.log('禁止访问');
    } else if (xhr.status === 404) {
        console.log('资源不存在');
    } else if (xhr.status >= 500) {
        console.log('服务器错误');
    }
});

user.save(attrs, {
    success: function(model, response) {
        console.log('保存成功');
    },
    error: function(model, xhr) {
        if (xhr.status === 422) {
            var errors = xhr.responseJSON.errors;
            console.log('验证错误:', errors);
        }
    }
});

user.on('error', function(model, xhr) {
    console.log('请求失败:', xhr.status);
});

user.fetch();

var APIClient = {
    baseUrl: '/api',
    
    request: function(method, path, data) {
        return $.ajax({
            url: this.baseUrl + path,
            method: method,
            data: data ? JSON.stringify(data) : null,
            contentType: 'application/json',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token')
            }
        });
    },
    
    get: function(path) {
        return this.request('GET', path);
    },
    
    post: function(path, data) {
        return this.request('POST', path, data);
    },
    
    put: function(path, data) {
        return this.request('PUT', path, data);
    },
    
    patch: function(path, data) {
        return this.request('PATCH', path, data);
    },
    
    delete: function(path) {
        return this.request('DELETE', path);
    }
};

var User = Backbone.Model.extend({
    sync: function(method, model, options) {
        var path = model.isNew() ? '/users' : '/users/' + model.id;
        
        switch (method) {
            case 'read':
                return APIClient.get(path);
            case 'create':
                return APIClient.post('/users', model.toJSON());
            case 'update':
                return APIClient.put(path, model.toJSON());
            case 'patch':
                return APIClient.patch(path, options.attrs || model.changedAttributes());
            case 'delete':
                return APIClient.delete(path);
        }
    }
});

var PagedCollection = Backbone.Collection.extend({
    initialize: function(models, options) {
        this.page = 1;
        this.perPage = options && options.perPage || 20;
        this.total = 0;
    },
    
    fetchPage: function(page, options) {
        options = options || {};
        options.data = _.extend(options.data || {}, {
            page: page,
            per_page: this.perPage
        });
        
        var self = this;
        return this.fetch(options).done(function() {
            self.page = page;
        });
    },
    
    parse: function(response) {
        this.total = response.total;
        this.totalPages = response.total_pages;
        return response.data;
    },
    
    hasNextPage: function() {
        return this.page < this.totalPages;
    },
    
    hasPrevPage: function() {
        return this.page > 1;
    },
    
    nextPage: function() {
        if (this.hasNextPage()) {
            return this.fetchPage(this.page + 1);
        }
    },
    
    prevPage: function() {
        if (this.hasPrevPage()) {
            return this.fetchPage(this.page - 1);
        }
    }
});