仿番茄todo的时间管理小程序

weixin_50020009

已于 2025-03-10 14:03:37 修改

阅读量678

点赞数 5

文章标签：小程序 apache java spring boot

于 2025-03-10 13:32:26 首次发布

本文链接：https://blog.csdn.net/weixin_50020009/article/details/146148306

版权

Focus Clock 专注时钟小程序及后台管理系统项目实践(源码获取方式最下方)
项目功能实现图：
在这里插入图片描述
小程序相关页面截图：

在这里插入图片描述

在这里插入图片描述

后台管理系统截图：

在这里插入图片描述

一、项目概述
1.1 项目背景
项目背景

当今社会，人们的注意力越来越分散
需要一个帮助用户专注学习和工作的工具
结合小程序的便捷性和后台管理的完整性
二、技术架构

2.1 前端技术栈
小程序端：

原生微信小程序开发
WebSocket 实时通信
后台管理系统：
Vue.js 2.x
Element UI
Vuex 状态管理
Vue Router 路由管理
Axios 请求处理

2.2 后端技术栈
核心框架：

Spring Boot 2.x
MyBatis Plus
WebSocket
MySQL 数据库

三、核心功能实现
3.1 专注计时与待办管理
待办事项数据结构

@Data
@TableName("todos")
public class Todo {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String openId;
    private String content;
    private Integer estimatedDuration;
    private Integer actualDuration;
    private Integer priority;
    private Boolean completed;
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
}

待办事项管理接口

@RestController
@RequestMapping("/api/todo")
public class TodoController {
    @GetMapping("/list")
    public Result<List<Todo>> getTodos(@RequestParam String openId) {
        List<Todo> todos = todoService.getTodosByOpenId(openId);
        return Result.success(todos);
    }

    @PostMapping("/add")
    public Result<Boolean> addTodo(@RequestBody Todo todo) {
        return Result.success(todoService.addTodo(todo));
    }
}

3.2 自习室功能实现
WebSocket 实时通信

@ServerEndpoint("/websocket/{roomId}/{openId}")
@Component
public class WebSocketServer {
    private Session session;
    private String roomId;
    private String openId;
    
    @OnOpen
    public void onOpen(Session session, @PathParam("roomId") String roomId, 
                      @PathParam("openId") String openId) {
        this.session = session;
        this.roomId = roomId;
        this.openId = openId;
        // 处理用户加入自习室逻辑
    }
}

自习室数据结构

@Data
@TableName("study_rooms")
public class StudyRoom {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String name;
    private Integer capacity;
    private Integer onlineCount;
    private Integer totalFocusTime;
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
}

3.3 复盘心得功能
心得管理前端实现

<template>
  <div class="review-container">
    <el-table :data="list" border>
      <el-table-column prop="mood" label="心情" width="100">
        <template #default="{row}">
          <div class="mood-wrapper">
            <i :class="getMoodIcon(row.mood)" 
               :style="{ color: getMoodColor(row.mood) }">
            </i>
            <span>{{ getMoodText(row.mood) }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 其他列... -->
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    getMoodIcon(mood) {
      const icons = {
        'happy': 'el-icon-sunny',
        'normal': 'el-icon-partly-cloudy',
        'sad': 'el-icon-cloudy'
      }
      return icons[mood] || 'el-icon-question'
    }
  }
}
</script>

3.4 后台管理系统
路由配置

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: 'user',
        name: 'User',
        component: () => import('@/views/user/index'),
        meta: { title: '用户管理' }
      },
      {
        path: 'todo',
        name: 'Todo',
        component: () => import('@/views/todo/index'),
        meta: { title: '待办管理' }
      },
      {
        path: 'studyroom',
        name: 'StudyRoom',
        component: () => import('@/views/studyroom/index'),
        meta: { title: '自习室管理' }
      }
      // 其他路由...
    ]
  }
]