创建登录框

6 篇文章 0 订阅

1.创建窗口

首先,创建一个主窗口


然后,创建登录框,需要用户输入用户名和密码



两个窗口的关联就在主函数完成即可,如下:

Widget w;
    loginDlg login;
    if(login.exec() == QDialog::Accepted)
    {
        w.show();
        return a.exec();
    }

整个工程如图所示:


logTest.pro代码:

#-------------------------------------------------
#
# Project created by QtCreator 2016-12-23T16:36:04
#
#-------------------------------------------------

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = logTest
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0


SOURCES += main.cpp\
        widget.cpp \
    logindlg.cpp

HEADERS  += widget.h \
    logindlg.h

FORMS    += widget.ui \
    logindlg.ui

logindlg.h代码:

#ifndef LOGINDLG_H
#define LOGINDLG_H

#include <QDialog>

namespace Ui {
class loginDlg;
}

class loginDlg : public QDialog
{
    Q_OBJECT

public:
    explicit loginDlg(QWidget *parent = 0);
    ~loginDlg();

private slots:
    void on_loginBtn_clicked();

private:
    Ui::loginDlg *ui;
};

#endif // LOGINDLG_H

widget.h代码:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;
};

#endif // WIDGET_H
loginDlg.cpp代码:

#include "logindlg.h"
#include "ui_logindlg.h"
#include <QMessageBox>

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

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

void loginDlg::on_loginBtn_clicked()
{
    if(ui->userlineEdit->text()==tr("admin")&&ui->pwdlineEdit->text()==tr("123456"))
    {
        accept();
    }
    else
    {
        QMessageBox::warning(this,tr("warning"),tr("username or password error !!!"),QMessageBox::Yes);
    }
}

main.cpp代码:

#include "widget.h"
#include <QApplication>
#include "logindlg.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    loginDlg login;
    if(login.exec() == QDialog::Accepted)
    {
        w.show();
        return a.exec();
    }
    else
        return 0;
}
Widget.cpp代码:
#include "widget.h"
#include "ui_widget.h"

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

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

logindlg.ui代码:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>loginDlg</class>
 <widget class="QDialog" name="loginDlg">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Dialog</string>
  </property>
  <widget class="QLineEdit" name="userlineEdit">
   <property name="geometry">
    <rect>
     <x>170</x>
     <y>80</y>
     <width>113</width>
     <height>20</height>
    </rect>
   </property>
  </widget>
  <widget class="QLineEdit" name="pwdlineEdit">
   <property name="geometry">
    <rect>
     <x>170</x>
     <y>120</y>
     <width>113</width>
     <height>20</height>
    </rect>
   </property>
   <property name="echoMode">
    <enum>QLineEdit::Password</enum>
   </property>
  </widget>
  <widget class="QLabel" name="label">
   <property name="geometry">
    <rect>
     <x>90</x>
     <y>80</y>
     <width>54</width>
     <height>12</height>
    </rect>
   </property>
   <property name="text">
    <string>用户名:</string>
   </property>
  </widget>
  <widget class="QLabel" name="label_2">
   <property name="geometry">
    <rect>
     <x>90</x>
     <y>120</y>
     <width>54</width>
     <height>12</height>
    </rect>
   </property>
   <property name="text">
    <string>密码:</string>
   </property>
  </widget>
  <widget class="QPushButton" name="loginBtn">
   <property name="geometry">
    <rect>
     <x>80</x>
     <y>210</y>
     <width>75</width>
     <height>23</height>
    </rect>
   </property>
   <property name="text">
    <string>登录</string>
   </property>
  </widget>
  <widget class="QPushButton" name="exitBtn">
   <property name="geometry">
    <rect>
     <x>180</x>
     <y>210</y>
     <width>75</width>
     <height>23</height>
    </rect>
   </property>
   <property name="text">
    <string>退出</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections>
  <connection>
   <sender>exitBtn</sender>
   <signal>clicked()</signal>
   <receiver>loginDlg</receiver>
   <slot>close()</slot>
   <hints>
    <hint type="sourcelabel">
     <x>217</x>
     <y>221</y>
    </hint>
    <hint type="destinationlabel">
     <x>199</x>
     <y>149</y>
    </hint>
   </hints>
  </connection>
 </connections>
</ui>

widget.ui代码:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
  <widget class="QLabel" name="label">
   <property name="geometry">
    <rect>
     <x>110</x>
     <y>100</y>
     <width>211</width>
     <height>81</height>
    </rect>
   </property>
   <property name="font">
    <font>
     <pointsize>36</pointsize>
    </font>
   </property>
   <property name="text">
    <string>登陆成功</string>
   </property>
  </widget>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

源码下载:

点击打开链接


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue架中创建登录页面,你可以按照以下步骤进行操作: 1. 首先,在Vue项目的src目录下创建一个新的组件,可以命名为Login.vue。这个组件将用于渲染登录页面的内容。 2. 在Login.vue组件中,可以使用Vue的模板语法编写登录页面的HTML结构,包括输入、按钮等元素。可以使用Vue的数据绑定功能来实现输入与组件数据的双向绑定。 3. 在Login.vue组件中,可以使用Vue的计算属性来处理登录逻辑。例如,可以在计算属性中定义一个login方法,用于处理用户点击登录按钮时的操作。在这个方法中,可以获取用户输入的用户名和密码,并进行相应的验证。 4. 在Login.vue组件中,可以使用Vue的路由功能来实现页面跳转。例如,可以在登录成功后,使用Vue的路由导航功能将用户重定向到主页。 5. 最后,在Vue项目的入口文件(通常是main.js)中,将Login.vue组件注册为一个路由页面。这样,当用户访问登录页面时,Vue将会渲染并显示Login.vue组件。 通过以上步骤,你就可以在Vue架中创建一个简单的登录页面了。当然,具体的实现方式还取决于你的项目需求和设计。希望对你有所帮助! #### 引用[.reference_title] - *1* *2* *3* [vue架的创建最新版](https://blog.csdn.net/weixin_51759592/article/details/125384484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值