文章目錄
- 一. 前言
- 同時完整專案代碼已上傳github：[Fdog即時通訊軟體](https://github.com/FdogMain/FdogInstantMessaging) 求星星！
- 二. 正文
- 1. 如何保存第一次登錄資料
- 2. 如何獲取已經登錄過的賬號資訊,并完成自定義下列框
- 3. 從下拉串列框洗掉賬號
- 4. 文本框顯示正確內容
一. 前言
Fdog系列已寫目錄：
Fdog系列（一）：思來想去，不如寫一個聊天軟體，那就從仿QQ注冊頁面開始吧，
Fdog系列（二）：html寫完注冊頁面之后怎么辦，用java寫后臺回應呀，
Fdog系列（三）：使用騰訊云短信介面發送短信，資料庫寫入，部署到服務器，web收尾篇，
Fdog系列（四）：使用Qt框架模仿QQ實作登錄界面，界面篇，
Fdog系列（五）：使用Qt模仿QQ實作登錄界面到主界面，功能篇， 當前篇
讀完該篇，你將學會：
如何保存登錄資料
實作是否記住密碼
如何獲取本地資料
登錄界面中出現的下拉框
從下拉串列框洗掉賬號
改變選項，實時顯示
其中下拉框的自定義比較復雜，我看到有網友在評論區問了如何實作，別急，它來了！看完本文，你將學會他，
同時完整專案代碼已上傳github：Fdog即時通訊軟體 求星星！
二. 正文
1. 如何保存第一次登錄資料
先來分析一下：
要保存的資料，1.頭像 2.賬號 3.密碼 4.是否記住密碼，并且第三項密碼依賴于第四項用戶是否勾選記住密碼，
如何保存資料，給大家提供兩種方法：1.使用了文本保存，2.使用ini組態檔保存，這兩種方法都是可以的，為了方便，這里使用文本保存，如果想使用ini保存，可以參考這篇：QT學習筆記之讀取INI檔案
檔案存放的位置，這里使用絕對路徑是不明智的，應當使用相對地址，思路是獲取可執行檔案的目錄，然后在其目錄至上創建用戶檔案，
用戶檔案結構：創建FdogUserFile檔案夾，再創建以用戶賬號為名的檔案夾，這個檔案夾包括圖片檔案和一個文本檔案，圖片檔案就是頭像，也是以用戶賬號命名，文本檔案命名為data，里面存放賬號和密碼，這里有一個格式，第一行是賬號，第二行是密碼，當第二行為空時，說明用戶沒有選擇記住密碼，
應當注意的是這里不應該重復創建檔案，應有一個判斷，判斷當前用戶資訊檔案是否創建，若不存在則創建，若存在則更新即可，
差點忘了還有我們資料庫的事，在這一切之前，應當將用戶和密碼和資料庫資料對比，如果匹配，就從服務器下載頭像和執行上面的內容，
下面來代碼實作這一構想，現在假設照片已經存在服務器，例如當你輸入網址：https://www.fdogcsdn.cn/img/10001.jpg
網頁將顯示一張圖片，
至于如何讓網頁顯示圖片，會在下面寫出，現在只需要考慮如何用代碼實作下載圖片和與資料庫內容做做對比，
創建一個資料庫類：usersql
#include<QNetworkAccessManager>
#include<QNetworkReply>
#include<QPixmap>
#if _MSC_VER >= 1600
#pragma execution_character_set("utf-8")
#endif
//上面三行防止中文亂碼
class Usersql
{
private:
QSqlDatabase dbconn;//連接資料庫
QSqlQuery query; //查詢操作
QString account; //賬號
QString passwd; //密碼
QString iconurl; //地址
QPixmap icon; //頭像
public:
void conndata(); //連接資料庫
bool queryuser(QString user,QString password); //查詢是否有該賬戶
QPixmap geticonurl(QString url);//根據地址網上下載圖片
QPixmap getPixmapIcon(QString url);//url為賬號，通過賬號獲取頭像地址
};
void Usersql::conndata()
{
if(QSqlDatabase::contains(QSqlDatabase::defaultConnection))
{
this->dbconn = QSqlDatabase::database(QSqlDatabase::defaultConnection);
}
else
{
this->dbconn = QSqlDatabase::addDatabase("QMYSQL");
}
this-> dbconn.setHostName("0.0.0.0");//主機名字 也是服務器ip 如果使用本地資料庫測驗，則使用127.0.0.1
this-> dbconn.setDatabaseName("fdogsql");//資料庫名字
if(this->dbconn.open("root", "111111")) //用戶名 密碼
{
//如果判斷為真，則連接成功
//qDebug()<<"success";
}
this->query = (QSqlQuery)this->dbconn; //進行系結 此后可以使用query物件對資料庫進行操作，
}
bool Usersql::queryuser(QString user, QString password)
{
this->query.exec("select * from user");
while(query.next())
{
//遍歷賬戶 value中的值代表欄位，0就是第一個，1就是第二個
qDebug()<<this->query.value(0).toString();
if(user==(this->query.value(0).toString()))
{
if(password==(this->query.value(3).toString()))
{
this->iconurl = this->query.value(5).toString();
qDebug()<<"該賬戶存在";
return true;
}
else
{
qDebug()<<"該賬戶不存在";
return false;
}
}
}
return false;
}
QPixmap Usersql::geticonurl(QString url1)
{
this->iconurl = url1;
QUrl url(this->iconurl);
qDebug()<<url;
QNetworkAccessManager manager;
QEventLoop loop;
// qDebug() << "Reading picture form " << url;
QNetworkReply *reply = manager.get(QNetworkRequest(url));
//請求結束并下載完成后，退出子事件回圈
QObject::connect(reply, SIGNAL(finished()), &loop, SLOT(quit()));
//開啟子事件回圈
loop.exec();
QByteArray jpegData = reply->readAll();
this->icon.loadFromData(jpegData);
return icon;
}
QPixmap Usersql::getPixmapIcon(QString url)
{
QString strurl;
//資料庫查詢該帳戶
this->query.exec("select * from user");
while(query.next())
{
//遍歷賬戶
if(url==(this->query.value(0).toString()))
{
strurl = this->query.value(5).toString();
}
}
qDebug()<<strurl;
QPixmap a = geticonurl(strurl);
a=this->icon.scaled(QSize(a.width(), a.height()), Qt::IgnoreAspectRatio);
a=PixmapToRound(a, a.width()/2);
return a;
}
然后來看下當點擊登錄按鈕執行的代碼
void Login::on_pushButton_clicked()
{ //ui->lineEdit_2是賬號文本框 ui->lineEdit是密碼文本框
sqconn.conndata();//連接資料庫
bool isuser = sqconn.queryuser(ui->lineEdit_2->text(),ui->lineEdit->text());//輸入內容查詢
//判斷用戶是否存在
if(isuser)
{
//只獲取賬號
QString account = ui->lineEdit_2->text(); //賬戶
this->sqconn.queryUserInfo(account);//根據賬戶獲取昵稱，密碼(如果用戶選擇記住密碼，則保存密碼)，頭像
QString name = sqconn.getName();
QString passwd="";
if(ui->checkBox_2->isChecked())//判斷用戶是否保存密碼
{
passwd = sqconn.getPasswd();
}
QPixmap icon = sqconn.getIcon();
//獲取程式當前運行目錄
QString fileName = QCoreApplication::applicationDirPath();
//用戶目錄
QString add = "//..//FdogUserFile";
//創建用戶檔案夾
fileName = fileName + add +QString("//%1").arg(account);
//資訊保存
QDir * file = new QDir;
//檔案夾是否存在，若存在則表示資訊已經存在，只需要更新內容即可，
bool exist_1 = file->exists(fileName);
if(exist_1)
{
//qDebug()<<"創建";
QFile file(fileName +"//data.txt");
qDebug()<<fileName +"//data.txt";
if(file.open(QIODevice::WriteOnly|QIODevice::Text|QIODevice::Truncate))
{
//qDebug()<<"txt檔案創建成功";
}
QTextStream stream(&file);
//寫入
if(passwd=="")stream<<name;
else stream<<name<<"\n"<<passwd;
//qDebug()<<"tup:"<<account;
icon.save(fileName+QString("//%1.jpg").arg(account),"JPG");
file.close();
}
else
{ //如果不存在則創建
bool ok = file->mkpath(fileName);
if(ok)
{
//qDebug()<<"創建";
QFile file(fileName +"//data.txt");
qDebug()<<fileName +"//data.txt";
if(file.open(QIODevice::WriteOnly|QIODevice::Text|QIODevice::Truncate))
{
//qDebug()<<"txt檔案創建成功";
}
QTextStream stream(&file);
if(passwd=="")stream<<name;
else stream<<name<<"\n"<<passwd;
icon.save(fileName+QString("//%1.jpg").arg(account),"JPG");
file.close();
}
else
{
qDebug()<<"未創建成功";
}
}
this->hide();//隱藏登錄視窗
systemtrayicon->hide();//隱藏系統托盤
//初始化主界面 w是在頭檔案定義的主界面類，這里只是作為演示，
w = new MainWindow(account);
//顯示主界面
w->show();
//顯示系統托盤圖示
w->showicon();
}
else
{
//該用戶不存在
}
}
當登錄賬號后，創建效果：
當然使用明文保存密碼是不安全的，可以參考之前我寫的一篇加密：非對稱性加密演算法——RSA演算法原理及C++實作
然后來說如何讓服務器正確顯示照片，在服務器根目錄創建一個fdogpoject/fdog/img的路徑，在img檔案夾下存放我們的照片，當然這樣，我們是無法通過https://www.fdogcsdn.cn/img/10001.jpg來顯示圖片的，還需要改一點東西，
我是使用tomcat搭建的服務，所以在conf檔案夾下修改server.xml檔案，添加：
<Context reloadable="true" docBase="/fdogpoject/fdog/img/" path="/img"/>
然后重啟tomcat就可以訪問了，
2. 如何獲取已經登錄過的賬號資訊,并完成自定義下列框
這一步相對于如何保存資訊已經簡單了許多， 只需要將頭像和檔案內容顯示在下拉串列框即可，
登錄界面類：
class Login : public QWidget
{
private:
QVector<int> infoListsign;
QSignalMapper * myMapper;
QStringList infoList; //用戶賬號
QStringList infopasswd; //用戶密碼
QStringList icon; //頭像保存地址
public:
explicit Login(QWidget *parent = 0);//建構式
QStringList GetDirNameList(const QString &strDirpath);//用于獲取用戶檔案下所有賬號（實際上是獲取目錄下所有檔案名）
};
Login::Login(QWidget *parent) :
QWidget(parent),
ui(new Ui::Login)
{
ui->setupUi(this);
//獲取exe運行目錄
QString fileName1 = QCoreApplication::applicationDirPath()+"//..//FdogUserFile";
//獲取目錄
infoList = GetDirNameList(fileName1);
//加載自定義的下拉串列框
m_AccountList = new QListWidget(this);
m_AccountList->setFocusPolicy(Qt::NoFocus);
ui->comboBox->setModel(m_AccountList->model());
ui->comboBox->setView(m_AccountList);
for(int i =0;i<infoList.size();i++)
{
//獲取帳號
QString local_account = infoList.at(i);
//獲取昵稱
QString local_name;
//獲取密碼
QString local_passwd;
//獲取頭像
QString ic = fileName1+QString("//%1//%2.jpg").arg(infoList.at(i)).arg(infoList.at(i));
this->icon.append(ic);
QIcon local_icon(ic);
QFile file_my(fileName1+QString("//%1//data.txt").arg(infoList.at(i)));
if(!file_my.open(QIODevice::ReadOnly | QIODevice::Text))
{
qDebug()<<"檔案打開失敗"<<endl;
}
this->ispasswd = false;
while(!file_my.atEnd())
{
infopasswd.append("");
QByteArray line = file_my.readLine();
QString str(QString::fromLocal8Bit(line.data()));
//qDebug()<< str;
if(this->ispasswd)
{
//還應該查看是否有密碼存在，如果有則讀取，并顯示勾中
infopasswd.insert(i,str);
//qDebug()<<"有密碼"<<str;
local_passwd.append(str);
this->ispasswd =false;
}
else
{
local_name.append(str);
this->ispasswd =true;
}
qDebug()<<infopasswd;
}
QHBoxLayout *horLayout = new QHBoxLayout();//水平布局
QLabel * la = new QLabel();
QString s = ic;
la->setStyleSheet(QString("border-image: url(%1);border-radius:17px;").arg(s));
la->setFixedSize(34,34);
QLabel * la2 = new QLabel(QString("%1\n%2").arg(local_name.left(local_name.length()-1),local_account));
QPushButton * b1 = new QPushButton();
b1->setFixedSize(32,32);
b1->setStyleSheet("QPushButton{background:rgba(200,200,200,0);border-style:solid;border-image: url(:/lib/delete.png);}"
"QPushButton:hover{background:rgba(200,200,200,0);border-style:solid;border-image: url(:/lib/delete2.png);}");
horLayout->addWidget(la);
horLayout->addWidget(la2);
horLayout->addWidget(b1);
QWidget *widget =new QWidget(this);
widget->setLayout(horLayout);
QListWidgetItem * Listitem = new QListWidgetItem(m_AccountList);
m_AccountList->setItemWidget(Listitem,widget);
}
}
QStringList Login::GetDirNameList(const QString &strDirpath)
{
QDir dir(strDirpath);
QFileInfoList Info_list = dir.entryInfoList(QDir::Dirs | QDir::NoDotAndDotDot);
QListIterator<QFileInfo> Iterator(Info_list);
QStringList strDirNameList;
QFileInfo Info;
while (Iterator.hasNext())
{
Info = Iterator.next();
if (Info.isDir())
{
strDirNameList << QDir(Info.absoluteFilePath()).dirName();
}
}
return strDirNameList;
}
自定義下拉串列框的重點是這些：
QListWidget * m_AccountList; //自定義下拉串列框
//加載自定義的下拉串列框
m_AccountList = new QListWidget(this);
m_AccountList->setFocusPolicy(Qt::NoFocus);
ui->comboBox->setModel(m_AccountList->model());
ui->comboBox->setView(m_AccountList);
//每有一個賬號就執行一次下面的代碼
QHBoxLayout *horLayout = new QHBoxLayout();//水平布局
QLabel * la = new QLabel();
QString s = ic;
la->setStyleSheet(QString("border-image: url(%1);border-radius:17px;").arg(s));
la->setFixedSize(34,34);
QLabel * la2 = new QLabel(QString("%1\n%2").arg(local_name.left(local_name.length()-1),local_account));
QPushButton * b1 = new QPushButton();
b1->setIcon(QIcon(":/lib/delete.png"));
b1->setFixedSize(32,32);
b1->setStyleSheet("background:rgba(200,200,200,0);border-style:solid;");
horLayout->addWidget(la); //前面頭像
horLayout->addWidget(la2);//中間名字
horLayout->addWidget(b1);//后面洗掉按鈕
QWidget *widget =new QWidget(this);
widget->setLayout(horLayout);
QListWidgetItem * Listitem = new QListWidgetItem(m_AccountList);
m_AccountList->setItemWidget(Listitem,widget);
3. 從下拉串列框洗掉賬號
為每個洗掉按鈕系結信號槽
void Login::deleteaccount(int i) //傳進來的是標記數字
{
//QMessageBox::information(NULL, "提示", "是否要洗掉本次該賬號資訊",QMessageBox::Yes|QMessageBox::No);
QMessageBox *message = new QMessageBox(QMessageBox::Question,tr("提示"), tr("是否要洗掉該賬號資訊"), QMessageBox::Yes | QMessageBox::No,this);
int result = message->exec();
//infoListsign 0 1 2 3 0 1 2 3 0 1 2 1 2 3
//這里有一個需要注意的點，當初給每個按鈕標記的數字是不會變的，但是當我們洗掉串列中的一個item之后，串列中的其他item會自動排序
//所以無法單靠當初標記的數字來進行簡單洗掉，我們可以借助一個vector，將標記的數字存放，而正在要洗掉的值是標記數字的下標
//如果單靠標記的數字來判斷，比如我要洗掉第一行，就是0，這時它的下標也是0，這沒有問題，但是第二次就會出問題，我要洗掉第二行，當我點擊洗掉
//其實傳回的值應該是1，但是串列自動排序之后，原來的1變成了0，原來的2變了1.
switch(result)
{
case QMessageBox::Yes:
infoList.removeAt(infoListsign.indexOf(i));
infopasswd.removeAt(infoListsign.indexOf(i));
icon.removeAt(infoListsign.indexOf(i));
//當前索引是否為洗掉物件，若是，則使用第一個
if(infoListsign.indexOf(i)==ui->comboBox->currentIndex())
{
if(infoList.length()!=0)
{
ui->comboBox->setCurrentIndex(0);
}
}
if(infoList.length()==0)
{
ui->lineEdit_2->setText("");
ui->lineEdit->setText("");
ui->label_4->setStyleSheet("border-image: url(:/lib/fdogicon.png);border-width:0px;border-style:solid;border-color: rgb(255, 255, 255);border-radius:33px;");
this->m_AccountList->setItemHidden(this->m_AccountList->item(0),true);
return;
}
//隱藏賬號資訊 this->m_AccountList->setItemHidden(this->m_AccountList->item(i),true);
//洗掉賬號資訊
QListWidgetItem * item;
qDebug()<<"出錯0";
qDebug()<<"infoListsign.indexOf(i)"<<infoListsign.indexOf(i);
item = this->m_AccountList->takeItem(infoListsign.indexOf(i));
qDebug()<<"出錯1";
this->m_AccountList->removeItemWidget(item);
qDebug()<<"出錯2";
delete item;
infoListsign.erase(infoListsign.begin()+infoListsign.indexOf(i));
break;
case QMessageBox::No:
//什么也不做
break;
}
}
4. 文本框顯示正確內容
在上一篇說過，圖中的賬號文本框其實是由文本框加下拉串列框構成，如何在改變下列串列框的同時修改登錄界面所顯示的內容呢?
右擊combox，轉到槽，添加currentIndexChanged，代碼如下
void Login::on_comboBox_currentIndexChanged(int index)
{
ui->checkBox_2->setChecked(false);
ui->lineEdit->setText("");
ui->lineEdit_2->setText(infoList.at(index));
if(infopasswd.at(index)!="")
{
ui->lineEdit->setText(infopasswd.at(index));
ui->checkBox_2->setChecked(true);
}
QString icon1 = icon.at(index);
ui->label_4->setStyleSheet(QString("border-image: url(%1);border-width:0px;border-style:solid;border-color: rgb(255, 255, 255);border-radius:33px;").arg(icon1));
//開始考慮用戶是否選擇記住密碼
}
如果有不了解QSignalMapper類用法的可以參考這篇：QT多個按鈕信號系結一個槽函式，執行不同業務邏輯，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/282307.html
標籤：java