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

标题作者背景描述：

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

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

为什么写此系列文章？

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

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

解决方案：

结合近年来前端设计的走向，选择了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>
#