使用TraeAI开发Web页面测试MSYS2 ucrt64 Qt MCP服务器

使用Trae AI助手开发Web页面测试MSYS2 ucrt64 Qt MCP服务

非消费类软件开发企业以及院校一般保有很多基于C++的代码。这些代码一般用于计算、模拟、仿真等场景，并没有直接提供Web页面的接口。使用Trae AI助手，我们可以快速实现基于C++的代码的Web页面测试。Trae AI助手是一个基于OpenAI的AI助手，它可以帮助我们快速实现基于C++的代码的Web页面测试。前期使用AI，很快实现了MCP协议，为后续的Web页面开发提供了基础，也发现了Qt竟然非常善于写后端代码的大宝库！

我们的后端底层是C++/Qt实现的MCP服务器。这个服务器有意思的地方在于，它既能给AI Agent当后端，又能给普通传统Web页面当后端，一举两得！以前写个测试页面要花不少时间，既要写HTML、JS，又要调试地图显示，还要搞API对接。这次试了试Trae这个AI助手，半天时间就OK了。本文的所有代码都可以在https://gitcode.com/colorEagleStdio项目中找到。Qt MCP服务器的编译建议使用MSYS2环境，参考项目中的README文档。Web页面可以直接在浏览器中打开使用，前提是MCP服务器要先运行起来。

文章目录

[使用Trae AI助手开发Web页面测试MSYS2 ucrt64 Qt MCP服务](#使用Trae AI助手开发Web页面测试MSYS2 ucrt64 Qt MCP服务)
- [1. 背景介绍](#1. 背景介绍)
- - [1.1 Qt程序到MCP的优雅转换](#1.1 Qt程序到MCP的优雅转换)
  - [1.2 一箭双雕：同时服务AI Agent和传统Web](#1.2 一箭双雕：同时服务AI Agent和传统Web)
- [2. 基于AI的测试页面制作](#2. 基于AI的测试页面制作)
- - [2.1 问题的提出](#2.1 问题的提出)
  - [2.2 先让AI理解需求并生成1个例子代码](#2.2 先让AI理解需求并生成1个例子代码)
  - [2.3 审核代码，并批量复制其他函数的测试页面](#2.3 审核代码，并批量复制其他函数的测试页面)
  - [2.4 实际运行效果](#2.4 实际运行效果)
- [3. AI辅助开发的感受](#3. AI辅助开发的感受)
- [4. MSYS2 Qt环境：AI时代开发的神兵利器](#4. MSYS2 Qt环境：AI时代开发的神兵利器)
- - [4.1 开箱即用的完整环境](#4.1 开箱即用的完整环境)
  - [4.2 和AI开发无缝衔接](#4.2 和AI开发无缝衔接)
  - [4.3 快速迭代，AI友好](#4.3 快速迭代，AI友好)
- [5. 总结](#5. 总结)

1. 背景介绍

我们的项目是GeoCalc MCP，一个基于模型上下文协议(Model Context Protocol)的地理计算服务, 底层用C++/Qt实现，提供了一系列地理计算功能。比如计算两点间的方位俯仰，天线方向图覆盖，地面等高线这些。代码都在mcp/server/mcp_server目录下，每个工具函数都有对应的cpp和h文件。

bash 复制代码

$ tree geocalc
geocalc
├── doc
├── geocalc.h
├── main.cpp
├── mcp
│   ├── server
│   │   ├── hgt_query.cpp
│   │   ├── hgt_query.h
│   │   ├── mcp_server
│   │   │   ├── mcp_server.cpp
│   │   │   ├── mcp_server.h
│   │   │   ├── toolfunc_HPR_Polar_Alpha2LLAs.cpp
│   │   │   ├── toolfunc_HPR_Polar_Alpha2LLAs.h
│   │   │   ├── toolfunc_HPR_Polar_AlphaBeta2LLA.cpp
│   │   │   ├── toolfunc_HPR_Polar_AlphaBeta2LLA.h
│   │   │   ├── toolfunc_HPR_Polar_ECEF2AlphaBeta.cpp
│   │   │   ├── toolfunc_HPR_Polar_ECEF2AlphaBeta.h
│   │   │   ├── toolfunc_HPR_Polar_LLA2AlphaBeta.cpp
│   │   │   ├── toolfunc_HPR_Polar_LLA2AlphaBeta.h
│   │   │   ├── toolfunc_contour_elevation.cpp
│   │   │   ├── ...
│   │   │   ├── toolfunc_contour_elevation.h
│   │   │   ├── toolfunc_ellips_geodesic.cpp
│   │   │   ├── toolfunc_ellips_geodesic.h
│   │   │   ├── toolfunc_ellips_range.cpp
│   │   │   ├── toolfunc_ellips_range.h
│   │   │   ├── toolfunc_observe_az_el_range.cpp
│   │   │   ├── toolfunc_observe_az_el_range.h
│   │   │   ├── toolfunc_observe_dem_judge.cpp
│   │   │   └── toolfunc_observe_dem_judge.h
│   │   ├── server.cpp
│   │   └── ... 
└── web
    ├── HPR_Polar_Alpha2LLAs.html
    ├── contour_elevation.html
    ├── ellips_geodesic.html
    ├── ellips_range.html
    ├── observe_az_el_range.html
    └── observe_vis_judge.html

1.1 Qt程序到MCP的优雅转换

有意思的是，这个项目里的很多地理计算函数，其实来自我们以前的桌面Qt程序。以前这些函数是用在GUI界面里的，用户在Qt Widgets里输入参数，点按钮计算，结果显示在界面上。现在把它们变成MCP服务，几乎是水到渠成的事情。文章《基于Qt的MCP LLM代理服务开发实战：从0到1扩展大语言模型》介绍了初步实现。为什么Qt到MCP转换这么容易？主要有几个原因：

Qt的模块化设计：Qt程序一般都分得比较清楚，UI是UI，业务逻辑是业务逻辑。我们的地理计算核心函数本来就是独立的，和界面无关，抽出来很方便。
Qt的JSON支持 ：MCP协议是基于JSON的，而Qt的QJsonDocument、QJsonObject这些类用起来特别顺手。参数解析和结果打包，几行代码就搞定了。
Qt的HttpServer ：Qt6自带的QHttpServer太好用了，几行代码就能搭个HTTP服务器。我们的MCP服务就是用它搞的，不用额外依赖什么库。

在《改造传统Qt6Widgets程序为多会话MCPServer生产力工具-技巧与实现》中，我们介绍了MCP服务器的架构，核心是McpServer类，它负责：

初始化服务
注册工具函数
处理HTTP请求
分发到具体的函数

每个工具函数，比如HPR_Polar_Alpha2LLAs，都有两个函数：

toolfunc_xxx_desc()：返回函数描述，告诉AI这个函数是干什么的，参数是什么
toolfunc_xxx_obj()：具体实现，解析参数，调用原来的地理计算函数，打包结果

这种设计保证加新函数的时候，只要写这两个函数，然后注册一下就行。原来的核心计算代码一点都不用改！

1.2 一箭双雕：同时服务AI Agent和传统Web

有意思的是，事实上MCP服务器不只是给AI Agent用的，普通的Web页面也能用！本文要介绍的测试页面，就是直接用JavaScript fetch调用HTTP端点。

为什么能做到这点？因为MCP协议的架构设计得好：

协议兼容：标准的JSON-RPC over HTTP，AI Agent能懂，Web前端也能懂
端点统一 ：都是/geocalc这个端点，POST方法，JSON格式
无状态设计：每次调用都是独立的，AI用和人用没区别

看一下Web页面代码，调用很简单：

javascript 复制代码

const response = await fetch(MCP_SERVER_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(requestBody)
});

这个架构带来的好处太大了：

写一次，到处用：核心代码只有一套，AI能用，Web前端能用，以后说不定还能做桌面客户端
测试方便：用Web页面测试好了，AI Agent用起来自然也没问题
渐进式迁移：以前的Qt桌面程序，可以先抽成MCP服务，然后慢慢做Web界面，不用一下全改。尤其是涉及C++并行计算的代码，不需要损失性能。

2. 基于AI的测试页面制作

2.1 问题的提出

以前，每当实现一个新的工具函数，比如HPR_Polar_Alpha2LLAs，要测试它可麻烦了：

得写个小的python测试程序，调用这个函数。尤其是因为涉及到绘图，所以要写个python脚本，用matplotlib绘制结果。
得写点输出，打印结果。显示的界面要能直观看到效果，尤其是涉及到地图的。
如果要改参数，还得重新编译。

最好的方法，应该是用JavaScript fetch调用HTTP端点，直接在浏览器里测试。用OpenLayers显示地图，既方便又直观。这次制作html测试程序，准备让Trae直接从头干。Trae是个编程辅助AI，能看代码，能写代码。

2.2 先让AI理解需求并生成1个例子代码

首先把已有的示例代码、文档给Trae看，告诉它这个程序是干什么的。然后把toolfunc_HPR_Polar_Alpha2LLAs.cpp也给它，让它理解这个新的工具函数的功能和输入输出参数。同时，还得看看相关的函数，比如contour_elevation，因为新的页面里也要用到它来画全向覆盖区域。

而后，告诉 trae 生成一个测试toolfunc_HPR_Polar_Alpha2LLAs的html页面。页面左侧可以配置参数，右侧显示地图和JSON的接口。

cpp 复制代码

// 看一下HPR Polar Alpha2LLAs的描述
QJsonObject toolfunc_HPR_Polar_Alpha2LLAs_desc()
{
    return QJsonObject({
        {"name", "HPR_Polar_Alpha2LLAs"},
        {"type", "function"},
        {"endpoint", "/geocalc"},
        {"method", "POST"},
        {"description", "计算具有一定聚束角度的光源，以一定姿态照射地面时的照亮区域..."}
        // ...
    });
}

Trae看完参考文件，很快就写出了HPR_Polar_Alpha2LLAs.html。代码结构很清晰：

HTML部分：和原来的例子差不多，参数输入面板，地图显示，JSON显示
JavaScript部分 ：
- 初始化地图，添加标记
- autoAlign函数：自动计算B看A的方位俯仰
- calculate函数：主计算逻辑，调用多个MCP工具
- drawContour和drawHPRPolygon：画两种覆盖区域
样式部分：沿用原来的风格

javascript 复制代码

async function autoAlign() {
    const llaA_lat = parseFloat(document.getElementById('llaA_lat').value);
    const llaA_lon = parseFloat(document.getElementById('llaA_lon').value);
    // ... 读取其他参数
    try {
        showLoading(true);
        // 调用observe_az_el_range，但是参数反着传，B看A
        const result = await callTool('observe_az_el_range', {
            llaA_lat: llaB_lat,
            llaA_lon: llaB_lon,
            llaA_h: llaB_h,
            llaB_lat: llaA_lat,
            llaB_lon: llaA_lon,
            llaB_h: llaA_h
        });
        
        // 把结果设置到hpr输入框
        document.getElementById('hpr_h').value = result.azimuth.toFixed(4);
        document.getElementById('hpr_p').value = result.elevation.toFixed(4);
        document.getElementById('hpr_r').value = 0;
        
        // 自动计算一下
        calculate();
    } catch (error) {
        console.error('对准失败:', error);
    } finally {
        showLoading(false);
    }
}

AI写的代码有几个值得注意的地方：

样式区分：contour_elevation的区域用黄色虚线，HPR的用青色实线，区分得很清楚
JSON显示 ：只显示主函数HPR_Polar_Alpha2LLAs的请求和响应，其他调用后台默默做
首次加载：页面加载时会自动调用autoAlign，不用用户手动点

2.3 审核代码，并批量复制其他函数的测试页面

对上述代码，进行仔细审核后，发现一点问题也没有。此时，就要求AI仿照这个例子，为每个函数都写一个测试页面。

AI对于复制代码，没有问题。能够自动认识已有代码的结构和逻辑。

2.4 实际运行效果

页面写好后，打开浏览器一看，还真不错！这时候你会发现，我们写的这个Web页面，就是在直接调用那个同时也服务AI Agent的MCP服务器。同一个端点，同一套代码，人在用，AI也在用，很有意思！

用户可以自己调整参数, 改完点"计算"按钮，地图就会更新。

3. AI辅助开发的感受

这次用Trae开发页面，感觉效率提高了不少。说说几点体会：

AI能很快看懂已有代码的结构和逻辑。不用我再一行行去解释observe_az_el_range.html是怎么回事，直接把文件丢给它，它就懂了。
应该从1个简单的例子开始，先让AI理解需求，再根据例子生成代码。人工审核后，复制逻辑是AI的强项。
减少重复劳动：写Web页面有很多重复的工作，比如HTML结构、OpenLayers的初始化、参数读取这些。AI可以照着1个完善的例子，把这些重复的部分写好，我只需要关注不一样的地方。
探索更多可能：和AI对话的过程中，有时候它会提出一些我没想到的点。比如这次，我没说要画两种覆盖区域的对比，但AI自动把两个都画上去了，效果还挺好。
专注于业务逻辑：不用再花时间去想"OpenLayers的多边形怎么画"这种问题，这些AI都能搞定。我只需要想清楚业务流程：先干什么，后干什么，参数怎么传。

用AI开发也不是撒手不管，还是要注意一些事情：

给AI足够的上下文: 要把相关的文件都给AI看，比如这次除了目标函数，还要给它看contour_elevation的代码，这样它才能完整理解需求。
明确需求: 馁求要说得尽量具体，比如"JSON只显示主函数的调用，其他辅助调用不显示"，这种细节要讲清楚。
检查和调试: AI写的代码也不是完美的，还是要自己测试一下。比如这次页面写好后，我试了试，发现有些边界情况还要再调整，但整体框架是对的。
迭代改进: 可以让AI多次修改。先出一个版本，用一用，发现问题，再让AI改。这样几次迭代下来，效果会越来越好。

4. MSYS2 Qt环境：AI时代开发的神兵利器

说到Qt开发，不得不提MSYS2环境。在AI时代，MSYS2 + Qt这套组合简直太香了，为什么这么说呢？

4.1 开箱即用的完整环境

MSYS2里装各种类似Linux的工具太方便了，pacman命令可以搜索安装。

bash 复制代码

pacman -Ss qt6

看到要装的包，就直接pacman -S + 包名就可以装了。而后一股脑全装了，什么QtCore、QtGui、QtNetwork、QHttpServer，全都有了，不用自己编译，不用解决依赖问题。装上就能用，马上就能开始写代码。

4.2 和AI开发无缝衔接

AI写代码，特别是写跨平台的C++/Qt代码，MSYS2环境是它最喜欢的之一。为什么？

环境标准：MSYS2是标准的类Unix环境，AI学习的很多开源项目都是这种环境
工具链统一：gcc、cmake、make，都是标准配置，AI生成的构建命令直接能用
路径友好：虽然Windows路径有点不一样，但MSYS2的路径处理得很好

这次写MCP服务器，我给Trae看了一下项目结构，它很快就理解了，生成的代码直接就能在MSYS2里编译。这要是在一些奇怪的环境里，说不定还要跟AI纠结半天编译器选项。

4.3 快速迭代，AI友好

开发MCP服务这种东西，经常要改代码、编译、测试。MSYS2 + Qt的优势就体现出来了：

编译快：gcc配合cmake，增量编译很快，改一点代码几秒钟就能编译好
部署简单：编好的exe，带上几个dll就能跑，不用安装
调试方便：gdb、Qt Creator都能用，有问题能很快定位

AI写代码有时候会有点小问题，比如边界情况没处理好。这时候如果编译测试很慢，那调试周期就太长了。MSYS2让这个循环变得很快，改代码→编译→测试→反馈给AI→再改，整个流程很流畅。

我们手头有很多以前的Qt代码，从Qt4到Qt5，再到现在的Qt6，MSYS2都能很好地支持。把这些老代码拿出来，稍微改改就能用在新的MCP服务里。AI看老代码也没问题，Qt的API虽然有变化，但整体风格是一致的。MSYS2环境里，你可以同时装Qt5和Qt6，想编译哪个版本就编译哪个版本，给AI提供了很大的灵活性。

5. 总结

这次用Trae AI助手开发Web测试页面，体验很不错。原来可能要花大半天的活儿，现在30分钟就搞定了。更重要的是，能把精力集中在地理计算的业务逻辑上，而不是Web前端的细节上。这套架构最大的亮点是什么？一套后端，两种用法！同一个MCP服务器，既可以给AI Agent当工具后端，又可以给传统Web页面当API后端。这带来的好处太多了：

资源复用：不用写两套后端，维护成本减半
互相验证：Web页面测试通过了，AI用起来也放心
灵活部署：想给人用就给人用，想给AI用就给AI用，随心所欲

Qt MCP服务这种架构，底层是C++/Qt，上层用Web测试，结合AI辅助开发，确实能大大提高效率。再加MSYS2这套神器，简直如虎添翼。以后可以把这种模式推广到更多项目中。

本文的所有代码都可以在https://gitcode.com/colorEagleStdio项目中找到。Qt MCP服务器的编译建议使用MSYS2环境，参考项目中的README文档。Web页面可以直接在浏览器中打开使用，前提是MCP服务器要先运行起来。