电影推荐

Movie Recommendations

简介

电影推荐模板是一个交互式平台，旨在根据用户的偏好和观影习惯推荐电影。它旨在为您构建推荐引擎提供坚实的基础，并提供个性化的电影建议。

此模板是（目前）唯一一个不仅提供静态数据集，还允许您连接到 Neo4j 数据库以检索您的数据并在模板中渲染的模板。

此特性（允许您连接到数据库并将数据检索到模板中）是实验性的（因此仅在此模板中可用）。它旨在与推荐数据集一起使用。如果您使用不同的数据集或数据模型，您可能需要修改 Cypher 查询和/或数据结构以满足您的需求。

实时预览链接

模板代码链接

文档

布局架构

MovieArchitecture

模板入口位于 Home.tsx 组件中，它协调用户交互并从静态 JSON 文件或 Neo4j 数据库检索数据。

关键组件包括

  • Header，用于导航和数据库连接管理。

  • ConnectionModal，用于处理数据库连接配置。

  • Content，通过交互式 UI 元素呈现电影推荐。

代码片段

获取和显示推荐
useEffect(() => {
  const fetchData = async () => {
    setLoading({ main: true, similarGenre: true, otherUsers: true });
    if (useReco) {
      const { uri, user, password } = JSON.parse(localStorage.getItem('neo4j-connection') ?? '') ?? {};
      setDriver(uri, user, password);
      await Promise.all([
        fetchMovies(queryMainMovie).then(movies => setMainMovie(movies || [])),
        fetchMovies(similarByGenre).then(movies => setRecoSimilarGenre(movies || [])),
        fetchMovies(queryOtherUsersAlsoWatched).then(movies => setRecoOtherUsers(movies || [])),
      ]);
      setLoading({ main: false, similarGenre: false, otherUsers: false });
    }
  };

  fetchData();
}, [useReco]);
显示错误消息
{recoError ? (
  <Flex flexDirection='row' justifyContent='center' alignItems='center'>
    <Typography variant='h1'>Data error</Typography>
    <Typography variant='body-medium'>
      An error occurred while fetching recommendations data. Please ensure you are connected to a Neo4j Database.
    </Typography>
  </Flex>
) : (
  <Content mainMovie={mainMovie} recoSimilarGenre={recoSimilarGenre} recoOtherUsers={recoOtherUsers} />
)}

数据集/连接到 Neo4j 数据库

默认情况下，应用程序使用静态数据集 movies.json 进行演示。模板支持在静态数据集和来自 Neo4j 数据库的实时数据之间动态切换，以便您可以更真实地了解模板使用您的数据时的外观。

连接到 Neo4j 数据库
<ConnectionModal
  open={isConnectionModalOpen}
  setOpenConnection={setIsConnectionModalOpen}
  setConnectionStatus={setUseReco}
  message={{
    type: 'warning',
    content: 'Ensure you connect to a Neo4j database containing the Recommendation dataset.',
  }}
/>
© . All rights reserved.