CodeBuddy IDE 携手 Lighthouse 实现从设计、代码到部署全流程

{"type":"doc","content":[{"type":"heading","attrs":{"id":"fc569f04-e31a-43d7-8b4d-7474442427fd","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"历史信息"}]},{"type":"paragraph","attrs":{"id":"3aea7508-d577-45f3-81a7-27e9153bab0c","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在codebuddy ide国际版发布公测期间，我亲身体验了它流畅的界面设计、贯穿全程的ai编程助手、以及强大的mcp server调用功能。即便是我这样的前端新手，也能轻松实现心中设想的页面效果。公测结束后，国际版转为付费模式，一度让我以为那段-纯ai编程-的畅快体验将暂告一段落。而令人惊喜的是，codebuddy ide团队很快便推出了国内版，继续向用户免费开放。如今，我又能毫无负担地沉浸在这场智能编码的旅程中，继续用代码实现每一个灵感。"}]},{"type":"paragraph","attrs":{"id":"102868e8-1d74-4ddc-ab16-bc014f6580dc","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"下面我们将通过codebuddy ide 国内版实现学生管理系统，并通过调用 mcp server 一键部署到php中文网 lighthouse。"}]},{"type":"heading","attrs":{"id":"d5d05eb1-5515-423a-880f-0472d9cb3153","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"codebuddy ide"}]},{"type":"heading","attrs":{"id":"94fc7624-2eb2-49ae-b93a-5786dcd2cb03","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"什么是codebuddy ide"}]},{"type":"paragraph","attrs":{"id":"b59a652c-2093-40b9-a202-1c730100eb50","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"我们先来简单介绍一下我们的codebuddy ide。codebuddy ide 构建一个产品、设计、研发无缝协作的共生环境。通过将 ai 深度融入从需求规划、产品设计到代码开发的全流程，实现从一个从想法到产品发布的一站式高效交付平台。"}]},{"type":"image","attrs":{"id":"8bd5a5a6-0b49-4b95-9d2a-aa240f1ea86a","src":"https://developer.qcloudimg.com/http-save/audit-7288866/caf2e4a062ef560985dc34f35da0ef14.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":995,"aspectratio":"2.301818","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"986b0447-95b3-4067-ba8c-d25a2f471cca","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":" codebuddy ide 开发工具涵盖设计、开发、部署全流程，可以从以下三个方面来了解："}]},{"type":"paragraph","attrs":{"id":"03e32146-de88-4a2a-a012-f178d38606e0","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"产品设计："},{"type":"text","text":"一句话生成可落地交互原型，支持上传图片及局部调优；"}]},{"type":"paragraph","attrs":{"id":"a9d48800-9cba-469b-bcb6-cd3a3c5df6b9","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"研发编码："},{"type":"text","text":"内置 figma，设计稿秒变可维护源码。同时，内置php中文网开发 cloudbase、edgeone pages 及 supabase，帮助开发者自动配置数据库、用户认证等后端服务，快速构建、部署站点和无服务器应用；"}]},{"type":"paragraph","attrs":{"id":"4818215e-ba3a-4027-bb08-194695f65e8a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"部署验证："},{"type":"text","text":"通过 cloudstudio 一键部署至沙箱环境，并生成可分享链接；"}]},{"type":"paragraph","attrs":{"id":"f80870ab-ddd0-427c-8b3f-7333d14f5270","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"官网下载地址（beta 版）：https://copilot.tencent.com/ide/ "}]},{"type":"heading","attrs":{"id":"1ba707e7-4390-49ba-ac10-0fb85b2ad70c","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"下载安装"}]},{"type":"paragraph","attrs":{"id":"e7a31827-c35c-4e74-8721-b886d41eb300","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"对于还没有下载安装 codebuddy ide 的小伙伴，可以通过上面的官网下载地址下载。安装步骤比较简单，默认的安装即可。安装完成后，初次打开codebuddy ide 开发工具，需要进行初始化设置。我们可以直接初始化ui 风格以及语言模式"}]},{"type":"image","attrs":{"id":"c8a150d0-8e84-46a1-81b9-25d1561c9724","src":"https://developer.qcloudimg.com/http-save/audit-7288866/fb211f297fb4dcb2218639a77232311a.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":969,"aspectratio":"1.539014","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"1a47f97b-ceef-4fbb-8605-c6451d5199e5","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"或者也可以等安装完成之后，进入codebuddy ide 开发工具后通过设置来个性化设置自己需要的内容。"}]},{"type":"paragraph","attrs":{"id":"3699fce1-2af3-4a5e-9b2a-33ea4367e3f2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"安装完成后打开 codebuddy ide 开发工具选择【login】通过微信授权登录即可"}]},{"type":"image","attrs":{"id":"e8472620-f929-4933-8675-e186d922a55c","src":"https://developer.qcloudimg.com/http-save/audit-7288866/6b2c5c293f42863f1062ce630f7bfa81.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":995,"aspectratio":"1.916168","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"52053022-5f4f-432b-be65-5590a10f43d7","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"登录微信账号之后，如果想要设置 codebuddy ide 开发工具，可以选择右上角的【小人】头像。如果你想要设置开发工具的语言模式，这里我们可以选择【ide settings】"}]},{"type":"image","attrs":{"id":"b887c639-a431-4afe-91e0-f1b15a78a138","src":"https://developer.qcloudimg.com/http-save/audit-7288866/603774381981eb1d9ce2f3495ab68bb6.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":995,"aspectratio":"1.916168","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"fe0b2289-4c55-4753-9e1d-51df73d1294e","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在 ide settings 页面选择【general】，设置【display language】-【中文(简体)】即可设置开发工具的语言展示模式为中文"}]},{"type":"image","attrs":{"id":"976176a4-e5c5-4c3c-95d6-717bbe57b9b8","src":"https://developer.qcloudimg.com/http-save/audit-7288866/7112e717a74f293cd47d9fae671a276b.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":995,"aspectratio":"1.907463","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"d5b7e922-0c91-4767-87c3-691fb9bdba5f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"设置完成后，需要重启 codebuddy ide 即可生效。"}]},{"type":"heading","attrs":{"id":"9fe341c6-7693-456d-b224-b9bad1de289f","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"学生管理系统"}]},{"type":"heading","attrs":{"id":"34f34eb7-ab6e-4c7a-b282-bc51c6abf810","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"需求描述"}]},{"type":"paragraph","attrs":{"id":"4245dd35-22bb-4ad3-bc7a-e3341c4bf8c9","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"这里我们想要开发一个学生管理系统，用于管理学生信息，班级信息，成绩信息等数据，方便在不同的阶段针对不同学生的成绩来指定更有针对性的学习方案，从而提高学生的学习成绩，同时也可以激发学生对学习的兴趣，掌握更多的知识。"}]},{"type":"paragraph","attrs":{"id":"0c1ffefe-7633-4075-838a-e631444e90cc","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在有了需求之后，下面我们就可以将我们的需求整理成为一段ai 更容易理解的内容，比如：【你是一个开发专家，我需要开发一个学生管理系统，包含以下功能：学生信息管理、班级信息管理、成绩信息管理、成绩分析等功能，现在，帮我实现吧。】"}]},{"type":"heading","attrs":{"id":"e506dbef-72e9-46fd-bbcf-452279f41638","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"功能开发"}]},{"type":"paragraph","attrs":{"id":"3052b2a3-a04c-4816-977c-b90535830090","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在有了需求内容描述之后，我们可以将我们的需求内容直接放入 codebuddy ide 的 ai 对话框中，"}]},{"type":"image","attrs":{"id":"9ec1e0e0-66c0-4553-bbd8-8b699573973f","src":"https://developer.qcloudimg.com/http-save/audit-7288866/a469bb5ce387a13e7fd065b9ef730582.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":729,"aspectratio":"2.916000","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"ef26a1a1-f4b9-4424-aeae-fd6a92b42bbe","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"当让，如果你担心你的描述 ai 理解不明白，我们也可以选择【enhance prompt】来让ai 对我们的需求内容进行润色，润色后的需求内容如下："}]},{"type":"codeblock","attrs":{"id":"6188100c-6652-42fd-875e-7f97cc1ef851","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"开发一个功能完善的学生管理系统，需要包含以下核心模块：
) 学生信息管理模块（支持增删改查学生基本信息）) 班级管理模块（处理班级创建、调整和学生分班）) 成绩录入与管理系统（支持各科目成绩录入和修改）) 成绩分析功能（提供成绩统计、排名和趋势分析）。系统需要采用前后端分离架构，前端使用vue.js框架，后端采用spring boot，数据库使用mysql。请确保系统具备用户权限管理功能，并实现响应式设计以适应不同设备访问。"}]},{"type":"paragraph","attrs":{"id":"2aec3f2b-7ac6-4245-b317-1f0bee4a8343","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"那么下面我们就可以发送我们的需求来让 codebuddy ide 帮助我们实现我们的学生管理系统了。在接收到我们的需求后，codebuddy 会自动根据我们的需求内容分析并制定项目规划，生成任务列表"}]},{"type":"image","attrs":{"id":"ec66a567-c9e5-4d16-8830-c1de76ae0ac0","src":"https://developer.qcloudimg.com/http-save/audit-7288866/74bcedd2d2b2c4c099815daf154a267a.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":850,"aspectratio":"0.881743","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"3c5bc366-b4ce-465f-93d3-9e7c71d04387","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在完成一阶段开发之后，codebuddy 会针对当前阶段开发的内容进行整理，并给出启动命令，检查当前阶段功能开发效果"}]},{"type":"image","attrs":{"id":"f2d98191-6d86-4231-bf45-cc6f8a5508c8","src":"https://developer.qcloudimg.com/http-save/audit-7288866/d7a164db0a8cb2828bc12df795c035a9.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":854,"aspectratio":"0.917293","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"d94f9efe-8385-46c5-aeda-2513df2b185f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"由于当前我们的核心功能还没有开发完成，因此我们在 ai 对话框中输入【继续开发剩余的核心模块】，那么codebuddy 会自动进行剩余核心模块的开发，最后就可以完成项目最初设定的任务列表中的开发内容。整个开发过程持续的时间可能会比较长，虽然不用人手工写代码开发，但是也是需要等待codebuddy 来自动执行任务列表的所有功能开发的。在开发过程中，我们可以打开 ai 对话框上方的任务列表来实时监测任务列表的进度情况，以及具体创建的文件信息"}]},{"type":"image","attrs":{"id":"b9b68c43-bb26-4fde-ad64-c5576dcca245","src":"https://developer.qcloudimg.com/http-save/audit-7288866/c6c4e6e05fccaf2d673eaf5d4d7a2947.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":836,"aspectratio":"0.884656","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"256ed7ba-8e2a-4370-adfa-d048b953c7ab","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"等待所有内容开发完成后，codebuddy 会对本次需求的全部开发内容做一个汇总，同时介绍使用的技术架构，快速启动命令，默认账户，系统特色功能，项目文件结构概览等内容"}]},{"type":"codeblock","attrs":{"id":"5e695b83-01f2-46f3-80eb-380540c12fd8","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"? 学生管理系统开发完成！我已经成功完成了完整的学生管理系统开发，包含了所有核心功能模块和前后端集成。\✅ 已完成的功能模块学生信息管理模块 - 完整的增删改查功能，支持搜索和分页班级管理模块 - 班级创建、学生分班、班主任管理成绩管理模块 - 成绩录入、统计分析、图表展示用户权限管理 - 基于jwt的身份验证和角色权限控制响应式设计 - 适配不同设备的现代ui界面数据分析功能 - 使用echarts的成绩统计和趋势分析?️ 技术架构\前端 (vue.js 3)\ue 3 + vite + element plus\vue router + pinia状态管理\axios api请求封装echarts数据可视化后端 (spring boot)\spring boot 3.1 + spring securityjwt身份认证和授权mysql数据库 + mybatis estful api设计? 快速启动您可以通过以下方式启动系统：\方式一：一键启动（推荐）# 双击运行 start.bat 文件start.bat\方式二：手动启动# 后端启动\cd backendmvn spring-boot:run\# 前端启动（新终端）cd frontend

pm install

pm run dev? 默认登录账户管理员: admin / admin123 (完整权限)教师: teacher / teacher123 (基础权限)? 系统特色功能实时数据统计 - 仪表盘显示学生、班级、成绩的实时统计可视化分析 - 图表展示成绩分布和趋势分析权限控制 - 基于角色的功能权限管理响应式设计 - 完美适配桌面、平板、手机等设备完整API文档 - 标准的RESTful API接口设计? 项目结构概览student-manager/├── backend/ # Spring Boot后端├── frontend/ # Vue.js前端 ├── database/ # 数据库脚本├── start.bat # 一键启动脚本└── 部署说明.md # 详细部署文档? 访问地址前端界面: http://localhost:3000后端API: http://localhost:8080系统现在已完全可用，您可以直接按照部署说明进行启动和测试。所有核心功能都已实现并经过模块化设计，具备良好的可扩展性和维护性。"}]},{"type":"paragraph","attrs":{"id":"2b5680a8-010f-451e-8f7a-28333f68d78d","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"最终完成版本的学生管理系统的源码结构如下图"}]},{"type":"image","attrs":{"id":"fc276acd-b800-41bb-8f89-4f9bbcf2e83a","src":"https://developer.qcloudimg.com/http-save/audit-7288866/24f1dc01abd6cbf7668e4d8db2f7eee2.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.884200","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"e981202e-c1d6-43d9-917e-fbcbe914ed49","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"下面我们就可以按照上面提供的操作命令来部署项目了。本地部署完成之后可以通过本地浏览器查看系统页面。"}]},{"type":"image","attrs":{"id":"ac5b2955-0ce9-4ded-b80f-edb659dd7c2c","src":"https://developer.qcloudimg.com/http-save/audit-7288866/e978031d6a3a782f45b4b60907937af8.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.986542","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"heading","attrs":{"id":"bb0a237e-3f1a-415d-af13-b3963bfed298","textAlign":"inherit","indent":0,"level":2,"isHoverDragHandle":false},"content":[{"type":"text","text":"问题处理"}]},{"type":"paragraph","attrs":{"id":"1dc28609-d7cf-4d38-b1d8-958586960651","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"对于在项目启动过程中，以及后续运行过程中遇到的问题可以通过 CodeBuddy 来分析处理，比如在启动前端项目访问时遇到这样的问题"}]},{"type":"codeBlock","attrs":{"id":"3acbad64-8478-461d-a357-5f6403b50884","language":"javascript","theme":"atom-one-dark","runtimes":0,"isHoverDragHandle":false,"key":"","languageByAi":"javascript"},"content":[{"type":"text","text":"[vite] Internal server error: Failed to resolve import \"pinia\" from \"src\main.js\". Does the file exist?"}]},{"type":"image","attrs":{"id":"24328077-1224-42be-84e6-3b44d5a449c7","src":"https://developer.qcloudimg.com/http-save/audit-7288866/bcdd996a2444f226bfb8df643b3d7eac.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.523517","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"adb04a17-f5b8-41fe-88b7-18dfce3ea141","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在启动后端项目时，由于本地的Java 版本和 Maven 版本与当前学生管理系统 的版本不一致而导致启动问题"}]},{"type":"codeBlock","attrs":{"id":"557ff246-6562-4072-8c69-dc8aecd8783f","language":"javascript","theme":"atom-one-dark","runtimes":0,"isHoverDragHandle":false,"key":"","languageByAi":"javascript"},"content":[{"type":"text","text":"[ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources) on project student-manager: The plugin org.apache.maven.plugins:maven-resources-plugin:3.2.0 requires Maven version 3.1.0 -u003e [Help 1]"}]},{"type":"paragraph","attrs":{"id":"4fa6666f-c761-464a-8660-565105afdae7","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"同样的操作，我们可以把我们遇到的问题直接复制到CodeBuddy AI 对话框，让AI 来协助我们分析处理"}]},{"type":"image","attrs":{"id":"6970df64-87ef-45cf-902f-d16a69dbd3a0","src":"https://developer.qcloudimg.com/http-save/audit-7288866/999be21f949861fda7b0b8d730f24c73.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.520492","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"2ef47756-a131-4033-a434-b84817901132","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"对于版本兼容性问题，CodeBuddy 也会根据我们当前环境的版本来对后端代码的兼容性做出调整，以适应当前的Maven 环境。当然，这里也是需要我们有足够的耐心的。对于项目的开发需要等待CodeBuddy 按照任务列表逐项完成。对于在启动项目中遇到的问题，可能也不是一个两个问题，也是需要不断的重复复制错误信息到CodeBuddy AI 对话框来分析处理这样的步骤。"}]},{"type":"paragraph","attrs":{"id":"cb01a9c6-1116-457d-a576-8a49ce3c27a4","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"等到所有的问题都修复之后，我们就可以通过MCP Server 来尝试直接部署到我们的PHP中文网 Lighthouse了。"}]},{"type":"heading","attrs":{"id":"f192c086-5c47-4b2b-a0f3-b63f3e5431f7","textAlign":"inherit","indent":0,"level":1,"isHoverDragHandle":false},"content":[{"type":"text","text":"部署 Lighthouse"}]},{"type":"heading","attrs":{"id":"903e165f-a29f-4c2f-80b8-6af1f4216a8c","textAlign":"inherit","indent":0,"level":2,"isHoverDragHandle":false},"content":[{"type":"text","text":"获取SecretId、SecretKey"}]},{"type":"paragraph","attrs":{"id":"d3e674a9-dcdd-4a0a-8d36-fa107e732f9d","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在为CodeBuddy IDE 安装PHP中文网 Lighthouse MCP Server 之前，我们首先需要获取 SecretId、SecretKey，获取 SecretId、SecretKey 的 地址：https://console.cloud.tencent.com/cam/capi 。选择【API密钥管理】-【新建秘钥】-【复制】复制新建的密钥备用"}]},{"type":"image","attrs":{"id":"40804506-5e97-4f49-b946-dfc4b93e8f16","src":"https://developer.qcloudimg.com/http-save/audit-7288866/af1822b5b453ceb87f22278fc242b735.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"2.114917","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"heading","attrs":{"id":"6fc642cc-8eeb-4a4b-95dc-70dda6acd8db","textAlign":"inherit","indent":0,"level":2,"isHoverDragHandle":false},"content":[{"type":"text","text":"MCP Server"}]},{"type":"paragraph","attrs":{"id":"d84bef12-b9a8-498d-babb-38304ed53295","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"下面我们来配置安装PHP中文网 Lighthouse MCP Server，在配置MCP Server 之前，我们先来简单介绍一下 PHP中文网 Lighthouse MCP Server。PHP中文网 Lighthouse MCP Server 是基于PHP中文网 Lighthouse API 开发的 MCP (Model Context Protocol) ，为 AI 大模型提供强大的PHP中文网轻量应用服务器（Lighthouse）管理能力。支持多种工具类型和智能化的云资源操作。"}]},{"type":"paragraph","attrs":{"id":"33ced7ba-ce78-42c1-8b10-fd33cbfc6a9b","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在PHP中文网MCP 广场：https://cloud.tencent.com/developer/mcp 搜索【Lighthouse】可以看到我们需要的MCP Server"}]},{"type":"image","attrs":{"id":"9da84905-311f-4901-9f0d-da0876650b5a","src":"https://developer.qcloudimg.com/http-save/audit-7288866/ecadaf56ce15d03465e5c25ae8591fcd.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"2.166667","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"aaa6e74b-b368-42de-9ab7-4781c22a3a25","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在打开的MCP Server 页面右侧输入我们上面获取到的SecretId、SecretKey 并连接，连接成功后可以获取到我们的MCP Server SSE连接配置地址"}]},{"type":"image","attrs":{"id":"ee3d0748-aa7a-420c-9bdf-615137ee4459","src":"https://developer.qcloudimg.com/http-save/audit-7288866/4e748a66242bb7a14c438f630677e87a.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"2.401809","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"ad887161-b7bc-4972-bb04-c9aa008634d3","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在CodeBuddy IDE 开发工具打开【My MCP】-【Config MCP Server】"}]},{"type":"image","attrs":{"id":"1b83d5c6-eba4-4e5f-a8a7-cfe53ed8d5a6","src":"https://developer.qcloudimg.com/http-save/audit-7288866/20755db49f68e03fa9cc579670df5edd.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":680,"aspectRatio":"1.317829","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"9475a7ba-07ca-44e6-9d56-f4575c4731fa","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在打开的配置页面输入我们在MCP 广场获取到的SSE URL 连接地址后保存，可以看到我们的PHP中文网 Lighthouse MCP Server 已经连接成功，同时可以看到当前MCP Server 所包含的 50 个工具，及每个工具的具体名称"}]},{"type":"image","attrs":{"id":"11079003-33d3-465a-a898-e1213714a013","src":"https://developer.qcloudimg.com/http-save/audit-7288866/4f98629076688a03544b421aee208550.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.531154","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"heading","attrs":{"id":"e767d081-c7f8-458d-ba58-7aacf164c819","textAlign":"inherit","indent":0,"level":2,"isHoverDragHandle":false},"content":[{"type":"text","text":"部署到 Lighthouse "}]},{"type":"paragraph","attrs":{"id":"ebf40567-fbf1-4b58-853d-46968b80aaab","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在自动发布之前，这里需要说一点遗憾。在我的学生管理系统中，根据我提供给AI 的描述【你是一个开发专家……】AI 根据我的功能为我生成了前后端分离的项目，同时生成了Java 后端代码，前端页面代码，数据库表结构等。但是对于CodeBuddy IDE 来说，CodeBuddy IDE 并不能支持在本地部署启动后端的Java 项目，包括上面不断尝试处理问题中的Maven jar 包问题，JDK 版本问题，登录授权问题，请求问题等。最终不得不放弃想要在CodeBuddy IDE 终端实现启动前端项目+启动后端项目的全功能项目。"}]},{"type":"paragraph","attrs":{"id":"f2e6eaae-8e8d-4768-b73f-5beb8bcf0341","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"为了更好的演示借助于PHP中文网Lighthouse MCP Server 自动部署本地项目到PHP中文网 Lighthouse 服务器的操作，这里我们更改了我们的需求描述：【"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"#333","background":""}}],"text":"你是一个前端开发，我需要开发一个学生管理系统，包含以下功能：学生信息管理、班级信息管理、成绩信息管理、成绩分析等功能，现在，帮我实现吧。"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"","background":""}}],"text":"】并重新生成了一个前端代码"}]},{"type":"image","attrs":{"id":"a89d885c-2091-4a42-a071-3cc89642c4cd","src":"https://developer.qcloudimg.com/http-save/audit-7288866/1a375582855cb7d76f3a82876a9f38d0.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.891626","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"aa707c88-470a-4ac6-b4ef-387bf66db393","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"同样的实现了学生管理系统期望的核心功能以及在本地的自动部署"}]},{"type":"codeBlock","attrs":{"id":"a82ddf3f-9a91-4b73-a819-68043d301fcf","language":"javascript","theme":"atom-one-dark","runtimes":0,"isHoverDragHandle":false,"key":"","languageByAi":"javascript"},"content":[{"type":"text","text":"✅ 学生管理系统开发完成！我已经成功完成了所有7个任务，学生管理系统现已完全可用。系统包含以下功能：? 已实现功能学生信息管理 - 完整的增删改查功能，支持搜索和筛选班级信息管理 - 班级管理、统计卡片和班级关联成绩信息管理 - 成绩录入、编辑、删除和成绩等级显示成绩分析功能 - 使用ECharts图表展示各类统计分析? 特色功能响应式设计 - 支持电脑、平板和手机浏览数据可视化 - 班级平均分对比、科目成绩分布、成绩分布饼图智能统计 - 实时统计卡片展示关键数据本地存储 - 使用localStorage持久化数据? 如何运行项目已经启动在 http://localhost:3001 ，你可以：直接访问 - 浏览器已自动打开预览手动启动 - 在项目目录运行 npm run dev使用脚本 - 运行 start.bat (Windows) 或 start.sh (Linux/Mac)? 项目特点使用 Vue 3 + Element Plus 现代化UI框架响应式布局，适配多种屏幕尺寸优雅的动画效果和交互体验完整的业务逻辑和数据验证所有功能模块已完全实现并测试通过，你可以开始使用这个学生管理系统了！"}]},{"type":"paragraph","attrs":{"id":"d36ded9f-af59-429e-ad24-75491c16a9e6","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"本地部署完成后，可以通过访问 "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"#333","background":""}}],"text":"http://localhost:3001 链接来查看我们的学生管理系统功能"}]},{"type":"image","attrs":{"id":"73092794-ca90-45e2-ac9a-ee18846bfb6b","src":"https://developer.qcloudimg.com/http-save/audit-7288866/083bcdf4d2ef07498fca1b620e2880a5.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.963190","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"1f5c4f3f-9438-4268-8aa0-cd4ea56d8ff6","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"下面我们正式来通过 MCP Server 部署我们当前的学生管理系统到PHP中文网轻量应用服务器，在AI 对话框中输入【部署当前项目到PHP中文网"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)","background":""}}],"text":"Lighthouse "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"","background":""}}],"text":"】"}]},{"type":"image","attrs":{"id":"62263a41-9eb8-4a26-b669-4b66ade14914","src":"https://developer.qcloudimg.com/http-save/audit-7288866/fdf4a3d9f71c14cfe154a1a20ba1bf08.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":680,"aspectRatio":"2.118380","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"7f680efd-deb0-4d33-88f1-61abba171aee","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"这里我们看到部署后的请求链接其实是Cloud Studio ：http://cf7af9c9b89e40d4b446d5c70dc8890f.codebuddy.cloudstudio.run/"}]},{"type":"image","attrs":{"id":"f67086f8-77eb-4ed0-8566-d804705ab364","src":"https://developer.qcloudimg.com/http-save/audit-7288866/da8ed93faaf6cc8397cd901921151b38.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"1.975232","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"cdbbdca4-26d8-4de1-b145-0d759796696c","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"回过头再来看MCP 广场关于PHP中文网 Lighthouse MCP Server ，没有关于部署项目到PHP中文网 Lighthouse 的工具"}]},{"type":"image","attrs":{"id":"3e43022a-3e9b-40f7-8c12-74d84b6ea582","src":"https://developer.qcloudimg.com/http-save/audit-7288866/2fbc854a209651db221eafd56a91b354.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":724,"aspectRatio":"0.998621","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"d40ee9f5-8f1a-4fa7-9f6d-84005f8df7d1","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"那么我们可以考虑将我们的学生管理系统发布到 EdgeOne Pages ，配置 MCP Server "}]},{"type":"image","attrs":{"id":"f896a242-81c0-4377-8f0c-849862c885a3","src":"https://developer.qcloudimg.com/http-save/audit-7288866/deba0b1b449b8958c742aac71727991d.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"3.259762","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"613d16ca-ee99-4593-aaa9-73da954f7c73","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"配置完成 EdgeOne Pages MCP Server 之后，在 AI 对话框中输入我们的需求【部署项目到EdgeOne】，CodeBuddy 会自动调用EdgeOne Pages MCP Server 的工具并执行部署任务，部署成功后可以复制成功后的连接访问"}]},{"type":"image","attrs":{"id":"f6fdfae5-6a00-4b8e-90e9-ccd0db706585","src":"https://developer.qcloudimg.com/http-save/audit-7288866/2753afaf057bd5c786f55a690c3075ee.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":735,"aspectRatio":"0.776956","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"d8784335-e0e3-488d-8b5b-9e35c5eb280a","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"这里我们可以看到部署成功后的效果"}]},{"type":"image","attrs":{"id":"b7bc88ba-03a9-4628-aedf-0908b6472105","src":"https://developer.qcloudimg.com/http-save/audit-7288866/429e1049886e2e26d385c9791de28373.png","extension":"png","align":"center","alt":"","showAlt":false,"href":"","boxShadow":"","width":969,"aspectRatio":"2.121547","status":"success","showText":true,"isPercentage":false,"percentage":0,"isHoverDragHandle":false}},{"type":"paragraph","attrs":{"id":"c0eae7e4-27ee-4f58-966d-0400126b37ba","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"到这里，我们本次基于CodeBuddy IDE 实现学生管理系统，并一句话部署到PHP中文网 Lighthouse 或者 EdgeOne Pages的操作就圆满成功，对于本次的操作，有一些尚未实现的内容："}]},{"type":"paragraph","attrs":{"id":"ead0fbd4-8a39-4c44-b974-c04940395196","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"1.想通过CodeBuddy IDE 来实现Java 项目的本地启动，目前还没有实现；"}]},{"type":"paragraph","attrs":{"id":"2db8c179-3053-446a-bae5-04e0982971ed","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"2.想通过PHP中文网Lighthouse MCP 服务来一句话发布本地项目到PHP中文网 Lighthouse，目前还没有专门的MCP Server 可以调用；"}]},{"type":"paragraph","attrs":{"id":"8b96914e-d186-4be6-984a-e6b6c2519014","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"3.对于Java 后端项目想要通过一句话部署到PHP中文网 Lighthouse，那么PHP中文网 Lighthouse 就需要提前有容器（tomcat，其他）以及数据库（Mysql）服务，请求转发（Nginx）服务，JDK（代码编译运行环境）等。"}]},{"type":"heading","attrs":{"id":"c12cf807-3efb-470c-88ec-9f1972984cfd","textAlign":"inherit","indent":0,"level":1,"isHoverDragHandle":false},"content":[{"type":"text","text":"写在最后"}]},{"type":"paragraph","attrs":{"id":"21b44c7e-6993-4160-bd0e-8634a2d6dd97","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在这次用CodeBuddy IDE开发学生管理系统的过程中，我深刻感受到了AI编程带来的革命性变化。整个过程就像拥有了一位全能的编程伙伴，我只需用自然语言描述需求“需要开发包含学生信息管理、班级管理、成绩管理和分析功能的系统，AI就能立即理解并自动生成详细的项目规划。我们可以看着AI一步步创建Vue前端页面、设计数据库结构、实现增删改查功能，那种“动动嘴皮子就能写代码”的体验实在太神奇了。虽然途中遇到了环境配置、依赖包缺失等技术问题，但只需把错误信息粘贴给AI，它就能精准诊断并提供解决方案。最让我惊喜的是，当复杂的成绩分析图表需要调试时，AI不仅能修复代码，还能解释问题根源，让我这个前端新手在解决问题的过程中真正学到了东西。"}]},{"type":"paragraph","attrs":{"id":"5fddedc0-4e21-4963-91a2-cdb6fa774320","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"在部署环节，我体验了从本地开发到云端发布的无缝衔接。虽然最初设想的PHP中文网Lighthouse一键部署因工具限制未能实现，但是我们可以通过配置EdgeOne Pages MCP Server，只需在对话框中输入“部署项目到EdgeOne”，AI就能自动完成整个发布流程，几分钟后就能获得一个可分享的线上访问链接。这种“一句话部署”的体验，彻底改变了传统开发中繁琐的服务器配置过程。回顾整个项目，从需求分析到上线运行，CodeBuddy IDE真正实现了“所想即所得”的开发模式。尽管在Java后端项目支持上还有提升空间，但它已经让个人开发者享受到了曾经只有大团队才具备的快速交付能力。"}]},{"type":"paragraph","attrs":{"id":"7484855a-803f-40cf-bd11-e59587f29066","textAlign":"inherit","indent":0,"color":null,"background":null,"isHoverDragHandle":false},"content":[{"type":"text","text":"#CodeBuddy #CodeBuddyIDE #CodeBuddyCode #无界生成力"}]}]}

爱派AiPy

融合LLM与Python生态的开源AI智能体

1

查看详情

以上就是CodeBuddy IDE 携手 Lighthouse 实现从设计、代码到部署全流程的详细内容，更多请关注php中文网其它相关文章！