跳到主要内容

数据获取方式

该配置用来设置卡片中所依赖数据的来源方式，分为 「静态形式」 和 「动态形式」。

文件方式（静态形式）​

该方式在执行出码时，会将魔方后台配置的卡片数据，生成 JSON 数据，自动以文件形式集成在出码产物中，产物中的卡片将会从该 JSON 文件直接读取，而不再依赖魔方后台配置，与魔方系统解耦。

提示

注意：通过此方式出码后，后续在魔方平台对卡片进行编辑的数据，如需同步，需要手工合并到项目中。

数据获取​

JSON 数据会放置到产物根目录 src/data.tsx 下，数据格式遵循魔方 通用卡片数据规范。

// 从本地文件导入卡片数据源
import fileData from './data';

// 定义状态值
const [data, setData] = useState<any>(null);

// 处理数据
useEffect(() => {
  const dataMap = new Map();
  fileData.topicComponents.forEach((item: any) => {
    dataMap.set(item.id.toString(), item);
  });
  
  setData({
    ...fileData,
    dataMap,
  });
}, []);

数据消费​

以下，是一个「头图卡」的数据引入示例。

const App = () => {
  // ... other code
  const { themeId, customData, dataMap } = data;
  return (
    <CubeLayout {...otherProps}>
      {/* 头图卡 */}
      <ErrorBoundary fallback={fallback}>
        <HeadImg confData={dataMap.get('46332')} />
      </ErrorBoundary>

      {/* 其它卡... */}
    </CubeLayout>
  )
}

接口方式（动态形式）​

该方式会 以接口的形式，从魔方系统实时获取卡片数据。在进行出码之后，通过魔方创作者后台继续对卡片进行编辑，数据变化也会实时同步到产物的卡片中。

提示

注意，通过此方式出码，在线上环境，需要在魔方后台执行「上线」操作，数据才能被正常获取到。

数据获取​

专题 ID 会自动写入到产物代码中，产物中也内置了 Axios 请求库及对获取专题数据的 Utils 工具方法，数据会通过专题 ID 调用魔方接口获取。

  const [data, setData] = useState<any>(null);

  useEffect(() => {
    const run = async () => {
      // 草稿 id: 3864、线上 id: 3865
      const topicId = process.env.NODE_ENV === 'development' ? 3864 : 3865;
      const apiData = await fetchData(topicId);

      setData(apiData);
    };
    run();
  }, []);

如何使用专题 ID​

在魔方系统中，当一个专题被创建的时候，当前专题下会自动生成两个 ID：「草稿 ID」 和 「线上 ID」。

简单的理解为，当我们在魔方后台对专题进行编辑、暂存的时候，数据会存储到草稿 ID 中；当专题编辑完成，执行上线操作后，当前草稿中的专题数据，会自动同步到线上专题 ID 中。所以，需要根据实际情况修改 topicId，生产环境一定使用线上 ID。

  • 草稿 ID

    适合开发阶段，后台点击 “暂存按钮” 接口数据即可更新

  • 线上 ID

    用于实际生产，后台点击 “上线发布” 接口数据才会更新

数据消费​

消费方式与「文件形式」一致。

const App = () => {
  // ... other code
  const { themeId, customData, dataMap } = data;
  return (
    <CubeLayout {...otherProps}>
      {/* 头图卡 */}
      <ErrorBoundary fallback={fallback}>
        <HeadImg confData={dataMap.get('46332')} />
      </ErrorBoundary>

      {/* 其它卡... */}
    </CubeLayout>
  )
}