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

---

1. 前言

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

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

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

😛应用网址：TodoList

😜源码仓库：[GitHub]

2. 食用指南

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

创建完成后，将/src/utils/constant.ts下的env改成自己的环境 ID：

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

在数据库模块中，新建一个名为config的集合，如下所示：

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

这样下来，本地安装完依赖包之后，就可以yarn start或者npm start启动项目啦~

3. 刷新后可能出现 404 的问题

方法一：

使用HashRouter

<HashRouter>
  <App />
</HashRouter>

方法二：

继续使用BrowserRouter，但腾讯云 CloudBase 需要做一些设置。

点击静态网站托管中的基础配置，在路由配置中添加一条重定向规则如下：

错误码404时重定向到 /index.html即可解决问题。

4. 应用简介

1. 主要功能

• 邮箱注册、登录
• 注册邮箱地址、密码的验证
• 退出功能
• 黑暗模式、白天模式切换
• 用户累计完成的任务计数
• 添加、修改近期任务、长期任务
• 完成任务
• 删除任务
• 近期任务转为长期任务
• 长期任务转为近期任务
• 清空所有已完成任务
• 适配移动端

2. 主要用到的技术

前端

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

后端

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

• 用户管理：注册、登录
• 数据库：存放用户任务数据
• 网站托管