第十章實戰演練：擴展todos到Server端（backbonejs+webpy） · Backbone.js入門教程第二版

上一節簡單介紹了怎么使用webpy搭建一個后端的接口服務，這一節就來簡單實現一下。 ## 10.1 項目結構首先還是來看下項目的結構，然后再一步一步的分析，結構如下: ~~~ src ├── index.html ├── init_sqlite.py ├── models.py ├── server.py ├── static │?? ├── backbone.js │?? ├── destroy.png │?? ├── jquery.js │?? ├── json2.js │?? ├── todos.css │?? ├── todos.js │?? └── underscore.js └── todos.db ~~~ 以上結構可以分為四個部分：模板、靜態資源、后端邏輯處理、后端數據處理，其實最后兩個都屬于后端部分。因為模板和靜態資源和之前沒有太大差異，因此合并在一起介紹。首先來看后端的接口。 ## 10.2 后端接口相對于前端的各種model、collection和view，后端顯得比較簡單。只需要提供可訪問的接口，并且根據POST、PUT、DELETE、GET這四種操作完成對數據庫的CRUD即可（Create,Read,Update,Delete)。先來看models中的代碼，這里對todo表的操作進行了簡單的封裝: ~~~ #coding:utf-8 import web db = web.database(dbn='sqlite', db="todos.db") class Todos(object): @staticmethod def get_by_id(id): return db.select('todos', where="id=$id", vars=locals()) @staticmethod def get_all(): return db.select('todos') @staticmethod def create(**kwargs): db.insert('todos', **kwargs) @staticmethod def update(**kwargs): db.update('todos', where="id=$id", vars={"id": kwargs.pop('id')}, **kwargs) @staticmethod def delete(id): db.delete('todos', where="id=$id", vars=locals()) ~~~ 代碼很簡單，從方法的命名上就知道要完成的功能是什么，這里不得不說一句，任何語言中好的變量或方法的命名，勝過大段的注釋。 model部分沒有具體的業務邏輯，只是針對數據庫進行CRUD操作。下面來看給瀏覽器提供接口的部分。 server部分，提供了前端瀏覽器需要訪問的接口，同時也提供了頁面初始加載時的渲染頁面的功能。server.py的代碼如下: ~~~ #coding:utf-8 import json import web from models import Todos urls = ( '/', 'index', #返回首頁 # 處理POST請求 '/todo', 'todo', # 處理前端todo的請求,對指定記錄進行操作 '/todo/(\d*)', 'todo', # 處理前端todo的請求，返回所有數據 '/todos/', 'todos', ) app = web.application(urls, globals()) render = web.template.render('') # 首頁 class index: def GET(self): # 渲染首頁到瀏覽器 return render.index() class todo: def GET(self, todo_id=None): result = None itertodo = Todos.get_by_id(id=todo_id) for todo in itertodo: result = { "id": todo.id, "title": todo.title, "order": todo._order, "done": todo.done == 1, } return json.dumps(result) def POST(self): data = web.data() todo = json.loads(data) # 轉換成_order, order是數據庫關鍵字, sqlite3報錯 todo['_order'] = todo.pop('order') Todos.create(**todo) def PUT(self, todo_id=None): data = web.data() todo = json.loads(data) todo['_order'] = todo.pop('order') Todos.update(**todo) def DELETE(self, todo_id=None): Todos.delete(id=todo_id) class todos: def GET(self): todos = [] itertodos = Todos.get_all() for todo in itertodos: todos.append({ "id": todo.id, "title": todo.title, "order": todo._order, "done": todo.done == 1, }) return json.dumps(todos) if __name__ == "__main__": app.run() ~~~ 相對于model.py來說，這里做了些數據轉換的操作，如前端backbone通過ajax發過來的數據需要轉換之后才能存入數據庫，而從數據庫取出的數據也要稍加處理才能符合前端todos.js中定義的model的要求。在這個server中，提供了三個四個url，依次功能為：首頁加載、單個todo創建、單個todo查詢修改和刪除、查詢全部。分成四個也主要是依據所選框架webpy的特性。在url之后，是對應一個具體的class，url接受到的請求將有對應的class來處理，比如說?`/todo`?這個url，對應的處理請求的class就是todo。另外對應瀏覽器端發過來的POST、GET、PUT、DELETE請求，class對應的也是相應的方法。這也是選webpy的一個原因。說我了后端提供的接口，以及如何進行處理的原理。我們來看如何修改前端的代碼，才能讓數據發送到后端來。 ## 10.3 修改todos，發送數據到后端這個部分改動比較小，就不貼代碼了。有需要的可以到?`code`?中看。之前的數據是存在localstorage中，是因為引用了localStorage.js文件，并且在collection中聲明了?`localStorage: new Backbone.LocalStorage("todos-backbone")`?。在修改的時候有三個地方需要修改，第一是model的定義，部分代碼： ~~~ var Todo = Backbone.Model.extend({ urlRoot: '/todo', ...... ~~~ 第二個就是collection的修改，去掉了localStorage的聲明，并添加url： ~~~ var TodoList = Backbone.Collection.extend({ url: '/todos/', ...... ~~~ 這樣就搞定了。 ## 10.4 Demo的使用在?`code`?中，如果想要把我的demo在本地運行的話，需要首先運行下?`python init_sqlite.py`?來初始化sqlite3的數據庫，運行完之后會在本地生成一個todos.db的數據庫文件。之后，就可以通過運行?`python server.py`?，然后訪問命令行提示的網址就可以使用了。最后稍稍總結一下，我覺得到這一章為止，對技術比較認真、比較有追求的同學應該知道怎么通過backbonejs和webpy把前后端連起來了。所有的這些文章只是為了幫你打開一扇門，或者僅僅只是一盞燈，具體你的業務邏輯還是需要通過自己的思考來解決。妄圖讓別人幫你實現業務邏輯的人都是切實的不思上進的菜鳥。另外，關于這個Todos的案例，是你在打算把Backbonejs應用于實踐時必須要參考和思考的。雖然到網上搜羅一下`Backbonejs項目實例`?比思考要省心，但是別人的始終是別人的，你不轉化成自己的，始終無法靈活運用。借此告誡那些覺得這個Todo案例沒啥用的同學們。