在Python的web框架中編寫創(chuàng)建日志的程序的教程
在Web開發(fā)中，后端代碼寫起來其實是相當(dāng)容易的。
例如，我們編寫一個REST API，用于創(chuàng)建一個Blog：
@api
@post('/api/blogs')
def api_create_blog():
i = ctx.request.input(name='', summary='', content='')
name = i.name.strip()
summary = i.summary.strip()
content = i.content.strip()
if not name:
raise APIValueError('name', 'name cannot be empty.')
if not summary:
raise APIValueError('summary', 'summary cannot be empty.')
if not content:
raise APIValueError('content', 'content cannot be empty.')
user = ctx.request.user
blog = Blog(user_id=user.id, user_name=user.name, name=name, summary=summary, content=content)
blog.insert()
return blog
編寫后端Python代碼不但很簡單，而且非常容易測試，上面的API：api_create_blog()本身只是一個普通函數(shù)。
Web開發(fā)真正困難的地方在于編寫前端頁面。前端頁面需要混合HTML、CSS和JavaScript，如果對這三者沒有深入地掌握，編寫的前端頁面將很快難以維護。
更大的問題在于，前端頁面通常是動態(tài)頁面，也就是說，前端頁面往往是由后端代碼生成的。
生成前端頁面最早的方式是拼接字符串：
s = '<html><head><title>' + title + '</title></head><body>' + body + '</body></html>'
顯然這種方式完全不具備可維護性。所以有第二種模板方式：
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{{ body }}
</body>
</html>
ASP、JSP、PHP等都是用這種模板方式生成前端頁面。
如果在頁面上大量使用JavaScript（事實上大部分頁面都會），模板方式仍然會導(dǎo)致JavaScript代碼與后端代碼綁得非常緊密，以至于難以維護。其根本原因在于負(fù)責(zé)顯示的HTML DOM模型與負(fù)責(zé)數(shù)據(jù)和交互的JavaScript代碼沒有分割清楚。
要編寫可維護的前端代碼絕非易事。和后端結(jié)合的MVC模式已經(jīng)無法滿足復(fù)雜頁面邏輯的需要了，所以，新的MVVM：Model View ViewModel模式應(yīng)運而生。
MVVM最早由微軟提出來，它借鑒了桌面應(yīng)用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示：
<script>
var blog = {
name: 'hello',
summary: 'this is summary',
content: 'this is content...'
};
</script>
View是純HTML：
<form action="/api/blogs" method="post"> <input name="name"> <input name="summary"> <textarea name="content"></textarea> <button type="submit">OK</button> </form>
由于Model表示數(shù)據(jù)，View負(fù)責(zé)顯示，兩者做到了最大限度的分離。
把Model和View關(guān)聯(lián)起來的就是ViewModel。ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來，還負(fù)責(zé)把View的修改同步回Model。
ViewModel如何編寫？需要用JavaScript編寫一個通用的ViewModel，這樣，就可以復(fù)用整個MVVM模型了。
好消息是已有許多成熟的MVVM框架，例如AngularJS，KnockoutJS等。我們選擇Vue這個簡單易用的MVVM框架來實現(xiàn)創(chuàng)建Blog的頁面templates/manage_blog_edit.html：
{% extends '__base__.html' %}
{% block title %}編輯日志{% endblock %}
{% block beforehead %}
<script>
var
action = '{{ action }}',
redirect = '{{ redirect }}';
var vm;
$(function () {
vm = new Vue({
el: '#form-blog',
data: {
name: '',
summary: '',
content: ''
},
methods: {
submit: function (event) {
event.preventDefault();
postApi(action, this.$data, function (err, r) {
if (err) {
alert(err);
}
else {
alert('保存成功！');
return location.assign(redirect);
}
});
}
}
});
});
</script>
{% endblock %}
{% block content %}
<div class="uk-width-1-1">
<form id="form-blog" v-on="submit: submit" class="uk-form uk-form-stacked">
<div class="uk-form-row">
<div class="uk-form-controls">
<input v-model="name" class="uk-width-1-1">
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<textarea v-model="summary" rows="4" class="uk-width-1-1"></textarea>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<textarea v-model="content" rows="8" class="uk-width-1-1"></textarea>
</div>
</div>
<div class="uk-form-row">
<button type="submit" class="uk-button uk-button-primary">保存</button>
</div>
</form>
</div>
{% endblock %}
初始化Vue時，我們指定3個參數(shù)：
el：根據(jù)選擇器查找綁定的View，這里是#form-blog，就是id為form-blog的DOM，對應(yīng)的是一個<form>標(biāo)簽；
data：JavaScript對象表示的Model，我們初始化為{ name: '', summary: '', content: ''}；
methods：View可以觸發(fā)的JavaScript函數(shù)，submit就是提交表單時觸發(fā)的函數(shù)。
接下來，我們在<form>標(biāo)簽中，用幾個簡單的v-model，就可以讓Vue把Model和View關(guān)聯(lián)起來：
<!-- input的value和Model的name關(guān)聯(lián)起來了 --> <input v-model="name" class="uk-width-1-1">
Form表單通過<form v-on="submit: submit">把提交表單的事件關(guān)聯(lián)到submit方法。
需要特別注意的是，在MVVM中，Model和View是雙向綁定的。如果我們在Form中修改了文本框的值，可以在Model中立刻拿到新的值。試試在表單中輸入文本，然后在Chrome瀏覽器中打開JavaScript控制臺，可以通過vm.name訪問單個屬性，或者通過vm.$data訪問整個Model：
如果我們在JavaScript邏輯中修改了Model，這個修改會立刻反映到View上。試試在JavaScript控制臺輸入vm.name = 'MVVM簡介'，可以看到文本框的內(nèi)容自動被同步了：
雙向綁定是MVVM框架最大的作用。借助于MVVM，我們把復(fù)雜的顯示邏輯交給框架完成。由于后端編寫了獨立的REST API，所以，前端用AJAX提交表單非常容易，前后端分離得非常徹底。
相關(guān)文章
這篇文章主要介紹了Python中的模塊相關(guān)知識，文中代碼非常詳細，供大家參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
詳解如何使用Pandas刪除DataFrame中的非數(shù)字類型數(shù)據(jù)
在數(shù)據(jù)處理和分析過程中,經(jīng)常會遇到需要清洗數(shù)據(jù)的情況,本文將詳細介紹如何使用Pandas刪除DataFrame中的非數(shù)字類型數(shù)據(jù),感興趣的小伙伴可以了解下2024-03-03
關(guān)于Python3的import問題(pycharm可以運行命令行import錯誤)
這篇文章主要介紹了關(guān)于Python3的import問題(pycharm可以運行命令行import錯誤),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家分享了python中PIL安裝簡單教程，感興趣的小伙伴們可以參考一下2016-04-04
python3 使用Opencv打開USB攝像頭,配置1080P分辨率的操作
今天小編就為大家分享一篇python3 使用Opencv打開USB攝像頭,配置1080P分辨率的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-12-12
這篇文章主要介紹了如何在Windows中安裝多個python解釋器,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
Django的用戶模塊與權(quán)限系統(tǒng)的示例代碼
這篇文章主要介紹了Django的用戶模塊與權(quán)限系統(tǒng)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細介紹了Python3.6.0+opencv3.3.0人臉檢測示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
pymssql是python用來連接mssql數(shù)據(jù)庫的一個類庫。該庫遵守Python DB API 2.0 標(biāo)準(zhǔn)，并且還附帶了一個原生的低階數(shù)據(jù)訪問模塊。2008-12-12
Linux上使用Python統(tǒng)計每天的鍵盤輸入次數(shù)
這篇文章主要介紹了Linux上使用Python統(tǒng)計每天的鍵盤輸入次數(shù)，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04