前端实现：React + Neo4j构建图数据检索

用 React + Neo4j 构建实时推荐系统

🔥 为什么选择图数据库做推荐系统？

在现代推荐系统中，用户行为、兴趣标签、社交关系和商品信息往往存在复杂的关联关系，传统关系型数据库通过多表联查来完成推荐逻辑，但面对海量数据 + 实时推荐的需求，性能往往无法满足。

图数据库（Graph Database）天然适合表示和查询这种复杂的关系网络，可以用更少的代码实现更高效的推荐系统。

1. 技术选型

层级	技术	说明
前端	React	展示推荐结果
数据存储	Neo4j	存储用户、商品、关系网络
数据查询	Cypher	图数据库查询语言
后端服务	Node.js	作为 API 中转层
图数据库驱动	`neo4j-driver`	Node.js 官方驱动

2. 数据建模

假设我们做一个电影推荐系统，数据模型如下：

用户（User）
电影（Movie）
类型（Genre）
喜欢关系（LIKE）
属于类型关系（BELONGS_TO）

图模型结构大致如下：

scss 复制代码

(Alice)-[:LIKE]->(Inception)-[:BELONGS_TO]->(Sci-Fi)
(Bob)-[:LIKE]->(Interstellar)-[:BELONGS_TO]->(Sci-Fi)

推荐规则：

查询用户喜欢的电影类型
找出喜欢相同类型电影的其他用户
推荐这些用户喜欢但自己还没看的电影

3. Neo4j 安装与配置

Docker 方式安装

bash 复制代码

docker run -d --name neo4j -p 7474:7474 -p 7687:7687 \
-e NEO4J_AUTH=neo4j/password neo4j

打开 http://localhost:7474 进行管理配置。

4. Neo4j 数据初始化

通过 Cypher 语句插入测试数据：

cypher 复制代码

CREATE (:User {name: 'Alice'})
CREATE (:User {name: 'Bob'})
CREATE (:Movie {title: 'Inception'})
CREATE (:Movie {title: 'Interstellar'})
CREATE (:Genre {name: 'Sci-Fi'})
MATCH (m:Movie {title: 'Inception'}), (g:Genre {name: 'Sci-Fi'}) CREATE (m)-[:BELONGS_TO]->(g)
MATCH (u:User {name: 'Alice'}), (m:Movie {title: 'Inception'}) CREATE (u)-[:LIKE]->(m)

5. Node.js API 构建

安装 Neo4j 驱动：

bash 复制代码

npm install neo4j-driver express cors

创建 API 服务：

js 复制代码

const express = require('express');
const neo4j = require('neo4j-driver');
const app = express();
const driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'password'));

app.get('/recommend/:username', async (req, res) => {
  const session = driver.session();
  const { username } = req.params;

  const result = await session.run(`
    MATCH (u:User {name: $username})-[:LIKE]->(:Movie)-[:BELONGS_TO]->(g:Genre)
    MATCH (other:User)-[:LIKE]->(m:Movie)-[:BELONGS_TO]->(g)
    WHERE other <> u AND NOT (u)-[:LIKE]->(m)
    RETURN DISTINCT m.title AS recommendation
  `, { username });

  res.json(result.records.map(record => record.get('recommendation')));
  session.close();
});

app.listen(3001, () => console.log('API running on port 3001'));

6. React 前端页面开发

安装 Axios：

bash 复制代码

npm install axios

创建组件：

jsx 复制代码

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function Recommendation({ username }) {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    axios.get(`http://localhost:3001/recommend/${username}`)
      .then(response => setMovies(response.data));
  }, [username]);

  return (
    <div>
      <h3>为 {username} 推荐的电影:</h3>
      <ul>
        {movies.map(movie => <li key={movie}>{movie}</li>)}
      </ul>
    </div>
  );
}

7. 启动项目

启动 Neo4j
启动 Node.js API 服务
启动 React 应用

🎯 测试结果

假设 Alice 喜欢《Inception》，Bob 喜欢《Interstellar》。

查询接口：

bash 复制代码

http://localhost:3001/recommend/Alice

✅ 输出：

css 复制代码

["Interstellar"]

总结

系统特性	传统关系型	图数据库
查询效率	慢	快
数据建模	不直观	贴近业务关系
关联数据	难拓展	天然支持
实时推荐	❌	✅

🚀 最后总结

用 Neo4j + React 可以轻松搭建一个高效、实时的推荐系统。
图数据库对数据关系查询的性能优势非常明显。
代码量少，逻辑清晰，天然适合社交、推荐、金融等领域。