当前位置：首页 > news >正文

【Qt】Qt与Html网页进行数据交互

news 2025/11/8 21:46:44

前言：此项目使用达梦数据库，以Qt制作服务器，Html制作网页客户端界面，可以通过任意浏览器访问。

1、Qt与网页进行数据交互

1.1、第一步：准备qwebchannel.js文件

直接在qt的安装路径里复制即可
在这里插入图片描述

1.2、第二步：在Qt的.pro文件加载webchannel组件

在.pro文件添加如下组件：

QT       += core gui sql webchannel widgets websockets

1.3、第三步：在main.cpp文件注册通信类

#include "MainWindow.h"
#include <QApplication>
#include <QDesktopServices>
#include <QDialog>
#include <QDir>
#include <QFileInfo>
#include <QUrl>
#include <QWebChannel>
#include <QWebSocketServer>
#include "core.h"
#include "../shared/websocketclientwrapper.h"
#include "../shared/websockettransport.h"
#include <QObject>int main(int argc, char *argv[])
{QApplication a(argc, argv);//以下三行代码可有可无，用来确保qwebchannel.js文件放在自己指定的文件夹里QFileInfo jsFileInfo(QDir::currentPath() + "/Web/js/qwebchannel.js");if (!jsFileInfo.exists())QFile::copy(":/qtwebchannel/qwebchannel.js",jsFileInfo.absoluteFilePath());// 设置QWebSocketServerQWebSocketServer server(QStringLiteral("QWebChannel Standalone Example Server"), QWebSocketServer::NonSecureMode);if (!server.listen(QHostAddress::Any, 12345))//12345是端口号，可以自己指定{qFatal("Failed to open web socket server.");return 1;}// 在QWebChannelAbstractTransport对象中包装WebSocket客户端WebSocketClientWrapper clientWrapper(&server);// setup the channelQWebChannel channel;QObject::connect(&clientWrapper, &WebSocketClientWrapper::clientConnected,&channel, &QWebChannel::connectTo);MainWindow w;//MainWindow 类是我自己搭建的服务器界面类Core core(&w);//Core 类是我自己搭建的用来作为Qt与Html通信的类channel.registerObject(QStringLiteral("core"), &core);//把Core注册成通信类w.show();//显示服务器界面return a.exec();
}

1.4、第四步：创建Core通信类

Core.h

#ifndef CORE_H
#define CORE_H#include "MainWindow.h"
#include <QObject>/*An instance of this class gets published over the WebChannel and is then accessible to HTML clients.该类的一个实例通过WebChannel发布，然后HTML客户端可以访问它。
*/
class Core : public QObject
{Q_OBJECTpublic:Core(MainWindow *dialog, QObject *parent = nullptr): QObject(parent), m_dialog(dialog){connect(dialog, &MainWindow::sendText, this, &Core::sendText);}signals:/*This signal is emitted from the C++ side and the text displayed on the HTML client side.该信号从Qt端发出，并在HTML客户端显示文本。*/void sendText(const QString &text);//html那边会监听这个信号，Qt这边发送text，html会直接接收到public slots:/*This slot is invoked from the HTML client side and the text displayed on the server side.此槽从HTML客户端调用，并在服务器端显示文本。*/void receiveText(const QString &text)//Html那边可以直接调用这个函数{qDebug()<<text;//text就是Html发过来的数据//m_dialog->displayMessage(MainWindow::tr("客户端: %1").arg(text));}private:MainWindow *m_dialog;
};#endif // CORE_H

1.5、第五步：创建html客户端

chatRoom.html

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="../js/qwebchannel.js"></script><script type="text/javascript">//BEGIN SETUPfunction output(message) {var output = document.getElementById("output");output.innerHTML = output.innerHTML + message + "\n";}window.onload = function() {if (location.search != "")var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/\.]+)/.exec(location.search)[1]);elsevar baseUrl = "ws://localhost:12345";output("系统：连接WebSocket服务器" + baseUrl + ".");var socket = new WebSocket(baseUrl);socket.onclose = function() {console.error("web channel closed");};socket.onerror = function(error) {console.error("web channel error: " + error);};socket.onopen = function() {output("系统：连接WebSocket，设置QWebChannel.");new QWebChannel(socket, function(channel) {output("系统：连接成功！");// make core object accessible globallywindow.core = channel.objects.core;document.getElementById("send").onclick = function() {var input = document.getElementById("input");var text = input.value;if (!text) {return;}output("客户端：" + text);input.value = "";core.receiveText(text);}core.sendText.connect(function(message) {output("服务器: " + message);});core.receiveText("客户端已连接，准备发送/接收消息!");output("客户端：客户端已连接，准备发送/接收消息!");});}}//END SETUP</script><style type="text/css">html {height: 100%;width: 100%;}#input {width: 400px;margin: 0 10px 0 0;}#send {width: 90px;margin: 0;}#output {width: 500px;height: 300px;}</style></head><body><textarea id="output"></textarea><br /><input id="input" /><input type="submit" id="send" value="Send" οnclick="javascript:click();" /></body>
</html>

2、问题

2.1、问题一：Cannot invoke unknown method of index -1 on object webTransport(0x…)

问题描述：运行时，Qt向Js端发送消息没有问题，Js端向Qt端发送消息时失败。
原因及解决办法：使用Qt 5.11.2编译生成的可执行程序，而网页端用的是Qt 5.14的qwebchannel.js文件，版本不兼容导致的，换成对应的qwebchannel.js文件就好了

2.2、问题二：Qwebchannel is not defined at webSocket.socket.onopen

问题描述：加载时无法连接qt。
原因及解决办法：没有加载qwebchannel.js文件

<script type="text/javascript" src="../js/qwebchannel.js"></script>

【Qt】Qt与Html网页进行数据交互

前言：此项目使用达梦数据库，以Qt制作服务器，Html制作网页客户端界面，可以通过任意浏览器访问。 1、Qt与网页进行数据交互 1.1、第一步：准备qwebchannel.js文件直接在qt的安装路径里复制即可 1.2、第二步&#xf…...

编程日记 2024/9/10 23:01:12

教师节特辑：AI绘制的卡通人物，致敬最可爱的人‍

【编号：9】教师节到了，今天我要分享一组由AI绘制的教师节主题卡通人物插画，每一幅都充满了对老师的敬意和爱戴。让我们一起用这些可爱的卡通形象，向辛勤的园丁们致敬！ 🎓【教师形象】这…...

编程日记 2024/9/10 22:59:06

SprinBoot+Vue智慧农业专家远程指导系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质…...

编程日记 2024/9/10 22:57:38

AI大模型行业专题报告：大模型发展迈入爆发期，开启AI新纪元

大规模语言模型（Large Language Models，LLM）泛指具有超大规模参数或者经过超大规模数据训练所得到的语言模型。与传统语言模型相比，大语言模型的构建过程涉及到更为复杂的训练方法，进而展现出了强大的自然语言理解能力…...

编程日记 2024/9/10 22:55:27

FLV 格式详解资料整理，关键帧格式解析写入库等等

FLV 是一种比较简单的视频封装格式。大致可以分为 FLV 文件头，Metadata元数据，然后一系列的音视频数据。资料够多： FLV格式解析图知乎用户 Linux服务器研究画了一张格式解析图，比较全，但默认背景是白色&#xff…...

编程日记 2024/9/10 22:54:14

《深度学习》OpenCV 高阶图像直方图、掩码图像参数解析及案例实现

目录一、图像直方图 1、什么是图像直方图 2、作用 1）分析图像的亮度分布 2）判断图像的对比度 3）检测图像的亮度和色彩偏移 4）图像增强和调整 5）阈值分割 3、举例二、直方图用法 1、函数用法 2、参数解析…...

编程日记 2024/9/10 22:53:09

coredump-N: stack 消耗完之后，用户自定义信号处理有些问题 sigaltstack

https://mzhan017.blog.csdn.net/article/details/129401531 在上面一篇是关于stack耗尽的一个小程序例子。 https://www.man7.org/linux/man-pages/man2/sigaltstack.2.html 这里提到一个问题，就是如果栈被用光了，这个时候SIGSEGV的用户自定义的handler处理可能就没有空间进…...

编程日记 2024/9/10 22:49:53

数据库有关c语言

数据库的概念 SQL（Structured Query Language）是一种专门用来与数据库进行交互的编程语言，它允许用户查询、更新和管理关系型数据库中的数据。关系型数据库是基于表（Table）的数据库，其中表由行&#xff08…...

编程日记 2024/9/10 22:48:52

【网页播放器】播放自己喜欢的音乐

// 错误处理 window.onerror function(message, source, lineno, colno, error) {console.error("An error occurred:", message, "at", source, ":", lineno);return true; };// 检查 particlesJS 是否已定义 if (typeof particlesJS ! undefi…...

编程日记 2024/9/10 22:47:48

【第27章】Spring Cloud之适配Sentinel

文章目录前言一、准备1. 引入依赖2. 配置控制台信息二、定义资源1. Controller2. Service3. ServiceImpl 三、访问控制台1. 发起请求2. 访问控制台总结前言 Spring Cloud Alibaba 默认为 Sentinel 整合了 Servlet、RestTemplate、FeignClient 和 Spring WebFlux。Sentinel…...

编程日记 2024/9/10 22:46:41

怎么debug python

1、打开pycharm，新建一个python程序，命名为excel.py。 2、编写代码。 3、点击菜单栏中的“Run”，在下拉菜单中选择“debug excel.py”或者“Debug...”，这两个功能是一样的，都是调试功能。 4、调试快捷键：C…...

编程日记 2024/9/10 22:44:31

Java 递归

目录 1．A方法调用B方法，很容易理解！ 2．递归：A方法调用A方法，就是自己调用自己！ 3. 递归的优点： 4. 递归结构包括两个部分： 5. 递归的三个阶段 6. 递归的缺点&#…...

编程日记 2024/9/10 22:43:30

获取业务库的schema信息导出成数据字典

获取业务库的schema信息导出成数据字典场景：需要获取业务库的schema信息导出成数据字典，以下为获取oracle与mysql数据库的schema信息语句 --获取oracle库schema信息 selecttt1.owner as t_owner,tt1.table_name,tt1.column_name,tt1.data_type,tt1.dat…...

编程日记 2024/9/10 22:42:26

力扣: 快乐数

文章目录需求分析代码结尾需求编写一个算法来判断一个数 n 是不是快乐数。「快乐数」定义为： 对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1，也可能是无限循环但始终变不到 1。 …...

编程日记 2024/9/10 22:41:19

一般位置下的3D齐次旋转矩阵

下面的矩阵虽然复杂，但它的逆矩阵求起来非常简单，只需要在 sin ⁡ θ \sin\theta sinθ 前面加个负号就是原来矩阵的逆矩阵。如果编程序是可以直接拿来用的，相比其它获取一般旋转轴不经过原点的三维旋转矩阵的途径或算法，应该能…...

编程日记 2024/9/10 22:39:05

每日一题——第八十六题

题目：写一个函数，输入一个十进制的数，将其转换为任意的r进制数 #include<stdio.h> void convertToBaseR(int num, int r); int main() {int num, r;printf("请输入十进制的整数：");scanf_s("%d", &…...

编程日记 2024/9/10 22:38:04

十、组合模式

组合模式（Composite Pattern）是一种结构型设计模式，它允许将对象组合成树形结构来表示“部分-整体”的层次关系。组合模式能够让客户端以统一的方式对待单个对象和对象集合，使得客户端在处理复杂树形结构的时候，可以以…...

编程日记 2024/9/10 22:35:53

一分钟了解网络安全风险评估！

网络安全风险评估是一种系统性的分析过程，旨在识别和评估网络系统中的潜在安全风险。这个过程包括识别网络资产、分析可能的威胁和脆弱性、评估风险的可能性和影响，以及提出缓解措施。网络安全风险评估有助于组织了解其网络安全状况，制定相应…...

编程日记 2024/9/10 22:32:49

【springsecurity】使用PasswordEncoder加密用户密码

目录 1. 导入依赖2. 配置 PasswordEncoder3. 使用 PasswordEncoder 加密用户密码4. 使用 PasswordEncoder 验证用户密码 1. 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifac…...

编程日记 2024/9/10 22:31:48

从0到1实现线程池（C语言版）

目录 🌤️1. 基础知识 ⛅1.1 线程概述 ⛅1.2 linux下线程相关函数 🌥️1.2.1 线程ID 🌥️1.2.2 线程创建 🌥️1.2.3 线程回收 🌥️1.2.4 线程分离 🌤️2. 线程池概述 ⛅2.1 线程池的定义 ⛅2.2 为…...

编程日记 2024/9/10 22:30:47

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/9/6 5:44:49

3.3.1_1 检错编码（奇偶校验码）

从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...

编程新知 2025/11/7 20:35:35

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/8/16 7:00:37

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞！！！ 摘要视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...

编程新知 2025/11/7 23:31:24

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...

编程新知 2025/10/30 4:02:31