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

Django+Tastypie作后端,Backbone作前端的TodoMVC的更多相关文章

  1. 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

    一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...

  2. Django+Tastypie作后端,RequireJS+Backbone作前端的TodoMVC

    一.配置好环境 接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子 注意:直接本地用backbone.localStorage插件运行TodoMVC会报 ...

  3. k8s使用ceph的rbd作后端存储

    k8s使用rbd作后端存储 k8s里的存储方式主要有三种.分别是volume.persistent volumes和dynamic volume provisioning. volume: 就是直接挂 ...

  4. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  5. 旨在脱离后端环境的前端开发套件 - IDT Server篇

    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...

  6. 旨在脱离后端环境的前端开发套件 - IDT之Server篇

    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...

  7. Django + Taro 前后端分离项目实现企业微信登录

    前言 还是最近在做的一个小项目,后端用的是Django搭配RestFramework做接口,前端第一次尝试用京东开源的Taro框架来做多端(目前需要做用于企业微信的H5端和微信小程序) 本文记录一下企 ...

  8. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

  9. 使用Docker跑MySQL 作为Django的存储后端

    Docker的好处不科普了,用过的都说好. 不想污染自己开发机器上的文件环境,本萌新使用Docker运行Mysql,Redis来作为Django的存储后端和缓存. 在第一次安装过程中,我遇到了一些问题 ...

  10. 前后端分离框架前端react,后端springboot跨域问题分析

    前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上,也是属于跨域问题的一种,所以必 ...

随机推荐

  1. JavaScript中getBoundingClientRect()方法详解

    获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...

  2. Shell文件权限和脚本执行

    一.预备知识 1.shell的作用   2.常识 (1)Tab键自动补全   使用Terminal时,输入命令的前几个字母,敲tab会自动补全命令或文件名.目录等. 好处:操作速度更快:不容易出错: ...

  3. MYSQL入门全套(第三部)

    MYSQL入门全套(第一部) MYSQL入门全套(第二部) 索引简介 索引是对数据库表中一个或多个列(例如,employee 表的姓名 (name) 列)的值进行排序的结构.如果想按特定职员的姓来查找 ...

  4. QQ空间HD(6)-实现自定义的选项卡切换效果

    DJTabbarButton.m #import "DJTabbarButton.h" @implementation DJTabbarButton - (instancetype ...

  5. [NHibernate]并发控制

    目录 写在前面 文档与系列文章 并发控制 乐观并发控制(Optimistic Concurrency) 一个例子 悲观并发控制(Pessimistic Concurrency) 总结 写在前面 上篇文 ...

  6. sql clear dblog

    USE [master]GOALTER DATABASE ndFlightPolicy SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE ndFligh ...

  7. solr-web界面增加登录认证

    目录 配置tomcat-user.xml 配置web.xml 界面展示 回到顶部 配置tomcat-user.xml 找到 tomcat 下 conf 文件下增加 tomcat-user.xml &l ...

  8. tyvj1005 采药

    描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:“孩子,这个山洞 ...

  9. iphone如何导出微信聊天记录到电脑?

    有个小美眉买了个iphone,但发现自己就是一小白,很多功能都不会用,微信倒是用得挺上手的,可以晚上聊到三四点,流量直接飙升500MB.最近她说手机太卡了,问ytkah帮她整一下.拿起她的IPhone ...

  10. JBOSS 5 session时间配置

    C:\jboss-5.1.0.GA\server\default\deployers\jbossweb.deployer web.xml <session-config>     < ...