Python学习笔记：Day11 编写日志创建页
前言
最近在學習深度學習，已經跑出了幾個模型，但Pyhton的基礎不夠扎實，因此，開始補習Python了，大家都推薦廖雪峰的課程，因此，開始了學習，但光學有沒有用，還要和大家討論一下，因此，寫下這些帖子，廖雪峰的課程連接在這里：廖雪峰
Python的相關介紹，以及它的歷史故事和運行機制，可以參見這篇：python介紹
Python的安裝可以參見這篇：Python安裝
Python的運行模式以及輸入輸出可以參見這篇：Python IO
Python的基礎概念介紹，可以參見這篇：Python 基礎
Python字符串和編碼的介紹，可以參見這篇：Python字符串與編碼
Python基本數據結構：list和tuple介紹，可以參見這篇：Python list和tuple
Python控制語句介紹：ifelse，可以參見這篇：Python 條件判斷
Python控制語句介紹：循環實現，可以參見這篇：Python循環語句
Python數據結構：dict和set介紹Python數據結構dict和set
Python函數相關：Python函數
Python高階特性：Python高級特性
Python高階函數：Python高階函數
Python匿名函數：Python匿名函數
Python裝飾器：Python裝飾器
Python偏函數：Python偏函數
Python模塊：Python模塊
Python面向對象編程（1）：Python面向對象
Python面向對象編程（2）：Python面向對象（2）
Python面向對象編程（3）：Python面向對象（3）
Python面向對象編程（4）：Pyhton面向對象（4）
Python面向對象高級編程（上）：Python面向對象高級編程（上）
Python面向對象高級編程（中上）：Python面向對象高級編程（中上）
Python面向對象高級編程（中下）：Python面向對象高級編程（中下）
Python面向對象高級編程（完）：Python面向對象高級編程（完）
Python錯誤調試（起）：Python調試：起
Python錯誤調試（承）：Python調試：承
Python錯誤調試（轉）：Python調試：轉
Python錯誤調試（合）：python調試：合
Python文件IO編程：Python文件IO
Python文件IO編程2：Python文件IO2
Python文件IO編程3：PYthon文件IO3
Python進程和線程（起）：Python進程和線程起
Python進程和線程（承）：Python進程和線程承
Python進程和線程（轉）：Python進程和線程轉
Python進程和線程（合）：Python進程和線程合
Python正則表達式：Python正則表達式
Python學習筆記:常用內建模塊1：Python學習筆記：常用內建模塊1
Python學習筆記:常用內建模塊2：Python學習筆記：常用內建模塊2
Python學習筆記:常用內建模塊3：Python學習筆記：常用內建模塊3
Python學習筆記:常用內建模塊4：Python學習筆記: 常用內建模塊4
Python學習筆記:常用內建模塊5：Python學習筆記: 常用內建模塊5
Python學習筆記:常用內建模塊6:Python學習筆記：常用內建模塊6
Python學習筆記:第三方模塊1：Python常用第三方模塊
Python學習筆記:第三方模塊2：Python常用第三方模塊
Python學習筆記:第三方模塊3：Python常用第三方模塊
Pytho學習筆記：網絡編程：Python網絡編程
Python學習筆記：電子郵件：Python電子郵件1
Python學習筆記：SMTP服務器：PythonSMTP服務器
Python學習筆記：POP3服務器：PythonPOP3服務器
Python學習筆記：Python數據庫 Python數據庫1
Python學習筆記：Python數據庫2Python數據庫2
Python學習筆記：web開發1Python學習筆記：web開發1
Python學習筆記：web開發2Python學習筆記: web開發2
Python學習筆記: web開發3Python學習筆記: web開發3
Python學習筆記：異步IO（1）Python學習筆記：異步IO（1）
Python學習筆記：異步IO（2）Python學習筆記：異步IO（2）
Python學習筆記：異步IO（3）Python學習筆記：異步IO（3）
Python學習筆記：Day 1-2開發Python學習筆記：Day1-2開發
Python學習筆記：Day 3 ORMPython學習筆記：Day3 ORM
Python學習筆記：Day 4 ModelPython學習筆記：Day4Model
Python學習筆記：Day 5 web框架PYTHON學習筆記：DAy5
Python學習筆記：Day 6 配置文件Python學習筆記：Day 6 配置文件
Python學習筆記：Day 7 編寫MVCPython學習筆記：Day 7編寫MVC
Python學習筆記：Day 8 構建前端Python學習筆記:Day 8 構建前端
Python學習筆記：Day 9 編寫APIPython 9編寫API
Python學習筆記：Day 10 用戶注冊和登陸Python 10用戶注冊和登陸
目錄
- 前言
- 目錄
- 編寫日志創建頁
編寫日志創建頁
在Web開發中，后端代碼寫起來其實是相當容易的。
例如，我們編寫一個REST API，用于創建一個Blog：
@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，如果對這三者沒有深入地掌握，編寫的前端頁面將很快難以維護。
更大的問題在于，前端頁面通常是動態頁面，也就是說，前端頁面往往是由后端代碼生成的。
生成前端頁面最早的方式是拼接字符串：
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（事實上大部分頁面都會），模板方式仍然會導致JavaScript代碼與后端代碼綁得非常緊密，以至于難以維護。其根本原因在于負責顯示的HTML DOM模型與負責數據和交互的JavaScript代碼沒有分割清楚。
要編寫可維護的前端代碼絕非易事。和后端結合的MVC模式已經無法滿足復雜頁面邏輯的需要了，所以，新的MVVM：Model View ViewModel模式應運而生。
MVVM最早由微軟提出來，它借鑒了桌面應用程序的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表示數據，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> varID = '{{ 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 %}初始化Vue時，我們指定3個參數：
el：根據選擇器查找綁定的View，這里是#vm，就是id為vm的DOM，對應的是一個
標簽；data：JavaScript對象表示的Model，我們初始化為{ name: ”, summary: ”, content: ”}；
methods：View可以觸發的JavaScript函數，submit就是提交表單時觸發的函數。
接下來，我們在標簽中，用幾個簡單的v-model，就可以讓Vue把Model和View關聯起來：
Form表單通過把提交表單的事件關聯到submit方法。
需要特別注意的是，在MVVM中，Model和View是雙向綁定的。如果我們在Form中修改了文本框的值，可以在Model中立刻拿到新的值。試試在表單中輸入文本，然后在Chrome瀏覽器中打開JavaScript控制臺，可以通過vm.name訪問單個屬性，或者通過vm.$data訪問整個Model：
ript邏輯中修改了Model，這個修改會立刻反映到View上。試試在JavaScript控制臺輸入vm.name = ‘MVVM簡介’，可以看到文本框的內容自動被同步了：
雙向綁定是MVVM框架最大的作用。借助于MVVM，我們把復雜的顯示邏輯交給框架完成。由于后端編寫了獨立的REST API，所以，前端用AJAX提交表單非常容易，前后端分離得非常徹底。
總結
以上是生活随笔為你收集整理的Python学习笔记：Day11 编写日志创建页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 根据经纬度坐标配准_扫描地图投影的识别及
- 下一篇： python时间模块设置_Python之