{"id":13705638,"url":"https://github.com/boylegu/SanicCRUD-vue","last_synced_at":"2025-05-05T16:33:26.638Z","repository":{"id":63765104,"uuid":"92067859","full_name":"boylegu/SanicCRUD-vue","owner":"boylegu","description":"A example demo base Sanic with vueJS2.x + webpack2.x as  new python full stack web practice","archived":false,"fork":false,"pushed_at":"2017-08-25T07:32:53.000Z","size":2325,"stargazers_count":353,"open_issues_count":8,"forks_count":102,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-09T07:07:59.496Z","etag":null,"topics":["python","python3","sanic","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boylegu.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-22T15:15:38.000Z","updated_at":"2024-09-23T03:28:12.000Z","dependencies_parsed_at":"2022-11-25T15:06:57.833Z","dependency_job_id":null,"html_url":"https://github.com/boylegu/SanicCRUD-vue","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boylegu%2FSanicCRUD-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boylegu%2FSanicCRUD-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boylegu%2FSanicCRUD-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boylegu%2FSanicCRUD-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boylegu","download_url":"https://codeload.github.com/boylegu/SanicCRUD-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252534088,"owners_count":21763716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["python","python3","sanic","vue","webpack"],"created_at":"2024-08-02T22:00:45.291Z","updated_at":"2025-05-05T16:33:26.277Z","avatar_url":"https://github.com/boylegu.png","language":"Vue","funding_links":[],"categories":["Vue","Resources"],"sub_categories":["Examples"],"readme":"## SanicCRUD-vue\n\nSanic ＋ 前端MVVM 一种新一代Python高性能全栈开发实践\n\n\u003cp align=\"center\"\u003e\n  \u003ca href =\"##\"\u003e\u003cimg alt=\"sanic_vue\" src=\"http://i2.muimg.com/536217/20f0cc743f009782.png\"\u003e\u003c/a\u003e\n\n\u003ch4 align=\"center\" style=\"color:\t#3399FF\"\u003e\nConvenient \u0026 efficient and better performance for new Python full stack.\n\u003c/h4\u003e\n\n\u003cp align=\"center\" style=\"color: #FF66FF\"\u003eCommemorate the 6 anniversary of enter the profession.\u003c/p\u003e\n\n\u003cp align=\"center\" style=\"color: #FF9933\"\u003e献给所有坚守自己信念的朋友们\u003c/p\u003e\n\n\u003cp align=\"right\" style=\"color: #3399FF\"\u003e———————By Boyle Gu\u003c/p\u003e\n\n## 背景\n本项目将使用Sanic + Vue2 ＋ Webpack2 配合最简单CRUD的逻辑来展示一个基于Python的全新一代高性能全栈开发实践的Demo\n\n\n### 为什么是Sanic\n对于为何不是Flask、Django等著名框架，或许可能很多人会产生疑惑，Sanic本身和Flask非常的相似，而它的出现，不仅是大大改进过去WSGI时代性能低下通病，外加配合uvloop作为核心引擎，使Sanic在很多情况下单机并发甚至不亚于Golang，而且它更意味着Python在Web领域走进了全新的未来。\n\n那么uvloop又是什么？简单的说，Python3.4之后作为最高效简单的协程并发库莫过于asyncio，而asyncio的出现仅仅只是为了提供更方便的异步编程及互操作的接口，其底层用的还是比较传统的event loop，而uvloop是在重新定制asyncio基础上引入了libuv，\n其性能不仅超过了以往如gevent、tornado等Python异步框架，也同样以超过2倍多的性能领先于node.js。\n\n\u003cp align=\"center\"\u003e\n  \u003ca href =\"##\"\u003e\u003cimg style=\"box-shadow: 8px 8px 5px #888888;\"alt=\"sanic_vue\" src=\"http://i2.muimg.com/536217/d814cd60b591dc33.png\"\u003e\u003c/a\u003e\n\n\u003e 是不是和Flask非常相似？\n\n\n### 为什么是MVVM\n\n那么在我继续之前，我也想和大家回顾一下Web开发的发展简史：\n\n- 第一阶段: 网页三剑客，生猛的通过原生javascript直接操作Dom树;\n\n- 第二阶段: JQuery诞生，配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;\n\n- 第三阶段: 后端架构升级为MVC，前后端分工更清晰，前端工程化、ECMAScript规范开始崭露头角;\n\n- 第四阶段: 后端架构进入了微服务时代，前端架构不仅升级为MVVM，ES6更是成为目前事实上的标准;\n\n在这里，我不想过于神化MVVM有多么的先进，JQuery为代表的MVC有多么的落后，但确实MVVM有着很多先进的特性:\n\n- 低开销\n\n- 易维护\n\n- 可重用\n\n### 为什么选择Vue.js\n\nVue.js是MVVM设计模式中目前最火热的一个前端框架之一，除了性能表现优异之外，与类似React相比，更轻量级、更容易上手。\n\n通过Vue中的“单文件组件”特性，更灵活的定义组件，不仅使代码结构更清晰，而且能与任何其他组件进行随意组合，更具复用性。\n\n\u003cp align=\"center\"\u003e\n  \u003ca href =\"##\"\u003e\u003cimg style=\"box-shadow: 8px 8px 5px #888888;\"alt=\"sanic_vue\" src=\"http://i2.muimg.com/536217/5ae4b10becac44b0.png\"\u003e\u003c/a\u003e\n\n### Webpack是什么\nWebpack提供了一整套前端工程自动化的解决方案\n\n### peewee是什么\n\n有了高性能的Sanic作为基石，或许还不够，最能成为后端性能瓶颈的更多的是在于数据库，因此挑选一个合适的ORM变的极为重要，目前python比较主流的ORM是Django-ORM、SQLAlchemy等，但为了配合Sanic这种性能卓越的框架，我更倾向于peewee，更轻量级、方便二次封装，更友好的支持异步。\n\n\n## Demo\n\n一个简单的“上海人员信息查询系统”作为例子\n\n\n[![demo-image](https://github.com/boylegu/SanicCRUD-vue/blob/master/image/demo_image.gif?raw=true)]()\n\n## 项目结构\n\n     |\n     |—— tests                            // 单元测试\n     |\n     |—— sanic_crudvue                    // 主项目\n     |      |\n     |      |—— config                    // 后端基本配置\n     |      |\n     |      |—— crud                      // 后端APP \n     |      |\n     |      |—— frontend          \n     |      |       |__ build             // webpack配置文件\n     |      |       |__ dist              // 编译后的目标目录\n     |      |       |__ src               // 前端源代码\n     |      |       |    |   \n     |      |       |    |__ components   // 本项目各种各样的核心组件 \n     |      |       |    |\n     |      |       |    |__ App.vue      // 主页\n     |      |       |    |\n     |      |       |    |__ eventBus.js  // 中央消息处理器，用于‘非父子组件’通信，下一个版本将会使用vuex\n     |      |       |    |\n     |      |       |    |__ main.js      // webpack入口\n\n\n\n### 具备的功能(v0.1)\n\n- Sanic (后端)\n\n  - 如何开启一个基于Sanic的工程项目，并通过蓝本来组织基本的MVC模式\n  \n  - 通过在Sanic中建立基于RestFul-API并实现一个基本的CRUD逻辑\n  \n  - 处理CORS(跨域资源共享)以及解决在Sanic中“pre-flight”请求问题\n\n  - 简单的在peewee上进行二次封装ORM\n  \n  - 演示在Sanic中进行单元测试\n\n  - 支持热加载\n  \n  - 增加api接口文档 \n  \n  - 通过peewee和Sanic来实现RestFul-API的分页\n   \n- VueJS \u0026 webpack (前端)\n\n  - 遵循ECMAScript 6 规范\n  \n  - 如何在vue中使用‘单文件组件’进行开发编码\n  \n  - 演示‘非父子组件’如何进行简单的通信以及‘父子组件’之间如何传递数据\n  \n  - 如何和后端进行数据交互\n\n  - 如何在vue中优雅的引入第三方JS库\n\n  - 格式化时间\n  \n  - 分页实现\n  \n  - 可复用组件\n \n     - DbHeader.vue\n     - DbFooter.vue  (sticky footer) \n     - DbFilterinput.vue\n     - DbModal.vue\n     - DbSidebar.vue\n     - DbTable.vue \n     \n     \u003e\u003e 得益于类似vue、react等MVVM模式，本项目的任何组件，只要您觉得合适，都可以复用在您的任何项目中，避免重复造轮子。\n  \n  - 如何通过webpack2配置来自动化构建前端环境(包括如何配置vue2、处理静态文件,构建不同环境等等)  \n\n### 本项目主要技术栈\n\n- python 3\n- sqlite (not recommend, only convenience example)\n- vueJS 2.x\n- webpack 2.x\n- element ui\n- axios\n\n### 准备工作\n\n- 请必须安装 Python 3.5， 3.6 或以后更高的版本\n\n- 安装 nodejs / npm\n\n- 克隆仓库\n\n        git clone https://github.com/boylegu/SanicCRUD-vue.git\n        \n        cd SanicCRUD-vue\n\n### 安装\n\n- 构建后端环境\n\n        cd SanicCRUD-vue\n\n        make install\n\n- 构建前端环境\n\n        cd sanic_crudvue/frontend\n\n        npm install \n\n### 使用说明\n\n- 运行后端服务\n\n        make dev\n\n- 运行前端服务\n\n        cd sanic_crudvue/frontend\n\n        npm run dev\n\n- 运行单元测试\n\n        cd SanicCRUD-vue\n\n        make test\n        \n\u003e 你也可以在生产环境中运行`cd sanic_crudvue/frontend;npm run build`进行编译并配合Nginx\n        \n## 未来计划\n\n本项目可以作为工作参考、学习或者教学演示，之后将陆续以版本的形式，即每个版本都会新增不同的功能演示项，不定期进行发布更新，有以下功能已经在计划之中：\n\n1. 用户认证\n2. 引入更高级的vuex组件通信机制\n3. 演示vue-route的使用\n4. 加入docker部署环境\n5. 新增针对yarn的支持\n... ...\n\n## 技术、教学支持\n\n由于个人时间暂时有限，关于Sanic、Vue、webpack等所有的核心的议题内容非常庞大，因此我将以以下形式来回答和解释关于本项目Demo问题：\n\n1. 以Github Issue的形式进行提问\n2. 电子邮件的形式 gubaoer@hotmail.com\n3. QQ群：315308272\n\n## 相关项目\n- [SpringBoot-vue for Java](https://github.com/boylegu/SpringBoot-vue)\n\n## My Final Thoughts\n\n```\n\n                     ▄▄▄▄▄\n            ▀▀▀██████▄▄▄       _______________\n          ▄▄▄▄▄  █████████▄  /                 \\\n         ▀▀▀▀█████▌ ▀▐▄ ▀▐█ | Gotta go fast!   |\n       ▀▀█████▄▄ ▀██████▄██ | _________________/\n       ▀▄▄▄▄▄  ▀▀█▄▀█════█▀ |/\n            ▀▀▀▄  ▀▀███ ▀       ▄▄\n         ▄███▀▀██▄████████▄ ▄▀▀▀▀▀▀█▌   ______________________________ \n       ██▀▄▄▄██▀▄███▀ ▀▀████      ▄██  █                              \\\\ \n    ▄▀▀▀▄██▄▀▀▌████▒▒▒▒▒▒███     ▌▄▄▀▀▀▀█_____________________________ //\n    ▌    ▐▀████▐███▒▒▒▒▒▐██▌\n    ▀▄▄▄▄▀   ▀▀████▒▒▒▒▄██▀\n              ▀▀█████████▀\n            ▄▄██▀██████▀█\n          ▄██▀     ▀▀▀  █\n         ▄█             ▐▌\n     ▄▄▄▄█▌              ▀█▄▄▄▄▀▀▄\n    ▌     ▐                ▀▀▄▄▄▀\n     ▀▀▄▄▀     ██   \n \\  ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ \n \\- ▌          SanicCRUD-vue              ▀ ▀      \n  - ▌                            (o)          ▀ \n /- ▌            Go Go Go !               ▀ ▀           \n /  ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀       \n               ██\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboylegu%2FSanicCRUD-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboylegu%2FSanicCRUD-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboylegu%2FSanicCRUD-vue/lists"}