Python 全栈开发实践 SanicCRUD-vue

MIT
Python JavaScript HTML/CSS
Linux
2017-06-19
boylegu

sanic_vue

背景

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

这份小礼物,将献给所有刚走出校园、献给和我一样即将步入不惑之年、献给所有热爱开源的伙伴们,也纪念我入行6周年,Our Freedom~!

为什么是Sanic

对于为何不是Flask、Tornado、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。

sanic_vue

为什么是MVVM

那么在我继续之前,我也想和大家回顾一下Web开发的发展简史:

  • 第一阶段: 网页三剑客,生猛的通过原生javascript直接操作Dom树;

  • 第二阶段: JQuery诞生,配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;

  • 第三阶段: 后端架构升级为MVC,前后端分工更清晰,前端工程化、ECMAScript规范开始崭露头角;

  • 第四阶段: 后端架构进入了微服务时代,前端架构不仅升级为MVVM,ES6更是成为目前事实上的标准;

在这里,我不想过于神化MVVM有多么的先进,JQuery为代表的MVC有多么的落后,但确实MVVM有着很多先进的特性:

  • 低开销

  • 易维护

  • 可重用

为什么选择Vue.js

Vue.js是MVVM设计模式中目前最火热的一个前端框架之一,除了性能表现优异之外,与类似React相比,更轻量级、更容易上手。

通过Vue中的“单文件组件”特性,更灵活的定义组件,不仅使代码结构更清晰,而且能与任何其他组件进行随意组合,更具复用性。

sanic_vue

Webpack是什么

Webpack提供了一整套前端工程自动化的解决方案

peewee是什么

有了高性能的Sanic作为基石,或许还不够,最能成为后端性能瓶颈的更多的是在于数据库,因此挑选一个合适的ORM变的极为重要,目前python比较主流的ORM是Django-ORM、SQLAlchemy等,但为了配合Sanic这种性能卓越的框架,我更倾向于peewee,更轻量级、方便二次封装,更友好的支持异步。

Demo

一个简单的上海人员信息查询系统作为例子

demo-image

项目结构

 |
 |—— tests                            // 单元测试
 |
 |—— sanic_crudvue                    // 主项目
 |      |
 |      |—— config                    // 后端基本配置
 |      |
 |      |—— crud                      // 后端APP 
 |      |
 |      |—— frontend          
 |      |       |__ build             // webpack配置文件
 |      |       |__ dist              // 编译后的目标目录
 |      |       |__ src               // 前端源代码
 |      |       |    |   
 |      |       |    |__ components   // 本项目各种各样的核心组件 
 |      |       |    |
 |      |       |    |__ App.vue      // 主页
 |      |       |    |
 |      |       |    |__ eventBus.js  // 中央消息处理器,用于‘非父子组件’通信,下一个版本将会使用vuex
 |      |       |    |
 |      |       |    |__ main.js      // webpack入口

本项目主要技术栈

  • 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/SanicCRUD-vue.git
      
      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的支持 ... ...

My Final Thoughts

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

 

加载中

评论(5)

s
sonlia

引用来自“西河沿的风”的评论

请问用户认证这块怎么做呢?最近被卡在这了,谢谢!
我也是还有监权
西河沿的风
西河沿的风
请问用户认证这块怎么做呢?最近被卡在这了,谢谢!
T
Tom_tao626
用户认证。请问大佬这块怎么处理的?
龙影
龙影
版本太低了,需要升级到0.7.0
h
hsbcchina
有教学视频就更屌了,原谅我是小白!

SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

2017/06/19 08:18

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

Vue经典开源项目汇总

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/xiangzhihong8/article/details/86715541 Vue.js(读音 /v...

2019/08/28 17:50
3K
0
35个最好用的Vue开源库

Vue.js Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面。 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统。它提供了基本组件,用于构建失眠者最喜欢的深色界面。 ...

2019/04/27 10:54
1K
0
vue笔记

添加devtools https://github.com/vuejs/vue-devtools#vue-devtools vue的computed属性 有缓存,methods属性没有缓存 vue实例中的data是属性 可以定义对象,Vue.component中的data是方法 需要...

2017/08/28 04:10
249
0
前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/78133622 vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于...

2018/11/28 21:00
104
0
Vue 自动化表单相关资料

1.使用vue自动化表单 2.Vue可视化,Vue代码生成,Vue动态表单 3.前端表单进阶之路:通过 Vue.js 实现表单可配置化 4.使用Vue动态生成form表单 5.autoform-devtool 6.Vue.js实践:实现多条件筛...

2018/07/17 09:28
293
0
vue

vue

2018/04/23 00:16
34
0
关于Vue使用小结

VUE是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,基于JavaScript,轻量,无依赖 Vue能做什么? 视图界面美化 Vue的使用步骤 入门 1.安装vue --这里提前安...

2019/07/29 22:35
37
0
Vue相关组件集合

内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vu...

2018/08/28 14:58
124
0
vue-cli3快速开始

vue-cli3快速开始 node 如没安装,详见<vue开发环境搭建(mac).md> webpack 安装webpack npm install webpack webpack-cli -g 查看版本 webpack -v vue-cli 安装vue-cli npm install vue-c...

2019/02/27 08:56
142
0
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material...

2018/10/10 16:58
67
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部