集成开发常见问题
本文档回答集成开发中的常见问题,帮助您快速解决遇到的问题。
❓ 常见问题
Q1: 集成开发和直接修改主系统有什么区别?
A: 集成开发采用微前端架构,您的代码独立维护,不会与主系统代码混在一起。
| 对比项 | 集成开发(微前端) | 直接修改主系统 |
|---|---|---|
| 代码隔离 | ✅ 独立仓库,清晰边界 | ❌ 混在主系统代码中 |
| 维护成本 | ✅ 低,只维护自己的代码 | ❌ 高,主系统更新时容易冲突 |
| 团队协作 | ✅ 不同团队独立开发 | ❌ 容易相互影响 |
| 部署灵活 | ✅ 独立构建、独立部署 | ❌ 必须整体重新部署 |
| 版本管理 | ✅ 独立版本控制 | ❌ 耦合在主系统版本中 |
推荐做法:
- ✅ 使用集成开发,保持代码独立性
- ✅ 通过
lovrabet menu sync一键集成到主系统 - ✅ 享受微前端架构的所有优势
Q2: MCP 是否必须配置?
A: 不是必须的,但强烈推荐。
配置 MCP 的优势:
- ✅ AI 完全理解你的数据结构
- ✅ 生成的代码准确度接近 100%
- ✅ 节省 50-80% 的开发时间
- ✅ 复杂查询和数据关联自动处理
不配置 MCP:
- 仍然可以使用 SDK 手动编写代码
- 需要自己查文档、理解 API
- 开发效率较低
对比示例:
不使用 MCP:
- 查文档 → 手写代码 → 调试错误 → 修改 → 再调试 → 完成
- 耗时:1-2 小时
使用 MCP:
- 告诉 AI 需求 → AI 生成代码 → 完成
- 耗时:5-10 分钟
Q3: MCP 支持哪些 AI 工具?
A: 目前支持所有基于 MCP 协议的工具:
- ✅ Claude Desktop - Anthropic 官方桌面应用
- ✅ Cursor - AI 代码编辑器
- ✅ 其他 MCP 兼容工具 - 持续增加中
配置方式:
每个工具的配置方式类似,都是在配置文件中添加 MCP Server:
{
"mcpServers": {
"lovrabet-dataset": {
"command": "npx",
"args": ["-y", "@lovrabet/dataset-mcp-server"],
"env": {
"DEFAULT_APP_CODE": "your-app-code"
}
}
}
}
Q4: 菜单同步后,主系统会立即看到新页面吗?
A: 是的。lovrabet menu sync 完成后:
- 菜单会立即出现在主系统中
- 点击菜单会加载你的扩展应用页面
- 用户感知不到这是独立开发的子应用
前提条件:
- ✅ 扩展应用已正确构建和部署
- ✅ 主应用配置了正确的子应用访问地址
如果菜单没有出现:
- 检查
lovrabet menu sync是否成功执行 - 确认子应用已部署到服务器
- 检查主应用的子应用配置是否正确
- 刷新主系统页面
Q5: 如何调试 SDK 调用失败的问题?
A: SDK 提供了调试模式:
const client = createClient({
appCode: "your-app-code",
accessKey: process.env.ACCESS_KEY,
options: {
debug: true, // 开启调试模式
},
});
开启后会在控制台输出:
- 完整的 HTTP 请求信息(URL、Headers、Body)
- 请求和响应的详细内容
调试步骤:
- 开启 debug 模式
- 查看控制台的请求详情
- 检查认证信息是否正确
- 检查 API 参数是否符合要求
- 查看响应错误信息
常见错误:
| 错误 | 原因 | 解决方案 |
|---|---|---|
| 401 Unauthorized | 认证失败 | 检查 AccessKey 或 Token |
| 403 Forbidden | 权限不足 | 检查数据集访问权限 |
| 404 Not Found | 资源不存在 | 检查 datasetCode 是否正确 |
| 400 Bad Request | 参数错误 | 检查请求参数 |
| 500 Internal Server | 服务器错误 | 联系技术支持 |
| Network Error | 网络问题或 CORS 错误 | 检查网络连接和 CORS 配置 |
| CORS Error | 跨域配置问题 | 检查服务端 CORS 配置 |
| Timeout | 请求超时 | 检查网络或增加超时时间 |
| Token Expired | Token 已过期 | 重新生成 Token 或使用 Cookie |
更多调试技巧:📖 SDK 故障排查
Q6: 一个应用可以创建多个扩展项目吗?
A: 可以!这是微前端架构的优势。
场景示例:
- 团队 A 开发「销售分析」扩展,独立仓库
- 团队 B 开发「客服服务」扩展,独立仓库
- 团队 C 开发「财务报表」扩展,独立仓库
所有扩展通过 lovrabet menu sync 同步后,在主系统中无缝集成,就像一个完整的应用。
优势:
- ✅ 团队独立开发,互不干扰
- ✅ 可以使用不同的技术栈(React、Vue 等)
- ✅ 独立部署和更新
- ✅ 降低代码冲突风险
- ✅ 便于团队协作和管理
注意事项:
- 确保不同扩展的菜单名称不重复
- 建议统一 SDK 和 CLI 版本
- 可以共享公共组件库(可选)
Q7: 扩展应用的性能会受影响吗?
A: 不会。微前端架构的性能优势:
性能优势:
- ✅ 按需加载:只有访问时才加载扩展应用代码
- ✅ 独立缓存:扩展应用独立缓存,更新不影响主系统
- ✅ 并行加载:多个扩展应用可以并行加载
- ✅ 构建优化:CLI 内置了性能优化配置
性能最佳实践:
// 1. 路由懒加载
const CustomerAnalysis = lazy(() => import("./pages/CustomerAnalysis"));
// 2. 合理使用代码分割
import("./heavy-lib").then((module) => {
// 只在需要时加载
});
// 3. 避免引入过大的第三方库
// ❌ 不推荐:引入整个 lodash
import _ from "lodash";
// ✅ 推荐:只引入需要的函数
import debounce from "lodash-es/debounce";
// 4. 优化图片和资源
// 使用适当的图片格式和大小
// 使用 CDN 加载静态资源
// 5. 分页加载数据
const result = await client.models.customers.filter({
currentPage: 1,
pageSize: 20, // 控制每页数量
});
性能监控:
# 分析包体积
lovrabet build
npx source-map-explorer dist/*.js
# 使用 Lighthouse 检测性能
npx lighthouse http://localhost:3000
Q8: MCP 会泄露数据吗?
A: 不会。MCP Server 的工作原理:
安全机制:
- MCP Server 在你的本地运行
- 只读取数据集的元数据(表结构、字段定义)
- 不会读取实际的业务数据
- AI 工具通过 MCP 理解结构,但不访问数据
安全保障:
- ✅ 数据不离开你的环境
- ✅ 只提供结构信息给 AI
- ✅ 符合数据安全规范
- ✅ 不会上传到云端
MCP 传递的信息示例:
// MCP 传递给 AI 的信息(仅结构)
{
tableName: "customers",
fields: [
{ name: "id", type: "string", isPrimaryKey: true },
{ name: "customer_name", type: "string" },
{ name: "phone", type: "string" },
{ name: "company", type: "string" }
]
}
// ❌ MCP 不会传递实际数据
// 不会传递:{ id: "001", customer_name: "张三", ... }
Q9: 如何在本地开发时看到完整的主系统?
A: 本地开发时,您主要关注自己的扩展功能:
本地开发模式:
lovrabet start
# 扩展应用独立运行在 http://localhost:3000
# 可以调试业务逻辑,数据通过 SDK 从真实系统获取
完整预览集成效果:
-
方案一:将本地服务器地址配置到测试环境
// 测试环境主应用配置
microApps: [
{
name: "my-extension",
url: "http://localhost:3000", // 指向本地开发服务器
},
]; -
方案二:构建后部署到测试环境
lovrabet build
# 部署到测试服务器
lovrabet menu sync --env test
推荐做法:
- ✅ 日常开发使用本地模式,快速迭代
- ✅ 定期部署到测试环境,验证集成效果
- ✅ 上线前在生产环境充分测试
Q10: 扩展应用能访问主系统的所有数据吗?
A: 扩展应用通过 SDK 访问数据,权限由以下因素决定:
权限控制机制:
-
认证方式:
- 使用 Cookie 认证时,继承当前用户的权限
- 使用 AccessKey 认证时,继承 AccessKey 的权限
-
数据集权限:
- 只能访问已配置的数据集
- 受平台权限系统限制
-
字段权限:
- 遵循数据集的字段权限设置
- 敏感字段可能被隐藏或脱敏
安全建议:
- ✅ 服务端使用 AccessKey(不要泄露)
- ✅ 浏览器使用 Token 或 Cookie
- ✅ 遵循最小权限原则
- ❌ 不要在客户端存储敏感数据
- ❌ 永远不要在前端代码中硬编码 AccessKey
⚠️ 注意事项
1. 安全性
- 永远不要在前端代码中硬编码 AccessKey
- 使用环境变量管理敏感信息
- 生产环境使用 Token 或 Cookie 认证
- 遵循 HTTPS 传输数据
- 定期更新 SDK 和 CLI 版本
2. 版本兼容性
- 确保 SDK、CLI、MCP Server 版本兼容
- 关注工具链的更新日志
- 测试环境先验证后再部署生产
- 使用 package.json 锁定版本
推荐的版本管理:
{
"dependencies": {
"@lovrabet/sdk": "^1.1.18",
"@lovrabet/cli": "^1.1.15"
},
"devDependencies": {
"@lovrabet/dataset-mcp-server": "^1.0.8"
}
}
3. 菜单命名
- 使用 Title 注释提供清晰的中文名称
- 避免使用特殊字符
- 确保菜单名称在应用内唯一
- 菜单名称应简洁明了,不超过 10 个字
好的菜单命名:
✅ 客户分析
✅ 销售漏斗
✅ 数据报表
不好的菜单命名:
❌ page1
❌ 基于机器学习算法的客户行为分析与预测系统(太长)
❌ analysis_page(使用下划线)
4. 数据安全
- 不要在客户端存储敏感数据
- 使用 HTTPS 传输数据
- 遵循 Lovrabet 平台的安全规范
- 定期审查代码安全问题
- 使用环境变量管理配置
5. 代码质量
- 使用 TypeScript 获得类型安全
- 编写单元测试
- 遵循代码规范(ESLint、Prettier)
- 代码审查(Code Review)
- 持续集成(CI/CD)
📚 相关资源
核心文档
- 📖 集成开发介绍 - 了解集成开发的理念和价值
- 📖 开发最佳实践 - 学习完整开发流程
- 📖 Lovrabet SDK 使用指南 - 深入了解 SDK
- 📖 Lovrabet CLI 使用指南 - 掌握 CLI 工具
工具包
示例项目
- 🎯 React 子应用示例
- 🎯 更多示例即将推出...
技术支持
- 💬 开发者社区
- 📧 support@lovrabet.com
- 🐛 提交问题
🤝 还有其他问题?
如果您的问题没有在这里找到答案:
- 📖 查看详细的 SDK 文档
- 📖 查看详细的 CLI 文档
- 💬 在开发者社区提问
- 📧 发送邮件到 support@lovrabet.com
- 🐛 在 GitHub 提交 Issue
我们会持续更新本文档,添加更多常见问题和解决方案。