Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践

时间 2019-11-09

标签 sanic 前端 mvvm 一种新一代 python 高性能开发实践栏目 Python 繁體版

原文原文链接

SanicCRUD-vue

Sanic ＋前端MVVM 一种新一代Python高性能全栈开发实践
javascript

背景

本项目将使用Sanic + Vue2 ＋ Webpack2 配合最简单CRUD的逻辑来展现一个基于Python的全新一代高性能全栈开发实践的Demo前端

为何是Sanic

对于为什么不是Flask、Django等著名框架，或许可能不少人会产生疑惑，Sanic自己和Flask很是的类似，而它的出现，不只是大大改进过去WSGI时代性能低下通病，外加配合uvloop做为核心引擎，使Sanic在不少状况下单机并发甚至不亚于Golang，并且它更意味着Python在Web领域走进了全新的将来。vue

那么uvloop又是什么？简单的说，Python3.4以后做为最高效简单的协程并发库莫过于asyncio，而asyncio的出现仅仅只是为了提供更方便的异步编程及互操做的接口，其底层用的仍是比较传统的event loop，而uvloop是在从新定制asyncio基础上引入了libuv，
其性能不只超过了以往如gevent、tornado等Python异步框架，也一样以超过2倍多的性能领先于node.js。java

是否是和Flask很是类似？node

为何是MVVM

那么在我继续以前，我也想和你们回顾一下Web开发的发展简史：python

第一阶段: 网页三剑客，生猛的经过原生javascript直接操做Dom树;react
第二阶段: JQuery诞生，配合前端MVC为表明的Backbone.js, 让咱们能够优雅而简单的操做Dom树;webpack
第三阶段: 后端架构升级为MVC，先后端分工更清晰，前端工程化、ECMAScript规范开始崭露头角;ios
第四阶段: 后端架构进入了微服务时代，前端架构不只升级为MVVM，ES6更是成为目前事实上的标准;git

在这里，我不想过于神化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

将来计划

本项目能够做为工做参考、学习或者教学演示，以后将陆续以版本的形式，即每一个版本都会新增不一样的功能演示项，不按期进行发布更新，有如下功能已经在计划之中：

用户认证
引入更高级的vuex组件通讯机制
演示vue-route的使用
加入docker部署环境
新增针对yarn的支持
... ...

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

My Final Thoughts

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

Sanic ＋ 前端MVVM 一种新一代Python高性能全栈开发实践