网站的优点缺点,北京网站编程培训,wordpress kratos主题,门户网站架构目录
一. 概要
二. 技术栈
三. 系统功能设计
3.1 功能模块 3.2 数据表设计
四. 具体实现
4.1 Qt 服务端
4.1.1 初始化 WebSocket 服务器 4.1.2 用户管理界面 4.2 微信小程序端
4.2.1 注册功能 4.2.2 登录功能
五. 运行效果
六. 源码下载 一. 概要
在物联网和智能设备…目录
一. 概要
二. 技术栈
三. 系统功能设计
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;QListQWebSocket * 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_castQWebSocket *(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
