摘要：前端一種新一代高性能全棧開(kāi)發(fā)實(shí)踐背景本項(xiàng)目將使用配合最簡(jiǎn)單的邏輯來(lái)展示一個(gè)基于的全新一代高性能全棧開(kāi)發(fā)實(shí)踐的為什么是對(duì)于為何不是等著名框架，或許可能很多人會(huì)產(chǎn)生疑惑，本身和非常的相似，而它的出現(xiàn)，不僅是大大改進(jìn)過(guò)去時(shí)代性能低下通病，外加配

Sanic ＋ 前端MVVM 一種新一代Python高性能全棧開(kāi)發(fā)實(shí)踐

本項(xiàng)目將使用Sanic + Vue2 ＋ Webpack2 配合最簡(jiǎn)單CRUD的邏輯來(lái)展示一個(gè)基于Python的全新一代高性能全棧開(kāi)發(fā)實(shí)踐的Demo

對(duì)于為何不是Flask、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。

是不是和Flask非常相似？

那么在我繼續(xù)之前，我也想和大家回顧一下Web開(kāi)發(fā)的發(fā)展簡(jiǎn)史：

第一階段: 網(wǎng)頁(yè)三劍客，生猛的通過(guò)原生javascript直接操作Dom樹(shù);

第二階段: JQuery誕生，配合前端MVC為代表的Backbone.js, 讓我們可以?xún)?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是MVVM設(shè)計(jì)模式中目前最火熱的一個(gè)前端框架之一，除了性能表現(xiàn)優(yōu)異之外，與類(lèi)似React相比，更輕量級(jí)、更容易上手。

通過(guò)Vue中的“單文件組件”特性，更靈活的定義組件，不僅使代碼結(jié)構(gòu)更清晰，而且能與任何其他組件進(jìn)行隨意組合，更具復(fù)用性。

Webpack提供了一整套前端工程自動(dòng)化的解決方案

有了高性能的Sanic作為基石，或許還不夠，最能成為后端性能瓶頸的更多的是在于數(shù)據(jù)庫(kù)，因此挑選一個(gè)合適的ORM變的極為重要，目前python比較主流的ORM是Django-ORM、SQLAlchemy等，但為了配合Sanic這種性能卓越的框架，我更傾向于peewee，更輕量級(jí)、方便二次封裝，更友好的支持異步。

一個(gè)簡(jiǎn)單的“上海人員信息查詢(xún)系統(tǒng)”作為例子

 |
 |—— 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入口

Sanic (后端)

如何開(kāi)啟一個(gè)基于Sanic的工程項(xiàng)目，并通過(guò)藍(lán)本來(lái)組織基本的MVC模式

通過(guò)在Sanic中建立基于RestFul-API并實(shí)現(xiàn)一個(gè)基本的CRUD邏輯

處理CORS(跨域資源共享)以及解決在Sanic中“pre-flight”請(qǐng)求問(wèn)題

簡(jiǎn)單的在peewee上進(jìn)行二次封裝ORM

演示在Sanic中進(jìn)行單元測(cè)試

增加api接口文檔

通過(guò)peewee和Sanic來(lái)實(shí)現(xiàn)RestFul-API的分頁(yè)

VueJS & webpack (前端)

遵循ECMAScript 6 規(guī)范

如何在vue中使用‘單文件組件’進(jìn)行開(kāi)發(fā)編碼

演示‘非父子組件’如何進(jìn)行簡(jiǎn)單的通信以及‘父子組件’之間如何傳遞數(shù)據(jù)

如何和后端進(jìn)行數(shù)據(jù)交互

如何在vue中優(yōu)雅的引入第三方JS庫(kù)

格式化時(shí)間

分頁(yè)實(shí)現(xiàn)

可復(fù)用組件

DbHeader.vue

DbFooter.vue (sticky footer)

DbFilterinput.vue

DbModal.vue

DbSidebar.vue

DbTable.vue

得益于類(lèi)似vue、react等MVVM模式，本項(xiàng)目的任何組件，只要您覺(jué)得合適，都可以復(fù)用在您的任何項(xiàng)目中，避免重復(fù)造輪子。

如何通過(guò)webpack2配置來(lái)自動(dòng)化構(gòu)建前端環(huán)境(包括如何配置vue2、處理靜態(tài)文件,構(gòu)建不同環(huán)境等等)

python 3

sqlite (not recommend, only convenience example)

vueJS 2.x

webpack 2.x

element ui

axios

請(qǐng)必須安裝 Python 3.5， 3.6 或以后更高的版本

安裝 nodejs / npm

克隆倉(cāng)庫(kù)

git clone https://github.com/boylegu/Sa...

cd SanicCRUD-vue

構(gòu)建后端環(huán)境

cd SanicCRUD-vue

make install

構(gòu)建前端環(huán)境

cd sanic_crudvue/frontend

npm install

運(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

本項(xiàng)目可以作為工作參考、學(xué)習(xí)或者教學(xué)演示，之后將陸續(xù)以版本的形式，即每個(gè)版本都會(huì)新增不同的功能演示項(xiàng)，不定期進(jìn)行發(fā)布更新，有以下功能已經(jīng)在計(jì)劃之中：

用戶(hù)認(rèn)證

引入更高級(jí)的vuex組件通信機(jī)制

演示vue-route的使用

加入docker部署環(huán)境

新增針對(duì)yarn的支持
... ...

                     ▄▄▄▄▄
            ???██████▄▄▄       _______________
          ▄▄▄▄▄  █████████▄  /                 
         ????█████▌ ??▄ ??█ | Gotta go fast!   |
       ??█████▄▄ ?██████▄██ | _________________/
       ?▄▄▄▄▄  ??█▄?█════█? |/
            ???▄  ??███ ?       ▄▄
         ▄███??██▄████████▄ ▄??????█▌   ______________________________ 
       ██?▄▄▄██?▄███? ??████      ▄██  █                               
    ▄???▄██▄??▌████??????███     ▌▄▄????█_____________________________ //
    ▌    ??████?███??????██▌
    ?▄▄▄▄?   ??████????▄██?
              ??█████████?
            ▄▄██?██████?█
          ▄██?     ???  █
         ▄█             ?▌
     ▄▄▄▄█▌              ?█▄▄▄▄??▄
    ▌     ?                ??▄▄▄?
     ??▄▄?     ██   
   ???????????????????????????????????? ? 
 - ▌          SanicCRUD-vue              ? ?      
  - ▌                            (o)          ? 
 /- ▌            Go Go Go !               ? ?           
 /  ???????????????????????????????????? ?       
               ██