Day11: 編寫日誌創建頁
在Web開發中，後端代碼寫起來其實是相當容易的。
例如，我們編寫一個用於創建一個Blog的API：
@post('/api/blogs')
def api_create_blog(request, *, name, summary, content):
check_admin(request)
if not name or not name.strip():
raise APIValueError('name', 'name cannot be empty.')
if not summary or not summary.strip():
raise APIValueError('summary', 'summary cannot be empty.')
if not content or not content.strip():
raise APIValueError('content', 'content cannot be empty.')
blog = Blog(user_id=request.__user__.id, user_name=request.__user__.name, user_image=request.__user__.image, name=name.strip(), summary=summary.strip(), content=content.strip())
yield from blog.save()
return blog可以看到代碼非常簡潔，編寫後端Python代碼不但很簡單，而且非常容易測試，上面的API：api_create_blog()本身只是一個普通函數。
Web開發真正困難的地方在於編寫前端頁面。前端頁面需要混合HTML、CSS和JavaScript，如果對這三者沒有深入地掌握，編寫的前端頁面將很快難以維護。
更大的問題在於，前端頁面通常是動態頁面，也就是說，前端頁面往往是由後端代碼生成的。
現在比較流行的ASP、JSP、PHP等生成前端頁面的模板形式多爲如下：
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{{ body }}
</body>
</html>如果在頁面上大量使用JavaScript（事實上大部分頁面都會），模板方式仍然會導致JavaScript代碼與後端代碼綁得非常緊密，以至於難以維護。其根本原因在於負責顯示的HTML DOM模型與負責數據和交互的JavaScript代碼沒有分割清楚。
要編寫可維護的前端代碼絕非易事。和後端結合的MVC模式已經無法滿足複雜頁面邏輯的需要了，所以，新的MVVM：Model View ViewModel模式應運而生。
它借鑑了桌面應用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示，View是純HTML
由於Model表示數據，View負責顯示，兩者做到了最大限度的分離。
把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model。
ViewModel如何編寫？需要用JavaScript編寫一個通用的ViewModel，這樣，就可以複用整個MVVM模型了。
好消息是已有許多成熟的MVVM框架，例如AngularJS，KnockoutJS等。我們選擇Vue這個簡單易用的MVVM框架來實現創建Blog的頁面templates/manage_blog_edit.html：
{% extends '__base__.html' %}
{% block title %}編輯日誌{% endblock %}
{% block beforehead %}
<script>
var
ID = '{{ id }}',
action = '{{ action }}';
function initVM(blog) {
var vm = new Vue({
el: '#vm',
data: blog,
methods: {
submit: function (event) {
event.preventDefault();
var $form = $('#vm').find('form');
$form.postJSON(action, this.$data, function (err, r) {
if (err) {
$form.showFormError(err);
}
else {
return location.assign('/api/blogs/' + r.id);
}
});
}
}
});
$('#vm').show();
}
$(function () {
if (ID) {
getJSON('/api/blogs/' + ID, function (err, blog) {
if (err) {
return fatal(err);
}
$('#loading').hide();
initVM(blog);
});
}
else {
$('#loading').hide();
initVM({
name: '',
summary: '',
content: ''
});
}
});
</script>
{% endblock %}
{% block content %}
<div class="uk-width-1-1 uk-margin-bottom">
<div class="uk-panel uk-panel-box">
<ul class="uk-breadcrumb">
<li><a href="/manage/comments">評論</a></li>
<li><a href="/manage/blogs">日誌</a></li>
<li><a href="/manage/users">用戶</a></li>
</ul>
</div>
</div>
<div id="error" class="uk-width-1-1">
</div>
<div id="loading" class="uk-width-1-1 uk-text-center">
<span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加載...</span>
</div>
<div id="vm" class="uk-width-2-3">
<form v-on="submit: submit" class="uk-form uk-form-stacked">
<div class="uk-alert uk-alert-danger uk-hidden"></div>
<div class="uk-form-row">
<label class="uk-form-label">標題:</label>
<div class="uk-form-controls">
<input v-model="name" name="name" type="text" placeholder="標題" class="uk-width-1-1">
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">摘要:</label>
<div class="uk-form-controls">
<textarea v-model="summary" rows="4" name="summary" placeholder="摘要" class="uk-width-1-1" style="resize:none;"></textarea>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">內容:</label>
<div class="uk-form-controls">
<textarea v-model="content" rows="16" name="content" placeholder="內容" class="uk-width-1-1" style="resize:none;"></textarea>
</div>
</div>
<div class="uk-form-row">
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-save"></i> 保存</button>
<a href="/manage/blogs" class="uk-button"><i class="uk-icon-times"></i> 取消</a>
</div>
</form>
</div>
{% endblock %}此外，還應該在handlers.py中編寫MVC使得界面可達：
@get('/manage/blogs/create')
def manage_create_blog():
return {
'__template__': 'manage_blog_edit.html',
'id': '',
'action': '/api/blogs'
}在MVVM中，Model和View是雙向綁定的。如果我們在Form中修改了文本框的值，可以在Model中立刻拿到新的值。
雙向綁定是MVVM框架最大的作用。藉助於MVVM，我們把複雜的顯示邏輯交給框架完成。由於後端編寫了獨立的REST API，所以，前端用AJAX提交表單非常容易，前後端分離得非常徹底。