从零用java实现 小红书 springboot vue uniapp （11）实战：基于Dify与DeepSeek构建多模态AI聊天助手

1. 项目背景与需求拆解最近在做一个仿小红书的全栈项目后端用SpringBoot管理端用Vue移动端用UniApp。很多读者反馈想加入AI聊天功能正好赶上多模态大模型的热潮就决定用Dify平台DeepSeek模型来实现。这个方案最大的好处是不用从头训练模型通过可视化编排就能快速定制AI助手。为什么要选Dify实测下来发现它有三大优势第一支持国内主流大模型如DeepSeek、MoonshotAPI配置简单第二提供开箱即用的聊天组件直接嵌入网页或App第三多模态支持完善能同时处理文本和图片。我在Windows 10的VMware虚拟机里装了Ubuntu 24.04来部署Dify服务整个过程半小时搞定。2. Dify应用创建与模型配置2.1 创建AI应用登录Dify后台后在应用页面点击新建。这里有个细节要注意应用类型选对话型这样后续才能用聊天组件。填应用名称时建议加项目前缀比如我用的xhs-ai-assistantxhs代表小红书项目。创建完成后进入应用编排界面这里相当于AI大脑的控制面板。左侧菜单栏可以看到提示词编排定义AI的对话逻辑模型配置选择底层大模型知识库管理上传自定义资料发布设置配置访问权限2.2 接入DeepSeek模型在模型提供商里选择DeepSeek这是我测试下来对中文支持最好的开源模型。配置步骤很简单去DeepSeek官网申请API Key免费额度足够开发使用在Dify的模型配置页填入API Key选择模型版本我用的是DeepSeek-V3设置温度参数0.7适合聊天场景测试阶段建议开启调试模式这样能看到AI的原始返回数据。有个坑要注意如果返回速度慢可以调整最大token数我设的是2048响应时间控制在3秒内。3. 前端集成实战3.1 UniApp嵌入方案Dify提供的嵌入代码是标准HTML但UniApp的vue文件有特殊限制每个文件只能有一个script标签不支持直接修改DOM解决方案是把代码放到项目的index.html里。具体操作!DOCTYPE html html head meta namereferrer contentno-referrer script window.difyChatbotConfig { token: 你的应用token, apiUrl: 你的Dify服务地址 } /script script srchttps://udify.app/embed.min.js defer/script style #dify-chatbot-bubble-button { background-color: #FF2442 !important; /* 小红书品牌色 */ bottom: 120px !important; } /style /head body !-- UniApp的挂载点保持不变 -- /body /html3.2 样式定制技巧为了让聊天窗口更符合小红书风格我通过CSS覆写了几个关键样式按钮颜色改成小红书品牌红(#FF2442)调整悬浮按钮位置避免遮挡TabBar设置聊天窗口宽度为24rem小红书移动端标准宽度隐藏不必要的工具栏图标实测发现一个易错点如果样式不生效可能是CSS优先级问题加上!important就能解决。4. 多模态功能扩展4.1 图片交互实现在Dify的提示词编排里添加图片处理逻辑# 在对话流程中加入多模态判断 if user_input.contains_image(): image_desc analyze_image(user_input.image) return f你分享的图片看起来像{image_desc}这是小红书风格的... else: return generate_text_response(user_input)前端需要修改上传逻辑// 在uniapp中调用聊天组件的方法 function sendImage() { uni.chooseImage({ success: (res) { const file res.tempFiles[0] difyChatbot.uploadFile(file) } }) }4.2 上下文记忆优化默认配置下AI只能记住当前会话。通过Dify的记忆池功能可以实现长期记忆在应用设置开启会话记忆设置记忆保留时间为7天在用户消息中自动注入历史上下文调试时发现记忆功能会增加API响应时间建议控制在5轮对话内。5. 踩坑与解决方案5.1 跨域问题处理开发环境遇到的主要问题是跨域限制。解决方案是在SpringBoot后端添加配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(*) .allowedMethods(GET, POST); } }5.2 移动端适配问题UniApp打包成App后发现聊天窗口无法弹出。这是因为原生组件层级问题最终解决方案是使用plus.webview创建新窗口通过postMessage实现页面通信动态计算窗口位置避免被键盘遮挡6. 效果优化与性能调优6.1 响应速度优化通过三个方面提升用户体验开启Dify的流式传输streaming前端添加消息加载动画实现本地消息缓存关键代码示例// 流式响应处理 const eventSource new EventSource(/api/chat-stream); eventSource.onmessage (event) { const data JSON.parse(event.data); if (data.finish) { eventSource.close(); } else { updateMessage(data.content); } }6.2 安全防护措施为防止滥用需要添加Dify端设置每分钟请求限制SpringBoot添加JWT鉴权敏感词过滤机制安全配置示例# dify配置 ratelimit: enabled: true requests: 30 per: 60s完整项目代码已放在Gitee包含所有配置文件和前后端实现。在实际开发中发现AI助手的回复质量高度依赖提示词工程后续可以结合小红书的内容特征进一步优化对话策略。