Python WebApp 全栈开发 (技术方案备忘)

技术方案:

1. 💎 flask + dominate/domonic + brython + pico css

   近期的亮点:

   • brython 发布了 3.10.6 版本 (于 2022 年 6 月!):

     

     很高兴看到 brython 仍处于活跃的状态.

2. 🚫 flask + dominate/domonic + pyscript + pico css

   不采用理由:

   1. pyscript 网络请求量大, 初次加载非常慢.
   2. pyscript 缺少完全离线的使用方式 (没有官方文档指导 + 没有开源示例 + 自己多种尝试均告失败).
   3. pyscript 的 debug 体验差.

Flask + Dominate / Domonic + Brython + Pico CSS 方案详解

• flask: 服务器, 路由, 静态资源系统

• dominate / domonic: 使用 python 语法快速生成 (静态) html

  算是手写 html 或者 html template 之外的又一种选择吧. 个人很喜欢这种方式.

• brython: 在 html 中写 python, 替代 “text/javascript”

• pico css (可选): 纯 css 主题库. 轻量的 html 美化方案

示例代码

目录结构:

- demo:
  - static:
    - brython.js
    - brython_stdlib.js
    - pico.min.css
  - main.py
  - requirements.py: |
    dominate
    flask
1
2
3
4
5
6
7
8
9

main.py 源代码:

from textwrap import dedent

from dominate import document
from dominate import tags as t
from flask import Flask

app = Flask('flask_brython_test')


@app.route('/')
def index():
    doc = document(title='Flask Brython Test')
    
    with doc.head:
        t.link(rel='stylesheet', href='/static/pico.min.css')
        t.script(type='text/javascript', src='/static/brython.js')
        t.script(type='text/javascript', src='/static/brython_stdlib.js')
    
    with doc.body:
        doc.body['onload'] = 'brython()'
        doc.body['data-theme'] = 'dark'
        doc.body['class'] = 'container'
        
        with t.input_(id='zone'):
            pass
        
        with t.button('click me', id='mybtn'):
            pass
        
        with t.script(type='text/python') as s:
            s += dedent('''
                from browser import document, alert
                
                def echo(event):
                    print('the printed message will be shown in '
                          'browser console', event)
                    alert(document['zone'].value)
                
                document['mybtn'].bind('click', echo)
            ''')
    
    return doc.render()


if __name__ == '__main__':
    app.run(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

运行截图: