python | 写一个记仇本

简介: python | 写一个记仇本

image.png


最近背着老婆买了一个switch卡带,这货居然给丈母娘讲,害得我被丈母娘说还小了,不买奶粉买游戏,太气人了,我连夜用python写了个《记仇本》,画个圈圈把她记下来。

本片文章,主要关注于python代码,而htmlcss将暂时被忽略。




记仇本展示


如题所述,项目已经写好了,是基于local_storage存储在本地的项目,地址如下:


image.png


该项目运行时是基于brython, 你可能想问,为什么不使用原生python来编写网页呢,这个有个误区是,网页是由html代码编写的,而原生python想要操作DOM非常难,所以brython正是为这个来操作的。


初始打开页面,因为没有数据展示,所以只有一个增加按钮。

image.png


当我们点击【画个圈圈记下来】按钮后,会刷新为新增页面,例如:

image.png


此时,我们只需要输入信息,比如 记老婆的仇,缘由为 买switch游戏透露给丈母娘,还得被骂。

image.png


此时点击记仇,就可以存储到页面上了。

image.png

此时若点击已原谅,则可以删除该记录。



brython 之 local_storage


你可能细心发现了,哎,关掉了浏览器,下次打开,怎么还会有记录在上面呢,这是因为用了local_storage,那么,什么是local_storage呢?


哎,我们使用的是brython中的local_storage但是,它可不是python定义的哦,而是HTML 5提供的存储数据的API之一,可以在浏览器中保持键值对数据块。


现在来展示使用一下brython存储和删除的操作。


导入库:

from browser.local_storage import storage

存储数据,例如键值信息juejinName存储为pdudo

storage[juejinName] = "pdudo"


查询的话,直接使用storage[变量]就好,若为空,则返回None

v = storage[juejinName]

循环所有的key,需要引入window库,再使用for...in来完成

from browser import window
for key in window.localStorage:
    print(key)



也可以直接使用for...in来遍历storage

而删除数据呢?只需要像删除字典一下

del storage[juejinName]

storage是不是操作起来和字典非常类似呢?减少了开发者的学习成本。

上述案例,已经放到下面的链接中了:

image.png


制作项目


有了上述前置条件后,我们再看该项目,便可以总结为 针对localStorage的增删查,首先当页面加载出来的时候,我们需要先遍历一下localstorage数据,从而映射为一个table,例如:

for key in window.localStorage:
    tr = html.TR()
    datas = json.loads(storage[key])
    delBtn = html.BUTTON("已原谅")
    delBtn.dataset["id"] = datas["id"]
    delBtn.className = "confirm-btn"
    delBtn.bind("click",delGrudges)
    td = html.TD(delBtn+" "+time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(int(datas["id"]))))
    tr <= td
    for tdVal in datas["whos"],datas["Text"]:
      td = html.TD(tdVal)
      tr <= td
    tb <= tr 
    userWindows <= tb


上述代码是遍历localStorage,而后在定义删除按钮,等将其他值组合完毕后,全部加载进table中,而后再页面上显示。

而添加数据呢?

def saveGrudges(ev):
  getWhoVal = document["whos"].value
  getTextVal = document["textArea"].value
  if getWhoVal == "" or getTextVal == "":
    return
  document["saveBtn"].unbind("click")
  ids = int(time.time())
  datas = {
    "id": ids,
    "whos": getWhoVal,
    "Text": getTextVal
  }
  storage[str(ids)] = json.dumps(datas)



上述代码,显示获取inputtextarea框中的值,再判断是否用户没有输入,我们将数据组装为一个字典,而后转换为字符串,再存入localstage中。


还有其他操作,这个可以直接看代码说明,brython很简单的。



总结


这篇文章,是善用localStorage来作为键值对存储,以此来保证打开和关闭浏览器,不会对数据产生影响,整个项目就是围绕这个localStorage增删改查来操作的。


相关文章
|
运维 Cloud Native 架构师
【组装式架构设计】架构演进简史
一步一步从单体到 SOA,从微服务再到云原生的科普后端架构演进史
28304 12
【组装式架构设计】架构演进简史
|
JavaScript Windows
Cocos Creator3.8 项目实战(十)使用 protobuf详细教程
Cocos Creator3.8 项目实战(十)使用 protobuf详细教程
1606 0
|
11月前
|
边缘计算 安全 物联网
探索边缘计算:架构、优势与未来趋势
探索边缘计算:架构、优势与未来趋势
|
5月前
|
网络协议 Ubuntu Docker
Docker Compose--命令说明
Docker Compose--命令说明
950 30
|
前端开发
CSS动画新技巧:打造阴影上下抖动的视觉效果!
CSS动画新技巧:打造阴影上下抖动的视觉效果!
|
SQL Oracle 关系型数据库
SQL中NEXTVAL获取序列值的应用场景与示例
SQL中NEXTVAL获取序列值的应用场景与示例
|
安全 网络协议 网络安全
详解IP安全:IPSec协议簇 | AH协议 | ESP协议 | IKE协议
详解IP安全:IPSec协议簇 | AH协议 | ESP协议 | IKE协议
1994 3
|
运维 网络协议 Linux
【运维系列】Centos7安装并配置PXE服务
PXE是Intel开发的预启动执行环境,允许工作站通过网络从远程服务器启动操作系统。它依赖DHCP分配IP,DNS服务分配主机名,TFTP提供引导程序,HTTP/FTP/NFS提供安装源。要部署PXE服务器,需关闭selinux和防火墙,安装dhcpd、httpd、tftp、xinetd及相关服务,配置引导文件和Centos7安装源。最后,通过syslinux安装引导文件,并创建pxelinux.cfg/default配置文件来定义启动参数。
757 0
|
存储 NoSQL 搜索推荐
【Redis从头学-7】Redis中的Set数据类型实战场景之用户画像去重、共同关注、专属粉丝
【Redis从头学-7】Redis中的Set数据类型实战场景之用户画像去重、共同关注、专属粉丝
494 0