React 应用管理员面板构建：从本地 JSON 到生产级数据管理

// 假设这是你的React组件中的一个函数
const handleSaveData = (newData) => {
  // newData 是管理员编辑后的数据对象
  const jsonString = JSON.stringify(newData, null, 2); // 格式化JSON字符串

  const blob = new Blob([jsonString], { type: 'application/json' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'local.json'; // 指定下载的文件名
  document.body.appendChild(a); // 必须添加到DOM中才能触发点击
  a.click(); // 模拟点击下载
  document.body.removeChild(a); // 下载完成后移除
  URL.revokeObjectURL(url); // 释放URL对象

  alert('新的 local.json 文件已生成并下载，请手动替换项目中的旧文件。');
};

// 在你的管理员面板中，当用户点击保存按钮时调用此函数
// <button onClick={() => handleSaveData(currentEditedData)}>保存数据</button>

// 后端 Express 应用 (server.js)
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors'); // 允许跨域请求

const app = express();
const PORT = 3001;

app.use(cors());
app.use(bodyParser.json());

// 假设我们有一个内存中的数据存储，实际应用中会连接数据库
let products = require('./data/products.json'); // 初始数据

// 获取所有产品
app.get('/api/products', (req, res) => {
  res.json(products);
});

// 添加新产品
app.post('/api/products', (req, res) => {
  const newProduct = { id: Date.now().toString(), ...req.body };
  products.push(newProduct);
  // 实际应用中会保存到数据库
  res.status(201).json(newProduct);
});

// 更新产品
app.put('/api/products/:id', (req, res) => {
  const { id } = req.params;
  const updatedProduct = req.body;
  products = products.map(p => (p.id === id ? { ...p, ...updatedProduct } : p));
  // 实际应用中会更新数据库
  res.json(products.find(p => p.id === id));
});

// 删除产品
app.delete('/api/products/:id', (req, res) => {
  const { id } = req.params;
  products = products.filter(p => p.id !== id);
  // 实际应用中会从数据库删除
  res.status(204).send(); // No Content
});

app.listen(PORT, () => {
  console.log(`Backend server running on http://localhost:${PORT}`);
});

// React组件中获取产品列表
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ProductsAdminPanel = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const STRAPI_API_URL = 'http://localhost:1337/api/products'; // 假设Strapi运行在1337端口

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    try {
      const response = await axios.get(STRAPI_API_URL);
      setProducts(response.data.data.map(item => ({ id: item.id, ...item.attributes }))); // Strapi v4 响应格式
    } catch (error) {
      console.error('Error fetching products:', error);
    } finally {
      setLoading(false);
    }
  };

  const deleteProduct = async (id) => {
    try {
      await axios.delete(`${STRAPI_API_URL}/${id}`);
      alert('产品删除成功！');
      fetchProducts(); // 重新加载数据
    } catch (error) {
      console.error('Error deleting product:', error);
      alert('删除产品失败。');
    }
  };

  if (loading) return <div>加载中...</div>;

  return (
    <div>
      <h2>产品管理</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
            <button onClick={() => deleteProduct(product.id)}>删除</button>
            {/* 更多操作如编辑 */}
          </li>
        ))}
      </ul>
      {/* 添加产品表单 */}
    </div>
  );
};

export default ProductsAdminPanel;