两种方法实现登陆界面（QT和HTML）

【Note1】先看看QT版本的界面,大概思路是利用QMap创建的数据结构进行用户和密码的存储，然后注册的时候进行插入，查找采用find函数进行判断是否登陆成功，两个界面的ui如下：

　　【1】基本窗口的布局：

　　widget.ui

　　【2】注册窗口的布局：add.ui

看看代码的实现

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include<QMap>
#include<QPixmap>
#include<QResizeEvent>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
#include"add.h"
class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    void setBackgroundImage(QPixmap &pixmap);
private slots:
    void on_pushButton_in_clicked();
    void resizeEvent(QResizeEvent *);
    void dealsignal(QString dealname,QString dealkey);
    void on_pushButton_out_clicked();

private:
    Ui::Widget *ui;
    QMap<QString,QString>Mymap;
    QString name;
    QString key;
    QPixmap pix;
    add subwidet;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include<QPixmap>
#include<QPalette>
#include<QBrush>
#include<QMessageBox>
#include<QResizeEvent>
#include<QDebug>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    Mymap["123"]="123456";
    pix=QPixmap(":/new/prefix1/timg4.jpg");
    QPalette pale(this->palette());
    pale.setBrush(QPalette::Background,QBrush(pix));
    this->setPalette(pale);
    setWindowTitle("登录窗口");
    connect(&subwidet,SIGNAL(mysigname(QString,QString)),this,SLOT(dealsignal(QString,QString)));
}
void Widget::setBackgroundImage(QPixmap&pixmap)
  {
      //判断图片是否为空
      if(pixmap.isNull()){
          qDebug() << tr("illege arguments") <<endl;
          return;
     }
     //设置窗口的背景
     QPalette    palette = this->palette();
     palette.setBrush(this->backgroundRole(),
                      QBrush(pixmap.scaled(this->size(),
                             Qt::IgnoreAspectRatio,
                             Qt::SmoothTransformation)));
     this->setPalette(palette);
 }
void Widget::resizeEvent(QResizeEvent *)
{
    setBackgroundImage(pix);
}
Widget::~Widget()
{
    delete ui;
}

void Widget::dealsignal(QString dealname,QString dealkey)
{
    Mymap.insert(dealname,dealkey);
    QMessageBox::about(&subwidet,"sucess","注册成功");
}
void Widget::on_pushButton_in_clicked()
{
   name=ui->lineEdit_count->text();
   key=ui->label_key->text();
   int isok=0;
   QMap<QString,QString>::iterator it2=Mymap.find(name);
    for(QMap<QString,QString>::iterator it=Mymap.begin();it!=Mymap.end();it++)
    {
     //开始键值对的匹配
        if(it==it2)
        {
            isok++;
        }
    }
    if(isok!=0)
    {
        QMessageBox::about(this,"windows","sucees");
    }
    else{
            QMessageBox::about(this,"windows","error");
    }

}

void Widget::on_pushButton_out_clicked()
{
    subwidet.show();

}

add.h

#ifndef ADD_H
#define ADD_H

#include <QWidget>

namespace Ui {
class add;
}

class add : public QWidget
{
    Q_OBJECT

public:
    explicit add(QWidget *parent = nullptr);
    ~add();
    QString newname;
    QString key;
signals:
        void mysigname(QString name,QString key);
private slots:
    void on_pushButton_clicked();

private:
    Ui::add *ui;
};

#endif // ADD_H

add.cpp

#include "add.h"
#include "ui_add.h"

add::add(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::add)
{
    ui->setupUi(this);
}

add::~add()
{
    delete ui;
}

void add::on_pushButton_clicked()
{
    newname=ui->lineEdit->text();
    key=ui->lineEdit_2->text();
    emit mysigname(newname,key);
}

main.cpp

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

效果如下：

基本窗口：

注册窗口：

【Note2】下来看看html版本的实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="text.css">
</head>
<body>
        <div id="LoginBox">
        <h1>LOGIN</h1>
        <div class="text">
            <div class="item">
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            <input type="text" placeholder="username">
            </div>
            <div class="item">
            <i class="fa fa-key" aria-hidden="true"></i>
            <input type="text" placeholder="passward">
        
            </div>
            <div class="bu">
            <button>Login</button>
            </div>
        </div>
    </div>
</body>
</html>

【css】：

/* CSS Document */



#LoginBox {
    border:1px solid #000000;
    width: 30%;
    height: 300px;
    margin: auto;
    margin-top: 150px;
    text-align: center;
    opacity: 0.5;
}

.text {
    margin-top: 50px;
}

.item input{
    border: 0;
    border-bottom: 3px solid #000000;
    padding: 5px 10px;
    background: #ffffff00;
    color: #fff;
    font-style: oblique;
    font-size: 18px;
    
}

.bu button{
    margin-top: 30px;
    height: 30px;
    width: 80px;
    text-align: center;
    
}

body {
    background: url("../picture/timg4.jpg");
    background-size: cover;
}

h1 {
    color: aliceblue;
    font-style:oblique;
}

界面效果如下：

两种方法实现登陆界面（QT和HTML）

猜你喜欢