基于 Qt / HTTP/JSON 的智能天气预报系统测试报告

目录

一、项目概述

1.1项目背景

1.2项目目标

二、功能需求

[2.1 用户界面功能](#2.1 用户界面功能)

[2.2 后台功能](#2.2 后台功能)

三、技术选择

[3.1 开发框架与工具](#3.1 开发框架与工具)

[3.2 第三方 API](#3.2 第三方 API)

四、UI设计

4.1界面展示

4.2stylesheet样式

五、代码实现

1.构造函数

2.网络请求响应处理函数

3.处理json数据

4.更新UI数据

5.城市搜索按钮实现

6.鼠标左键拖动窗口移动右键关闭

7.事件过滤器绘图

六、结果测试


一、项目概述

1.1项目背景

随着人们对生活品质要求的提高,天气预报已成为日常生活的重要组成部分。通过准确的天气信息,用户可以更好地规划出行、穿衣等日常活动。本项目旨在开发一个基于 Qt 框架的天气预报系统,实现实时天气数据的获取、展示以及历史天气数据的查询功能。

1.2项目目标

  • 实现天气数据的 HTTP 请求与解析。

  • 展示实时天气信息(包括温度、湿度、风速、空气质量等)。

  • 提供未来 7 天天气预报功能。

  • 提供用户友好的图形界面。

二、功能需求

2.1 用户界面功能

  • 实时天气显示:包括当前温度、湿度、风速、天气状况等。

  • 未来天气预报

    • 24 小时天气预报(每小时)。

    • 7 天天气预报。

  • 城市切换:用户可以选择不同的城市查看天气信息。

2.2 后台功能

  • HTTP 请求接口实现,用于获取天气数据。

  • JSON 数据解析模块,将接收到的 JSON 格式天气数据转换为程序可用的数据结构。

三、技术选择

3.1 开发框架与工具

  • Qt 框架:用于 GUI 界面开发和应用程序逻辑实现。

  • QNetworkAccessManager:用于 HTTP 请求(API 调用)。

  • JSON 解析库 :使用 Qt 提供的 QJsonDocument 类解析天气数据。

3.2 第三方 API

  • 使用天气预报服务提供商的 API(如 OpenWeatherMap、WeatherStack 等),实现天气数据接口调用。

易客云天气API免费天气API接口|天气预报接口|全球天气API接口|气象预警|空气质量我直接使用了这个网站提供的接口。

四、UI设计

4.1界面展示

将整个界面分为四部分,命名如对应部分所示,在控件比较多的情况下,注意排版技巧,分模块会更清晰一些,对控件的命名要规律,在后面功能实现的时候编写代码会更顺。

4.2stylesheet样式

设置边框弧度:

复制代码
border-radius: 4px;

设置某方向边框弧度:

复制代码
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

设置背景颜色:

复制代码
background-color: rgba(60, 60, 60, 100);

父控件影响:

复制代码
QLabel {
background-color: rgba(0, 200, 200, 200);
border-radius: 4px;
}

五、代码实现

1.构造函数

使用Qt框架创建了一个无边框窗口,固定大小为411x850像素,并设置Arial字体大小为15。创建了一个包含"退出"操作的下拉菜单。点击该菜单项会触发关闭当前窗口的操作。使用QNetworkAccessManager发送HTTP GET请求到指定天气API接口,以获取实时天气数据。定义了处理网络响应的槽函数readHttpReply,当网络请求完成时将调用该函数来处理返回的数据。

2.网络请求响应处理函数

  1. 获取并打印HTTP状态码 :从QNetworkReply对象中提取HTTP状态码,并将其输出到调试控制台。这有助于在开发和调试过程中快速判断网络请求的成功与否。

  2. 检查网络请求是否成功 :使用reply->error()方法检查是否存在网络错误,同时验证HTTP状态码是否为200(表示成功的响应)。如果这两个条件都满足,则认为请求是成功的。

  3. 处理成功的网络响应 :读取所有来自服务器的响应数据,并将其传递给新的解析函数parseWeatherJsonDataNew(data);。这表明代码中有专门的函数来解析JSON格式的数据,以便提取有用的信息(如天气数据)进行后续处理或显示。

  4. 处理失败的网络响应:如果网络请求出现错误(如连接超时、服务器不可达等),则创建并显示一个警告对话框。该对话框提示用户请求失败,并且按钮的文字颜色被设置为红色以增强视觉效果。

3.处理json数据

4.更新UI数据

复制代码
void Widget::updateUI()
{
    ui->labelCurrentData->setText(days[0].mDate+" "+days[0].mWeek);
    //解析城市名称
    ui->labelCity->setText(days[0].mCity+"市");
    //解析当前温度
    ui->labelTemp->setText(days[0].mTemp+"°");
    ui->labelTempRange->setText(days[0].mTempLow+"℃"+"~"+days[0].mTempHigh+"℃");
    //解析天气类型
    ui->labelweatherType->setText(days[0].mWeathType);
    ui->labelWeatherIcon->setPixmap(mTypeMap[days[0].mWeathType]);

    //感冒指数
    ui->labelGanmao->setText(days[0].mTips);
    //风向
    ui->labelFXType->setText(days[0].mFx);
    //风力
    ui->labelFXType_3->setText(days[0].mFl);
    //PM2.5
    ui->labelPM25Data->setText(days[0].mPm25);
    //湿度
    ui->labelShiduData->setText(days[0].mHu);
    //空气质量
    ui->labelairData->setText(days[0].mAirq);

    for(int i=0;i<6;i++){
        mWeekList[i]->setText(days[i].mWeek);
        mWeekList[0]->setText("今天");
        mWeekList[1]->setText("明天");
        mWeekList[2]->setText("后天");
        QStringList dayList = days[i].mDate.split("-");
        mDateList[i]->setText(dayList.at(1)+"-"+dayList.at(2));
        int index = days[i].mWeathType.indexOf("转");
//        if(index!=-1){
//            qDebug()<<days[i].mWeathType.left(index);
//            mIconList[i]->setPixmap(mTypeMap[days[i].mWeathType.left(index)]);
//            mWeaTypeList[i]->setText(days[i].mWeathType.left(index));
//        }
        mIconList[i]->setPixmap(mTypeMap[days[i].mWeathType]);
        mWeaTypeList[i]->setText(days[i].mWeathType);
        QString airQ = days[i].mAirq;
        mAirqList[i]->setText(airQ);
        if(airQ=="优"){
            mAirqList[i]->setStyleSheet("background-color : rgb(150,213,32);border-radius: 7px;");
        }
        if(airQ=="良"){
            mAirqList[i]->setStyleSheet("background-color : rgb(241,224,103);border-radius: 7px;");
        }
        if(airQ=="轻度污染"){
            mAirqList[i]->setStyleSheet("background-color : rgb(255,199,199);border-radius: 7px;");
        }
        if(airQ=="中度污染"){
            mAirqList[i]->setStyleSheet("background-color : rgb(255,17,17);border-radius: 7px;");
        }
        if(airQ=="重度污染"){
            mAirqList[i]->setStyleSheet("background-color : rgb(153,0,0);border-radius: 7px;");
        }

        mFxList[i]->setText(days[i].mFx);

        index = days[i].mFl.indexOf("转");
        if(index!=-1){
            mFlList[i]->setText(days[i].mFl.left(index));
        }else{
            mFlList[i]->setText(days[i].mFl);
        }

    }
    update();

}

5.城市搜索按钮实现

6.鼠标左键拖动窗口移动右键关闭

7.事件过滤器绘图

六、结果测试

相关推荐
du fei11 分钟前
C# 窗体应用(.FET Framework) 线程操作方法
开发语言·c#
du fei13 分钟前
C#文件操作
开发语言·c#
月亮有痕迹诶24 分钟前
【C++】智能指针
开发语言·c++·c++11
搞不懂语言的程序员31 分钟前
装饰器模式详解
开发语言·python·装饰器模式
王禄DUT35 分钟前
化学方程式配平 第33次CCF-CSP计算机软件能力认证
开发语言·c++·算法
Yang-Never37 分钟前
Open GL ES ->纹理贴图,顶点坐标和纹理坐标组合到同一个顶点缓冲对象中进行解析
android·java·开发语言·android studio·贴图
DreamByte1 小时前
C++菜鸟教程 - 从入门到精通 第五节
开发语言·c++·算法
Ljugg1 小时前
把doi直接插入word中,然后直接生成参考文献
开发语言·c#·word
AAA废品回收站陈师傅1 小时前
10乱码问题的解释(1)
qt
长流小哥1 小时前
可视化开发:用Qt实现Excel级动态柱状图
开发语言·c++·qt·ui