项目概述
本指南将帮助您完成《红楼梦》人物关系图谱的部署,包含以下核心组件:
- MySQL数据库设计与数据导入
- PHP API开发
- 前端关系图谱实现
- 服务器配置与部署
最终成果:一个动态交互式的人物关系图谱网站,运行在 infographdrorch.dododot.work 域名。
数据库设计
1. 数据库结构
创建 red_chamber 数据库和两个数据表:
SQL
CREATE DATABASE IF NOT EXISTS red_chamber DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE red_chamber; -- 人物表 CREATE TABLE characters ( id VARCHAR(20) PRIMARY KEY, name VARCHAR(20) NOT NULL, `group` TINYINT NOT NULL, `desc` TEXT NOT NULL, important BOOLEAN NOT NULL ); -- 关系表 CREATE TABLE relations ( id INT AUTO_INCREMENT PRIMARY KEY, source VARCHAR(20) NOT NULL, target VARCHAR(20) NOT NULL, type VARCHAR(10) NOT NULL, strength FLOAT NOT NULL, FOREIGN KEY (source) REFERENCES characters(id), FOREIGN KEY (target) REFERENCES characters(id) );
2. 数据导入
使用以下SQL文件导入数据:
characters.sql
USE red_chamber; INSERT INTO characters (id, name, `group`, `desc`, important) VALUES ('赵渡迷', '赵渡迷', 1, '贾宝玉的好朋友', 0), ('贾宝玉', '贾宝玉', 1, '荣国府贾政与王夫人所生,通灵宝玉化身,大观园核心人物', 1), ('林黛玉', '林黛玉', 3, '贾母外孙女,林如海与贾敏之女,才华横溢,体弱多病', 1), ('薛宝钗', '薛宝钗', 3, '薛姨妈之女,宝玉表姐,端庄大方,后与宝玉成婚', 1), ('贾母', '贾母', 1, '贾府最高长辈,史家小姐,宝玉祖母', 1), ('贾政', '贾政', 1, '贾母次子,宝玉之父,荣国府当家人', 0), ('王夫人', '王夫人', 1, '贾政之妻,宝玉之母,薛姨妈之姐', 0), ('贾赦', '贾赦', 1, '贾母长子,贾琏之父', 0), ('贾琏', '贾琏', 1, '贾赦之子,王熙凤丈夫', 0), ('王熙凤', '王熙凤', 1, '贾琏之妻,王夫人侄女,荣国府管家', 1), ('贾元春', '贾元春', 1, '贾政长女,宝玉姐姐,皇妃', 0), ('贾探春', '贾探春', 1, '贾政庶女,宝玉同父异母妹妹', 0), ('贾珍', '贾珍', 1, '宁国府当家人,贾敬之子', 0), ('尤氏', '尤氏', 1, '贾珍续弦', 0), ('贾蓉', '贾蓉', 1, '贾珍之子', 0), ('秦可卿', '秦可卿', 1, '贾蓉之妻', 0), ('袭人', '袭人', 2, '宝玉首席大丫鬟', 0), ('晴雯', '晴雯', 2, '宝玉丫鬟,心灵手巧', 0), ('鸳鸯', '鸳鸯', 2, '贾母首席大丫鬟', 0), ('皇帝', '皇帝', 6, '当朝天子', 0);
relations.sql
USE red_chamber; INSERT INTO relations (source, target, type, strength) VALUES ('贾宝玉', '赵渡迷', '情感', 1.0), ('贾宝玉', '林黛玉', '情感', 1.0), ('贾宝玉', '薛宝钗', '婚姻', 0.8), ('贾宝玉', '贾母', '血缘', 0.7), ('贾宝玉', '贾政', '血缘', 0.8), ('贾宝玉', '王夫人', '血缘', 0.8), ('贾宝玉', '袭人', '主仆', 0.9), ('贾宝玉', '晴雯', '主仆', 0.8), ('贾宝玉', '贾元春', '血缘', 0.7), ('贾宝玉', '贾探春', '血缘', 0.6), ('林黛玉', '贾母', '血缘', 0.8), ('林黛玉', '贾政', '血缘', 0.5), ('林黛玉', '王夫人', '血缘', 0.5), ('薛宝钗', '王夫人', '血缘', 0.6), ('贾母', '贾政', '血缘', 0.8), ('贾母', '贾赦', '血缘', 0.8), ('贾母', '鸳鸯', '主仆', 0.9), ('贾政', '王夫人', '婚姻', 0.9), ('贾政', '贾元春', '血缘', 0.8), ('贾政', '贾探春', '血缘', 0.8), ('贾赦', '贾琏', '血缘', 0.8), ('贾琏', '王熙凤', '婚姻', 0.9), ('王熙凤', '王夫人', '血缘', 0.6), ('贾珍', '尤氏', '婚姻', 0.7), ('贾珍', '贾蓉', '血缘', 0.9), ('贾蓉', '秦可卿', '婚姻', 0.8), ('皇帝', '贾元春', '婚姻', 0.9);
导入提示:
- 先导入characters表数据,再导入relations表数据
- 如遇外键错误,执行: SET FOREIGN_KEY_CHECKS=0;
- 导入完成后执行: SET FOREIGN_KEY_CHECKS=1;
后端API开发
api.php - 数据库接口
PHP
<?php header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *'); $config = [ 'host' => 'localhost', 'dbname' => 'red_chamber', 'username' => 'your_db_username', 'password' => 'your_db_password' ]; try { $pdo = new PDO( "mysql:host={$config['host']};dbname={$config['dbname']};charset=utf8mb4", $config['username'], $config['password'] ); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // 获取所有人物 $characters = $pdo->query("SELECT * FROM characters")->fetchAll(PDO::FETCH_ASSOC); // 获取所有关系 $relations = $pdo->query("SELECT source, target, type, strength FROM relations")->fetchAll(PDO::FETCH_ASSOC); echo json_encode([ 'characters' => $characters, 'relations' => $relations ]); } catch (PDOException $e) { echo json_encode(['error' => 'Database error: ' . $e->getMessage()]); } catch (Exception $e) { echo json_encode(['error' => 'General error: ' . $e->getMessage()]); } ?>
配置说明:
请将数据库连接配置中的 your_db_username 和
your_db_password 替换为实际的数据库用户名和密码。
前端实现
index.html - 主页面
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>《红楼梦》人物关系动态图谱 - 数据库版</title> <script src="https://d3js.org/d3.v7.min.js"></script> <!-- 完整CSS样式见原始文件 --> <style> /* 完整CSS样式 */ </style> </head> <body> <div class="container"> <!-- 页面结构 --> </div> <script> // 完整JavaScript代码 </script> </body> </html>
注意:
完整的前端代码请参考之前的详细HTML文件,这里仅展示基本结构。
服务器部署指南
1 服务器要求
- Linux服务器(推荐Ubuntu 20.04+)
- Apache或Nginx Web服务器
- PHP 7.4+
- MySQL 5.7+
2 部署步骤
1. 配置域名
sudo nano /etc/apache2/sites-available/infographdrorch.conf
<VirtualHost *:80> ServerName infographdrorch.dododot.work DocumentRoot /var/www/infographdrorch ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost>
sudo a2ensite infographdrorch.conf sudo systemctl reload apache2
2. 创建项目目录
sudo mkdir -p /var/www/infographdrorch sudo chown -R $USER:$USER /var/www/infographdrorch
3. 上传项目文件
将以下文件上传到 /var/www/infographdrorch 目录:
- index.html
- api.php
4. 配置数据库用户
CREATE USER 'redchamber'@'localhost' IDENTIFIED BY 'strong_password'; GRANT ALL PRIVILEGES ON red_chamber.* TO 'redchamber'@'localhost'; FLUSH PRIVILEGES;
5. 导入数据
mysql -u redchamber -p red_chamber < characters.sql mysql -u redchamber -p red_chamber < relations.sql
6. 设置文件权限
sudo chmod -R 755 /var/www/infographdrorch
7. 测试访问
- 访问API:http://infographdrorch.dododot.work/api.php
- 访问网站:http://infographdrorch.dododot.work
验证与测试
数据库验证
-- 检查人物数量 SELECT COUNT(*) AS character_count FROM characters; -- 检查关系数量 SELECT COUNT(*) AS relation_count FROM relations; -- 检查贾宝玉的关系 SELECT * FROM relations WHERE source = '贾宝玉' OR target = '贾宝玉';
预期结果:
- character_count = 20
- relation_count = 27
- 贾宝玉应有9条关系记录
网站功能测试
- 图谱加载是否正常
- 节点拖动功能
- 点击节点显示信息
- 双击节点聚焦功能
- 搜索功能
- 重置视图和重新布局按钮
安全建议
- 为MySQL用户设置强密码
- 配置HTTPS证书(使用Let's Encrypt)
- 限制API访问(添加API密钥验证)
- 定期备份数据库
- 保持服务器系统和软件更新
- 配置防火墙规则