我相信很多小伙伴或多或少，在答应别人做某件事情后，有时候忘做了，别人来问结果的时候，才想起，还有这么一件事，本篇使用brython写一个任务列表，让你记住你还有多少事没做。
效果展示
码上掘金
运行效果
初始化项目
如果你已经使用过【码上掘金】，可以略过本段略，直接看下一段落【项目逻辑】
我们打开码上掘金(code.juejin.cn/) ，选择 【新建代码片段】【新建空白片段】
创建新项目后，点击Script右侧的设置，加入依赖资源。
如果我们要写brython，根据码上掘金github所示，我们需要并入一下资源:
最后使用写一个案例测试一下。
运行后，若出现了hello world，则证明环境安装完毕。
项目逻辑
任务列表较为简单，其中用户一个输入框每一个提交按钮，提交之后，会产生一条待执行任务，任务会附带一个按钮，是完成。点击完成后，会纳入已完成中，可以将其删除。
当对任务点击【已完成】后，会纳入已完成中。
此时就可以删除之。
项目逻辑
我们底层数据，使用2个字典来存储数据，其中一个是待执行任务，还有一个是已完成，其中每个任务都有一个任务ID。
具体如下:
其中，我们以ID为主键，若出现在 “已完成”字典，就不会出现在 “待完成”字典中。
上述底层数据铺垫后，使用table将其渲染出来即可。
页面编写
我们页面代码如下:
<div id="app"> <div id="userInput"> <textarea id="txt"></textarea> <br /> <button id="input_btn">添加工作队列</button> </div> <div id="displayInfo"> </div> </div> <!-- 此处省略JCode代码 -->
上述代码，我们创建了一个textarea供用户输入，而后添加一个按钮，提交用户输入的数据，最后是定义一个容器displayInfo，以便供python渲染，此时可以记住我们的id为displayInfo。
我们渲染CSS后，效果如下:
Python业务编写
由于添加任务列表是通过按钮触发的，所以我们要写一个点击事件，其中代码如下:
document["input_btn"].bind("click",addNodes)
其中，input_btn是我们在页面编写的时候，定义的textarea的id，而addNodes是我们执行的方法，我们来具体看下:
# 增加任务 def addNodes(ev): global ids global jobs global overJobs ids = ids + 1 nowDate = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime()) val = document["txt"].value if val == "" : document["txt"] <= "请输入数据再添加队列" return val = nowDate + ": " + val jobs[ids] = val showTables()
其中，我们global定义的在方法之外已经定义了，ids为int类型，用于存储主键id，jobs 和 overJobs是我们定义的字典，代表的意思为计划任务 和 已完成任务。
获取textarea中用户输入的数据，从而直接将其存储到jobs中，而后调用showTables()方法来展示页面，其中代码如下:
# 展示数据 def showTables(): # 清理数据 document["displayInfo"].clear() tb.clear() overTb.clear() if 0 != len(jobs): for k,v in jobs.items(): over_btn = BUTTON("已完成",**{"id":k}) over_btn.bind("click",completeJobs) tb <= TR(TD(over_btn)+TD(v,style="width:90%")) document["displayInfo"] <= tb # 省略展示overJob的代码
如上代码是渲染表格的python代码，其逻辑为通过遍历字典的行为，来生成表格数据和按钮，其中我们需要知道每个按钮是干什么的，所以在定义按钮的时候吗，需要指定主键id的值和点击对象，其代码为: BUTTON("已完成",**{"id":k})，而后将表格内容输出到屏幕上。
我们最后来看下完成任务的python代码
# 完成任务 def completeJobs(ev): ID = int(ev.currentTarget.id) overJobs[ID] = jobs[ID] del jobs[ID] showTables()
其代码的逻辑为获取由按钮传入的主键id，再将数据其从jobs字典挪到overJobs字典中，这里又按钮传入的主键，其类型为str，我们需要将其转为int才能用于获取数据。
效果展示
添加：“pdudo 记得使用app查看文章”
添加: “切记每天看书，记得输入输出 ”
不仅如此，我们还可以直接再其编写html格式的文字，例如:
结束 和 删除任务 就不一一展示了。
总结
这是使用【码上掘金】编写brython代码的第二篇文章，上一篇我们简单开箱了一下brython，感觉不还不错，所以这篇我们趁热打铁，继续写一个项目。来巩固一下brython的基础。如果用一句话说使用brython感受的话，我想说的是：“前端用不上，后端不想用”，对于只有python经验的小伙伴而言，光看brython文档，至少要看30分钟起步，还是成本稍微有点高，且国内这块资料很少，远不如js、vue等。
好了，好玩吧，快动动你的小手指来试试吧。
