仿钉钉界面备忘录项目-前后端实现: 使用React+UmiJS+TypeScript等技术前端开发,Nodejs+Express+Mysql等技术进行服务端开发的待办事件项目本项目分为两个版本:一是将数据持久化至json文件项目的版本,二是连接数据库服务端的版本;

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

#### 介绍
>备用毕设的项目源码
>
>此项目是由本人学习过程中的练手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. 运行示例
>
>  ![输入图片说明](https://images.gitee.com/uploads/images/2021/0512/172116_251811bc_4995263.png "image-20210512170714136.png")
>
>4. 此时整个项目已经跑起来了,通过提示可以看到访问路径,在浏览器中打开即可
>
>   ![输入图片说明](https://images.gitee.com/uploads/images/2021/0512/172136_0d58ef55_4995263.png "image-20210512171345089.png")
>
>5. 此版本项目将数据`持久化至项目中的db.json`

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

>更新中

#### 大致实现效果

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

##### Ⅰ-登录界面

![输入图片说明](https://images.gitee.com/uploads/images/2021/0512/172448_9eb0e944_4995263.png "1620811459.png")

##### Ⅱ-忘记密码找回

![输入图片说明](https://images.gitee.com/uploads/images/2021/0512/172530_b2c874db_4995263.png "image-20210512171900942.png")

##### Ⅲ-注册邮箱验证码

![输入图片说明](https://images.gitee.com/uploads/images/2021/0512/172641_86a76fa2_4995263.png "122.png")

##### Ⅳ-主页效果展示

![主页效果展示](https://images.gitee.com/uploads/images/2021/0319/095649_de8a8161_4995263.png "主页效果.png")

##### Ⅴ-任务更新

![任务更新](https://images.gitee.com/uploads/images/2021/0319/095705_a7a963d0_4995263.png "更新1.png")

##### Ⅵ-提醒效果

![提醒效果](https://images.gitee.com/uploads/images/2021/0319/095749_b6b15718_4995263.png "提醒效果.png")

##### Ⅶ-其他的自己看

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

努力学习的汪/仿钉钉界面备忘录项目-前后端实现

简介

发行版

贡献者

近期动态

努力学习的汪/仿钉钉界面备忘录项目-前后端实现 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

努力学习的汪/仿钉钉界面备忘录项目-前后端实现