py-revue
v0.3.1
Published
Python framework for building ML & data science web apps.
Downloads
29
Readme
revue - Python Vue Binding
revue 期望提供一个前端 Vue 后端 Flask,快速开发标注工具 / 可视化页面的最佳实践,它可以帮助你
- 生成一个静态页面托管在 oss 上
- 生成一个标注工具,把比较重的任务放在后端计算
Usage
项目模板
vue 组件默认放在 python 文件同级的 components
目录下,可以通过 Vue
类的 component_folder
参数控制
目录结构参考 examples 目录下的模板
- vue 模板,编写 component 参考 vue 文档
- vue@next 模板,编写 component 参考 vue@next 文档
- react 模板,编写 component 参考 react 文档
- 使用 router 的例子
- 使用自定义 vue 插件的例子
- 一个简单的带进度条的标注工具
- 更多示例...
数据
通过 app.data
可以把用户自定义数据绑定在页面上,要求数据可以被 json 序列化,绑定数据有两种用法,例如:
直接赋值提供数据
app.data['foo'] = 'bar'
前端直接通过
props
访问通过装饰器定义数据,被装饰器包裹的函数没有参数
@app.data def data(): return {}
数据会被懒加载,在前端 component 中通过函数调用来访问
this.data().then((value) => console.log(value))
函数调用
通过 app.method
可以用户自定义函数,要求输入输出都是可以被 json 序列化的数据,例如:
@app.method
def func(value: int) -> int:
return value + 1
在前端 component 中通过函数调用来访问
this.$revue.func(1).then(value => console.log(value))
多页面
通过 app.route
可以用户自定义路由,要求返回一个 Page 对象,例如:
from revue import Page
@app.route('/user/<username>')
def func(username: str) -> dict:
return Page(root='user.vue')
路由规则,参考 Flask 的定义
模块引用 & 插件系统
通过 app.use
可以使用指定插件,合法的插件包括:
- 字符串,代表拼接到 html 页面上的一段代码,例如:
'<script src="https://unpkg.com/vue-session/index.unpkg.js"></script>'
- 可执行对象(callable),返回一个字符串,代表拼接到 html 页面上的一段代码,例如:
lambda options: '<script src="https://unpkg.com/vue-session/index.unpkg.js"></script>'
- 一个
Plugin
对象的子类,需要实现install
方法
通过 app.use(ComponentFolder("path/to/components"))
可以额外添加一个 components 目录,可以把一些公用前端组件放在一个目录中,通过这种方式添加进来,参考 examples/addComponentFolder
添加的 components 目录可以是一个 s3 路径,但目前只支持放在 s3://pages-oss/
下
编译 & 发布
- revue 使用前端编译,一般情况下开发时无需安装 npm 环境,只需要安装 revue
app.run()
可以打开一个服务,app.publish()
可以生成静态文件并托管在 oss 上app.cli()
可以提供一个包含常用操作的 CLI- 对于前端性能比较敏感的工具,编写好的前端组件可以通过命令行工具
revue build PACKAGE
/revue release PACKAGE VERSION
预先编译好,并传到 oss 上,加快页面加载速度,但编译时需要安装 npm + webpack 环境,通常你并不需要这么做
已知问题
- 支持 vue / vue@next / react,但三种实现不同,会有不同的已知问题
- 引入第三方包比较麻烦,需要找 UMD 打包,并看 js 代码中模块注册到 window 的名字,也许可以通过引入 amd 或 commonjs 来解决