React应用管理面板构建指南：从本地JSON到无头CMS的实践策略

// 假设这是你的管理员面板数据编辑功能
const handleSaveData = (editedData) => {
  const jsonData = JSON.stringify(editedData, null, 2); // 格式化JSON
  const blob = new Blob([jsonData], { type: 'application/json' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'local.json'; // 建议用户下载并替换此文件

  // 模拟点击下载链接
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url); // 释放URL对象

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

// 在你的React组件中调用
// <button onClick={() => handleSaveData(yourEditedData)}>保存数据并下载</button>

// server.js (Node.js Express 示例)
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3001;

app.use(express.json()); // 用于解析JSON请求体

const dataFilePath = path.join(__dirname, 'local.json'); // 假设local.json在服务器根目录

// 示例：更新数据
app.post('/api/data', (req, res) => {
  const newData = req.body;
  fs.writeFile(dataFilePath, JSON.stringify(newData, null, 2), (err) => {
    if (err) {
      console.error('写入文件失败:', err);
      return res.status(500).json({ message: '服务器错误，无法保存数据' });
    }
    res.status(200).json({ message: '数据已成功更新' });
  });
});

// 示例：获取数据
app.get('/api/data', (req, res) => {
  fs.readFile(dataFilePath, 'utf8', (err, data) => {
    if (err) {
      console.error('读取文件失败:', err);
      return res.status(500).json({ message: '服务器错误，无法读取数据' });
    }
    res.status(200).json(JSON.parse(data));
  });
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

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

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        // 假设Strapi运行在 http://localhost:1337
        const response = await fetch('http://localhost:1337/api/products');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        // Strapi API响应通常包含一个 'data' 数组，其中每个元素有 'id' 和 'attributes'
        setProducts(data.data); 
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>加载产品失败: {error}</p>;

  return (
    <div>
      <h1>产品列表</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {/* Strapi API响应中，内容字段通常在 'attributes' 对象内 */}
            {product.attributes.name} - ${product.attributes.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;