简易记事本项目（基于Vue 3 + Element Plus + SSM 个人事件管理系统）

项目简介

点滴365是一个基于 Vue 3 + Element Plus + SSM 开发的个人事件管理系统,旨在帮助用户高效管理 个人日程 和 待办事项。系统支持日记撰写、待办事项管理、数据统计分析、图片上传、定时提醒、实时天气等功能,让用户可以更好地记录生活点滴、规划工作任务。

核心技术栈

前端技术

前端框架: Vue 3
UI组件库: Element Plus
HTTP请求: Axios
日期处理: Day.js
图表可视化: ECharts 5

后端技术

IoC容器和AOP：Spring Framework 6.1.12
MVC框架：SpringMVC 6.1.12
ORM框架：MyBatis 3.5.16
数据库：MySQL 8.0
数据库连接池：Druid
数据校验：Validation
MyBatis分页插件：PageHelper
Java工具包：Hutool

数据库设计

user（用户表）

-- auto-generated definition
create table user
(
    id           int auto_increment comment '用户ID'
        primary key,
    username     varchar(50)                        not null comment '账户名',
    nickname     varchar(50)                        not null comment '昵称',
    password     varchar(255)                       not null comment '密码（哈希值）',
    avatar       varchar(255)                       null comment '头像地址',
    age          int                                null comment '年龄',
    phone        varchar(20)                        null comment '手机号',
    email        varchar(100)                       null comment '邮箱',
    created_time datetime default CURRENT_TIMESTAMP null comment '注册时间',
    constraint username
        unique (username)
);

tag（标签表）

-- auto-generated definition
create table tag
(
    id           int auto_increment comment '标签ID'
        primary key,
    user_id      int                                not null comment '用户ID',
    name         varchar(50)                        not null comment '标签名称',
    created_time datetime default CURRENT_TIMESTAMP null comment '创建时间',
    constraint tag_ibfk_1
        foreign key (user_id) references user (id)
            on delete cascade
);

create index idx_user_id_tag
    on tag (user_id);

event（事件表）

注意：我这里事件分为待办事项和日记两个大类，每个事件有一个标签

-- auto-generated definition
create table event
(
    id           int auto_increment comment '事件ID'
        primary key,
    user_id      int                                not null comment '用户ID',
    tag_id       int                                null comment '标签ID',
    category     int                                not null comment '事件分类，1-日记，2-待办事项',
    title        varchar(100)                       not null comment '事件标题',
    start_date   datetime                           null comment '事件起始时间',
    end_date     datetime                           null comment '事件截止时间',
    content      text                               null comment '事件具体内容',
    priority     tinyint                            null comment '事件级别 0:一般 1:紧急 2:重要',
    status       tinyint                            null comment '事件状态 0:未完成 1:已完成 2:作废 3:已过期',
    mood_tag     tinyint  default 0                 null comment '心情标签  -- 待办事项: 1:非常不满意 2:不满意 3:中立 4:满意 5:非常满意 -- 日记: 1:开心 2:平静 3:难过 4:生气 5:焦虑 6:期待 7:感动 8:疲惫',
    is_pinned    tinyint  default 0                 null comment '是否置顶 0:否 1:是',
    pin_time     datetime                           null comment '置顶时间',
    created_time datetime default CURRENT_TIMESTAMP null comment '创建时间',
    updated_time datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '更新时间',
    constraint event_ibfk_1
        foreign key (user_id) references user (id)
            on delete cascade,
    constraint event_ibfk_2
        foreign key (tag_id) references tag (id)
            on delete cascade
);

create index idx_tag_id
    on event (tag_id);

create index idx_user_id
    on event (user_id);

image（图片表）

-- auto-generated definition
create table image
(
    id           int auto_increment comment '图片ID'
        primary key,
    event_id     int                                not null comment '事件ID',
    image_url    varchar(255)                       not null comment '图片URL',
    created_time datetime default CURRENT_TIMESTAMP null comment '上传时间'
)
    comment '事件图片表';

create index idx_event_id
    on image (event_id);

核心功能

本项目实现功能包括：用户注册和登录、标签管理、用户信息管理、事件管理、小记、我的待办、待办截止提醒、数据统计、实时天气等

用户登录和注册

使用用户名、密码注册
密码需要符合长度和复杂度要求
防止重复注册

用户信息管理

支持修改用户基本信息
支持修改密码
支持上传头像

标签管理

标签用于对事件进行分类管理:

新增标签
修改标签
删除标签
标签分页列表查询
系统分配标签颜色

事件管理

主要功能:

新增待办事项 / 日记
修改待办事项 / 日记
待办状态管理、优先级设置
事件多条件分页列表查询
支持图片上传（最多三张）
支持满意度（待办）和心情（日记）记录

日记管理

主要功能:

写日记
修改日记
删除日记
日记列表查询
支持图片上传（最多三张）
支持心情标签
支持置顶功能

我的待办

主要功能:

添加 / 修改待办
放弃 / 完成待办
待办列表分页查询
支持图片上传（最多三张）
更人性化的时间提醒
支持截止时间提醒功能
定时处理过期待办

待办剩余时间处理

 /**
   * 获取待处理的待办事项
   */
  public List<TodoVO> getPendingTodos() {
      // 获取当前用户ID
      Integer userId = BaseContext.getCurrentId();
      
      // 查询待办事项
      List<Event> todos = eventMapper.getPendingTodos(userId);
      
      // 转换为VO对象
      return todos.stream().map(todo -> {
          TodoVO vo = BeanUtil.copyProperties(todo, TodoVO.class);
          vo.setTagName(tagMapper.getById(todo.getTagId()).getName());
          
          // 计算剩余时间
          LocalDateTime endDate = todo.getEndDate();
          LocalDateTime now =  LocalDateTime.now();
          long days = ChronoUnit.DAYS.between(now, endDate);
          
          if (days < 0) {
              vo.setRemainingTime("已过期");
          } else if (days == 0) {
              vo.setRemainingTime("今天到期");
          } else if (days == 1) {
              vo.setRemainingTime("明天到期");
          } else {
              vo.setRemainingTime(days + "天后到期");
          }
          
          // 获取图片列表
          vo.setImgList(imageMapper.selectByEventId(todo.getId()));
          
          return vo;
      }).collect(Collectors.toList());
  }

定时任务处理过期待办

详细讲解看上一篇博客SSM与SpringBoot项目中实现定时任务处理

//定时处理过期待办
@Slf4j
@Component
@RequiredArgsConstructor
public class EventStatusTask {

    private final EventMapper eventMapper;

    /**
     * 每5分钟执行一次，检查并更新过期事件状态
     * cron表达式：秒 分 时 日 月 周
     */
    @Scheduled(cron = "0 */5 * * * *")
    public void updateExpiredEventStatus() {
        try {
            int count = eventMapper.updateExpiredEventStatus();
            if (count > 0) {
                log.info("成功更新{}个过期事件状态", count);
            }
        } catch (Exception e) {
            log.error("更新过期事件状态失败", e);
        }
    }
}

数据统计

事件总数统计
已完成事件统计
分类统计
标签统计
事件分类统计分析
近七天事件完成情况统计

实时天气

在这里插入图片描述

// WeatherComponent.vue
const fetchWeather = async () => {
  const apiKey = 'your_api_key'
  const response = await axios.get(
    `https://restapi.amap.com/v3/weather/weatherInfo?key=${apiKey}&city=500000`
  )
  
  if (response.data.status === '1') {
    const liveData = response.data.lives[0]
    currentTemperature.value = liveData.temperature
    currentDescription.value = liveData.weather
    weatherIcon.value = getWeatherIcon(liveData.weather)
  }
}

// 天气图标映射
const weatherIcons = {
  '晴': 'sunny.png',
  '多云': 'cloudy.png',
  '阴': 'overcast.png',
  '小雨': 'rain.png'
}