一款使用React、腾讯云开发的TodoList待办事项Web应用

😃😃😃本人能力有限，欢迎大佬指正改进~

1. 前言

最近写了一款基于React脚手架开发的 TodoList 网页应用，主要记录自己的代办事务，方便查看、管理、安排时间，提升效率。

PC Web 端 + 移动端 + 黑暗模式，可日常使用。

没有复杂的界面，没有繁琐的设置，开箱即用，专注于任务管理。

😛应用网址：TodoList

😜源码仓库：[GitHub]

2. 食用指南

fork本项目后，需要在腾讯云开发CloudBase创建一个云开发环境，选择空模板即可：

创建完成后，获取到云环境的环境id，填入到项目的相应位置：

在登录授权模块中，打开邮箱登录和用户名密码登录，并根据提示，配置邮箱登录：

为了能在React脚手架中本地预览项目，需要将localhost:3000添加到安全配置中的WEB安全域名中。如果有自定义域名，也将自定义域名添加进来。否则会产生跨域问题。

这样下来，就可以yarn start或者npm start启动项目啦~

3. 应用简介

1. 主要功能

• 邮箱注册、登录
• 注册邮箱地址、密码的验证
• 邮箱登录后，可绑定用户名，选择使用用户名登录同一账号
• 退出功能
• 页脚显示一句诗词（今日诗词）
• 实时时间显示
• 黑暗模式、白天模式切换，下次登录自动切换上次应用的模式
• 用户累计完成的任务计数
• 上传用户头像、显示头像
• 修改用户昵称、显示昵称
• 根据时间段显示不同的欢迎语句
• 添加、修改近期任务、长期任务
• 完成任务
• 删除任务
• 近期任务转为长期任务
• 长期任务转为近期任务
• 清空所有已完成任务
• 按钮提示功能
• 适配移动端
• 移动端可将网页添加到主屏幕，实现类似 App 效果

2. 主要用到的技术

前端

• React脚手架Create-React-App
• 状态集中管理工具Redux
• 前端路由React-Router、集中式路由管理react_router_config、路由鉴权
• 少量使用AntD组件库 （Icon图标、Tooltip文字提示、Notification通知提醒框、Message全局提示）
• LocalStorage客户端存储

后端

后端使用腾讯云CloudBase云端一体化后端云服务，包括：

• 用户管理：注册、登录
• 数据库：存放用户任务数据
• 云存储：存放用户上传的头像
• 网站托管

4. 主要功能实现

1. 登录前后的路由鉴权

未登录的用户只能访问到登录/注册页面，已登录的用户自动跳转到任务管理页面。用户的登录信息保存在客户端LocalStorage，整个应用初始化时，首先判断用户是否登录，将是否登录的信息保存在redux中。应用根据redux中的状态渲染登录/注册组件or任务管理组件，其中任务管理组件必须已登录才会渲染。

登录时，调用CloudBase的用户管理接口；退出时，清空LocalStorage中的数据即可。用户成功登录、退出，分别更新redux状态。

2. 任务列表展示

用户成功登录时，向数据库发起请求，获取用户的所有任务，保存在redux中。各个组件根据redux中任务的不同属性、分别渲染近期任务、长期任务、已完成任务即可。

3. 任务添加、编辑、删除

添加新任务时，获取到用户输入的内容。向服务器发起请求，添加新任务，返回的数据中拿到数据的ID，将输入的内容、ID组成一条数据，添加到redux状态中，状态变化，驱动页面更新。

编辑、删除任务时，只要获取到用户编辑数据的ID，先在redux中完成修改，可以较快地更新页面，提升用户体验。再向服务器发起请求，执行同样的操作。

完成任务实际上也是编辑任务，只是修改了任务对象的属性值。

4. 累计完成任务计数、黑暗模式数据

用户登录成功时，向数据库发送请求，查找是否有存放用户数据的文档。若无，则代表是第一次登录，则创建一条新文档，用于存放用户的累计任务完成数、是否黑暗模式数据，同时初始化redux；若有，则不是第一次登陆，读取数据库中的累计任务完成数、是否黑暗模式数据，放入redux中。页面根据redux中的数据，显示用户的累计任务完成数，并展示黑暗模式或白天模式。

5. 上传、修改头像

使用<input />标签选择文件，触发onChange后，验证选择的文件类型、大小等数据，满足一定条件后，才能将图片上传到CloudBase的云存储，返回图片的链接，放入redux，页面根据链接展示头像，实现预览功能。用户满意后，再点击上传按钮，发送网络请求，将头像链接保存在CloudBase的用户信息中。

每次成功登录后，都会发送网络请求，获得用户的头像链接，保存在redux，页面根据链接展示用户头像。

5. 未来计划

由于本人能力有限，应用还有很多可以再完善的地方，将来可能实现的计划（功能）：

1. 使用electron技术，将应用做成PC客户端

2. 利用React Native，将应用做成移动端应用

3. 开发微信小程序端

4. 添加自定义分类功能

5. 添加自定义更换背景图片

6. 完成TypeScript重构

   …

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/