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数据库进行存取啦!哈哈