Django+Tastypie作后端，Backbone作前端的TodoMVC

TodoMVC是各种js框架入门的比较经典的例子，详细可查看github地址https://github.com/tastejs/todomvc

接着上篇文章，

1，先在github上把backbone的todoMVC的例子下载下来

2，给其建立一个名为Todo的model(E:\project\tastypie\mysite\blog\models.py)

class Todo(models.Model):
    title = models.CharField(max_length=200)
    completed=models.BooleanField(default=False)

    def __str__(self):
        return self.title

    def save(self, *args, **kwargs):
        return super(Todo,self).save(*args, **kwargs)

参照前几篇的文章在命令行输入命令把其数据表应用到sqllite数据库。
3，添加api resource 和 配置tastypie的api接口的url

E:\project\tastypie\mysite\blog\api\resources.py

from tastypie.authorization import Authorization
from tastypie import fields
from tastypie.resources import ModelResource
from blog.models import Todo
class TodoResource(ModelResource):
    class Meta:
        queryset = Todo.objects.all()
        resource_name = 'todo'
        authorization = Authorization()
        fields=['id','title','completed']

主url E:\project\tastypie\mysite\blog\urls.py

from django.conf.urls import patterns, include, url
from django.contrib import admin
from tastypie.api import Api
from blog.api.resources import EntryResource,UserResource,TodoResource

v1_api = Api(api_name='v1')
v1_api.register(TodoResource())

urlpatterns = patterns('',
    # Examples:
    (r'^blog/', include('blog.urls',namespace="blog")),
    (r'^api/', include(v1_api.urls)),
    (r'^admin/', include(admin.site.urls)),
)

子url E:\project\tastypie\mysite\blog\urls.py

from django.conf.urls import patterns,url
from blog import views

urlpatterns=patterns('',
    url(r'^$',views.IndexView.as_view(),name='index'),
)

配置一下view，E:\project\tastypie\mysite\blog\views.py

from django.shortcuts import render
from django.views import generic

# Create your views here.
class IndexView(generic.ListView):
    template_name='blog/index.html'
    context_object_name=''
    def get_queryset(self):
        return ''

4，把github上下载的backbone todomvc的静态文件(js,html,css文件)放到相应的目录下
index.html文件放到E:\project\tastypie\mysite\blog\templates\blog\index.html

其他js和css文件都放到新创建的E:\project\tastypie\mysite\blog\static\todos目录下

5，可以改改index.html文件中的js与css文件的引用路径，先试试用浏览器的localstorage本地跑起来看看

<link rel="stylesheet" href="/static/todos/bower_components/todomvc-common/base.css">
<script src="/static/todos/bower_components/todomvc-common/base.js"></script>
        <script src="/static/todos/bower_components/jquery/dist/jquery.js"></script>
        <script src="/static/todos/bower_components/underscore/underscore.js"></script>
        <script src="/static/todos/bower_components/backbone/backbone.js"></script>
        <script src="/static/todos/bower_components/backbone.localStorage/backbone.localStorage.js">//等会要注释掉
        <script src="/static/todos/js/models/todo.js"></script>
        <script src="/static/todos/js/collections/todos.js"></script>
        <script src="/static/todos/js/views/todo-view.js"></script>
        <script src="/static/todos/js/views/app-view.js"></script>
        <script src="/static/todos/js/routers/router.js"></script>
        <script src="/static/todos/js/app.js"></script>

6，本地运行没问题后，现在来改backbone前端js代码让其去连Tastypie的api

1）改backbone的model文件与collection文件

E:\project\tastypie\mysite\blog\static\todos\js\models\todo.js 添加urlRoot为tastypie的api接口

app.Todo = Backbone.Model.extend({
。。。
        urlRoot: '/api/v1/todo/',
。。。
    });

E:\project\tastypie\mysite\blog\static\todos\js\collections\todos.js 把localStorage那句注释掉，添加url为tastypie的api接口 和 接口数据解析函数parse去获取objects数据（注意：tastypie返回的json数据格式是{meta:{},objects:[{真正数据}]}）

    var Todos = Backbone.Collection.extend({
        。。。
        //localStorage: new Backbone.LocalStorage('todos-backbone'),
        url: '/api/v1/todo/',

        parse: function (response) {
            return response.objects;
        },

        。。。
    });

最后把　app-view.js和上面todos.js文件中的order改为id (这个id在tastypie中是个默认的int字段)

2)再运行django web服务器，尝试运行看看

TodoMVC已经由localstorage存取切换到用sqlLite数据库进行存取啦！哈哈