用 SimpleStart 实现用户登录功能由数据驱动界面自动切换SimpleStart是一个纯 Python 的 Web 应用框架你只写 Python 脚本它负责把界面渲染到浏览器——不需要 HTML、CSS、JavaScript也没有 npm、webpack 这类前端工具链。首次接触的读者可以从第 1 篇入门看起。上篇我们用ss.state做了自动判分测验答案是数据颜色是数据得分条文案也是数据。这篇再进一步——做一个用户登录系统登录卡片和欢迎卡片的切换、错误提示的出现与消失同样不写一行更新界面的代码。连哪张卡片可见也由数据驱动。全程 37 行。思路把当前该显示什么也交给状态传统写法里显示登录页还是欢迎页是一段命令式流程校验 → 隐藏 A → 显示 B → 填文案每一步都在操作界面。这篇继续上篇的思路并把范围再扩大一步——上篇数据驱动的是值和颜色这篇把界面本身的显示与隐藏也交给状态两个状态位各绑一张卡片的visible登录成功只是翻转两个布尔值界面自动完成切换——这就是响应式更新的效果。第一步账号表 一份登录态USERS{guest:123456,test:12345}authss.State(logged_inFalse,logged_outTrue,user,pwd,msg请输入用户名和密码,hello)演示账号表就一个 dict真实系统换成数据库查询界面代码零改动。auth里 6 个状态位各有分工user/pwd存输入框的内容msg存提示文案hello存欢迎语logged_in/logged_out分别控制两张卡片的显示与隐藏。第二步登录与登出的回调函数只读写状态deflogin(event):ifUSERS.get(auth.user.value)auth.pwd.value:auth.logged_in,auth.logged_outTrue,Falseauth.hellof欢迎回来{auth.user.value}auth.msgelse:auth.msg❌ 用户名或密码错误请重试deflogout(event):auth.update(logged_inFalse,logged_outTrue,user,pwd,msg已退出登录)和上篇的写法完全一致读状态显式.value口诀不变传给组件用属性本身写逻辑用.valueUSERS.get(...)查不到返回None和任何密码都不相等——避免了KeyError空用户名也会直接进入错误分支真实系统记得密码哈希入库这里只做演示两个回调没有任何组件引用登录成功只是翻转两个布尔值、填两段文案登出是一次update全部还原。至于哪张卡片显示、哪张隐藏由绑定关系决定。第三步两张卡片显示与隐藏绑定在状态上withss.row(justifycenter,stylemargin-top:80px;):withss.card(width380,padding32,visibleauth.logged_out):ss.write(## 登录)ss.space(mb-4)ss.input(valueauth.user,placeholder用户名,blockTrue)ss.space(mb-4)ss.input(valueauth.pwd,typepassword,placeholder密码,blockTrue)ss.space(mb-4)ss.button(登 录,typeprimary,blockTrue,onclicklogin)ss.space(mt-2)ss.text(auth.msg,typeerror)withss.card(width380,padding32,visibleauth.logged_in):ss.text(auth.hello,typesuccess)ss.space(mb-4)ss.button(退出登录,blockTrue,onclicklogout)三个看点visibleauth.logged_out/visibleauth.logged_in组件参数接的是 State 属性显隐就成了对状态的订阅——状态位翻转后卡片自动显示或隐藏全程没有先获取组件再设置属性这类操作输入框连onchange都没写。上篇的 radio 需要在onchange里把选择写回 State这里ss.input(valueauth.user)是双向绑定输入实时写回auth.user点击登录时auth.user.value已经是最新值。绑定还是同一个参数方向由组件性质决定错误提示ss.text(auth.msg, typeerror)失败时msg更新文案错误提示显示成功时msg 错误提示隐藏——提示的出现与消失同样由状态驱动。一次登录过程中状态的完整流转时机logged_inlogged_outmsg用户看到页面加载FalseTrue请输入用户名和密码登录卡片密码错误FalseTrue❌ 用户名或密码错误登录卡片 错误提示登录成功TrueFalse空欢迎卡片退出登录FalseTrue已退出登录登录卡片四次界面切换没有一行更新界面的代码。命令式写法中最容易出问题的正是这类代码loginForm.style.display none……写错一个 id、漏一个分支界面和数据就会不一致状态驱动的方式从机制上避免了这类不一致。小结回顾这个 37 行的登录系统视图切换同样由数据驱动。上篇驱动的是值和颜色这篇把卡片的显隐也交给状态——当前该显示什么不再是散落在回调里的 if/else而是两行绑定双向绑定让输入控件零回调。valueauth.user一个参数输入写回状态、点击时读到的就是最新值——表单类需求先想绑定再想回调逻辑层的结构不变。还是只读写状态还是.value取值——从测验到登录应用换了一个领域代码结构原样复用这正是分层设计带来的可复用性应用易于扩展。连续输错锁定、“记住我”、会话超时都只是给 State 增加状态位、给绑定增加条件界面代码不用改。跑起来pipinstallsimplestart ss login.py# 四段代码拼起来存成 login.py或直接用仓库里的 tutorials/login.py试账号guest / 123456。先输入错误密码查看错误提示再依次测试登录成功与退出登录。下一步这个登录系统还有可以工程化的地方也是后续篇章的引子用auth.watch(logged_in)监听状态登录成功自动写入ss.LocalStorage刷新页面不掉登录态用ss.openpage在登录后跳转主应用就进入多页应用的场景——侧边栏、页面路由、布局结构留到布局篇展开。在线文档中文http://www.simplestart.cc/zhDocumentation (English)http://www.simplestart.cc/GitHub本文完整代码tutorials/login.pyhttps://github.com/readever/simplestartpip install simplestart给你手头任何一个 Python 小工具加上用户登录功能试试。做出了有意思的应用欢迎来 GitHub Issues 交流。本系列文章00 SimpleStart用 Python 开发 Web 应用的框架综述01 SimpleStart 入门不写一行前端用纯 Python 构建 Web 应用02 用 SimpleStart 做个自动判分测验ss.state 双向数据绑定入门03 用 SimpleStart 实现用户登录功能由数据驱动界面自动切换本文