Python版——博客网站四 编写日志创建页
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
開(kāi)源地址：https://github.com/leebingbin/Python3.WebAPP.Blog
?
????單從編碼來(lái)說(shuō)，WebApp開(kāi)發(fā)真正困難的地方在于編寫前端頁(yè)面。前端頁(yè)面需要混合HTML、CSS和JavaScript，如果對(duì)這三者沒(méi)有深入地掌握，編寫的前端頁(yè)面將很快難以維護(hù)。更大的問(wèn)題在于，前端頁(yè)面通常是動(dòng)態(tài)頁(yè)面，也就是說(shuō)，前端頁(yè)面往往是由后端代碼生成的。
????生成前端頁(yè)面最早的方式是拼接字符串：
????顯然這種方式完全不具備可維護(hù)性。所以有第二種模板方式：
<html> <head><title>{{ title }}</title> </head> <body>{{ body }} </body> </html>????JSP、PHP等都是用這種模板方式生成前端頁(yè)面。如果在頁(yè)面上大量使用JavaScript（實(shí)際上大部分頁(yè)面都會(huì)），模板方式仍然會(huì)導(dǎo)致JavaScript代碼與后端代碼綁得非常緊密，以至于難以維護(hù)。其根本原因在于負(fù)責(zé)顯示的HTML DOM模型與負(fù)責(zé)數(shù)據(jù)和交互的JavaScript代碼沒(méi)有分割清楚。
????要編寫可維護(hù)的前端代碼絕非易事。和后端結(jié)合的MVC模式已經(jīng)無(wú)法滿足復(fù)雜頁(yè)面邏輯的需要了，所以，新的MVVM：Model View ViewModel模式應(yīng)運(yùn)而生。
????MVVM最早由微軟提出來(lái)，它借鑒了桌面應(yīng)用程序的MVC思想，在前端頁(yè)面中，把Model用純JavaScript對(duì)象表示：
View是純HTML：
<form action="/api/blogs" method="post"><input name="name"><input name="summary"><textarea name="content"></textarea><button type="submit">Submit</button> </form>????由于Model表示數(shù)據(jù)，View負(fù)責(zé)顯示，兩者做到了最大限度的分離。
????把Model和View關(guān)聯(lián)起來(lái)的就是ViewModel。ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來(lái)，還負(fù)責(zé)把View的修改同步回Model。
????ViewModel如何編寫？需要用JavaScript編寫一個(gè)通用的ViewModel，這樣，就可以復(fù)用整個(gè)MVVM模型了。市面上已有許多成熟的MVVM框架，例如AngularJS，KnockoutJS等。我們選擇Vue （https://vuejs.org/）這個(gè)簡(jiǎn)單易用的MVVM框架來(lái)實(shí)現(xiàn)創(chuàng)建Blog的頁(yè)面templates/manage_blog_edit.html：
????初始化Vue時(shí)，我們指定3個(gè)參數(shù)：
????????el：根據(jù)選擇器查找綁定的View，這里是#vm，就是id為vm的DOM，對(duì)應(yīng)的是一個(gè)<div>標(biāo)簽；
????????data：JavaScript對(duì)象表示的Model，我們初始化為{ name: '', summary: '', content: ''}；
????????methods：View可以觸發(fā)的JavaScript函數(shù)，submit就是提交表單時(shí)觸發(fā)的函數(shù)。
????接下來(lái)，我們?cè)?lt;form>標(biāo)簽中，用幾個(gè)簡(jiǎn)單的v-model，就可以讓Vue把Model和View關(guān)聯(lián)起來(lái)：
????Form表單通過(guò)<form v-on="submit: submit">把提交表單的事件關(guān)聯(lián)到submit方法。
????需要特別注意的是，在MVVM中，Model和View是雙向綁定的。如果我們?cè)贔orm中修改了文本框的值，可以在Model中立刻拿到新的值。試試在表單中輸入文本，然后在Chrome瀏覽器中打開(kāi)JavaScript控制臺(tái)，可以通過(guò)vm.name訪問(wèn)單個(gè)屬性，或者通過(guò)vm.$data訪問(wèn)整個(gè)Model：
????如果我們?cè)贘avaScript邏輯中修改了Model，這個(gè)修改會(huì)立刻反映到View上。試試在JavaScript控制臺(tái)輸入vm.name = 'MVVM簡(jiǎn)介'，可以看到文本框的內(nèi)容自動(dòng)被同步了。
????雙向綁定是MVVM框架最大的作用。借助于MVVM，我們把復(fù)雜的顯示邏輯交給框架完成。由于后端編寫了獨(dú)立的REST API，所以，前端用AJAX提交表單非常容易，前后端分離得非常徹底。
?
?
本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處！
https://my.oschina.net/u/3375733/blog/
轉(zhuǎn)載于:https://my.oschina.net/u/3375733/blog/1547263
總結(jié)
以上是生活随笔為你收集整理的Python版——博客网站四 编写日志创建页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： cad直线和圆弧倒角不相切_曲线操作-直
- 下一篇： python wait_Python的等