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设置来自动化构建前端环境(包含怎样设置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&＃8230;

  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的支撑
   &＃8230; &＃8230;

项目地点：https://github.com/boylegu/Sa&＃8230;

My Final Thoughts


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