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

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

news 2025/7/5 13:17:19

前言：此项目使用达梦数据库，以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网页进行数据交互

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

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

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

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

编程日记 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 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…...

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

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

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

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

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

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

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

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

目录 一、图像直方图 1、什么是图像直方图 2、作用 1&#xff09;分析图像的亮度分布 2&#xff09;判断图像的对比度 3&#xff09;检测图像的亮度和色彩偏移 4&#xff09;图像增强和调整 5&#xff09;阈值分割 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&#xff08;Structured Query Language&#xff09;是一种专门用来与数据库进行交互的编程语言&#xff0c;它允许用户查询、更新和管理关系型数据库中的数据。关系型数据库是基于表&#xff08;Table&#xff09;的数据库&#xff0c;其中表由行&#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&#xff0c;新建一个python程序&#xff0c;命名为excel.py。 2、编写代码。 3、点击菜单栏中的“Run”&#xff0c;在下拉菜单中选择“debug excel.py”或者“Debug...”&#xff0c;这两个功能是一样的&#xff0c;都是调试功能。 4、调试快捷键&#xff1a;C…...

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

Java 递归

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

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

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

获取业务库的schema信息导出成数据字典 场景&#xff1a;需要获取业务库的schema信息导出成数据字典&#xff0c;以下为获取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 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。 …...

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

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

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

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

每日一题——第八十六题

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

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

十、组合模式

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

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

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

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

编程日记 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语言版）

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

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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/6/18 2:20:36

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/7/5 2:19:17

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/7/4 6:03:35

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/6/25 4:11:11

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/7/4 12:19:49

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/1 6:09:06

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/7/4 9:37:32

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/6/24 6:33:39

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/6/26 10:33:20