摘要:前端一种新一代高性能全栈开发实践背景本项目将使用配合最简单的逻辑来展示一个基于的全新一代高性能全栈开发实践的为什么是对于为何不是等著名框架,或许可能很多人会产生疑惑,本身和非常的相似,而它的出现,不仅是大大改进过去时代性能低下通病,外加配
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。
为什么是MVVM是不是和Flask非常相似?
那么在我继续之前,我也想和大家回顾一下Web开发的发展简史:
第一阶段: 网页三剑客,生猛的通过原生javascript直接操作Dom树;
第二阶段: JQuery诞生,配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;
第三阶段: 后端架构升级为MVC,前后端分工更清晰,前端工程化、ECMAScript规范开始崭露头角;
第四阶段: 后端架构进入了微服务时代,前端架构不仅升级为MVVM,ES6更是成为目前事实上的标准;
在这里,我不想过于神化MVVM有多么的先进,JQuery为代表的MVC有多么的落后,但确实MVVM有着很多先进的特性:
低开销
易维护
可重用
为什么选择Vue.jsVue.js是MVVM设计模式中目前最火热的一个前端框架之一,除了性能表现优异之外,与类似React相比,更轻量级、更容易上手。
通过Vue中的“单文件组件”特性,更灵活的定义组件,不仅使代码结构更清晰,而且能与任何其他组件进行随意组合,更具复用性。
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的支持
... ...
▄▄▄▄▄ ▀▀▀██████▄▄▄ _______________ ▄▄▄▄▄ █████████▄ / ▀▀▀▀█████▌ ▀▐▄ ▀▐█ | Gotta go fast! | ▀▀█████▄▄ ▀██████▄██ | _________________/ ▀▄▄▄▄▄ ▀▀█▄▀█════█▀ |/ ▀▀▀▄ ▀▀███ ▀ ▄▄ ▄███▀▀██▄████████▄ ▄▀▀▀▀▀▀█▌ ______________________________ ██▀▄▄▄██▀▄███▀ ▀▀████ ▄██ █ ▄▀▀▀▄██▄▀▀▌████▒▒▒▒▒▒███ ▌▄▄▀▀▀▀█_____________________________ // ▌ ▐▀████▐███▒▒▒▒▒▐██▌ ▀▄▄▄▄▀ ▀▀████▒▒▒▒▄██▀ ▀▀█████████▀ ▄▄██▀██████▀█ ▄██▀ ▀▀▀ █ ▄█ ▐▌ ▄▄▄▄█▌ ▀█▄▄▄▄▀▀▄ ▌ ▐ ▀▀▄▄▄▀ ▀▀▄▄▀ ██ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ - ▌ SanicCRUD-vue ▀ ▀ - ▌ (o) ▀ /- ▌ Go Go Go ! ▀ ▀ / ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ ██
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/38629.html
摘要:前端一种新一代高性能全栈开发实践背景本项目将使用配合最简单的逻辑来展示一个基于的全新一代高性能全栈开发实践的为什么是对于为何不是等著名框架,或许可能很多人会产生疑惑,本身和非常的相似,而它的出现,不仅是大大改进过去时代性能低下通病,外加配 SanicCRUD-vue Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践showImg(https://segmentfa...
摘要:快速开始在安装之前在支持异步的过程中,都经历了哪些比较重大的更新。踏出第一步我们将正式使用来构建一个项目,让我们踏出第一步,利用来编写一个返回字符串的服务程序。本次示例的源代码全部在上,见。 快速开始 在安装Sanic之前,让我们一起来看看Python在支持异步的过程中,都经历了哪些比较重大的更新。 首先是Python3.4版本引入了asyncio,这让Python有了支持异步IO的标...
摘要:本项目将使用配合最简单的逻辑来展示一个基于的微服务全栈快速开发实践的。提供一系列大型项目常用的非功能性特征,比如内嵌服务器,安全,指标,健康检测,外部化配置。 SprintBoot-Vue SpringBoot + 前端MVVM 基于Java的微服务全栈快速开发实践 showImg(https://segmentfault.com/img/remote/1460000010167913...
摘要:本项目将使用配合最简单的逻辑来展示一个基于的微服务全栈快速开发实践的。提供一系列大型项目常用的非功能性特征,比如内嵌服务器,安全,指标,健康检测,外部化配置。 SprintBoot-Vue SpringBoot + 前端MVVM 基于Java的微服务全栈快速开发实践 showImg(https://segmentfault.com/img/remote/1460000010167913...
摘要:参考链接微信小程序七日谈第五天你可能要在登录功能上花费大力气理解认证及实践网站微信登录实现最后,感谢女朋友支持。 开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步。这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案。 微信小程序登录时序图如下: showImg(https://segmentfaul...
阅读 3093·2021-11-24 09:39
阅读 946·2021-09-07 10:20
阅读 2364·2021-08-23 09:45
阅读 2220·2021-08-05 10:00
阅读 516·2019-08-29 16:36
阅读 815·2019-08-29 11:12
阅读 2795·2019-08-26 11:34
阅读 1824·2019-08-26 10:56