qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】-企业级系统开发实战连载系列 -技术栈(vue、element-ui、qt、c++、sqlite)

最新推荐文章于 2024-09-05 23:28:07 发布

m0_49654513

最新推荐文章于 2024-09-05 23:28:07 发布

阅读量3.6k

点赞数

分类专栏： qt c++ vue 文章标签： vue.js c++

本文链接：https://blog.csdn.net/m0_49654513/article/details/108353619

版权

本文介绍了如何使用Qt框架结合Vue.js和C++开发企业级系统，通过Qt实现Web服务器加载Vue应用。文章详细阐述了项目架构、实操步骤，包括添加静态资源、修改请求映射、编译Vue项目等，最终展示了一个酷炫的运行效果。

摘要由CSDN通过智能技术生成

qt实现web服务器加载vue应用进行C++和html混合编程-连载【6】-企业级系统开发实战连载系列 -技术栈vue、element-ui、qt、c++、sqlite

标题作者背景描述：
下面是实操步骤：

标题作者背景描述：

本人就职于外资IT企业，担任电商订单处理产品开发经理一职，领导过非常多次大小项目的开发工作，对电商平台订单处理流程非常熟悉。

公司专注鞋服行业相关软件开发和服务，公司规模100多人以上，在台北，广州，成都，上海，北京，国外等均有分公司。

为什么写此系列文章？

本人在学校至工作到现在十余年时间，使用.net C# 开发语言，结合在公司实际开发，和市场的需求中，NET.开发的商业企业级系统遇到的缺点有如下：

程序首次加载慢，因为虚拟机编译的原因。
WINFORM界面开发不够炫丽，精美。
WINFORM界面设计人员难找。
程序可以被反编译。
安装包过大，部署麻烦，framework.
跨平台不够好。

解决方案：

结合近年来前端设计的走向，最终选择了qt+vue+element UI+sqlite(数据库根据需要情况选择)

qt负责接口和硬件处理

sqlite做数据存储

vue+element UI 实现前端。

预览Demo

在这里插入图片描述

应用程序的架构

我看先看看要实现BitPos应用程序的架构：
在这里插入图片描述
应用程序嵌套了google 浏览器内核，和http web 服务器.
google 浏览器内核实现了前端UI，
前端通过 http request 与后端C++代码进行将互。
当然，代码经过小调整，重新编译，前后端也可以分开部署到任何类型的操作系统中。

下面是实操步骤：

打开上一节的项目源码：bitpos
上一节的文章链接如下：
https://blog.csdn.net/m0_49654513/article/details/108184324

添加全局静态对象文件

添加全局静态对象文件 global.cpp
选中src 右键，添加新项：
在这里插入图片描述

global.h文件

如下：

#pragma once
#include <httpserver/staticfilecontroller.h>
using namespace stefanfrings;

/** Controller for static files */
extern  StaticFileController* staticFileController;

global.cpp 文件如下：

#include "global.h"

StaticFileController* staticFileController;

main.cpp 添加静态资源文件支持：

#include "src/global.h"

添加静态资源文件支持，如下：


       

// Configure static file controller
    QSettings* fileSettings=new QSettings(configFileName,QSettings::IniFormat,&a);
    fileSettings->beginGroup("docroot");
staticFileController=new StaticFileController(fileSettings,&a);

修改访问地址如下：
	view.setUrl(QUrl("http://localhost:5050"));

完整的main.cpp文件如下：
#include "BitPos.h"
#include <QtWidgets/QApplication>
#include <QWebEngineView>
#include <httpserver/httplistener.h>
#include <logging/filelogger.h>
#include <qdir.h>
#include "src/requestmapper.h"
#include "src/global.h"

using namespace stefanfrings;

/** Search the configuration file */
QString searchConfigFile()
{
   
	QString binDir = QCoreApplication::applicationDirPath();
	QString appName = QCoreApplication::applicationName();
	QString fileName(appName + ".ini");

	QStringList searchList;
	searchList.append(binDir);
	searchList.append(binDir + "/etc");
	searchList.append(binDir + "/../etc");
	searchList.append(binDir + "/../../etc"); // for development without shadow build
	searchList.append(binDir + "/../" + appName + "/etc"); // for development with shadow build
	searchList.append(binDir + "/../../" + appName + "/etc"); // for development with shadow build
	searchList.append(binDir + "/../../../" + appName + "/etc"); // for development with shadow build
	searchList.append(binDir + "/../../../../" + appName + "/etc"); // for development with shadow build
	searchList.append(binDir + "/../../../../../" + appName + "/etc"); // for development with shadow build
	searchList.append(QDir::rootPath() + "etc/opt");
	searchList.append(QDir::rootPath() + "etc");

	foreach(QString dir, searchList)
	{
   
		QFile file(dir + "/" + fileName);
		if (file.exists())