课堂作业：个人记账本

个人记账本：项目实现与团队协作记录

项目	内容
作业所属课程	软件工程
作业要求	个人记账本作业要求
作业目标	实现一个可以记录、查看、筛选和统计日常收入与支出的个人记账本，并通过 GitHub 完成团队协作和软件演示。
团队名称	奶蛙工程
团队成员及学号	组长：102401601-李佳雨；组员：102401403-潘岳、102401416-唐捷、102401502-王钰涵、102401603-张馨恬、102401605-王乐禾、102401606-黄丽婷、152402217-陈霁然、052403146-蔡明润

一、项目介绍

本项目是一个中文个人记账网页，支持记录日常收入和支出。用户可以填写日期、金额、类别和备注，查看最近账目，并按类型、类别、日期范围和关键词筛选。页面还提供月度收支统计、支出分类图表和 CSV 导出。

项目使用浏览器的 localStorage 保存记录，数据保存在当前浏览器中，不会上传到服务器。项目无需安装依赖，打开 记账本.html 即可运行。

二、团队分工与实际完成内容

成员	负责模块	实际完成内容
052403146-蔡明润	01 记账录入	实现收入和支出表单；切换收支类型时更新类别；检查金额为正数、日期已填写；保存记录并刷新页面。
102401603-张馨恬	02 记录列表	展示最近五笔记录，支持切换查看全部；显示类型、类别、日期、备注和金额，并提供空数据提示。
102401606-黄丽婷	03 记录筛选	支持按收支类型、类别、日期范围和关键词筛选，并按日期及创建时间排序。
102401416-唐捷	04 收支统计	提供月份选择，计算所选月份的收入、支出、结余和记录笔数，并更新统计卡片。
102401605-王乐禾	05 图表展示	按类别汇总所选月份的支出，展示环形图和图例；无支出数据时显示提示。
102401502-王钰涵	06 数据存储	使用浏览器本地存储读取和保存账目，并支持导出 CSV。当前代码尚未实现 CSV 文件导入、导入格式校验和重复记录处理。
152402217-陈霁然	07 页面界面	完成账本页面结构和样式，包括导航、统计卡片、图表、明细表、录入弹窗及响应式布局。
102401403-潘岳	08 交互反馈	提供操作提示消息和删除确认；确认删除后更新记录并刷新页面。
102401601-李佳雨	09 集成与发布	整理共享数据结构、类别和页面工具函数；在 HTML 中安排模块加载顺序并初始化页面。

三、运行环境与方法

操作系统：Windows
浏览器：Microsoft Edge
运行方式：打开项目中的 记账本.html
可选方式：如果浏览器限制本地页面，可在项目目录运行 python -m http.server 8000，然后访问 http://localhost:8000
数据保存位置：当前浏览器的本地存储

四、软件截图与演示视频

软件运行截图
演示视频： https://b23.tv/k4mof3d
演示内容：演示新增收入和支出记录，按类型、类别、日期范围和关键词筛选账目，查看月度收入、支出、结余及支出分类图表，并导出 CSV 文件。

五、软件亮点

本地保存： 账目保存在当前浏览器中，刷新页面后仍可读取。
多条件筛选： 支持按收支类型、类别、日期范围和关键词查找记录。
统计与图表： 展示所选月份的收入、支出和结余，并通过环形图展示支出类别分布。

六、遇到的困难及解决方法

1. 统一各模块使用的记录格式

问题： 录入、列表、统计和存储模块需要处理同一笔账目；如果字段名称或数据类型不统一，模块之间就无法正确衔接。
处理方法： 项目统一使用 {id, type, date, amount, category, note, createdAt} 作为记录结构。其中 type 使用 income 或 expense，日期使用 YYYY-MM-DD 格式，金额使用数字。
结果与收获： 各模块可以围绕同一份记录数据工作，减少重复转换和字段不匹配的问题。

2. 核对模块脚本的加载顺序

问题： 页面拆分为多个 JavaScript 文件，部分模块会使用公共变量、函数或其他模块提供的功能。
处理方法： 检查 记账本.html 中的脚本引用，先加载公共基础代码，再加载各功能模块，最后启动页面。
结果与收获： 明确了模块间的依赖关系，也让后续联调时更容易定位页面初始化相关的问题。

3. 处理 CSV 的格式边界

问题： CSV 单元格可能包含逗号或双引号；如果处理不当，打开文件时内容可能错列。
处理方法： 现有导出代码会给 CSV 单元格加引号，并转义单元格中的双引号，同时加入 UTF-8 BOM 以改善中文兼容性。
结果与收获： 导出格式更适合表格软件读取。CSV 导入、格式错误处理和重复记录处理仍需根据最终实现情况补充，当前不要将其描述为已经完成。

七、关键代码与设计说明

1. 从本地存储读取记录

function readRecords() {
  try {
    const value = JSON.parse(localStorage.getItem(KEY) || '[]');

    return Array.isArray(value)
      ? value.filter(record =>
          record &&
          ['income', 'expense'].includes(record.type) &&
          Number.isFinite(Number(record.amount))
        )
      : [];
  } catch {
    return [];
  }
}

该函数读取浏览器本地存储中的 JSON 字符串，并将其解析为记录数组。遇到格式损坏的数据时，通过 try...catch 返回空数组，避免页面因解析错误而无法启动。

2. 导出 CSV 文件

const rows = [
  ['日期', '类型', '金额', '类别', '备注'],
  ...records.map(record => [
    record.date,
    record.type === 'income' ? '收入' : '支出',
    record.amount,
    record.category,
    record.note
  ])
];

const csv = '\uFEFF' + rows
  .map(row =>
    row.map(value =>
      '"' + String(value ?? '').replaceAll('"', '""') + '"'
    ).join(',')
  )
  .join('\r\n');

代码先添加表头，再将记录转换为 CSV 行。每个字段加上双引号，并将字段中的双引号转义；\uFEFF 是 UTF-8 BOM，用于改善部分表格软件打开中文 CSV 时的显示效果。

八、团队编程体验

102401601-李佳雨：负责集成与发布让我更清楚地看到模块之间的依赖关系。整理脚本加载顺序和发布内容时，我体会到统一接口和及时沟通对团队协作很重要。
102401403-潘岳：负责交互反馈让我关注到用户操作后的提示和确认过程。删除确认和操作提示让界面使用起来更清楚。
102401416-唐捷：负责收支统计让我练习了按月份汇总数据，并检查收入、支出和结余之间的计算关系。
102401502-王钰涵：负责数据存储让我了解了浏览器本地存储和 CSV 导出的处理方式，也认识到导入时还要考虑格式错误和重复记录。
102401603-张馨恬：负责记录列表让我体会到列表展示、查看全部和空数据状态需要配合记录数据一起考虑。
102401605-王乐禾：负责图表展示让我练习了按类别汇总支出并计算占比，也需要考虑没有支出记录时的页面表现。
102401606-黄丽婷：负责记录筛选让我体会到多个筛选条件需要组合处理，并保持筛选结果和记录列表同步。
152402217-陈霁然：负责页面界面让我练习了组织页面布局和样式，也需要兼顾桌面与手机屏幕上的使用体验。
052403146-蔡明润：负责记账录入让我练习了表单校验和根据收支类型更新类别，并理解了保存后刷新相关页面数据的重要性。

九、PSP 时间记录

PSP2.1 阶段	活动	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	—	—
· Estimate	估计任务所需时间	10	12
Development	开发	—	—
· Analysis	需求分析、学习 CSV 处理	20	18
· Design Spec	编写设计说明	10	10
· Design Review	设计复审	10	10
· Coding Standard	确定代码规范	5	10
· Design	设计导入流程与重复判断	15	15
· Coding	编写数据读写与导入代码	60	80
· Code Review	代码复审	15	10
· Test	测试并修改	30	30
Reporting	报告	—	—
· Test Report	编写测试报告	10	10
· Size Measurement	统计代码工作量	5	5
· Postmortem & Process Improvement Plan	事后总结与改进计划	10	10
合计	只加带“·”的子活动行	200	220

十、GitHub 协作与贡献评价

GitHub 仓库：个人记账本仓库
Release：v1.0.0 发布页
Commit 记录：查看 main 分支提交记录
博客链接：当前博客文章

posted @ 2026-11-07 21:35 Hyalin 阅读(26) 评论(0) 收藏举报

刷新页面返回顶部