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

NusterCache 發布于2019-08-20 17:22 / 3350人閱讀

摘要：前端一種新一代高性能全棧開發實踐背景本項目將使用配合最簡單的邏輯來展示一個基于的全新一代高性能全棧開發實踐的為什么是對于為何不是等著名框架，或許可能很多人會產生疑惑，本身和非常的相似，而它的出現，不僅是大大改進過去時代性能低下通病，外加配

SanicCRUD-vue

背景

本項目將使用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配置來自動化構建前端環境(包括如何配置vue2、處理靜態文件,構建不同環境等等)

本項目主要技術棧

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

未來計劃

本項目可以作為工作參考、學習或者教學演示，之后將陸續以版本的形式，即每個版本都會新增不同的功能演示項，不定期進行發布更新，有以下功能已經在計劃之中：

用戶認證

引入更高級的vuex組件通信機制

演示vue-route的使用

加入docker部署環境

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/83537.html

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

摘要：前端一種新一代高性能全棧開發實踐背景本項目將使用配合最簡單的邏輯來展示一個基于的全新一代高性能全棧開發實踐的為什么是對于為何不是等著名框架，或許可能很多人會產生疑惑，本身和非常的相似，而它的出現，不僅是大大改進過去時代性能低下通病，外加配 SanicCRUD-vue Sanic ＋前端MVVM 一種新一代Python高性能全棧開發實踐showImg(https://segmentfa...

Profeel 2019-07-25 12:00 評論0 收藏0
Sanic教程：快速開始

摘要：快速開始在安裝之前在支持異步的過程中，都經歷了哪些比較重大的更新。踏出第一步我們將正式使用來構建一個項目，讓我們踏出第一步，利用來編寫一個返回字符串的服務程序。本次示例的源代碼全部在上，見。快速開始在安裝Sanic之前，讓我們一起來看看Python在支持異步的過程中，都經歷了哪些比較重大的更新。首先是Python3.4版本引入了asyncio，這讓Python有了支持異步IO的標...

warmcheng 2019-07-30 15:31 評論0 收藏0
SpringBoot-vue 基于Java的微服務全棧快速開發實踐

摘要：本項目將使用配合最簡單的邏輯來展示一個基于的微服務全棧快速開發實踐的。提供一系列大型項目常用的非功能性特征，比如內嵌服務器，安全，指標，健康檢測，外部化配置。 SprintBoot-Vue SpringBoot ＋前端MVVM 基于Java的微服務全?？焖匍_發實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

FleyX 2019-08-21 11:48 評論0 收藏0
SpringBoot-vue 基于Java的微服務全棧快速開發實踐

摘要：本項目將使用配合最簡單的邏輯來展示一個基于的微服務全?？焖匍_發實踐的。提供一系列大型項目常用的非功能性特征，比如內嵌服務器，安全，指標，健康檢測，外部化配置。 SprintBoot-Vue SpringBoot ＋前端MVVM 基于Java的微服務全?？焖匍_發實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

neu 2019-08-15 10:50 評論0 收藏0
微信小程序開發：python+sanic 實現小程序登錄注冊

摘要：參考鏈接微信小程序七日談第五天你可能要在登錄功能上花費大力氣理解認證及實踐網站微信登錄實現最后，感謝女朋友支持。開發微信小程序時，接入小程序的授權登錄可以快速實現用戶注冊登錄的步驟，是快速建立用戶體系的重要一步。這篇文章將介紹 python + sanic + 微信小程序實現用戶快速注冊登錄全棧方案。微信小程序登錄時序圖如下： showImg(https://segmentfaul...

antz 2019-08-20 18:25 評論0 收藏0