纯前端的 todo-list, 界面样式自由发挥, 响应式设计自由发挥。可以参考样式设计。
可以使用原生 js、Vue、React, 任何 ui 库、动画库等等。
- 数据能够增删改查, 本地持久化存储。
- 允许新建多个 list, 每个 list 包含多个 todo, 且list 允许重命名
- todo 至少包含未完成, 执行中, 已完成三种状态。并且需要按照状态分组。
加分项
- 使用 IndexedDB 来进行持久化存储。
- 使用相关 mock AYE (如 mockjs，msw 等) 在浏览器里模拟后端，并通过相关 网络请求接口/库 来模拟前后端 交互流程
10.1从零开始学习, 配合ChatGPT快速迭代升级, 使用原生JS开发, 完成了包括附加功能的所有功能, 并额外增加了一些加强用户交互体验的小设计。(样式不那么好看但真的尽力了)
- VsCode (没有用插件(我也不知道有啥插件能用), 所以其实是高亮记事本+Git管理工具)
- ChatGPT (唯一神, 强大的学习工具, 但是不要对它提抽象需求, 气晕)
- Chrome (暴论: 比国内的Edge好用)
开发测试时, 直接把html拖到浏览器, 更新代码就是刷新浏览器。(总感觉这样很丑陋, 流程不太对劲, 是因为没学框架的问题吗...)
分为两个模块, 因为我觉得这是两个需求, 我不可能既使用IndexedDB, 又使用Mock来模拟后端吧?
- 代码见Todo-indexedDB文件夹
- 使用: 将文件夹下的
to-do.html拖到浏览器即可 - 介绍:
- 第一次使用, 将自动生成IndexedDB数据库, 用户将看到默认创建的default list。后续使用会从数据库读取以前已经创建的lists。
- 用户可以在当前列表下新建待办事项, 默认创建状态是未完成。如果待办事项太多, 会产生一个内部拖动条, 而不是全局拖动条。
- 用户可以对已经存在的待办事项完成以下操作:
- 修改状态。可选状态为: 未完成、执行中、已完成。小改一下颜色, 以防视觉疲劳。(样式丑一点没办法, 实在修不好)
- 编辑内容。双击待办事项, 可以修改待办事项内容。双击修改, 多么符合操作直觉啊。
- 删除。当鼠标指针移动到某一待办上时, 会显示删除标记, 单击可以删除本条待办。大家再也不必因为一堆显眼的删除标记而厌烦了。
- 用户可以通过点击筛选按钮, 选择展示某一状态的所有待办。
- 用户可以新建列表, 以分类管理待办事项。
- 用户可以对已经存在的列表完成以下操作:
- 编辑列表名。
- 删除列表。永远存在至少一个列表。
- 用户可以切换显示的列表。
- 增加了一个统计功能, 方便用户查看当前列表待办事项状态的统计信息。
- 代码见Todo-mock文件夹
- 使用: 将文件夹下的
to-do.html拖到浏览器即可 - 介绍:
- 没啥好介绍的, 该有的都有, 区别在于把数据库的交互改为使用axios获取mock模拟的虚假数据 (线上库也太酷了)
- 代码注释含量极高, 但由于以前学的是python的pep8规范, 所以可能不符合前端开发的规范, 还请担待。
- CSS文件是在GPT的辅助下搞定的, JS语法还多少了解, CSS真的没辙。
- 框架啊框架, 我敬爱你口牙。(响应式变量的含金量, 我哭死)
- 拆炸弹真好玩。
- 饱满的热情与不惧问题的心态, 是我最珍视的财富。
- 可以看出, 其实每次更新都重新渲染了一次InnerHTML, 这其实是一种糟糕的做法, 因为占据了大量的资源。实际上, 如果要写的话, 也可以精细到每个操作的具体步骤, 但我个人觉得对于一个单机的应用来说, 如此投入的精力与产出就不成正比了, 因而放弃。
- 目前待办事项的排序是根据加入时的序号排序的, 也许会有人希望根据种类排序显示？