数据采集与融合技术综合实践-途个开心-102302145-黄加鸿

数据采集与融合技术综合实践：途个开心

目录
数据采集与融合技术综合实践：途个开心
开篇
1）项目简介
2）个人角色
主体
1）完成情况
接口测试与Postman
React组件开发
2）问题解决
结语
收获成长

开篇

1）项目简介

这个项目属于哪个课程	2025综合设计——多源异构数据采集与融合应用综合实践
组名、项目简介	组名：汪汪立功大队项目需求：随着个性化旅游需求的爆发式增长，传统碎片化的信息获取与行程管理方式已无法满足用户对效率与深度的双重追求。同时，旅行结束后的数据资产（如足迹、消费、情感记忆）往往散落在不同平台，缺乏系统的沉淀与分析。项目目标：构建一个集智能规划、实时地图联动、全生命周期旅行记录与多维数据洞察于一体的 Web 应用平台。项目开展技术路线：数据采集层：高德地图API实时地理数据获取 + 旅游信息采集 + AI清洗去重数据存储层：SQLite/PostgreSQL关系型数据库 + Redis缓存机制 + 结构化行程数据建模后端逻辑层：Python FastAPI异步框架 + 阿里云Qwen大模型Agent + Pydantic数据验证算法层：高德地图多模式路线规划API + 旅行人格DNA量化算法 + 经济学模型分析前端交互层：React 18数据流UI + 高德地图交互式组件 + 生态流光可视化仪表盘
团队成员学号	102302132（组长），102302133，102302134，102302135，102302137，102302145，102302107
这个项目目标	本项目旨在打造一款全生命周期的智能旅行助手，实现以下目标： 1. 智能规划：利用 LLM 实现“一句话生成可执行路书”。 2. 地图联动：实现对话与地图的实时双向交互，所见即所得。 3. 资产沉淀：提供完善的旅行记录功能，覆盖从计划到完成的全过程。 4. 深度分析：通过可视化数据看板，为用户提供上帝视角的旅行行为分析报告。

产品简介

我们小组项目“途个开心”是一款集智能规划、地图联动与数据记录和洞察于一体的智能旅行助手Web应用。系统后端采用Python FastAPI与阿里云Qwen大模型，实现自然语言交互与智能行程生成；前端基于React框架构建了沉浸式的“生态流光”交互界面。通过独创的“旅行仪表盘”，系统可对用户历史行程进行深度分析，生成旅行人格DNA、消费模型及心理诊断报告，将旅行行为转化为可量化、可沉淀的个人数字资产，旨在解决传统旅游规划中信息碎片化、行程不合理、数据资产流失等核心痛点。

产品运行截图

2）个人角色

在本次项目中，我主要承担 测试与组件开发 的任务，具体包括：使用Postman对FastAPI后端接口进行测试，确保业务逻辑的健壮性与数据交互的准确性；负责开发多个可复用的React基础UI组件；并初步探索了向量数据库在智能推荐场景中的应用。这一角色使我深刻体会到，在前后端分离的现代架构中，严谨的测试是系统稳定的前提，而高内聚、可复用的组件化开发则是提升团队协作效率与项目可维护性的关键。

主体

1）完成情况

接口测试与Postman

首先是安装工具Postman：

进行接口测试之前要先启动后端服务器，运行后端的main.py建立起服务器：

然后回到Postman，新建一个测试，下面以测试AI聊天接口为例演示接口测试的基本流程：

创建新测试之后我们选择以POST方法发送请求，填入AI聊天的URL：/api/chat，然后在想要发送的数据body上填写参数比如发送一个“"message": "福州有什么好玩的地方？"”的JSON格式的数据：

填完之后发送请求查看收到的响应：

更换问题再进行其他测试：

从以上演示，可以看到所测试的接口对于发送的请求返回的状态码均为200（成功），说明对于AI聊天这一接口的测试没什么太大问题。

而对于其他接口的测试，比如用户登录、行程生成、地图搜索等接口，流程基本不变，就不一一演示了。测试时要注意url和传递的参数格式，可以像上面以使用测试的发送比如向AI提问来测试接口，也可以编写简单的脚本文件直接测试接口是否异常然后抛出问题，这样做也便于修改项目中异常的接口代码。

React组件开发

项目中，我还负责开发了一部分React组件，构成了项目的前端交互基石。组件库结合Tailwind CSS实现独特的“生态流光”视觉效果。以下通过两个典型组件展示我的开发实践：

1.AddTripModal组件 - 多功能旅行记录模态框

核心代码

// 图片上传与预览功能
const handleImageUpload = async (e) => {
  const files = Array.from(e.target.files);
  const previewImages = files.map(file => ({
    file,
    preview: URL.createObjectURL(file),
    name: file.name,
    isExisting: false
  }));
  setImages(prev => [...prev, ...previewImages]);
};

// 智能数据回填（编辑模式）
useEffect(() => {
  if (tripToEdit) {
    setFormData({
      name: tripToEdit.name || '',
      destination: tripToEdit.destination || '',
      // ... 其他字段回填
    });
    // 处理已存在图片
    if (tripToEdit.images) {
      const existingImages = tripToEdit.images.map(url => ({
        preview: `http://localhost:8000${url}`,
        name: '已存图片',
        isExisting: true
      }));
      setImages(existingImages);
    }
  }
}, [tripToEdit]);

这是一个实现了创建、编辑、图片上传于一体的表单组件，支持完整的CRUD操作。根据tripToEdit参数自动切换新建/编辑模式，同时支持拖拽上传和图片预览，交互式标签管理，支持键盘操作。

2.BudgetCalculator组件 - 可视化旅行预算计算器

核心代码

// 核心计算逻辑（使用useMemo优化性能）
const { list: calculatedList, grandTotal, perPerson } = useMemo(() => {
  let total = 0;
  const list = items.map(item => {
    let subTotal = 0;
    // 根据类型动态计算
    if (item.type === 'daily') subTotal = item.amount * days * people;
    else if (item.type === 'fixed') subTotal = item.amount * people;
    else if (item.type === 'one-time') subTotal = item.amount;
    
    total += subTotal;
    return { ...item, total: subTotal };
  });
  return { list, grandTotal: total, perPerson: Math.round(total / (people || 1)) };
}, [items, days, people]);

// SVG环形图组件
const DonutChart = ({ data, total }) => {
  const r = 40;
  const circ = 2 * Math.PI * r;
  return (
    <svg viewBox="0 0 100 100">
      {data.map((item, i) => {
        const pct = item.total / (total || 1);
        return (
          <circle
            key={i} cx="50" cy="50" r={r}
            stroke={item.color}
            strokeWidth="10"
            strokeDasharray={`${pct * circ} ${circ}`}
            className="transition-all duration-700"
          />
        );
      })}
    </svg>
  );
};

这是一个预算规划工具，内置可视化图表和预设模板，实际使用时可以在费用明细下面对生态住宿、绿色出行、地道美食、景点游玩乐、特产购物、综合杂项这些选项卡中设置旅游出行的预算、实际支出等信息，通过预算计算器计算出预算消耗并进行SVG环形图可视化。

另外，还使用了Tailwind CSS的@apply指令实现“生态流光”的视觉效果，实现了高性能的样式渲染。

/* 通过Tailwind CSS实现 */
.glass-effect {
  @apply bg-white/10 backdrop-blur-sm border border-white/20;
}

.gradient-border {
  @apply border-2 border-transparent bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-border;
}

.hover-glow {
  @apply hover:shadow-lg hover:shadow-emerald-500/20 transition-shadow duration-300;
}

在项目中的具体作用就是使组件具有毛玻璃效果、渐变边框和悬浮发光效果等，虽然这些看起来像"没用"的代码，但是设计系统的核心样式，可以让"途个开心"的界面看起来更现代、更有科技感。

向量数据库

我们项目引入了向量数据库ChromaDB来进行一部分的数据管理，项目里rag_engine.py、llm_engine.py等文件是管理向量数据库的核心文件。我没有参与此部分开发，但在自己工作平台上测试过向量数据库的使用，仅此而已，对此部分有疑问可移步参考同组其余成员的博文。

2）问题解决

问题1：React组件状态管理混乱

在AddTripModal组件中，编辑模式和新建模式共用同一状态，导致数据互相污染。组件在编辑完成后，下次打开新建模态框时仍显示之前的数据，发现useEffect依赖项未正确处理组件卸载。

解决方法：

// 修复后的useEffect
useEffect(() => {
  if (!isOpen) return; // 关键：只在打开时执行
  
  const resetState = () => {
    setFormData(initialFormState);
    setImages([]);
    setError('');
    setSuccess('');
  };
  
  if (tripToEdit) {
    // 编辑模式：回填数据
    console.log('📝 进入编辑模式');
    setFormData({
      name: tripToEdit.name || '',
      destination: tripToEdit.destination || '',
      // ...其他字段
    });
  } else {
    // 新建模式：重置状态
    console.log('✨ 进入新建模式');
    resetState();
  }
  
  // 清理函数：组件卸载时释放图片预览URL
  return () => {
    images.forEach(img => {
      if (!img.isExisting && img.preview) {
        URL.revokeObjectURL(img.preview);
      }
    });
  };
}, [isOpen, tripToEdit]); // 依赖isOpen而不是空数组

结语

收获成长

我在技术能力、工程思维和团队协作等方面都获得了显著成长。"途个开心"不仅是课程项目，更是我技术成长道路上的重要里程碑。从测试端到开发端的多任务锻炼，再到能够独立开发复杂组件；从对前后端协作的模糊认识，到理解完整的Web应用架构，这个过程充满挑战，但也收获满满。

posted @ 2025-12-31 02:07 江上雁阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

你终于有空来看我了！