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

news2025/2/22 7:16:35

一. 概要

二. 技术栈

三. 系统功能设计

3.1 功能模块

3.2 数据表设计

四. 具体实现

4.1 Qt 服务端

4.1.1 初始化 WebSocket 服务器

4.1.2 用户管理界面

4.2 微信小程序端

4.2.1 注册功能

4.2.2 登录功能

五. 运行效果

六. 源码下载

一. 概要

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

IMX6ULL服务端

二. 技术栈

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

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

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

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

三. 系统功能设计

3.1 功能模块

1. 用户注册：

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

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

2. 用户登录：

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

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

3. 用户管理：

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'
        });
      }
    });
  }
});