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

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

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

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

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

---

1. 技术选型

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

---

2. 数据建模

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

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

图模型结构大致如下：

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

推荐规则：

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

---

3. Neo4j 安装与配置

Docker 方式安装

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

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

---

4. Neo4j 数据初始化

通过 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 驱动：

npm install neo4j-driver express cors

创建 API 服务：

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：

npm install axios

创建组件：

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. 启动项目

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

---

🎯 测试结果

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

查询接口：

http://localhost:3001/recommend/Alice

✅ 输出：

["Interstellar"]

---

总结

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

---

🚀 最后总结

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

---