仿钉钉待办事件项目-前后端实现

介绍

备用毕设的项目源码

此项目是由本人学习过程中的练手Demo演化而来,而在创建项目之后的学习中,将学到的知识点不断补充进来,所以该项目使用许多React全家桶以及其他学习到的技术,如React与React Hooks(登录组件)混用、不使用React-cli脚手架创建而使用UniJs进行创建项目等...

此项目分成两部部分:一是将数据持久化至json文件项目的版本,二是连接数据库服务端的版本

技术栈

1. 前端技术:

   1. 使用 UmiJs 前端框架代替 React-cli 创建项目,按照Umi的目录结构进行项目开发

   2. 使用 React 的类组件与 React Hooks 的函数式组件进行组件编写

   3. 使用 Ant Design UI库

   4. 使用 Mobx 数据状态管理器代替 Redux 进行状态数据管理

   5. 结合 TypeScript 进行代码开发

   6. 使用如:ES6、H5桌面通知API、Scss预处理器与其模块化引入、Json web token进行令牌验证等技术...

2. 服务端技术

   1. 使用 json-server 插件模拟搭建一个简单的node服务器(就是写入json文件)
   2. NodeJs+Express框架进行服务器搭建
   3. 数据库使用Mysql数据库
   4. nodemailer(邮箱验证绑定),jsonwebtoken(JWT鉴权)等

V1.0 数据持久化至json文件项目使用方式

1. 打开V1.0服务端,在这目录运行控制台或者cmd(需要开三个),

   1. 在此目录中yarn或者npm i进行前端依赖下载
   2. 在此目录中yarn fake-serve或者npm run fake-serve运行假服务器(用作对于json文件进行增删改查)
   3. 在此目录中yarn start或者npm run start运行前端项目

2. 打开V1.0服务端,然后cd进入 emil-server文件目录中(这就是node服务器,用做发送邮件使用)

   1. 在此目录中yarn或者npm i下载服务器所需依赖
   2. yarn start 或者npm run start运行项目

3. 运行示例

4. 此时整个项目已经跑起来了,通过提示可以看到访问路径,在浏览器中打开即可

5. 此版本项目将数据持久化至项目中的db.json

V2.0 连接数据库服务端项目使用方式

更新中

大致实现效果

下面只展出部分功能效果图(按照V1.0版本展示)

Ⅰ-登录界面

Ⅱ-忘记密码找回

​

Ⅲ-注册邮箱验证码

​

Ⅳ-主页效果展示

Ⅴ-任务更新

Ⅵ-提醒效果

Ⅶ-其他的自己看

声明

本人还是学生,之前是学习java与C语言.本项目是React以及许多其他新学知识点,学习时间短,主要是现学现用,代码质量不一定很好,多海涵 2021届