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

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

news 文章来源：https://blog.csdn.net/weixin_51649465/article/details/141927958 2025/5/8 10:09:11

前言：此项目使用达梦数据库，以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

Visual studio自动添加头部注释

记事本打开VS版本安装目录下的Class.cs文件 增加如下内容&#xff1a;...

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

【C#生态园】提升性能效率：C#异步I/O库详尽比较和应用指南

优化异步任务处理&#xff1a;C#异步I/O库全面解析 前言 在C#开发中&#xff0c;异步I/O是一个重要的主题。为了提高性能和响应速度&#xff0c;开发人员需要深入了解各种异步I/O库的功能和用法。本文将介绍几个常用的C#异步I/O库&#xff0c;包括Task Parallel Library、Asy…...

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

管理医疗AI炒作的三种方法

一个人类医生和机器人医生互相伸手。 全美的医院、临床诊所和医疗系统正面临重重困难。他们的员工队伍紧张且人员短缺&#xff0c;运营成本不断上升&#xff0c;服务需求常常超过其承受能力&#xff0c;限制了医疗服务的可及性。 人工智能应运而生。在自ChatGPT推出将AI推向聚…...

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

VMware Workstation Pro Download 个人免费使用

参考 VMware Workstation Pro Download...

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

DevOps平台搭建过程详解--Gitlab+Jenkins+Docker+Harbor+K8s集群搭建CICD平台

一、环境说明 1.1CI/CD CI即为持续集成(Continue Integration,简称CI)&#xff0c;用通俗的话讲&#xff0c;就是持续的整合版本库代码编译后制作应用镜像。建立有效的持续集成环境可以减少开发过程中一些不必要的问题、提高代码质量、快速迭代等;(Jenkins) CD即持续交付Con…...

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

Nginx之日志切割，正反代理，HTTPS配置

1 nginx日志切割 1.1 日志配置 在./configure --prefixpath指定的path中切换进去&#xff0c;找到log文件夹&#xff0c;进去后找到都是对应的日志文件 其中的nginx.pid是当前nginx的进程号&#xff0c;当使用ps -ef | grep nginx获得就是这个nginx.pid的值 在nginx.conf中…...

编程日记 2024/9/10 22:22:40

Mysql数据量大，如何拆分Mysql数据库（垂直拆分）

垂直拆分&#xff08;Vertical Partitioning&#xff09;是一种将数据库按照业务模块或功能进行拆分的方法&#xff0c;目的是将不同模块的数据放到不同的数据库中&#xff0c;从而减少单个数据库的压力&#xff0c;提高系统的性能和可扩展性。垂直拆分适用于数据量大且业务模块…...

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

机器人可能会在月球上提供帮助

登月是我们这个时代最具标志性的事件之一&#xff0c;这可能还算轻描淡写了&#xff1a;这是我们迄今为止在物理上探索得最远的一次。我听过一些当时的老广播&#xff0c;它们可以让你想象出这次航行的重要性。 现在&#xff0c;研究人员表示&#xff0c;我们可能很快就能重返…...

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

真实案例分享：零售企业如何避免销售数据的无效分析？

在零售业务的数据分析中&#xff0c;无效分析不仅浪费时间和资源&#xff0c;还可能导致错误的决策。为了避免这种情况&#xff0c;企业必须采取策略来确保他们的数据分析工作能够产生实际的商业价值。本文将通过行业内真实的案例&#xff0c;探讨零售企业如何通过精心设计的数…...

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

ctfshow-文件包含

web78 <?phpif(isset($_GET[file])){$file $_GET[file];include($file); }else{highlight_file(__FILE__); } 判断是否存在file参数 如果存在 将包含这个参数值 文件 php://filter可以获取指定文件源码。当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执…...

编程日记 2024/9/10 22:12:29