Sanic ＋ 前端MVVM 一種新一代Python高性能全棧開發實踐

SanicCRUD-vue

Sanic ＋ 前端MVVM 一種新一代Python高性能全棧開發實踐

背景

本項目將使用Sanic + Vue2 ＋ Webpack2 配合最簡單CRUD的邏輯來展現一個基於Python的全新一代高性能全棧開發實踐的Demo

爲何是Sanic

對於爲什麼不是Flask、Django等著名框架，或許可能不少人會產生疑惑，Sanic自己和Flask很是的類似，而它的出現，不只是大大改進過去WSGI時代性能低下通病，外加配合uvloop做爲核心引擎，使Sanic在不少狀況下單機併發甚至不亞於Golang，並且它更意味着Python在Web領域走進了全新的將來。

那麼uvloop又是什麼？簡單的說，Python3.4以後做爲最高效簡單的協程併發庫莫過於asyncio，而asyncio的出現僅僅只是爲了提供更方便的異步編程及互操做的接口，其底層用的仍是比較傳統的event loop，而uvloop是在從新定製asyncio基礎上引入了libuv，
其性能不只超過了以往如gevent、tornado等Python異步框架，也一樣以超過2倍多的性能領先於node.js。

是否是和Flask很是類似？

爲何是MVVM

那麼在我繼續以前，我也想和你們回顧一下Web開發的發展簡史：

• 第一階段: 網頁三劍客，生猛的經過原生javascript直接操做Dom樹;

• 第二階段: JQuery誕生，配合前端MVC爲表明的Backbone.js, 讓咱們能夠優雅而簡單的操做Dom樹;

• 第三階段: 後端架構升級爲MVC，先後端分工更清晰，前端工程化、ECMAScript規範開始嶄露頭角;

• 第四階段: 後端架構進入了微服務時代，前端架構不只升級爲MVVM，ES6更是成爲目前事實上的標準;

在這裏，我不想過於神化MVVM有多麼的先進，JQuery爲表明的MVC有多麼的落後，但確實MVVM有着不少先進的特性:

• 低開銷

• 易維護

• 可重用

爲何選擇Vue.js

Vue.js是MVVM設計模式中目前最火熱的一個前端框架之一，除了性能表現優異以外，與相似React相比，更輕量級、更容易上手。

經過Vue中的「單文件組件」特性，更靈活的定義組件，不只使代碼結構更清晰，並且能與任何其餘組件進行隨意組合，更具複用性。

Webpack是什麼

Webpack提供了一整套前端工程自動化的解決方案

peewee是什麼

有了高性能的Sanic做爲基石，或許還不夠，最能成爲後端性能瓶頸的更多的是在於數據庫，所以挑選一個合適的ORM變的極爲重要，目前python比較主流的ORM是Django-ORM、SQLAlchemy等，但爲了配合Sanic這種性能卓越的框架，我更傾向於peewee，更輕量級、方便二次封裝，更友好的支持異步。

Demo

一個簡單的「上海人員信息查詢系統」做爲例子

項目結構

|
 |—— tests                            // 單元測試
 |
 |—— sanic_crudvue                    // 主項目
 |      |
 |      |—— config                    // 後端基本配置
 |      |
 |      |—— crud                      // 後端APP 
 |      |
 |      |—— frontend          
 |      |       |__ build             // webpack配置文件
 |      |       |__ dist              // 編譯後的目標目錄
 |      |       |__ src               // 前端源代碼
 |      |       |    |   
 |      |       |    |__ components   // 本項目各類各樣的核心組件 
 |      |       |    |
 |      |       |    |__ App.vue      // 主頁
 |      |       |    |
 |      |       |    |__ eventBus.js  // 中央消息處理器，用於‘非父子組件’通訊，下一個版本將會使用vuex
 |      |       |    |
 |      |       |    |__ main.js      // webpack入口

具有的功能(v0.1)

• Sanic (後端)

  • 如何開啓一個基於Sanic的工程項目，並經過藍原本組織基本的MVC模式

  • 經過在Sanic中創建基於RestFul-API並實現一個基本的CRUD邏輯

  • 處理CORS(跨域資源共享)以及解決在Sanic中「pre-flight」請求問題

  • 簡單的在peewee上進行二次封裝ORM

  • 演示在Sanic中進行單元測試

  • 增長api接口文檔

  • 經過peewee和Sanic來實現RestFul-API的分頁

• VueJS & webpack (前端)

  • 遵循ECMAScript 6 規範

  • 如何在vue中使用‘單文件組件’進行開發編碼

  • 演示‘非父子組件’如何進行簡單的通訊以及‘父子組件’之間如何傳遞數據

  • 如何和後端進行數據交互

  • 如何在vue中優雅的引入第三方JS庫

  • 格式化時間

  • 分頁實現

  • 可複用組件

    • DbHeader.vue

    • DbFooter.vue (sticky footer)

    • DbFilterinput.vue

    • DbModal.vue

    • DbSidebar.vue

    • DbTable.vue

  得益於相似vue、react等MVVM模式，本項目的任何組件，只要您以爲合適，均可以複用在您的任何項目中，避免重複造輪子。

  • 如何經過webpack2配置來自動化構建前端環境(包括如何配置vue二、處理靜態文件,構建不一樣環境等等)

本項目主要技術棧

• python 3

• sqlite (not recommend, only convenience example)

• vueJS 2.x

• webpack 2.x

• element ui

• axios

準備工做

• 請必須安裝 Python 3.5， 3.6 或之後更高的版本

• 安裝 nodejs / npm

• 克隆倉庫

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

  cd SanicCRUD-vue

安裝

• 構建後端環境

  cd SanicCRUD-vue

  make install

• 構建前端環境

  cd sanic_crudvue/frontend

  npm install

使用說明

• 運行後端服務

  make dev

• 運行前端服務

  cd sanic_crudvue/frontend

  npm run dev

• 運行單元測試

  cd SanicCRUD-vue

  make test

你也能夠在生產環境中運行cd sanic_crudvue/frontend;npm run build進行編譯並配合Nginx

將來計劃

本項目能夠做爲工做參考、學習或者教學演示，以後將陸續以版本的形式，即每一個版本都會新增不一樣的功能演示項，不按期進行發佈更新，有如下功能已經在計劃之中：

1. 用戶認證

2. 引入更高級的vuex組件通訊機制

3. 演示vue-route的使用

4. 加入docker部署環境

5. 新增針對yarn的支持
   ... ...

項目地址：https://github.com/boylegu/Sa...

My Final Thoughts

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