快速完成一個(gè)包含前后端的todolist應(yīng)用霞怀，利用Bootstrap+Vue+Flask是個(gè)不錯(cuò)的選擇嫌蚤。
后臺(tái)： Flask 負(fù)責(zé)路由晴裹、邏輯控制
前臺(tái)： Vue 負(fù)責(zé)用戶(hù)事件監(jiān)聽(tīng)和響應(yīng) bootstrap完成界面美化
數(shù)據(jù)： Ajax 實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)傳遞
這幾個(gè)框架單個(gè)的使用并不復(fù)雜，但當(dāng)把它們放在一塊時(shí)拍冠，框架間有效的結(jié)合是一個(gè)需要注意的問(wèn)題。
Vue+Flask
當(dāng)把Vue寫(xiě)成的todolist放入到flask下啟動(dòng)運(yùn)行后簇抵，在輸入框發(fā)現(xiàn)輸入內(nèi)容后庆杜，列表中并未顯示，但是JS沒(méi)有提示報(bào)錯(cuò)碟摆』尾疲可是在前臺(tái)單獨(dú)使用todolist,卻沒(méi)有問(wèn)題。 這說(shuō)明可能有兩個(gè)原因 1 flask本身的問(wèn)題 2 兩者結(jié)合時(shí)出了問(wèn)題焦履。后來(lái)發(fā)現(xiàn)是因?yàn)?strong>Flask自帶的jinjia模板渲染方式{{ }}與vue的渲染方式?jīng)_突拓劝，解決的方法很簡(jiǎn)單，改變其中一種渲染的格式即可嘉裤。不過(guò)后來(lái)在網(wǎng)上找到了一種更簡(jiǎn)單的方式郑临，把Vue中{{ }}渲染部分直接變成 v-text形式，避免Vue出現(xiàn){{ }}格式屑宠， 對(duì)于todolist來(lái)說(shuō)厢洞，這種方法足夠了。
Vue+Bootstrap
Bootstrap包含UI渲染和JQ插件兩大部分, 利用Vue v-bind:class 指令典奉，Bootstrap的UI渲染功能可以很方便的完成界面美化工作躺翻。但是JQ插件與Vue之間的結(jié)合就不太好。
預(yù)想的todolist功能中卫玖，當(dāng)用戶(hù)在沒(méi)有輸入內(nèi)容就點(diǎn)擊提交時(shí)公你，會(huì)彈出一個(gè)提示框。在具體實(shí)現(xiàn)這個(gè)效果時(shí)假瞬，起初直接引入了 Bootstrap提供的JQ彈出框插件陕靠，直接點(diǎn)擊這個(gè)彈出框就可以完成關(guān)閉事件迂尝，不需要Vue的介入。再次開(kāi)啟的過(guò)程剪芥，也同樣是獨(dú)立的代碼完成的垄开。也就是說(shuō)，彈出框事件的開(kāi)啟和關(guān)閉的控制過(guò)程完全交給了JQ插件税肪。Vue失去了控制權(quán)溉躲，這實(shí)際上不利于后期的管理和維護(hù)。所以益兄，最后放棄使用JQ的彈出插件锻梳，而是選擇了一個(gè)只有展示界面的選擇框，通過(guò)顯示和隱藏完成交互偏塞，與此同時(shí)唱蒸，引入setTimeout(),讓警告框自動(dòng)關(guān)閉邦鲫，提供良好的用戶(hù)體驗(yàn)灸叼。
源碼：https://github.com/guangruixiao/vue.js/tree/master/todolist
