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

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

news 2025/11/8 19:27:42

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/11/6 20:28:06

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/11/7 3:29:55

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/11/8 2:45:46

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/11/7 12:40:12

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/11/7 21:04:37

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/11/8 3:14:08