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

安装

构建后端环境

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的支持

… …

My Final Thoughts

▄▄▄▄▄

▀▀▀██████▄▄▄ _______________

▄▄▄▄▄ █████████▄ / \

▀▀▀▀█████▌ ▀▐▄ ▀▐█ | Gotta go fast! |

▀▀█████▄▄ ▀██████▄██ | _________________/

▀▄▄▄▄▄ ▀▀█▄▀█════█▀ |/

▀▀▀▄ ▀▀███ ▀ ▄▄

▄███▀▀██▄████████▄ ▄▀▀▀▀▀▀█▌ ______________________________

██▀▄▄▄██▀▄███▀ ▀▀████ ▄██ █ \\

▄▀▀▀▄██▄▀▀▌████▒▒▒▒▒▒███ ▌▄▄▀▀▀▀█_____________________________ //

▌ ▐▀████▐███▒▒▒▒▒▐██▌

▀▄▄▄▄▀ ▀▀████▒▒▒▒▄██▀

▀▀█████████▀

▄▄██▀██████▀█

▄██▀ ▀▀▀ █

▄█ ▐▌

▄▄▄▄█▌ ▀█▄▄▄▄▀▀▄

▌ ▐ ▀▀▄▄▄▀

▀▀▄▄▀ ██

\ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀

\- ▌ SanicCRUD-vue ▀ ▀

- ▌ (o) ▀

/- ▌ Go Go Go ! ▀ ▀

/ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀

██

作者:boylegu

原文地址:https://segmentfault.com/a/1190000009832284

python sanic_Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践相关推荐

  1. python sanic orm_Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践

    SanicCRUD-vue Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践 背景 本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑来展示一个 ...

  2. python全栈开发实践入门_Python全栈开发实践入门

    Python全栈开发实践入门 编辑 锁定 讨论 上传视频 <Python全栈开发实践入门>是2017年10月电子工业出版社出版的图书,作者是谢瑛俊. 书 名 Python全栈开发实践入门 ...

  3. python全栈开发实践入门_讲书3分钟丨《Python全栈开发实践入门》 -讲书人 谢瑛俊...

    只需3分钟就能快速了解一本书! 由作(译)者发声讲书,直指新书的特点与主旨. 只需利用碎片化时间,省时省力选到适合自己的好书 音频链接 音频内容 大家好,我是<Python全栈开发实践入门> ...

  4. python物联网全栈开发实践

    物联网发展的趋势 碎片化 标准化 拟人化 (人工智能) 集成电路,微机电:是物联网终端设备的基础,如同"蛋白质" 创建电源设计为设备长期运行奠定了能源基础,如同"碳水化合 ...

  5. python语言属于哪一种语言,python语言特点是什么

    python语言是什么? Python是一种计算机程序设计语言,你可能已经听说过很多流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaSc ...

  6. 未来物联网全栈开发 --JavaScript or Python?

    版权声明:本文为博主杜锦阳原创文章,未经博主允许不得转载,如有侵权将依法追究其法律责任. 目录(?)[+] 先来说说 Javascript 再来说说 Python 未来谁是王者 未来物联网全栈开发 - ...

  7. python 全栈开发之路 day1

    python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进 ...

  8. 将Sublime Text 3设置为Python全栈开发环境

    为 Sublime Text 3 设置 Python 的全栈开发环境 Sublime Text 3 (ST3) 是一个轻量级的跨平台文字编辑器,尤以其轻快的速度,易用性和强大的社区支持而著称.它一经面 ...

  9. 学python有前途吗-Python全栈开发有前景吗,是否值得学习?

    谢邀 一.什么是Python web全栈工程师? 全栈工程师是指掌握多种技能,并能利用多种技能独立完成产品的人.也叫全端工程师(同时具备前端和后台能力),英文Full Stack developer. ...

最新文章

  1. vs2012与win7不兼容问题
  2. 论程序员价值:解决失误bug被涨绩效,零失误时无人问津
  3. SWFUpload上传
  4. 我的LDAP使用手记(Fedora-ds) 备忘用
  5. 如何评估自己对外界认知是否正确?
  6. 科大星云诗社动态20210504
  7. Boost:宏BOOST_TEST_GT的使用实例
  8. 一个男人关心的东西决定他的层次(转)
  9. jzoj5698-[gdoi2018day1]密码锁【贪心,差分】
  10. UILabel常用属性
  11. 如何防止WordPress博客内容被恶意复制的教程
  12. 《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——1.2 网页的基本构成元素...
  13. 前景检测算法(六)--平均背景原理
  14. Swing中 paint()与paintComponent()的区别
  15. 狂雨小说采集笔趣阁源码
  16. 【第56期】游戏策划:给@LK的简历分析
  17. 宾馆酒店客房管理系统java源码
  18. 烽火路由路虚拟服务器,烽火路由器怎么设置?烽火路由器设置详解
  19. 皮皮高清影视播放器2015官方版
  20. 【MME】云CloudMain

热门文章

  1. 图形学积累(持续更新,自用)
  2. Pico Neo3使用Unity开发简明教程
  3. C/C++常用预编译指令介绍
  4. 清华大学 陈鑫 计算机,我院学子在第七届海峡两岸信息服务创新大赛中获佳绩...
  5. python动态库反初始化_【TensorFlow】:解决TensorFlow的ImportError: DLL load failed: 动态链接库(DLL)初始化例程失败...
  6. 《软件工程》第8章软件测试
  7. Windows 10系统中QQ启动报initialization failure:0×0000000c错误及软件无法正常打开,微信无法连接网络,浏览器上网正常
  8. Python pandas.DataFrame.max函数方法的使用
  9. CPU使用率过高排查
  10. Matplotlib-图片灰度处理(3种方法)