简易QT登录注册界面

    需求功能如下：

设计登录注册界面，有账号密码输入框，有登录注册输入框。
点击注册时弹出注册窗口，注册完成后点击确定，信息回显到登录界面的账号密码输入框内。
设计数据库，注册时信息录入数据库中，登录时从数据库中遍历信息，有则登录进入主界面，无则提示登录失败。

设计登陆后进入的主界面，主界面内，左上方会有文字提示“欢迎你！+用户名”的字样。主界面的正中央为一个ListWidget框，可以在里面右键添加成员、删除成员或修改成员。

源码下载：点击打开链接

      界面设计：

    注册界面设计：

    

    登录后的主界面设计：

    

    

登录界面功能设计：

有账号密码的输入输出框（lineEdit），有注册账号和登录按钮（pushButton）。

注册账号功能设计：

点击注册账号会切换窗口到注册账号页面，可填账号密码等相应的信息，点击确定后会检测账号密码，若账号密码为空，则提示注册失败，并返回登录注册界面。若注册成功则会有相应提示，点击确定后信息写入数据库并将账号密码信息回传到登录注册界面的账号密码输入框内。

数据库功能设计：

创建数据库，在注册账号时打开数据库，获取注册账号密码及其他信息，在注册完成点击确定时检测账号密码是否为空，若为空，提示注册失败，否则提示注册成功并将信息写入数据库。

登陆后主界面功能设计：

登陆后的主界面左上方会有文字提示“欢迎你！+用户名”的字样。主界面的正中央为一个ListWidget框，可以在里面右键添加成员、删除成员或修改成员。

登录注册界面样式功能设计：

在登录注册上面添加背景图片，按钮上面添加背景色，鼠标悬停时背景色换色，同时按钮上添加为状态。

//*************************************************************************************************************************

登录界面功能设计：

新建一个工程项目，进入UI设计界面，拉出两个lineEdit作为账号密码的输入框，拉出三个pushButton分别作为“注册账号”、“找回密码”、“登录”的按钮。拉出一个lable作为头像图片的装载，另拉出两个pushButton分别在左右下角作为“添加用户”和“扫描二维码”的按钮。拉出两个checkBox来作为记住密码和自动登录的选择。

 

其中注册账号按钮跟登录按钮有转到槽设计，另外加一个接收信息的函数用于注册后数据回显接收信息。

class MainWindow : public QMainWindow

{

    Q_OBJECT

 

public:

    explicit MainWindow(QWidget *parent = 0);

    ~MainWindow();

//    QString getNamepwd();

signals:

    //登录成功后发射信号

    void sendUsrname(QString name);

 

 

private slots:

    void on_pushButton_5_clicked();

 

    void on_pushButton_2_clicked();

    void receive(QString suername,QString passward);

 

private:

    Ui::MainWindow *ui;

};

//*****************实现如下******************

MainWindow::MainWindow(QWidget *parent) :

    QMainWindow(parent),

    ui(new Ui::MainWindow)

{

    ui->setupUi(this);

    ui->lineEdit_2->setAlignment(Qt::AlignHCenter);

    ui->lineEdit_2->setPlaceholderText("用户名");

    ui->lineEdit->setAlignment(Qt::AlignHCenter);

    ui->lineEdit->setPlaceholderText("密码");

 

}

 

MainWindow::~MainWindow()

{

    delete ui;

}

 

//QString MainWindow::getNamepwd()

//{

 

//}

 

void MainWindow::on_pushButton_5_clicked()

{

    //1.获取用户名和密码

    QString name = ui->lineEdit_2->text();

    QString pwd = ui->lineEdit->text();

    if((!name.isEmpty())&&(!pwd.isEmpty()))

    {

    DataBase* pdb = DataBase::getDatabaseInstence();

    bool ret1 = pdb->findUsr(name);

    if(ret1)

    {

        bool ret2 = pdb->judge(name, pwd);

        if (ret2)

        {

            //登录成功显示主窗口

            MainWindow_menu *mw = new MainWindow_menu();

 

            //建立连接

            connect(this, SIGNAL(sendUsrname(QString)), mw, SLOT(recUsrname(QString)));

 

            //发射信号

            emit sendUsrname(name);

 

            mw->setAttribute(Qt::WA_DeleteOnClose);

            this->close();

            mw->show();

//            this->hide();

        }

        else

        {

            QMessageBox::information(this, "提示", "登入失败！用户名或密码错误", QMessageBox::Ok);

        }

    }

    }

    else

    {

        QMessageBox::information(this, "提示", "登入失败！未注册，请先注册", QMessageBox::Ok);

    }

 

}

 

void MainWindow::on_pushButton_2_clicked()

{

    Dialog dlg;

    connect ( &dlg, SIGNAL (send(QString ,QString )),this, SLOT(receive(QString ,QString )) );

    dlg.exec();

}

void MainWindow::receive(QString suername, QString passward)

{

    ui->lineEdit_2->setText(suername);

    ui->lineEdit->setText(passward);

}

注册账号功能设计：

拉界面的方法不再赘述，如图：

 

下面介绍代码功能：

确定和取消设立了另个转到槽功能：

void on_pushButton_clicked();

void on_pushButton_2_clicked();

//******************************************************实现如下

//*****实现分别是验证保存注册信息到数据库，发射信号把账号密码传出用于信息回//*********显以及跳转页面到登录注册界面。

void Dialog::on_pushButton_clicked()

{

    //注册时保存用户注册信息

 

    QString name=ui->lineEdit->text();

    QString pwd=ui->lineEdit_2->text();

    QString sex=ui->radioButton->isChecked() ? "Man" : "Woman";

    QString birthday=ui->dateEdit->text();

    QString major=ui->comboBox->currentText();

    //******************************************************************

    if((!name.isEmpty())&&(!pwd.isEmpty()))

    {

    User user(name, pwd, sex, birthday, major);

    DataBase* pdb = DataBase::getDatabaseInstence();

    bool ret = pdb->insertUsr(user);

    if (ret)

    {

        QMessageBox::information(this,

                                 "提示",

                                 "注册成功！",

                                 QMessageBox::Ok);

        //发射信号

        emit send(name,pwd);

    }

    }

    else

    {

        QMessageBox::information(this,

                                 "提示",

                                 "注册失败！",

                                 QMessageBox::Ok);

    }

    this->close();

 

}

 

void Dialog::on_pushButton_2_clicked()

{

    this->close();

}

 

 

发射信号的函数：

void send(QString b,QString c);//此函数不需要实现，仅用于发射账号密码信息。

 

数据库功能设计：

public:

    static DataBase *getDatabaseInstence();  //静态的获取数据库对象的函数

    //插入一个用户信息

    bool insertUsr(User &usr);

    //根据name查找用户

    bool findUsr(QString name);

    //匹配name和pwd

    bool judge(QString name, QString pwd);

private:

    DataBase();

QSqlDatabase db_;

 

各函数实现如下：

DataBase *DataBase::getDatabaseInstence()

{

    static DataBase sqldb;

    return &sqldb;

}

 

//插入一个用户信息

bool DataBase::insertUsr(User &usr)

{

    QString sql = QString("insert into t_usr values('%1', '%2', '%3', '%4', '%5', '%6')")

            .arg(usr.name())

            .arg(usr.pwd())

            .arg(usr.sex())

            .arg(usr.birthday())

            .arg(usr.major());

 

    // 1.打开数据

    if (!db_.open())

    {

        qDebug() << "open:" << db_.lastError().text();

        return false;

    }

 

    // 2.执行sql

    QSqlQuery query(db_);

    if (!query.exec(sql))

    {

        qDebug() << "insert:" << query.lastError().text();

        return false;

    }

 

    //关闭数据库

    db_.close();

    return true;

 

}

 

//根据name查找用户

bool DataBase::findUsr(QString name)

{

    QString sql = QString("select name from t_usr where name = :name;");

    //打开数据库

    if(!db_.open())

    {

        qDebug() << "open fail" << db_.lastError().text();

        exit(-1);

    }

 

    //执行插入操作

    QSqlQuery query(db_);

    query.prepare(sql);

    query.bindValue(":name",QVariant(name));

    query.exec();

 

    //查询成功

    if(query.next())

    {

        if(name == query.value(0).toString()) //用户存在

        {

           return true;

        }

    }

 

    //关闭数据库

    db_.close();

 

    return false;

}

 

//匹配name和pwd

bool DataBase::judge(QString name, QString pwd)

{

    QString sql = QString("select name, pwd from t_usr where name = :name;");

    //打开数据库

    if(!db_.open())

    {

        qDebug() << "open fail" << db_.lastError().text();

        exit(-1);

    }

 

    //执行插入操作

    QSqlQuery query(db_);

    query.prepare(sql);

    query.bindValue(":name",QVariant(name));

    query.exec();

 

    //匹配密码

    if(query.next())

    {

        if(!(pwd == query.value(1).toString()))

        {

          return false;

        }

    }

 

    //关闭数据库

    db_.close();

 

    return true;

}

 

DataBase::DataBase()

{

    //先判断连接是否存在

    if(QSqlDatabase::contains("testConnection"))

    {

        db_ = QSqlDatabase::addDatabase("testConnection");

    }

    else

    {

        //1.加载数据库驱动

        db_ = QSqlDatabase::addDatabase("QSQLITE", "testConnection");

        qDebug () << db_.connectionName();//打印连接名称

 

        //2.设置数据库名

        db_.setDatabaseName("usr.db");

        qDebug () << db_.databaseName();

    }

 

    //3.打开数据库

       if(db_.open())

       {

           qDebug() << "open success";

       }

       else

       {

           qDebug() << "open:" << db_.lastError().text();

           return;

       }

 

       //4.操作数据库：执行sql语句(integer类型的主键会自增)

       QString sql = "create table if not exists t_usr(name varchar(50), pwd varchar(20), sex varchar(10), birthday varchar(20), college varchar(20), major varchar(20));";

       QSqlQuery query(db_);

       if (query.exec(sql))

       {

           qDebug() << "create success.";

       }

       db_.close();

}

登陆后主界面功能设计：

首先是接收信息显示“欢迎你！+用户名”然后跳转到主界面：

class ListWidget;

namespace Ui {

class MainWindow_menu;

}

 

class MainWindow_menu : public QMainWindow

{

    Q_OBJECT

 

public:

    explicit MainWindow_menu(QWidget *parent = 0);

    ~MainWindow_menu();

private slots:

    //登录成功后接收用户名

    void recUsrname(QString name);

 

private:

    Ui::MainWindow_menu *ui;

    ListWidget* listwidget_;

};

实现如下：

MainWindow_menu::MainWindow_menu(QWidget *parent) :

    QMainWindow(parent),

    ui(new Ui::MainWindow_menu)

{

    ui->setupUi(this);

    listwidget_ = new ListWidget(this);

//    this->setCentralWidget(listwidget_);

    listwidget_->setGeometry(100, 100, 600, 260);

}

 

MainWindow_menu::~MainWindow_menu()

{

    delete ui;

}

 

void MainWindow_menu::recUsrname(QString name)

{

    QString str = QString("欢迎你! %1").arg(name);

    ui->label->setText(str);

}

 

 

//*********************************************************************

//*************如下是实现主菜单的添加、删除、修改的功能部分**********

class ListWidget : public QListWidget

{

    Q_OBJECT

public:

    explicit ListWidget(QWidget *parent = 0);

 

protected:

    void contextMenuEvent ( QContextMenuEvent * event );

 

public slots:

    void addListWidgetItem();

    void deleteListWidgetItem();

    void modifyListWidgetItem();

 

};

设计了contextMenuEvent 事件以及三个函数，分别是添加、删除、修改功能，实现如下：

void ListWidget::contextMenuEvent(QContextMenuEvent *event)

{

    QMenu* popMenu = new QMenu(this);

    QAction* aAction = new QAction("添加", this);

    QAction* dAction = new QAction("删除", this);

    QAction* mAction = new QAction("修改", this);

    popMenu->addAction(aAction);

 

    connect(aAction, SIGNAL(triggered()),

            this, SLOT(addListWidgetItem()));

    connect(dAction, SIGNAL(triggered()),

            this, SLOT(deleteListWidgetItem()));

    connect(mAction, SIGNAL(triggered()),

            this, SLOT(modifyListWidgetItem()));

 

    if(this->itemAt(mapFromGlobal(QCursor::pos())) != NULL) //如果有item则添加"修改"菜单 [1]*

    {

        popMenu->addAction(dAction);

        popMenu->addAction(mAction);

    }

 

    popMenu->exec(QCursor::pos()); // 菜单出现的位置为当前鼠标的位置

 

    delete popMenu;

    delete aAction;

    delete dAction;

    delete mAction;

}

 

void ListWidget::addListWidgetItem()

{

    QString text = QInputDialog::getText(this, "输入框", "请输入学生姓名");

 

//    this->addItem(text);

 

//    QListWidgetItem* item = new QListWidgetItem(text, this);

//    this->addItem(item);

 

 

    QListWidgetItem* newItem = new QListWidgetItem;  // 不能有父窗口

    newItem->setText(text);

    this->insertItem(this->currentRow()+1, newItem);

 

}

//删除item

void ListWidget::deleteListWidgetItem()

{

//    QListWidgetItem* item = this->currentItem();

//    this->removeItemWidget(item);

//    delete item;

 

    int r = this->currentRow();//取当前item的行号

    QListWidgetItem* item = this->takeItem(r);

    this->removeItemWidget(item);//移除当前item

 

 

}

//修改item

void ListWidget::modifyListWidgetItem()

{

    QString text = QInputDialog::getText(this, "输入框", "请输入学生名称");

    this->currentItem()->setText(text);

 

}

 

登录注册界面样式功能设计：

 

给三个pushBotton添加了伪状态，背景色，鼠标悬停更换背景色功能：

锁定pushBotton，点击右键，选择样式表，三个按钮代码相同，如下：

QPushButton:hover{color:rgb(255, 0, 0);

background-color: rgb(170, 255, 0);

}

QPushButton{

background-color:rgb(170, 255, 255)

}

给两个checkBox添加了伪装态，依旧是样式表，代码如下：

QCheckBox:hover{color:rgb(255, 0, 0)}

给两个lineEdit（用户名/密码）添加了伪状态操作，其中修改了边角，背景色和border的样式，代码如下：

QLineEdit:hover{

border-style:ooutset;

border-radius:10px;

padding:6px;

background-color: rgb(255, 255, 127);

}

Lable的头像设置是找到右下方选项框，找到pixmap，选用背景图片，从资源图片里面选择一张合适的即可

 

背景则是选中主框，样式表，添加渐变，代码如下：

QMainWindow{

background-color: qconicalgradient(cx:0.5, cy:0.5, angle:0, stop:0 rgba(35, 40, 3, 255), stop:0.16 rgba(136, 106, 22, 255), stop:0.225 rgba(166, 140, 41, 255), stop:0.285 rgba(204, 181, 74, 255), stop:0.345 rgba(235, 219, 102, 255), stop:0.415 rgba(245, 236, 112, 255), stop:0.52 rgba(209, 190, 76, 255), stop:0.57 rgba(187, 156, 51, 255), stop:0.635 rgba(168, 142, 42, 255), stop:0.695 rgba(202, 174, 68, 255), stop:0.75 rgba(218, 202, 86, 255), stop:0.815 rgba(208, 187, 73, 255), stop:0.88 rgba(187, 156, 51, 255), stop:0.935 rgba(137, 108, 26, 255), stop:1 rgba(35, 40, 3, 255));

}