前言:
此刻朋友们对“python mvvm”可能比较珍视,咱们都需要了解一些“python mvvm”的相关文章。那么小编同时在网上收集了一些对于“python mvvm””的相关资讯,希望咱们能喜欢,咱们快快来学习一下吧!摘要:前端新一代高性能全栈开发实践。背景这个项目会用最简单的逻辑来展示为什么是 而不是 这样的知名框架的新一代高性能全栈开发实践。也许很多人会疑惑,它和 非常相似,它的出现不仅大大改善了过去时代性能低下的通病,还具备 的优点。
SanicCRUD-vue
Sanic+前端MVVM:新一代Python高性能全栈开发实践
背景
本次项目将使用Sanic+Vue2+Webpack2以最简单的CRUD逻辑来演示基于Python的新一代高性能全栈开发实践。
为什么选择 Sanic
很多人可能会疑惑,为什么 Sanic 不像 Flask 或者 Django 那样是个著名的框架呢?Sanic 本身和 Flask 非常相似,而且它的出现不仅大大改善了 WSGI 时代性能不佳的常见问题,而且采用了 uvloop 作为核心引擎,使得 Sanic 的单机并发能力在很多情况下甚至比 Golang 还要好。这也意味着 Python 在 Web 领域进入了一个全新的未来。
那么什么是 uvloop 呢?简单来说,asyncio 是 Python 3.4 之后最高效、最简单的协程并发库。asyncio 的出现只是为了提供更便捷的异步编程和互操作接口,其底层依然采用较为传统的事件循环。uvloop 在对 asyncio 进行重新定制的基础上引入了 libuv。
其性能不仅超过了gevent、tornado等之前的Python异步框架,还领先node.js2倍以上。
是不是和Flask非常相似?
为什么使用 MVVM
在继续之前,我想先和大家回顾一下 Web 开发的简要历史:
第一阶段: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,它更轻量,更方便二次封装,对异步支持也更友好。
演示
以简单的“上海市人才信息查询系统”为例
项目结构
| |—— 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 中的“飞行前”请求问题
peewee上简单的二次封装ORM
在 Sanic 中演示单元测试
添加API接口文档
使用 peewee 和 Sanic 实现 RestFul-API 的分页
VueJS 和 webpack(前端)
遵守 ECMAScript 6
如何在 Vue 中使用“单文件组件”进行开发编码
演示如何进行非父子组件间的简单通信以及如何在父子组件间传递数据
如何与后端交互
如何在Vue中优雅引入第三方JS库
格式化时间
分页实现
可重用组件
DbHeader.vue
DbFooter.vue(粘性页脚)
DbFilter输入.vue
DbModal.vue
DbSidebar.vue
数据库表.vue
得益于类似vue、react等MVVM模式,本项目的任何组件,只要您觉得合适,都可以复用在您的任何项目中,避免重复造轮子。
如何通过webpack2配置自动搭建前端环境(包括如何配置vue2,处理静态文件,搭建不同的环境等)
本项目的主要技术栈
Python 3
sqlite(不推荐,仅作为方便示例)
vueJS 2.x
webpack 2.x
元素用户界面
axios
准备
请安装 Python 3.5、3.6 或更高版本
安装 nodejs/npm
克隆存储库
git 克隆
cd SanicCRUD-vue
安装
搭建后端环境
cd SanicCRUD-vue
进行安装
搭建前端环境
cd sanic_crudvue/前端
npm 安装
使用说明
运行后端服务
制作开发
运行前端服务
cd sanic_crudvue/前端
npm 运行 dev
运行单元测试
cd SanicCRUD-vue
进行测试
你也可以在生产环境中运行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 ! ▀ ▀ / ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ ██
标签: #python mvvm