SanicCRUD-vuePython 全棧開(kāi)發(fā)實(shí)踐
背景
本項(xiàng)目將使用Sanic + Vue2 ＋ Webpack2 配合最簡(jiǎn)單CRUD的邏輯來(lái)詮釋基于Python的全新一代高性能全棧開(kāi)發(fā)實(shí)踐的Demo。
這份小禮物，將獻(xiàn)給所有剛走出校園、獻(xiàn)給和我一樣即將步入不惑之年、獻(xiàn)給所有熱愛(ài)開(kāi)源的伙伴們，也紀(jì)念我入行6周年，Our Freedom～！
為什么是Sanic
對(duì)于為何不是Flask、Tornado、Django等著名框架，或許可能很多人會(huì)產(chǎn)生疑惑，Sanic本身和Flask非常的相似，而它的出現(xiàn)，不僅是大大改進(jìn)過(guò)去WSGI時(shí)代性能低下通病，外加配合uvloop作為核心引擎，使Sanic在很多情況下單機(jī)并發(fā)甚至不亞于Golang，而且它更意味著Python在Web領(lǐng)域走進(jìn)了全新的未來(lái)。
那么uvloop又是什么？簡(jiǎn)單的說(shuō)，Python3.4之后作為最高效簡(jiǎn)單的協(xié)程并發(fā)庫(kù)莫過(guò)于asyncio，而asyncio的出現(xiàn)僅僅只是為了提供更方便的異步編程及互操作的接口，其底層用的還是比較傳統(tǒng)的event loop，而uvloop是在重新定制asyncio基礎(chǔ)上引入了libuv， 其性能不僅超過(guò)了以往如gevent、tornado等Python異步框架，也同樣以超過(guò)2倍多的性能領(lǐng)先于node.js。
為什么是MVVM
那么在我繼續(xù)之前，我也想和大家回顧一下Web開(kāi)發(fā)的發(fā)展簡(jiǎn)史：
-
第一階段: 網(wǎng)頁(yè)三劍客，生猛的通過(guò)原生javascript直接操作Dom樹(shù);
-
第二階段: JQuery誕生，配合前端MVC為代表的Backbone.js, 讓我們可以優(yōu)雅而簡(jiǎn)單的操作Dom樹(shù);
-
第三階段: 后端架構(gòu)升級(jí)為MVC，前后端分工更清晰，前端工程化、ECMAScript規(guī)范開(kāi)始嶄露頭角;
-
第四階段: 后端架構(gòu)進(jìn)入了微服務(wù)時(shí)代，前端架構(gòu)不僅升級(jí)為MVVM，ES6更是成為目前事實(shí)上的標(biāo)準(zhǔn);
在這里，我不想過(guò)于神化MVVM有多么的先進(jìn)，JQuery為代表的MVC有多么的落后，但確實(shí)MVVM有著很多先進(jìn)的特性:
-
低開(kāi)銷(xiāo)
-
易維護(hù)
-
可重用
為什么選擇Vue.js
Vue.js是MVVM設(shè)計(jì)模式中目前最火熱的一個(gè)前端框架之一，除了性能表現(xiàn)優(yōu)異之外，與類(lèi)似React相比，更輕量級(jí)、更容易上手。
通過(guò)Vue中的“單文件組件”特性，更靈活的定義組件，不僅使代碼結(jié)構(gòu)更清晰，而且能與任何其他組件進(jìn)行隨意組合，更具復(fù)用性。
Webpack是什么
Webpack提供了一整套前端工程自動(dòng)化的解決方案
peewee是什么
有了高性能的Sanic作為基石，或許還不夠，最能成為后端性能瓶頸的更多的是在于數(shù)據(jù)庫(kù)，因此挑選一個(gè)合適的ORM變的極為重要，目前python比較主流的ORM是Django-ORM、SQLAlchemy等，但為了配合Sanic這種性能卓越的框架，我更傾向于peewee，更輕量級(jí)、方便二次封裝，更友好的支持異步。
Demo
一個(gè)簡(jiǎn)單的上海人員信息查詢系統(tǒng)作為例子
項(xiàng)目結(jié)構(gòu)
| |—— tests // 單元測(cè)試 | |—— sanic_crudvue // 主項(xiàng)目 | | | |—— config // 后端基本配置 | | | |—— crud // 后端APP | | | |—— frontend | | |__ build // webpack配置文件 | | |__ dist // 編譯后的目標(biāo)目錄 | | |__ src // 前端源代碼 | | | | | | | |__ components // 本項(xiàng)目各種各樣的核心組件 | | | | | | | |__ App.vue // 主頁(yè) | | | | | | | |__ eventBus.js // 中央消息處理器，用于‘非父子組件’通信，下一個(gè)版本將會(huì)使用vuex | | | | | | | |__ main.js // webpack入口
本項(xiàng)目主要技術(shù)棧
-
python 3
-
sqlite (not recommend, only convenience example)
-
vueJS 2.x
-
webpack 2.x
-
element ui
-
axios
準(zhǔn)備工作
-
請(qǐng)必須安裝 Python 3.5， 3.6 或以后更高的版本
-
安裝 nodejs / npm
-
克隆倉(cāng)庫(kù)
git clone https://github.com/boylegu/SanicCRUD-vue.git cd SanicCRUD-vue
安裝
-
構(gòu)建后端環(huán)境
cd SanicCRUD-vue make install
-
構(gòu)建前端環(huán)境
cd sanic_crudvue/frontend npm install
使用說(shuō)明
-
運(yùn)行后端服務(wù)
make dev
-
運(yùn)行前端服務(wù)
cd sanic_crudvue/frontend npm run dev
-
運(yùn)行單元測(cè)試
cd SanicCRUD-vue make test
你也可以在生產(chǎn)環(huán)境中運(yùn)行
cd sanic_crudvue/frontend;npm run build進(jìn)行編譯并配合Nginx
未來(lái)計(jì)劃
本項(xiàng)目可以作為工作參考、學(xué)習(xí)或者教學(xué)演示，之后將陸續(xù)以版本的形式，即每個(gè)版本都會(huì)新增不同的功能演示項(xiàng)，不定期進(jìn)行發(fā)布更新，有以下功能已經(jīng)在計(jì)劃之中：
-
用戶認(rèn)證
-
引入更高級(jí)的vuex組件通信機(jī)制
-
演示vue-route的使用
-
加入docker部署環(huán)境
-
新增針對(duì)yarn的支持 ... ...
My Final Thoughts
▄▄▄▄▄ ???██████▄▄▄ _______________ ▄▄▄▄▄ █████████▄ / \ ????█████▌ ??▄ ??█ | Gotta go fast! | ??█████▄▄ ?██████▄██ | _________________/ ?▄▄▄▄▄ ??█▄?█════█? |/ ???▄ ??███ ? ▄▄ ▄███??██▄████████▄ ▄??????█▌ ______________________________ ██?▄▄▄██?▄███? ??████ ▄██ █ \\ ▄???▄██▄??▌████??????███ ▌▄▄????█_____________________________ // ▌ ??████?███??????██▌ ?▄▄▄▄? ??████????▄██? ??█████████? ▄▄██?██████?█ ▄██? ??? █ ▄█ ?▌ ▄▄▄▄█▌ ?█▄▄▄▄??▄ ▌ ? ??▄▄▄? ??▄▄? ██ \ ???????????????????????????????????? ? \- ▌ SanicCRUD-vue ? ? - ▌ (o) ? /- ▌ Go Go Go ! ? ? / ???????????????????????????????????? ? ██