SimpleStart 入门不写一行前端用纯 Python 构建 Web 应用你有没有遇到这个问题会 Python但每次想做个小工具都卡在 HTML/CSS/JavaScript本文用 5 段短代码带你上手 SimpleStart。这是一个纯 Python 的响应式 Web 框架全程只写 Python五个例子跑完你就见过了它日常开发的全部核心积木。两年前我做了一个项目要赶一个网页版演示时间非常紧。我用 Streamlit 很快搭出了原型——说实话用起来并不舒服但功能勉强够用。那次经历让我对 Python Web 应用产生了兴趣后来实在忍不住它的种种不便干脆自己动手写了一个更顺手的框架这就是 SimpleStart 的由来。SimpleStart 是什么SimpleStart 是一个纯 Python 的 Web 应用框架你写 Python 脚本它负责把界面渲染到浏览器。不需要 HTML、CSS、JavaScript也不需要 npm、webpack 这类前端构建工具。它适合这样的人数据分析师把数据变成同事打开就能用的页面开发者快速做内部工具——表单收集、报表、看板所有会 Python 但不想学前端的人。SimpleStart 有两个核心特点下面的每一步都会用到事件驱动点击、输入都走回调函数只更新涉及的元素整个脚本不会从头重新执行响应式绑定Python 变量和页面元素绑定在一起变量一变页面自动跟着变。安装pipinstallsimplestart安装完成后把你的应用代码保存为一个.py文件马上在例 1 带你写第一个app.py然后在终端运行ss app.py浏览器打开http://localhost:8000就能看到页面。例 1最小应用 —— 按钮点击importsimplestartasss ss.write(## Hello, SimpleStart!)ss.write(Click the button and a message will be written to the page.)defmyclick():ss.write(Welcome to SimpleStart. :smile:)ss.button(Click Me,typeprimary,onclickmyclick)点击按钮欢迎语出现在页面上。两个要点ss.write向页面写内容支持 Markdown——##是标题:smile:会渲染成表情onclickmyclick是事件回调点击那一刻才执行页面其余部分并没有重新渲染。例 2输入框与响应式文本importsimplestartasss ss.session.nameworldss.write(## Reactive Session)ss.write(Change the text below - the page updates instantly, no reload.)defchange_name(event):ss.session.nameevent.value ss.text_input(world,onchangechange_name)ss.write(Hello, name!)在输入框里改个名字试试——Hello, name!立刻跟着变。name表示这段文本和变量ss.session.name绑定回调里更新变量页面自动刷新对应元素。全程没有一行手动刷新的代码这就是响应式绑定。例 3表单与布局importsimplestartasss ss.write(## Coffee Order Form)ss.session.namess.session.sizeMediumss.session.sugar1ss.session.orderdefset_name(event):ss.session.nameevent.valuedefset_size(event):ss.session.sizeevent.valuedefset_sugar(event):ss.session.sugarevent.valuedefplace_order():namess.session.nameorGuestss.session.orderfOne{ss.session.size}coffee with{ss.session.sugar}sugar(s) for{name}. ☕withss.card(stylemax-width:520px):ss.write(**Your name**)ss.text_input(value,placeholderType your name...,onchangeset_name)ss.write(**Size**)ss.selectbox(options[Small,Medium,Large],valueMedium,onchangeset_size)ss.write(**Sugar (spoons)**)ss.slider(value1,min0,max5,onchangeset_sugar)ss.space(mt-4)ss.button(Place Order,typeprimary,onclickplace_order)ss.write(order)这一步引入布局组件ss.card把一组控件收进一张卡片with块内的都装进去。同时每个控件都挂了onchange把值实时写进ss.session——机制和例 2 相同点击Place Order回调从ss.session取出名字、杯型和糖量拼成一句订单确认显示在按钮下方。填什么回显什么——表单收集的数据真正被用起来了。例 4把 Python 数据变成表格importsimplestartasss ss.write(## Sales Dashboard Sample)mydata[{Month:Jan,Sales:120,Profit:30},{Month:Feb,Sales:200,Profit:60},{Month:Mar,Sales:150,Profit:45},]withss.card(stylemax-width:520px):ss.table(tableDatamydata,stripeTrue)ss.space()withss.card(stylemax-width:520px):ss.write(### Monthly Report)ss.text(March profit margin: b30%/b - a record high. ,typesuccess)mydata就是一个普通的 Python 列表——每个 dict 一行每个 key 一列——ss.table直接把它变成带斑马纹的表格外面套一张ss.card数据就不会铺满整页。下面的 Monthly Report 卡片补上一句结论——ss.text用法和ss.write几乎一样但支持type语义色success让整行变绿注意这里加粗用的是 HTML 的b标签**30%**的 Markdown 写法在ss.text里不生效——“数据表 一句总结”就是一个最小看板的样子。真实场景里这个列表可以来自 pandasdf.to_dict(records)数据库查出来的数据一行代码上屏。例 5一张图收尾importsimplestartasss ss.write(## Charts in Pure Python)ss.plot.bar(data{A:10,B:15,C:13,D:20,E:18},x_labelCategory,y_labelValue,titleBasic Bar Chart,)ss.write(That is the whole program - the chart is fully interactive (hover for tooltips).)一个字典一个函数调用一张可交互的柱状图鼠标悬停有数值提示。折线图、饼图也是类似的一行式 API。写在最后五个例子下来你已经用过了事件回调、响应式绑定、表单组件、卡片布局、表格、图表——用 SimpleStart 做日常工具主要积木就是这些。把例 4、例 5 加上筛选控件拼起来就是一个最小可用的数据看板。还有一件事值得注意整个过程里你的脚本只在启动时执行了一次之后所有交互都是事件回调精准更新对应元素——页面从不整体重刷脚本也不会从头重跑。应用规模变大后这个特性会越来越重要。本文介绍了 SimpleStart 的基础用法。SimpleStart 还有一些更强大的能力后续文章再分批介绍ss.state双向数据绑定把状态对象直接绑到组件参数上输入框的值自动写回状态状态一变所有绑定它的元素同步更新布局管理多页应用、侧边栏、栅格排版搭建完整的页面骨架Markdown 插槽把组件嵌进 Markdown 内容里自定义组件官方组件库不够用时封装你自己的组件。如果这些是你正在找的东西欢迎关注这个系列。下一步在线文档中文https://www.simplestart.cc/zhDocumentation (English)https://www.simplestart.cc/GitHub本文完整示例代码都在examples/目录https://github.com/readever/simplestartpip install simplestart把你手边的表格变成一个能用的页面试试。做出了有意思的应用欢迎来 GitHub Issues 交流。