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


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重构