掌握 Node.js + React 前端实战，打造你的专属记账本

在瞬息万变的数字时代，财务管理已成为现代生活不可或缺的一部分。传统的纸笔记账方式效率低下且容易出错，因此，创建数字记账工具已成为当务之急。本文将通过 Node.js 和 React 这两项强大技术，循序渐进地指导你构建一个功能完善的记账本应用，助你轻松管理个人或家庭财务。

前言：Node.js 与 React 的强强联手

Node.js 是一个流行的 JavaScript 运行时环境，它以其异步、非阻塞特性而闻名，非常适合构建高性能的服务器端应用程序。另一方面，React 是一款领先的 JavaScript 库，主要用于构建交互式用户界面。将这两项技术相结合，你可以创建动态且响应迅速的前端应用，满足现代网络应用的需求。

搭建前端开发环境

安装 Node.js 和 React

首先，确保已安装 Node.js 和 React。你可以访问官方网站进行下载和安装。

创建 React 应用

使用 create-react-app 工具创建新的 React 应用：

npx create-react-app my-ledger
cd my-ledger

导入必要的库

在你的项目中，安装以下必需的库：

npm install axios redux react-redux

构建后端 API 使用 Node.js

在独立的目录中，创建新的 Node.js 项目：

mkdir backend
cd backend
npm init -y

安装依赖项

安装必需的依赖项：

npm install express mongoose body-parser cors

定义数据模型

在 backend 目录下，创建 schema 文件并定义数据模型：

// schema.js
const mongoose = require('mongoose');

const transactionSchema = new mongoose.Schema({
  amount: { type: Number, required: true },
  category: { type: String, required: true },
  date: { type: Date, required: true },
  description: { type: String },
});

module.exports = mongoose.model('Transaction', transactionSchema);

定义路由

在 backend 目录下，创建 routes 文件并定义路由：

// routes.js
const express = require('express');
const router = express.Router();
const Transaction = require('./schema');

router.get('/transactions', async (req, res) => {
  const transactions = await Transaction.find();
  res.json(transactions);
});

router.post('/transactions', async (req, res) => {
  const transaction = new Transaction(req.body);
  await transaction.save();
  res.json(transaction);
});

module.exports = router;

启动后端服务器

在 backend 目录下，创建 server.js 文件并启动服务器：

// server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use('/api', require('./routes'));

mongoose.connect('mongodb://localhost:27017/my-ledger', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const PORT = 5000;

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

开发记账本应用：React 前端

创建 React 组件

在 React 应用中，创建以下组件：

• Ledger.js（主组件）
• TransactionForm.js（交易表单）
• TransactionList.js（交易列表）
• TransactionItem.js（单个交易项）

连接到后端 API

使用 axios 库连接到后端 API：

// Ledger.js
import axios from 'axios';

...

const getTransactions = async () => {
  const response = await axios.get('/api/transactions');
  setTransactions(response.data);
};

const addTransaction = async (transaction) => {
  const response = await axios.post('/api/transactions', transaction);
  setTransactions([...transactions, response.data]);
};

构建用户界面

在 Ledger.js 组件中，构建用户界面：

// Ledger.js

...

return (
  <div>
    <TransactionForm addTransaction={addTransaction} />
    <TransactionList transactions={transactions} />
  </div>
);