基于Qt 和微信小程序的用户管理系统：WebSocket + SQLite 实现注册与登录

[一. 概要](#一. 概要)

[二. 技术栈](#二. 技术栈)

[三. 系统功能设计](#三. 系统功能设计)

[3.1 功能模块](#3.1 功能模块)

[3.2 数据表设计](#3.2 数据表设计)

[四. 具体实现](#四. 具体实现)

[4.1 Qt 服务端](#4.1 Qt 服务端)

[4.1.1 初始化 WebSocket 服务器](#4.1.1 初始化 WebSocket 服务器)

[4.1.2 用户管理界面](#4.1.2 用户管理界面)

[4.2 微信小程序端](#4.2 微信小程序端)

[4.2.1 注册功能](#4.2.1 注册功能)

[4.2.2 登录功能](#4.2.2 登录功能)

[五. 运行效果](#五. 运行效果)

[六. 源码下载](#六. 源码下载)

一. 概要

在物联网和智能设备管理领域，用户管理系统是一个核心模块。本文将介绍如何通过 Qt 和微信小程序实现一个用户管理系统，其中Qt服务端运行在嵌入式Linux设备IMX6ULL上，支持用户和运维人员的注册与登录功能，并将数据存储到开发板设备的SQLite 数据库中。通过 WebSocket 实现实时通信，确保数据的高效传输。支持微信小程序端和Qt服务端同时对用户的个人信息数据进行增删改查操作。在微信小程序注册时，将数据通过WebSocket写入到开发板的SQLite数据库中，在进行登陆时，通过WebSocket校验输入的用户名和密码与开发板SQLite数据库中的数据进行对比，当数据存在且正确是可登陆进系统。如下为IMX6ULL服务端：

IMX6ULL服务端

二. 技术栈

Qt服务端：用于开发桌面端管理界面，提供用户和运维人员数据的展示和管理功能。

微信小程序：作为移动端入口，提供用户注册和登录界面，登录成功后跳转到对应的界面。

WebSocket：实现微信小程序与 Qt 服务端的实时通信，用于存储和校验开发板服务端数据库中的数据。

SQLite：轻量级数据库，用于存储用户信息。

三. 系统功能设计

3.1 功能模块

用户注册：

用户通过微信小程序填写用户名、密码和角色（用户或运维人员）。

数据通过 WebSocket 发送到开发板Qt服务端，并存储到 SQLite 数据库。

用户登录：

用户通过微信小程序输入用户名和密码。

Qt服务端验证用户信息，返回登录结果。

用户管理：

Qt服务端提供管理人员对用户和运维人员的个人信息进行增删改查等的操作。

3.2 数据表设计

在 SQLite 中创建 users 表，存储用户信息，其中包括用户的id，用户名，用户密码，用户角色（用于标识用户和运维人员）：

复制代码

CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT NOT NULL UNIQUE,
    password TEXT NOT NULL,
    role TEXT NOT NULL
);

四. 具体实现

4.1 Qt 服务端

4.1.1 初始化 WebSocket 服务器

在Qt程序中创建一个WebSocket服务器，监听来自微信小程序的连接请求。以下为建立服务端的主要代码：

复制代码

// WebSocketServer.h
class WebSocketServer : public QObject {
    Q_OBJECT
public:
    explicit WebSocketServer(quint16 port, QObject *parent = nullptr);
    ~WebSocketServer();

private slots:
    void onNewConnection();
    void onMessageReceived(const QString &message);

private:
    QWebSocketServer *m_server;
    QList<QWebSocket *> m_clients;
};

// WebSocketServer.cpp
WebSocketServer::WebSocketServer(quint16 port, QObject *parent)
    : QObject(parent), m_server(new QWebSocketServer("UserManager", QWebSocketServer::NonSecureMode, this)) {
    if (m_server->listen(QHostAddress::Any, port)) {
        connect(m_server, &QWebSocketServer::newConnection, this, &WebSocketServer::onNewConnection);
        qDebug() << "WebSocket server started on port" << port;
    } else {
        qWarning() << "Failed to start WebSocket server";
    }
}

void WebSocketServer::onNewConnection() {
    QWebSocket *client = m_server->nextPendingConnection();
    connect(client, &QWebSocket::textMessageReceived, this, &WebSocketServer::onMessageReceived);
    m_clients.append(client);
    qDebug() << "New client connected";
}

void WebSocketServer::onMessageReceived(const QString &message) {
    QWebSocket *client = qobject_cast<QWebSocket *>(sender());
    if (client) {
        qDebug() << "Received message:" << message;
        // 处理消息并返回响应
        client->sendTextMessage("Message received");
    }
}

4.1.2 用户管理界面

在用户和运维人员个人信息管理界面中，使用 QTableView 和 QSqlTableModel 实现用户信息的展示和管理。如下为对用户运维人员个人信息管理的主要逻辑代码段：

复制代码

// MainWindow.cpp
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent), ui(new Ui::MainWindow) {
    ui->setupUi(this);

    // 初始化 WebSocket 服务器
    m_webSocketServer = new WebSocketServer(8080, this);

    // 初始化 SQLite 数据库
    QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE", "mainwindow_connection");
    db.setDatabaseName("user.db");
    if (!db.open()) {
        qWarning() << "无法打开数据库";
        return;
    }

    // 初始化表格模型
    m_model = new QSqlTableModel(this, db);
    m_model->setTable("users");
    m_model->select();
    ui->tableView->setModel(m_model);

    // 调整列宽和布局
    ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
    ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);
    ui->tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);

    // 连接按钮信号槽
    connect(ui->addButton, &QPushButton::clicked, this, &MainWindow::onAddUser);
    connect(ui->deleteButton, &QPushButton::clicked, this, &MainWindow::onDeleteUser);
    connect(ui->updateButton, &QPushButton::clicked, this, &MainWindow::onUpdateUser);
    connect(ui->refreshButton, &QPushButton::clicked, this, &MainWindow::onRefreshButtonClicked);
}

4.2 微信小程序端

4.2.1 注册功能

通过 WebSocket 发送注册请求到 Qt 服务端。如下为register,注册逻辑主要实现代码段：

复制代码

// register.js
Page({
  data: {
    username: '',
    password: '',
    role: '用户'
  },

  onRegister: function () {
    const { username, password, role } = this.data;
    const message = JSON.stringify({
      type: 'register',
      username,
      password,
      role
    });

    wx.connectSocket({
      url: 'ws://192.168.10.100:8080'
    });

    wx.onSocketOpen(() => {
      wx.sendSocketMessage({
        data: message
      });
    });

    wx.onSocketMessage((res) => {
      const response = JSON.parse(res.data);
      if (response.success) {
        wx.showToast({
          title: '注册成功',
          icon: 'success'
        });
      } else {
        wx.showToast({
          title: response.message,
          icon: 'none'
        });
      }
    });
  }
});

4.2.2 登录功能

通过 WebSocket 发送登录请求到 Qt 服务端。如下为登录login.js的主要逻辑代码段。

复制代码

// login.js
Page({
  data: {
    username: '',
    password: ''
  },

  onLogin: function () {
    const { username, password } = this.data;
    const message = JSON.stringify({
      type: 'login',
      username,
      password
    });

    wx.connectSocket({
      url: 'ws://192.168.10.100:8080'
    });

    wx.onSocketOpen(() => {
      wx.sendSocketMessage({
        data: message
      });
    });

    wx.onSocketMessage((res) => {
      const response = JSON.parse(res.data);
      if (response.success) {
        wx.showToast({
          title: '登录成功',
          icon: 'success'
        });
      } else {
        wx.showToast({
          title: response.message,
          icon: 'none'
        });
      }
    });
  }
});

五. 运行效果

首先完成对Linux端编写的Qt服务端代码经过交叉编译后通过scp命令挂载到ip为192.168.10.50的IMX6ULL嵌入式设备上，如下：

确保挂成功：

随后在微信小程序端进行用户的注册：

同时在注册成功时通过WebSocket将个人数据写入到服务端的数据库中：

注册成功后跳转到登陆界面，在登陆成功后跳转到用户界面：

对于运维人员的注册于登录亦是如此。

六. 源码下载

Qt端源码Qt_Server，微信小程序端源码QtApp_demo2，源码已上传至我的gitee代码仓库，有需要请自取：

https://gitee.com/liu-jixwa/mytest