Django+Tastypie作后端,RequireJS+Backbone作前端的TodoMVC
一、配置好环境
接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子
注意:直接本地用backbone.localStorage插件运行TodoMVC会报错,因为RequireJS工作时,加载js文件及template文件是异步加载,这就好比ajax异步请求需要涉及到跨域的问题,文件必须要在同一下域下才能被异步加载。
因此,直接把所有文件放到上篇文件的static(E:\project\tastypie\mysite\blog\static)目录下,把django启动一下就可以了,用backbone.localStorage本地运行,在浏览器输入http://localhost:8000/static/index.html 此时应该可以正常运行TodoMVC了
二、把backbone.localStorage切换到本地连接tastypie的api接口的url
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
/*global define */
define([
'underscore',
'backbone',
//'backboneLocalstorage', //1,这个模块不需要用到,注释掉
'models/todo'
], function (_, Backbone,Todo) {//1,跟据RequireJS规范这里把store删掉
'use strict'; var TodosCollection = Backbone.Collection.extend({
// Reference to this collection's model.
model: Todo, // Save all of the todo items under the `"todos"` namespace.
//localStorage: new Store('todos-backbone'), //2,这里也不需要用到
url: '/api/v1/todo/', //3,配置api接口,跟上篇一样 parse: function (response) {//4,取到objects真正数据,把meta数据过滤掉
return response.objects;
}, // Filter down the list of all todo items that are finished.
completed: function () {
return this.where({completed: true});
}, // Filter down the list to only todo items that are still not finished.
remaining: function () {
return this.where({completed: false});
}, // We keep the Todos in sequential order, despite being saved by unordered
// GUID in the database. This generates the next order number for new items.
nextOrder: function () {
return this.length ? this.last().get('id') + 1 : 1;//5,把order改为id,因为我们数据库里面是自动生成了递增的id默认是0,1,2...
}, // Todos are sorted by their original insertion order.
comparator: 'order' //无影响切换过来后没用到
}); return new TodosCollection();
});
2)最后E:\project\tastypie\mysite\blog\static\js\views\app.js 把appview文件中的order改为id
// Generate the attributes for a new Todo item.
newAttributes: function () {
return {
title: this.$input.val().trim(),
id: Todos.nextOrder(),
completed: false
};
},
搞定,可以测试一下!http://localhost:8000/static/index.html 此时应该可以正常运行TodoMVC了,数据是由sqlLite提供了!
Django+Tastypie作后端,RequireJS+Backbone作前端的TodoMVC的更多相关文章
- Django+Tastypie作后端,Backbone作前端的TodoMVC
TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...
- k8s使用ceph的rbd作后端存储
k8s使用rbd作后端存储 k8s里的存储方式主要有三种.分别是volume.persistent volumes和dynamic volume provisioning. volume: 就是直接挂 ...
- Django框架之模板语言特殊标记(将后端的数据显示到前端)
后端代码 def GetMain(request): return render( request, "main.html", { "user1":" ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- [总结帖] 后端MVC V.S. 前端MVVM
Web编年史: Web1.0 —— 静态页面.简单预处理语言草案:PHP.JSP.ASP Web2.0 —— 企业级架构.一站式解决方案(MVC):J2EE.Spring.Asp.net Web2.5 ...
- 细说 Django — web 前后端分离
一.所谓的前后端分离 1.渊源 前端发展史 2.特点 前端:负责 View 和 Controller 层 后端:只负责 Model 层,业务处理/数据等 3.优缺点 优点:解耦,解放前端,职责明确 缺 ...
- synergy配置 Ubuntu作Server, Win 7作client
Synergy 允许你轻松地在你办公桌上多台计算机之间共享你的鼠标和键盘,它免费并且开放源代码.你只要将鼠标(指针)从一台计算机的屏幕边缘移出到另一个屏幕就行 了.甚至可以共享你的剪贴板.你所需要的仅 ...
- 前后端分离之Web前端架构设计
架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...
- 使用Docker跑MySQL 作为Django的存储后端
Docker的好处不科普了,用过的都说好. 不想污染自己开发机器上的文件环境,本萌新使用Docker运行Mysql,Redis来作为Django的存储后端和缓存. 在第一次安装过程中,我遇到了一些问题 ...
随机推荐
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- javascript面向对象:继承、多态
继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现 ...
- PHP中判断变量为空的几种方法
判断变量为空,在许多场合都会用到,同时自己和许多新手一样也经常会犯一些错误, 所以自己整理了一下PHP中一些常用的.判断变量为空的方法. 1. isset功能:判断变量是否被初始化本函数用来测试变量是 ...
- C语言基础(2)-常量
常量就是在程序运行中不可变化的量. #define #define MAX 100 定义了一个常量名字叫MAX,值是100,用#define定义的常量一般用大写字母. #define是一个预编译指令, ...
- Verilog笔记——YUV2RGB的模块测试
1 YUV2RGB的模块如下: module yuv2rgb( clk, //时钟输入 rstn, //复位输入,低电平复位 y_in, //变换前Y分量输出 cb_in, //变换前Cb分量输出 c ...
- Coursera系列-R Programming第二周
博客总目录,记录学习R与数据分析的一切:http://www.cnblogs.com/weibaar/p/4507801.html --- 好久没发博客 且容我大吼一句 终于做完这周R Progra ...
- KEGG数据库的使用方法与介绍
KEGG数据库的使用方法与介绍 KEGG的数据 KEGG中的pathway是根据相关知识手绘的,这里的手绘的意思可能是指人工以特定的语言格式来确定通路各组件的联系:基因组信息主要是从NCBI等数据库中 ...
- .htaccess 基础教程(二)
今天要介绍的:.htaccess的第一个应用是自定义错误页面,这将使你可以拥有自己的.个性化的错误页面(例如找不到文件时),而不是你的服务商提供的错误页或没有任何页面.这会让你的网站在出错的时候看上去 ...
- mongDB-- 3. 查询操作
1. 准备工作 (1)启动mongo 进入mongo安装目录的bin/ 目录 , ./mongod (2)启动mongo客户端 ./mongo (3) 查看所有库 show dbs; (4) 切换到l ...
- netty 解析http请求 post
http://blog.csdn.net/neosmith/article/details/50383548