qt集成管理后台前端vue框架进行C++和html混合编程-连载【7】-企业级系统开发实战连载系列 -技术栈(vue、element-ui、qt、c++、sqlite)

qt集成前端vue框架进行C++和html混合编程-连载【7】-企业级系统开发实战连载系列 -技术栈vue、element-ui、qt、c++、sqlite标题作者背景描述：为什么写此系列文章？解决方案：预览Demo标题作者背景描述：本人就职于外资IT企业，担任电商订单处理产品开发经理一职，领导过非常多次大小项目的开发工作，对电商平台订单处理流程非常熟悉。公司专注鞋服行业相关软件开发和服务，公司规

m0_49654513

6541人浏览 · 2020-11-09 00:55:30

m0_49654513 · 2020-11-09 00:55:30 发布

qt集成管理后台前端vue框架进行C++和html混合编程-连载【7】-企业级系统开发实战连载系列 -技术栈vue、element-ui、qt、c++、sqlite

标题作者背景描述：
企业级常用vue 管理后台前端框架下载
后台前端源码编译
qt后端源码下载
后端源码修改
附录

标题作者背景描述：

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

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

为什么写此系列文章？

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

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

解决方案：

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

qt负责接口和硬件处理

sqlite做数据存储

vue+element UI 实现前端。

预览Demo

在这里插入图片描述

企业级常用vue 管理后台前端框架下载

分析了目前开源管理后台前端框架，vue仍然是主流前端技术。
源码下载地址：
https://github.com/PanJiaChen/vue-element-admin

在这里插入图片描述

使用git 工具下载源码，没有git工具，请自行安装。
打开命令行工具输入下载路径：

cd C:\Users\Administrator\test

输入

git clone https://github.com/PanJiaChen/vue-element-admin.git

开始下载。

在这里插入图片描述

后台前端源码编译

切换源码目录

cd vue-element-admin

安装依赖包

npm install

在这里插入图片描述
运行项目

npm run dev

会自动打开http://localhost:9527
代表前端项目运行成功。
在这里插入图片描述
但是我们需发布前端和QT进行整合独立应用，发布如下：

npm run build:prod

编译结果如下：
在这里插入图片描述
文件目录：

qt后端源码下载

我们在这里使用git 命令行工具从github 下载第6章的c++源码。
在命令行工具输入：

这里下载需要点时间
打开bitpos/etc/docroot
把dist目录下的所有文件拷贝到当前目录下,如下图：
在这里插入图片描述

后端源码修改

我们用vs2019 打开bitpos\BitPos.sln项目，在解决方案右键，添加了一个新的窗体。
在这里插入图片描述
添加BitPos窗口：

双击BitPos.ui文件，打开qt设计师窗口，在左下角把QWebEngineView
播放到中间的窗体中，尺寸大小可以自行设置,效果如下图：。

修改BitPos.h 文件内容如下：

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_BitPos.h"

class BitPos : public QMainWindow
{
    Q_OBJECT

public:
    BitPos(QWidget *parent = Q_NULLPTR);
    //删除缓存.For Test Code.
    void ClearCache();
private:
    Ui::BitPosClass ui;
};

修改BitPos.cpp源码如下：

#include "BitPos.h"
#include <QWebEngineView>
#include "qwebenginecookiestore.h"
#include "qwebengineprofile.h"
#include <qdir.h>
BitPos::BitPos(QWidget* parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
	ui.webEngineView->setUrl(QUrl("http://localhost:5050"));
}


void BitPos::ClearCache()
{
	QWebEngineView* m_webView = ui.webEngineView;
	QWebEngineProfile* engineProfile = m_webView->page()->profile();
	engineProfile->clearHttpCache(); //删除缓存 

	QWebEngineCookieStore* cookie = engineProfile->cookieStore();
	cookie->deleteAllCookies(); //删除cookie 

	QString cachePath = engineProfile->cachePath();
	QDir cachePathDir(cachePath);
	if (cachePathDir.exists())
	{
		bool rlt = cachePathDir.rmdir(cachePath); //删除缓存目录
		if (!rlt)
		{
			qDebug() << QStringLiteral("删除缓存目录失败！");
		}
	}

}

上面的源码主要做了几件事：

1应用程序在运行的时候，自动通过http://localhost:5050加载vue 框架。
当然这个地址直接在程序里硬编码了，也可以做下优化，从配置文件读取。

2添加了ClearCache 方法，主要是为了清空缓存用的，在程序退出的时候，自动清空，主要是为了测试用。

修改main.cpp 源码main方法如下：

/**
  @file
  @author Stefan Frings
*/
#include "BitPos.h"
#include <QtWidgets/QApplication>
#include <QWebEngineView>
#include <QCoreApplication>
#include <QDir>
#include "src\global.h"
#include "httpserver\httplistener.h"
#include "src\requestmapper.h"
#include <QtSql\qsqlquery.h>
#include <QtSql>
#include <QSqlRecord>
#include <QMessageBox>
#include <QtDebug>
#include <QtWidgets\qmessagebox.h>
#include <QtSql\qsqlrecord.h>
#include "src\models\BasUser.h"
#include "src\controller\ApiController.h"
#include "src\db\dbhelper.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())
		{
			// found
			fileName = QDir(file.fileName()).canonicalPath();
			qDebug("Using config file %s", qPrintable(fileName));
			return fileName;
		}
	}

	// not found
	foreach(QString dir, searchList)
	{
		qWarning("%s/%s not found", qPrintable(dir), qPrintable(fileName));
	}
	qFatal("Cannot find config file %s", qPrintable(fileName));
}



/**
  Entry point of the program.
*/
int main(int argc, char* argv[])
{
	QApplication app(argc, argv); 
	app.setApplicationName("BitPos");
	app.setOrganizationName("BitPos");

	
	// Find the configuration file
	QString configFileName = searchConfigFile();

	DbHelper::NewIntance(configFileName);

	//	// Configure logging into a file 该功能有bug,暂时不开放。
	//QSettings* logSettings = new QSettings(configFileName, QSettings::IniFormat, &app);
	//logSettings->beginGroup("logging");
	//FileLogger* logger = new FileLogger(logSettings, 10000, &app);
	//logger->installMsgHandler();

	// Configure template loader and cache
	QSettings* templateSettings = new QSettings(configFileName, QSettings::IniFormat, &app);
	templateSettings->beginGroup("templates");
	templateCache = new TemplateCache(templateSettings, &app);

	// Configure session store
	QSettings* sessionSettings = new QSettings(configFileName, QSettings::IniFormat, &app);
	sessionSettings->beginGroup("sessions");
	sessionStore = new HttpSessionStore(sessionSettings, &app);

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

	// Configure and start the TCP listener
	QSettings* listenerSettings = new QSettings(configFileName, QSettings::IniFormat, &app);
	listenerSettings->beginGroup("listener");
	new HttpListener(listenerSettings, new RequestMapper(&app), &app);

	qInfo("Application has started"); 
	BitPos pos;
	pos.show(); 
	int r= app.exec();
	pos.ClearCache();
	qInfo("Application has stopped");
	return r;

}

在上面源码主要添加了BitPos类的调用，然后程序在退出的时候，为了方便测试，自动清理webengine的缓存，如下

qInfo("Application has started"); 
	BitPos pos;
	pos.show(); 
	int r= app.exec();
	pos.ClearCache();
	qInfo("Application has stopped");

源码编译后即可作为单应用部署和运行，无需iis,tomcat
运行效果如下：
在这里插入图片描述

附录

下一章我们在后端接口集成sqlite数据库。

索取源码，技术沟通，编译报错，请加QQ群561506606 加群无需验证。
点击链接加入群聊【企业级系统实战-qt vue.j】：https://jq.qq.com/?_wv=1027&k=CCmkgYYu

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter for OpenHarmony：从零搭建幸运大转盘app（五）中奖结果与弹窗

OK，转盘能转了，指示器也有了。这一篇我们来实现中奖结果的计算和弹窗展示。

开源鸿蒙跨平台开发者社区

鸿蒙PC开发指南：从零配置Qt环境到实战部署完整流程

开源鸿蒙跨平台开发者社区

Flutter-OH 三方库适配指南：核心文件+实操步骤

各位开发者大家好！适配 Flutter-OH 三方库无需复杂操作，核心只需聚焦，即可高效完成大部分库的适配工作。本文将详细拆解核心文件职责、基础结构搭建，以及完整实操示例，帮你快速上手适配流程。

开源鸿蒙跨平台开发者社区

所有评论(0)

查看更多评论

m0_49654513

@m0_49654513

已为社区贡献1条内容