【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; }
界面效果如下：
