用 Node.js 和 React 打造高效记账系统

2024-01-27 00:53:04

作为记账本开发之旅的第八章，我们踏上了进阶之路，即在搭建的记账系统里添加账单清单页，以便更好地展示和管理账单。

精彩前瞻：完善的账单清单页

优雅的账单展示：以表格形式列出所有账单，包含日期、类别、金额、等关键信息。
便捷的账单过滤：支持按日期、类别等条件进行账单过滤，满足不同查询需求。
高效的账单搜索：提供搜索功能，可快速查找特定账单，方便账务查询。

Node.js 服务端搭建账单清单页 API

在 Node.js 服务端，我们用 Express 框架搭建了一个新的 API 路由，用来获取账单列表。这个 API 支持账单过滤和搜索功能，便于客户端进行账单查询。

const express = require('express');
const router = express.Router();

const bills = require('../models/bills');

// 获取账单列表
router.get('/bills', async (req, res) => {
  let { date, category, keyword } = req.query;
  date = date ? new Date(date) : null;

  const filter = {};
  if (date) filter.date = date;
  if (category) filter.category = category;
  if (keyword) filter.description = { $regex: keyword };

  const billsList = await bills.find(filter);
  res.json(billsList);
});

module.exports = router;

React 前端开发账单清单页

在 React 前端，我们创建了一个新的组件 BillsList 来展示账单清单。这个组件使用 useEffect 钩子来获取账单列表，并使用 useState 钩子来管理账单过滤和搜索条件。

import React, { useState, useEffect } from 'react';

const BillsList = () => {
  const [bills, setBills] = useState([]);
  const [filter, setFilter] = useState({});
  const [keyword, setKeyword] = useState('');

  useEffect(() => {
    const fetchBills = async () => {
      const res = await fetch('/api/bills', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(filter),
      });
      const data = await res.json();
      setBills(data);
    };
    fetchBills();
  }, [filter]);

  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilter({ ...filter, [name]: value });
  };

  const handleKeywordChange = (e) => {
    setKeyword(e.target.value);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    setFilter({ ...filter, keyword });
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input type="text" name="keyword" value={keyword} onChange={handleKeywordChange} placeholder="搜索账单" />
        <button type="submit">搜索</button>
      </form>
      <table>
        <thead>
          <tr>
            <th>日期</th>
            <th>类别</th>
            <th>金额</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {bills.map((bill) => (
            <tr key={bill._id}>
              <td>{bill.date.toLocaleDateString()}</td>
              <td>{bill.category}</td>
              <td>{bill.amount}</td>
              <td>{bill.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default BillsList;