React 果果记账系统的综合方案

2023-11-17 11:02:23

1. 引言

React 是一个当下流行的 JavaScript 框架，其设计理念是以声明式的方式构建用户界面，旨在构建高速、动态的网络应用。果果记账系统作为 React 技术的运用实例，成功融合了数据持久化、数据展示等技术手段。在本文中，我们将进一步深究该系统的开发过程，揭示最优方案，满足用户的核心需求。

2. 系统概述

果果记账系统提供了一种简单直观的用户界面，赋能于日常记账。记录下开支的日期、金额、账户、分类等信息，果果记账系统使财务管理变得毫不费力。通过账户和分类的汇总，系统呈现出财务数据的直观面貌，助你全面掌握收支状况。

3. 数据持久化

对于记账应用而言，数据持久化十分关键。果果记账系统采用 JSON 格式存储记账数据，保证数据安全的同时也更便于后续维护和开发。

3.1 数据存储结构

果果记账系统的数据存储结构如下所示：

{
  accounts: [
    {
      id: 1,
      name: '现金',
      balance: 1000
    },
    {
      id: 2,
      name: '银行卡',
      balance: 2000
    }
  ],
  categories: [
    {
      id: 1,
      name: '餐饮'
    },
    {
      id: 2,
      name: '交通'
    },
    {
      id: 3,
      name: '购物'
    }
  ],
  records: [
    {
      id: 1,
      date: '2023-03-08',
      amount: 100,
      accountId: 1,
      categoryId: 1
    },
    {
      id: 2,
      date: '2023-03-09',
      amount: 200,
      accountId: 2,
      categoryId: 2
    }
  ]
}

3.2 数据存储方式

果果记账系统采用本地存储的方式存储数据，即在用户浏览器中保存记账数据。这种方式的优点是操作简单，无需服务器端支持。缺点是数据不能跨设备同步，且容易丢失。

4. 数据展示

为了让用户能够清晰地查看记账数据，果果记账系统采用了多维度的展现形式。

4.1 账单列表

账单列表是果果记账系统最基本的展现形式，用于显示用户的全部记账记录，列举每一笔开销的日期、金额、账户、分类等信息。

4.2 账户列表

账户列表显示了用户的所有账户信息，包括账户名称、余额等。通过账户列表，用户可以快速了解各账户的收支情况。

4.3 分类列表

分类列表显示了用户的所有收支分类，包括分类名称、收支金额等。通过分类列表，用户可以快速了解各分类的收支情况。

5. 操作优雅

5.1 更新

在原有不优雅的更新机制上，我们进行了优化。原来的代码如下：

const updateRecord = (record) => {
  const records = JSON.parse(localStorage.getItem('records'))
  const index = records.findIndex(r => r.id === record.id)
  records[index] = record
  localStorage.setItem('records', JSON.stringify(records))
}

优化的代码如下：

const updateRecord = (record) => {
  const records = JSON.parse(localStorage.getItem('records'))
  const index = records.findIndex(r => r.id === record.id)
  records.splice(index, 1, record)
  localStorage.setItem('records', JSON.stringify(records))
}

5.2 删除

同样，为了让操作更优雅，我们将不优雅的删除代码进行优化。原代码如下：

const deleteRecord = (id) => {
  const records = JSON.parse(localStorage.getItem('records'))
  const index = records.findIndex(r => r.id === id)
  records.splice(index, 1)
  localStorage.setItem('records', JSON.stringify(records))
}

优化的代码如下：

const deleteRecord = (id) => {
  const records = JSON.parse(localStorage.getItem('records'))
  const index = records.findIndex(r => r.id === id)
  records[index].isDeleted = true
  localStorage.setItem('records', JSON.stringify(records))
}