电影推荐

简介

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

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

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

在线预览链接

模板代码链接

文档

布局结构

模板入口位于 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.',
  }}
/>