# 开发记录和分析工作的工具

> by 程序员鱼皮 [知识星球](https://yupi.icu)
>
> 直播回放会发布到编程学习圈子：https://yupi.icu
>
> 直播回放 + 项目源码 + 笔记：https://t.zsxq.com/03J6URbem （加入星球可见）
>



## 需求

1. 个人可以记录自己每日的工作、工作时长、工作打标签（工作进度、目标）
2. 可以根据日历查看自己的工作（视图）
3. 可以对一定周期内的工作进行分析（饼图、折线图、柱状图）



## 进度

#### 第一次开发

完整基本前后端搭建和联调，实现任务创建和查询功能



#### 第二次开发

1. 优化样式
2. 增删改查（搜索 / 排序）

2. 登录
3. 管理员分析，分析所有用户（指定范围用户）的工作情况
4. 任务拖动
5. 多种视图布局



## 技术选型

1. 前端：Vue 3 + Vite 2 + Ant Design Vue（桌面端为主）
   - 数据可视化：AntV G2
   - 日期处理库：Day.js
2. 后端：SpringBoot + Redis 分布式登录



## 前端整合

1. Vite 初始化
2. Vue Router 整合，添加路由功能
3. Ant Design Vue 整合
4. 整合 AntV G2，支持实例图表



## 前端开发

1. 新增记录：表单页
2. 展示记录：列表页
3. 分析



## 后端开发

1. 拉取通用模板，已经整合好了常用框架、用户登录用例等
2. 设计库表



### 数据库设计

#### 工作表

```
name: string;
description: string;
duration: number;
tags: string[];
planTime?: Date;
createTime: Date;
updateTime: Date;
```

id bigint

任务名称 varchar

描述 varchar

时长 duration int

tags  varchar

planTime 计划时间 datetime

创建时间  datetime

更新时间  datetime

逻辑删除 tinyint 0 / 1



#### SQL

```sql
# 任务
create table work
(
    id          bigint auto_increment comment 'id' primary key,
    name        varchar(256)       null comment '任务名称',
    description text               null comment '描述',
    duration    int                null comment '时长（秒）',
    tags        varchar(512)       null comment '标签列表json',
    planTime    datetime comment '计划时间',
    createTime  datetime default CURRENT_TIMESTAMP comment '创建时间',
    updateTime  datetime default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
    isDelete    tinyint  default 0 not null comment '是否删除'
) comment '任务';
```





### 接口设计

#### 创建任务

1. 校验参数
2. 插入数据到数据库中

查询任务列表

直接用接口文档在线测试

### 查询列表（分页）

MyBatis Plus 的 Page 方法



## 前后端联调

### 分页实现

1. 前端分页（一次请求全量数据，前端去计算每一页展示什么）
2. 后端分页（一次请求一页的数据，前端页面时重新发请求去加载）