【C++ QT项目5】——基于HTTP与JSON数据流的天气预报界面设计

一、项目概述

设计一个天气预报界面，实现对不同城市区域的天气获取与显示，其中主要涉及

• stylesheet界面美化
• HTTP通信
• JSON数据解析
• 自定义控件绘制温度
• 多控件及其最终代码整合调试能力。
  

二、UI设计与stylesheet样式表

界面Layout设计

上下两部分命名规则
 

stylesheet样式表美化

设置边框弧度

border-radius: 4px;
1

设置某方向边框弧度

border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
1
2

设置背景颜色

background-color: rgba(60, 60, 60, 100);
1

设置字体颜色

color: rgb(230, 230, 230);
1

设置字体大小

font: 45pt;
1

设置按钮的三态

QPushButton#button1{
	background-color: rgba(220, 250, 220, 255);
	border:10px solid white;
	border-radius:32px;
	font-size:60px;
}
QPushButton#button1:hover{ 
	background-color: rgba(255, 255, 0, 255);
	border:10px solid white;
	border-radius:32px;
	color:#FF00FE;
	font-size:60px;
}
QPushButton#button1:pressed{
	background-color: rgba(255, 255, 0, 255);
	border:10px solid white;
	border-radius:32px;
	color: #FF00FE;
	font-size:60px;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

为按钮/标签添加背景图片

父控件影响
父控件指定某类控件的样式，子控件都要遵守此样式进行显示，除非子控件内部有做相关修改

QLabel 
{
	background-color: rgba(0, 200, 200, 200);
	border-radius: 4px;
}
1
2
3
4
5

三、天气预报数据接口

以下API网站返回的数据实际是JSON格式的数据，可以利用 该网站对数据进行可视化解析展示：JSON在线解析及格式化验证 - JSON

第一种：

• http://t.weather.itboy.net/api/weather/city/101010100

数据返回：

第二种：

获取IP地址所属地的一日天气状况

• http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=89361488&appsecret=K6tTmCT0

获取特定城市的天气状况

• http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=89361488&appsecret=K6tTmCT0&cityid=实际城市的ID值

获取特定城市的未来7日天气状况

• http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=89361488&appsecret=K6tTmCT0&cityid=实际城市的ID值

例如：http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=89361488&appsecret=K6tTmCT0&cityid=101040100

返回一日的天气数据：

返回七日天气数据：

四、JSON数据

4.1 概述

  JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，以键值对的形式存在。它易于人阅读和编写，同时也易于机器解析和生成。SON常用于网络应用程序中的数据传输，尤其是在Web应用程序中与后端服务器通信。
使用JSON的原因总结如下：

BS/CS开发过程中，会使用不同的编程语言，JSON作为数据传输的标准化格式，方便程序员协议约定和数据处理

4.2 QT生成JSON数据

  在Qt中生成JSON数据并将其保存到文件的一个基本示例涉及使用 QJsonDocument 、 QJsonObject 和QJsonArray 类。以下是一组简单的JSON数据，通过程序创建一个简单JSON对象并将对应的JSON数据保存到相应的JSON文件中的示例代码。

JSON数据

{
    "cityId": 1010100,
    "date": "2024-02-22",
    "jsonArray": [
        "data1",
        "data2",
        100
    ],
    "weather": "雨夹雪"
}
1
2
3
4
5
6
7
8
9
10

示例代码：

void creatJsonFile()
{
    // 创建一个JSON对象 键值对
    QJsonObject rootObj;
    rootObj["cityId"] = 1010100;
    rootObj["date"] = "2024-02-22";
    rootObj["weather"] = "雨夹雪";

    // 创建一个JSON数组
    QJsonArray jsonArray;
    jsonArray.append("data1");
    jsonArray.append("data2");
    jsonArray.append(100);
    // 将数组添加到JSON对象
    rootObj["jsonArray"] = jsonArray;

	/****数据加入对象其他业务程序*****/


	/****数据加入对象其他业务程序*****/
	
    // 将JSON对象转换为JSON文档
    QJsonDocument jsonDoc(rootObj);
    // 将JSON文档转换为字符串（也可以是压缩格式）
    QByteArray datArray = jsonDoc.toJson();

    // 将JSON数据写入文件
    QFile file("E:/qtProject/00_QT_CLC/weather/test.json");
    if(!file.open(QIODevice::ReadWrite)){
        qDebug() << "---------file open error----------";
    }
    file.write(datArray);
    file.close();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

说明

1. 创建JSON对象：使用 QJsonObject 来构建JSON对象，并使用键值对填充数据。
2. 创建JSON数组：使用 QJsonArray 来创建一个数组，并添加元素。
3. 组合JSON结构：将JSON数组添加到JSON对象中。
4. 生成JSON文档：通过 QJsonDocument 来处理JSON数据，可以选择格式化（缩进）或压缩形式。
5. 保存到文件：创建 QFile 对象，打开文件，写入JSON数据，并关闭文件。

上述例子展示了Qt中处理JSON的基础流程，包括创建、填充数据、转换为字符串，以及写入文件。

补充：
  也可以根据需要调整这个流程来适应更复杂的JSON结构或数据，即在对象中加入子对象，在JSON数组中，数组的每一项均为对象类型，其需要增加的数据如下红框所示。

其中再次添加上述数据的程序如下所示：

	/****数据加入对象其他业务程序*****/
	// 创建一个JSON 子对象并添加到JSON对象
	QJsonObject alarmObj;
	alarmObj["alarm_type"] = "雨夹雪";
	alarmObj["alarm_level"] = "黄色";
	alarmObj["alarm_context"] = "杭州市发布雨夹雪黄色预警";
	rootObj["alarm"] = alarmObj;
	
	//创建一个数组对象，其中数组每一项均为子对象
	QJsonArray daysArray;
	QJsonObject day0;
	day0["day"] = "星期一";
	day0["data"] = "2024-02-22";
	day0["weather"] = "晴";
	day0["temp"] = 12;
	//在数组中添加子对象
	daysArray.append(day0);
	
	QJsonObject day1;
	day1["day"] = "星期二";
	day1["data"] = "2024-02-23";
	day1["weather"] = "多云";
	day1["temp"] = 10;
	daysArray.append(day1);
	
	QJsonObject day2;
	day2["day"] = "星期三";
	day2["data"] = "2024-02-24";
	day2["weather"] = "晴";
	day2["temp"] = 15;
	daysArray.append(day2);
	
	//将JSON数据添加至根对象
	rootObj["days"] = daysArray;
	/****数据加入对象其他业务程序*****/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

  在JSON中，数组可以包含多种类型的元素，包括对象。当在Qt中处理JSON数组，其中的元素是对象时，使用 QJsonArray 和 QJsonObject 来创建和处理这些数据结构。以上就是一个示例，展示了如何创建一个包含多个对象的JSON数组，并将该数组添加到一个JSON对象中。

4.3 QT解析JSON数据

  在Qt中解析JSON数据通常涉及到使用 QJsonDocument 、 QJsonObject 和 QJsonArray 类。这些类提供了处理JSON数据的必要工具，使您能够从JSON字符串中提取信息、遍历JSON对象或数组，并访问具体的数据项。以下是一个基本的示例，展示了如何在Qt中解析JSON字符串。

示例：解析JSON字符串
假设您有一个JSON字符串，例如：

{
    "cityId": 1010100,
    "date": "2024-02-22",
    "jsonArray": [
        "data1",
        "data2",
        100
    ],
    "weather": "雨夹雪"
}
1
2
3
4
5
6
7
8
9
10

以下是如何在Qt中解析这个JSON字符串的步骤：

void Widget::readJsonFile()
{
    // 读取JSON文件数据
    QFile file("E:/qtProject/00_QT_CLC/weather/data.json");
    if(!file.open(QIODevice::ReadOnly)){
        qDebug() << "---------readJsonFile file open error----------";
    }
    QString srcData = file.readAll();
    file.close();

    // 将JSON字符串转换为QJsonDocument
    QJsonDocument jsonDoc = QJsonDocument::fromJson(srcData.toUtf8());
    //JSON文件不为空 且是一个对象
    if (!jsonDoc.isNull() && jsonDoc.isObject())
    {
        //创建根对象
        QJsonObject rootObj = jsonDoc.object();
        //获取根对象下的属性
        qDebug() << "----------获取根对象下的属性-----------";
        int cityId  = rootObj["cityId"].toInt();
        QString date    = rootObj["date"].toString();
        QString weather = rootObj["weather"].toString();
        qDebug() << "cityId:" << cityId;
        qDebug() << "date:" << date;
        qDebug() << "weather:" << weather;


        //获取数组jsonArray数据
        int i = 0;
        if(rootObj.contains("jsonArray") && rootObj["jsonArray"].isArray())
        {
            QJsonArray jsonArray = rootObj["jsonArray"].toArray();
            qDebug() << "----------获取数组jsonArray数据-----------";
            for(QJsonValue arr : jsonArray)
            {
                //qDebug() << arr;
                //判断对象的类型 根据不同的类型进行转化
                switch (arr.type())
                {
                    case QJsonValue::String:    qDebug() << "data" << i << ":" << arr.toString();   break;
                    case QJsonValue::Double:    qDebug() << "data" << i << ":" << arr.toDouble();   break;
                    case QJsonValue::Array:break;
                    case QJsonValue::Object:break;
                    case QJsonValue::Bool:      qDebug() << "data" << i << ":" << arr.toBool();     break;
                    default:break;
                }
                i++;
            }
         }
            
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

说明

• 字符串转换为 QJsonDocument ：使用 QJsonDocument::fromJson 方法将JSON字符串转换为QJsonDocument 对象。
• 提取 QJsonObject ：如果 QJsonDocument 包含一个JSON对象，使用 object() 方法获取它。
• 访问对象数据：使用键（如 "name" 、 "age"）访问 QJsonObject 中的数据。
• 处理数组：如果对象包含一个数组，使用 QJsonArray 来遍历数组中的元素。

这个示例提供了一个基础框架，用于在Qt中解析和处理JSON数据。您可以根据实际需要调整这个过程，以适应不同的JSON结构和数据类型。

补充：
  解析对象中含有子对象与数组的每一项为对象的解析程序
数据：

解析程序：

        //获取alarm子对象数据
        if(rootObj.contains("alarm") && rootObj["alarm"].isObject())
        {
            QJsonObject alarm = rootObj["alarm"].toObject();
            qDebug() << "----------获取alarm子对象数据-----------";
            qDebug() << "alarm_type: " << alarm["alarm_type"].toString();
            qDebug() << "alarm_level: " << alarm["alarm_level"].toString();
            qDebug() << "alarm_context: " << alarm["alarm_context"].toString();
        }
        
        //获取数组对象days数据
        if(rootObj.contains("days") && rootObj["days"].isArray())
        {
            QJsonArray dayArray = rootObj["days"].toArray();
            qDebug() << "----------获取数组对象days数据-----------";
            //遍历数组 遍历的每个为obj对象
            for(QJsonValue day : dayArray)
            {
                if(day.type() == QJsonValue::Object)
                {
                    QString dataStr    =  day["data"].toString();
                    QString dayStr     =  day["day"].toString();
                    QString weatherStr =  day["weather"].toString();
                    int     tempature  =  day["temp"].toInt();
                    qDebug() << "data:" << dataStr << "day:" << dayStr << "temp:" << tempature  << "weather:" << weatherStr;
                }
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4.4 将JSON数据解析到QMap中

  在Qt中，如果你想要将JSON数据解析到一个 QMap 中，你可以遍历JSON对象的所有键值对，并将它们添加到 QMap 里。这个方法特别适合于当你的JSON对象是一个简单的键值对集合时。以下是一个如何实现这一点的示例。

示例：将JSON数据解析到QMap中
假设有以下JSON数据：

json
{
  "name": "John Doe",
  "age": "30",
  "email": "john.doe@example.com"
}
1
2
3
4
5
6

以下是如何将这些数据解析到 QMap<QString, QString> 中的步骤：

oid parseJsonToMap() 
{
	// JSON字符串
	QString jsonString = R"(
	  {
		"name": "John Doe",
		"age": "30",
		"email": "john.doe@example.com"
	  }
	)";
	
	// 将JSON字符串转换为QJsonDocument
	QJsonDocument jsonDoc = QJsonDocument::fromJson(jsonString.toUtf8());
	
	// 准备一个QMap来存储解析的数据
	QMap<QString, QString> dataMap;
	// 解析JSON对象并填充QMap
	if (!jsonDoc.isNull() && jsonDoc.isObject())
	{
    	QJsonObject jsonObj = jsonDoc.object();
    	for (auto key : jsonObj.keys()) 
      		dataMap[key] = jsonObj.value(key).toString();
   		
 	} 
 	else
    qDebug() << "Invalid JSON...";
    
	// 打印QMap内容
	for (auto key : dataMap.keys()) 
		qDebug() << key << ":" << dataMap[key];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

说明

• 从JSON字符串创建 QJsonDocument ：使用QJsonDocument::fromJson 来解析JSON字符串。
• 创建 QMap ：定义一个 QMap<QString, QString> 来存储键值对。
• 遍历JSON对象：使用 keys() 方法获取所有键，然后遍历这些键，将对应的值添加到 QMap 中。
• 打印 QMap 内容：遍历 QMap 并打印键值对。

这个示例展示了如何将JSON对象的键值对解析到 QMap 中。这种方法适用于键值对类型的简单JSON对象。对于更复杂的JSON结构，可能需要更详细的解析逻辑。

五、软件开发网络通信架构

5.1 BS架构/CS架构

  在计算机网络和软件开发中，CS架构（Client-Server Architecture，客户端-服务器架构）和BS架构（Browser-Server Architecture，浏览器-服务器架构）是两种主要的应用程序架构。

CS架构（客户端-服务器架构）

  CS架构是一种典型的两层结构，包括客户端和服务器两个部分。在这种架构中，客户端和服务器通过网络进行通信，每部分都有明确的职责。

1. 客户端：

• 用户界面通常在客户端呈现。
• 可以是桌面应用程序、移动应用或专用软件
• 负责向服务器发送请求，接收和处理服务器响应

2. 服务器：

• 管理数据和业务逻辑
• 处理来自客户端的请求，并发送回响应
• 通常承载在远程系统上，如数据库服务器、应用服务器等

3. 特点：

• 需要为每种操作系统或平台单独开发客户端
• 高效的数据处理和响应能力
• 在客户端设备上占用资源（如内存和处理能力）

BS架构（浏览器-服务器架构）

  BS架构是一种基于Web的三层或多层架构，主要通过Web浏览器作为客户端访问服务器上的应用程序。

1. 浏览器（客户端）：

• 使用标准Web浏览器（如Chrome、Firefox等）作为客户端
• 无需安装额外的软件，使用HTML、CSS和JavaScript显示内容

2. 服务器：

• 和CS架构中的服务器类似，处理业务逻辑和数据存储
• 通过Web服务（如HTTP服务器）提供页面和数据

3. 特点：

• 跨平台兼容性强，可以在任何支持Web浏览器的设备上运行
• 客户端无需安装专用软件，容易维护和更新
• 可能依赖网络性能，因为所有操作都在服务器上进行

对比

• 部署和维护：BS架构易于部署和维护，而CS架构通常需要在每个客户端单独安装和更新。
• 性能：CS架构可以更有效地利用客户端的计算资源，适合高性能要求的应用。BS架构依赖于服务器的性能和网络延迟。
• 安全性：CS架构中，数据经常在客户端和服务器之间传输，可能需要更复杂的安全措施。BS架构中，敏感数据主要存储在服务器端。
• 用户体验：CS架构通常能提供更丰富的用户界面和交互功能。BS架构的用户体验受限于Web技术的能力。

在实际应用中，选择哪种架构取决于具体的业务需求、目标用户群、性能要求以及开发和维护的成本。

5.2 HTTP基本概念

  HTTP（超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。它是万维网（WWW）的数据通信的基础。了解HTTP的基本概念对于理解现代网络通信至关重要。以下是HTTP的一些核心概念：

1. 请求和响应
  HTTP是一个基于请求-响应模式的协议。客户端（通常是Web浏览器）向服务器发送一个HTTP请求，然后服务器返回一个HTTP响应。请求包含请求的资源（如网页），而响应包含请求的资源的内容。

2. HTTP方法
HTTP定义了一系列的方法来表明对资源的不同操作，最常用的包括：

• GET: 用于请求资源。
• POST: 用于提交数据给服务器（例如，表单数据）。
• PUT: 用于上传文件或内容。
• DELETE: 用于请求删除资源。
• HEAD: 用于获取资源的元信息，而不是资源本身。

3. 状态码
服务器对请求的响应中包含一个状态码，它表示请求的成功或失败，以及失败的原因。常见的状态码包括：

• 200 OK: 请求成功。
• 404 Not Found: 请求的资源未找到。
• 500 Internal Server Error: 服务器内部错误。
• 301 Moved Permanently: 请求的资源已永久移动到新位置。

4. URL（统一资源定位符）
  URL是Web上资源的地址。它指定了资源的位置以及用于访问资源的协议（例如，http://）。

5. HTTP头
  HTTP请求和响应包含头部信息，这些信息包括元数据，如内容类型、内容长度、服务器信息、客户端信息等。例如， Content-Type 头部指示响应中的媒体类型（如text/html，application/json）。

6. 无状态协议
  HTTP是一个无状态协议，这意味着服务器不会保留任何请求的数据（状态）。然而，通过使用如Cookies这样的机制，可以在多个请求之间维持状态。

7. 安全性（HTTPS）
  HTTPS是HTTP的安全版本，它在HTTP和TCP层之间增加了一个加密层（通常是SSL/TLS）。这提供了数据传输的加密和更好的安全性。

8. RESTful API
  RESTful是一种使用HTTP协议的Web服务设计风格，它利用HTTP的方法来实现API的不同操作。在RESTful架构中，每个URL代表一个资源，并使用HTTP的方法（如GET, POST）来处理这些资源。

9. Session和Cookies
  由于HTTP本身是无状态的，Cookies和会话（Session）被用来在多个请求之间存储用户数据，从而为用户提供连贯的体验。

这些概念构成了HTTP的基础，是理解和使用HTTP协议的关键。每个概念都有它的具体细节和使用场景，了解这些有助于更好地在网络应用开发中应用HTTP。

5.3 Qt中的HTTP编程

  主要涉及使用Qt的网络模块来进行HTTP请求和处理HTTP响应。Qt提供了一系列类来处理网络通信，其中最常用的类是 QNetworkAccessManager 、 QNetworkRequest 、 QNetworkReply 以及相关的支持类。
以下是一个基本的HTTP编程示例，展示了如何使用Qt发送一个简单的HTTP GET请求并处理响应：

步骤 1: 包含必要的头文件

#include <QCoreApplication>
#include <QNetworkAccessManager>
#include <QNetworkRequest>
#include <QNetworkReply>
#include <QObject>
#include <QDebug>
1
2
3
4
5
6

步骤 2: 发送HTTP请求
  创建一个 QNetworkAccessManager 对象，并使用它发送HTTP请求。 QNetworkAccessManager 对象会异步地处理请求，并返回一个 QNetworkReply 对象。

int main(int argc, char *argv[])
{
	QCoreApplication a(argc, argv);
	QNetworkAccessManager manager;
	QNetworkRequest request(QUrl("http://example.com"));
	//发起网络请求
	QNetworkReply *reply = manager.get(request);
	
	//绑定连接成功与槽函数
	QObject::connect(reply, &QNetworkReply::finished, [&]() {
		//应答异常
		if (reply->error()) {
			qDebug() << "Error:" << reply->errorString();
			return;
		}
		//读取网络返回的JSON数据，后续将着重做进一步的处理
		QString response = reply->readAll();
		qDebug() << "Response:" << response;
	});
	
	return a.exec();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

  在这个例子中，我们使用 QNetworkAccessManager 的 get 方法发送了一个HTTP GET请求到特定网址。然后，我们连接了 QNetworkReply 对象的 finished 信号到一个lambda函数，该函数在收到HTTP响应时被调用。

注意事项

1. 异步处理: QNetworkAccessManager 的请求是异步的。这意味着 get 方法会立即返回，而HTTP响应将在稍后通过信号处理。
2. 错误处理: 应该检查 QNetworkReply 对象是否有错误，并相应地处理。
3. 内存管理: QNetworkReply 对象需要被正确地管理，以避免内存泄漏。通常情况下，使用QObject::deleteLater 来安排删除它是一个好方法

6. 天气预报项目整合

6.1 连接请求解析JSON数据并刷新界面

  通过创建QNetworkAccessManager 进行发起网络请求，同时检测QNetworkAccessManager 的finished信号，表示接入网络完成，通过绑定finished与槽函数用于接收网络连接状态并接收来自网络的JSON数据。

1. 连接网络并绑定槽函数

//由 QNetworkAccessManager 发起get请求
manager = new QNetworkAccessManager(this);
//指定请求的url地址
strUrl = "http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=89361488&appsecret=K6tTmCT0";
QUrl urlYiKeTianQi(strUrl);
QNetworkRequest request(urlYiKeTianQi);
//发起请求
manager->get(request);
//QNetworkReply *reply = manager->get(request);

//绑定连接请求成功槽函数
connect(manager, &QNetworkAccessManager::finished, this, &Widget::readHttReply);
1
2
3
4
5
6
7
8
9
10
11
12

2. 槽函数检测接入状态并接收数据
  槽函数带QNetworkReply 类的参数，通过attribute方法获取状态码，若访问数据成功则读取网页返回的JSON天气数据用于后续的处理，否则异常提示。

//读取HTTP网页请求的数据
void Widget::readHttReply(QNetworkReply *reply)
{
	//获取状态码
    int replyCode = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
    //qDebug() << "replyCode: " << replyCode;

    //连接成功
    if(reply->error() == QNetworkReply::NoError && replyCode == 200)
    {
        //大多数服务器返回utf-8格式
        QByteArray data = reply->readAll();
        //应答成功，对接收到的数据进行JSON解析
        parseWeatherJsonData(data);
        //qDebug() << QString::fromUtf8(data);

    }
    else{
        qDebug() << "网络连接错误: " << reply->errorString();
        QMessageBox messageBox;
        messageBox.setWindowTitle("错误");
        messageBox.setText("网络连接错误");
        messageBox.setStyleSheet("QPushButton {color:black}");
        messageBox.setStandardButtons(QMessageBox::Ok);
        messageBox.exec();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3. JSON数据解析
  通过封装函数用于单独的数据解析，将解析完成数据保存到一个类数组中，用于后续的界面刷新调取。

其中Day类的定义如下所示：

class Day
{
public:
    Day();
    QString mWeek;      //星期
    QString mDate;      //日期
    QString mCity;      //城市
    QString mTemp;      //温度
    QString mWeathType; //天气类型
    QString mTempLow;   //低温
    QString mTempHigh;  //高温

    QString mTips;      //提示
    QString mFx;        //风向
    QString mFl;        //风力
    QString mPm25;      //pm2.5值
    QString mHu;        //湿度
    QString mAirq;      //空气质量
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

定义类数组，用于保存接下去一周的天气数据

//定义类数组
Day days[6];
1
2

JSON数据解析函数具体实现如下所示：

//解析网页JSON 将数据保存至day类对象数组中 并调用刷新界面函数
void Widget::parseWeatherJsonData(QByteArray srcData)
{
    // 将JSON字符串转换为QJsonDocument
    QJsonDocument jsonDoc = QJsonDocument::fromJson(srcData);
    if (!jsonDoc.isNull() && jsonDoc.isObject())
    {
        // 将QJsonDocument 转化为 QJsonObject对象
        QJsonObject rootObj = jsonDoc.object();
        days[0].mCity = rootObj["city"].toString();
        days[0].mPm25 = rootObj["aqi"].toObject()["pm25"].toString();
        if( rootObj.contains("data") && rootObj["data"].isArray())
        {
            QJsonArray weaArray = rootObj["data"].toArray();
            //获取七天数据
            for(int i = 0; i < 6; i++)
            {

                QJsonObject dayObj = weaArray[i].toObject();
                days[i].mWeek = dayObj["week"].toString();
                days[i].mDate = dayObj["date"].toString();
                days[i].mWeathType = dayObj["wea"].toString();
                days[i].mAirq = dayObj["air_level"].toString();
                days[i].mFx = dayObj["win"].toArray()[0].toString();
                days[i].mFl = dayObj["win_speed"].toString();

                //温度
                days[i].mTemp = dayObj["tem"].toString();
                days[i].mTempLow = dayObj["tem2"].toString();
                days[i].mTempHigh = dayObj["tem1"].toString(); 
                //提示 + 湿度
                days[i].mTips = dayObj["index"].toArray()[3].toObject()["desc"].toString();
                days[i].mHu = dayObj["humidity"].toString();
            }
        }
        else
            qDebug() << "no array";
    }

    //刷新Widget04各标签数据
    uapateUI();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

4. UI界面刷新数据

通过JSON解析出来的数据，将数据刷新到UI界面控件

//并刷新UI界面
void Widget::uapateUI()
{
    //Widget01 解析日期
    ui->labelDay->setText(days[0].mDate + " " + days[0].mWeek);

    //Widget02
    //解析气温 天气
    ui->labelWeatherPic->setPixmap(weatherPicMap[days[0].mWeathType]);
    ui->labelWeather->setText(days[0].mWeathType);
    ui->labelTempData->setText(days[0].mTemp+"℃");
    ui->labelTempRange->setText(days[0].mTempLow+ "℃ - " + days[0].mTempHigh + "℃");
    ui->labelCity->setText(days[0].mCity);

    //Widget03
    //感冒指数
    ui->labelGanMao->setText("提示:" + days[0].mTips);

    //Widget0301
    //解析风向、空气质量、湿度等
    ui->labelFengXiangType->setText(days[0].mFx);
    ui->labelFengXiangData->setText(days[0].mFl);
    ui->labelPM25Data->setText(days[0].mPm25);
    ui->labelShiDuData->setText(days[0].mHu);
    ui->labelAirData->setText(days[0].mAirq);

    //Widget04 label数据
    for(int i = 0; i < 6; i++)
    {
        //日期 + 时间
        weekList[i]->setText(days[i].mWeek);
        weekList[0]->setText("今天");
        weekList[1]->setText("明天");
        weekList[2]->setText("后天");
        QStringList dataList = days[i].mDate.split("-");    //2024-02-22
        dateList[i]->setText(dataList[1] + "-" + dataList[2]);

        //天气
        QPixmap pixmap = weatherPicMap[days[i].mWeathType];
        pixmap.scaled(pixmap.size(), Qt::KeepAspectRatio);
        weatherPicList[i]->setMaximumHeight(50);
        weatherPicList[i]->setMaximumWidth(ui->widget->width()/6);
        weatherPicList[i]->setPixmap(pixmap);
        weatherTypeList[i]->setText(days[i].mWeathType);

        //空气质量
        QString airQuality = days[i].mAirq;
        airQualityList[i]->setText(airQuality);

        //设置背景颜色
        if(airQuality == "优")
            airQualityList[i]->setStyleSheet("background-color: rgb(124, 198, 55); border-radius: 8px; color: rgb(230, 230, 230);");
        else if(airQuality == "良")
            airQualityList[i]->setStyleSheet("background-color: rgb(208, 107, 39); border-radius: 8px; color: rgb(230, 230, 230);");
        else if(airQuality == "轻度污染")
            airQualityList[i]->setStyleSheet("background-color: rgb(255, 200, 200); border-radius: 8px; color: rgb(230, 230, 230);");
        else if(airQuality == "中度污染")
            airQualityList[i]->setStyleSheet("background-color: rgb(255, 17, 17); border-radius: 8px; color: rgb(230, 230, 230);");
        else if(airQuality == "重度污染")
            airQualityList[i]->setStyleSheet("background-color: rgb(153, 0, 0); border-radius: 8px; color: rgb(230, 230, 230);");

        //风向 + 风力
        fengXiangList[i]->setText(days[i].mFx);
        fengLiList[i]->setText(days[i].mFl.split("转").at(0));
    }

    //更新绘图事件
    update();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

6.2 支持不同城市查询的实现

  通过在网址后添加城市ID即可获取对应城市的天气JSON数据，因此核心在于根据行编辑器内的城市名称获取对应的城市id，而城市id和城市名称一一对应的关系数据存放在citycode.json文件中。

1. 读取JSON数据存放是QMap容器
  通过解析JSON数据，将各个城市的名称和id号以键值对的形式保存至QMap容器中，方式下次重复解析JSON数据

//将JSON数据读取到Map容器
void cityCodeUtils::initMap()
{
    // 读取JSON文件数据
    QFile file("E:/qtProject/00_QT_CLC/weather/citycode.json");
    if(!file.open(QIODevice::ReadOnly)){
        qDebug() << "---------getCityIdFromName file open error----------";
    }
    QString srcData = file.readAll();
    file.close();

    // 将JSON字符串转换为QJsonDocument
    QJsonDocument cityDoc = QJsonDocument::fromJson(srcData.toUtf8());
    if (!cityDoc.isNull() && cityDoc.isArray())
    {
        //各个城市对象
        QJsonArray cityArray = cityDoc.array();
        //遍历数组 遍历的每个为obj对象
        for(QJsonValue citys : cityArray)
        {
            if(citys.type() == QJsonValue::Object)
            {
                QString city_name = citys["city_name"].toString();
                QString city_code = citys["city_code"].toString();
                cityMap.insert(city_name,city_code);
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2. 通过城市名称获得城市id
  通过QMap中的find方法查找城市名称所对应的城市id，同时考虑市、区、县等多种形式的出现，若无该城市名称，则返回空。

//遍历容器 返回对应城市的城市ID
QString cityCodeUtils::getCityCode(QString cityName)
{
    if(cityMap.isEmpty())
        initMap();

    //查找cityName对应的迭代器，并返回值
    auto pos  = cityMap.find(cityName);
    if(pos == cityMap.end())
    {
        pos  = cityMap.find(cityName + "市");
        if(pos == cityMap.end())
        {
            pos  = cityMap.find(cityName + "区");
            if(pos == cityMap.end())
                pos  = cityMap.find(cityName + "县");
            if(pos == cityMap.end())
                return "";
        }
    }
    return pos .value();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 搜索按钮槽函数发起新地址访问
  在搜索按钮的槽函数中调用获取城市id的函数，通过获取文本框内的城市名称得到相应的城市id，并将id号拼接至url后重新发起新的网页请求。

//搜索槽函数 点击进行重新发起请求
void Widget::on_btnSearch_clicked()
{
    QString cityNameInput = ui->lineEditSearch->text();
    cityId = cityUtils.getCityCode(cityNameInput);
    if(cityId != NULL)
    {
        //更新带城市信息的网址
        strUrl = "http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=89361488&appsecret=K6tTmCT0";
        //拼接城市号，生成新的请求网址
        strUrl += "&cityid=" + cityId;
        //发起请求
        manager->get(QNetworkRequest(QUrl(strUrl)));
    }
    else	//若无该城市，则弹窗提示
    {
        QMessageBox messageBox;
        messageBox.setWindowTitle("错误");
        messageBox.setText("请出入正确的城市名称");
        messageBox.move(this->pos().x() + 200, this->pos().y() + 500);
        messageBox.setStyleSheet("QPushButton {color:black}");
        messageBox.setStandardButtons(QMessageBox::Ok);
        messageBox.exec();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

6.3 七日温度曲线的绘制

  ① 因为需要在特定的widget0404和0405上绘制温度曲线，而不是在整个大截面绘制温度曲线，因此需在构造函数中对widget0404和05两个控制安装事件过滤器器

ui->widget0404->installEventFilter(this);
ui->widget0405->installEventFilter(this);
1
2

  ② 在事件过滤函数中检测事件发生对象是否为该两个对象，同时是否为画家事件，若成立则进行温度曲线的绘制，若否则返回QWidget的原始事件

//事件过滤器 过滤widget0404 widget0405有绘图事件时，刷新绘图界面
bool Widget::eventFilter(QObject *watched, QEvent *event)
{
    //widget0404 绘图事件
    if(watched == ui->widget0404 && event->type() == QEvent::Paint)
    {
        drawTempLineHight();    //绘制高温曲线图
        return true;            //表示事件已被处理
    }
    //widget0405 绘图事件
    if(watched == ui->widget0405 && event->type() == QEvent::Paint)
    {
        drawTempLineLow();  //绘制低温曲线图
        return true;        //表示事件已被处理
    }
    //返回原始事件
    return QWidget::eventFilter(watched, event);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  ③ 在widget中间绘制不同天气的温度点、线和文字，其中点的横坐标为控件的中间位置，纵坐标为控件的中间位置与温度和平均位置的差。

//绘制widget0404高温曲线
void Widget::drawTempLineHight()
{
    QPainter painter(ui->widget0404);

    //消除边缘混叠
    painter.setRenderHint(QPainter::Antialiasing,true);

    //设置画笔与画刷
    painter.setBrush(QColor(255, 170, 0 ));
    painter.setPen(QColor(255, 170, 0));

    //定义6个点
    QPoint points[6];

    //计算高温的平均值
    float ave;
    int sum = 0;
    for(int i = 0; i < 6; i++)
    {
        sum += days[i].mTempHigh.toInt();

    }
    ave = sum / 6.0;
    //qDebug() << "ave: " << ave;

    //绘图
    for(int i = 0; i < 6; i++)
    {
        //画点
        points[i].setX(airQualityList[i]->x() + airQualityList[i]->width()/2);
        points[i].setY(ui->widget0404->height()/2 - (days[i].mTempHigh.toInt() - ave) * 3);
        painter.drawEllipse(QPoint(points[i].x(), points[i].y()),3,3);

        //绘制温度
        painter.drawText(QPoint(points[i].x()-15, points[i].y()-15), days[i].mTempHigh+"℃");
    }

    //画线段
    for(int i = 0; i < 5; i++)
        painter.drawLine(points[i], points[i+1]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42