【0904作业】QT 完成登陆界面跳转到聊天室+完成学生管理系统的查找和删除功能
一、完成登陆界面跳转到聊天室
1> 项目结构
2> 源码
① .pro
②main
#include "mywnd.h"
#include"chatCli.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);MyWnd w;w.show();Form f;QObject::connect(&w, &MyWnd::jump,&f,&Form::jump_slot);return a.exec();
}
③ mywnd.h
#ifndef MYWND_H
#define MYWND_H#include <QWidget>
#include<QDebug>
#include<QString>
#include<QMessageBox>QT_BEGIN_NAMESPACE
namespace Ui { class MyWnd; }
QT_END_NAMESPACEclass MyWnd : public QWidget
{Q_OBJECTsignals:void jump(); //跳转界面的自定义信号函数 //jump是在头文件中自定义的信号函数public slots:void login_slot(); //登陆界面的自定义的槽函数public:MyWnd(QWidget *parent = nullptr);~MyWnd();private:Ui::MyWnd *ui;
};
#endif // MYWND_H
④ mywnd.cpp
#include "mywnd.h"
#include "ui_mywnd.h"MyWnd::MyWnd(QWidget *parent): QWidget(parent), ui(new Ui::MyWnd)
{ui->setupUi(this);//更改窗口标题this->setWindowTitle("MyQQ");//更改窗口图标this->setWindowIcon(QIcon(":/icon/wodepeizhenshi.png"));//更改logo图ui->logoLab->setPixmap(QPixmap(":/icon/logo.png"));ui->logoLab->setScaledContents(true); //设置内容自适应//更改 账号和密码labui->userNameLab->setPixmap(QPixmap(":/icon/userName.jpg"));ui->userNameLab->setScaledContents(true);ui->pwdLab->setPixmap(QPixmap(":/icon/passwd.jpg"));ui->pwdLab->setScaledContents(true);//设置账户和密码editui->userNameEdit->setPlaceholderText("QQ/邮箱/手机");ui->pwdEdit->setPlaceholderText("密码");ui->pwdEdit->setEchoMode(QLineEdit::Password);//对按钮设置图标ui->loginBtn->setIcon(QIcon(":/icon/login.png"));ui->cancelBtn->setIcon(QIcon(":/icon/cancel.png"));//将登录按钮连接到自定义的槽函数中connect(ui->loginBtn,&QPushButton::clicked,this,&MyWnd::login_slot);//将取消按钮连接到自定义的槽函数中connect(ui->cancelBtn,SIGNAL(pressed()),this,SLOT(close()));}MyWnd::~MyWnd() //析构函数的定义
{delete ui; //释放ui指针的内存
}void MyWnd::login_slot()
{QString username = ui->userNameEdit->text();QString pwd = ui->pwdEdit->text();if(username == "admin" && pwd == "123456"){qDebug()<<"登录成功";QMessageBox box(QMessageBox::Information,"提示","登录成功",QMessageBox::Yes,this);int ret = box.exec();if(ret == QMessageBox::Yes){emit jump();this->close();}}else{qDebug()<<"登录失败";//静态成员函数版本对话框实现,无需实例化对象,直接调用静态成员函数即可(函数名自带Icon)int ret = QMessageBox::question(this,"问题","账号密码不匹配,是否重新登录!?", //对话框中文本内容QMessageBox::Yes|QMessageBox::No, //提供的按钮QMessageBox::Yes); //默认选中的按钮//对用户点击的按钮进行判断if(ret == QMessageBox::Yes){ui->pwdEdit->clear(); //清楚密码框内容}else{this->close(); //关闭本界面}}
}
⑤ charCli.h
#ifndef FORM_H
#define FORM_H#include <QWidget>
#include <QDebug>
#include <QTcpServer>
#include <QTcpSocket>
#include <QMessageBox>namespace Ui {
class Form;
}class Form : public QWidget
{Q_OBJECTpublic:explicit Form(QWidget *parent = nullptr);~Form();public slots:void jump_slot(); //跳转界面的自定义的槽函数void on_connectBtn_clicked();void connected_slot(); //自定义处理connected信号的槽函数void readyRead_slot(); //自定义处理readyRead信号的槽函数void disconnected_slot(); //自定义处理disconnected信号的槽函数void on_disConnectBtn_clicked();void on_sendBtn_clicked();private:Ui::Form *ui;QTcpSocket * socket; //定义一个客户端指针QString username; //将用户名设置为类中的私有成员,以便槽函数访问
};#endif // FORM_H
⑥ charCli.cpp
#include "chatCli.h"
#include "ui_chatCli.h"Form::Form(QWidget *parent) :QWidget(parent),ui(new Ui::Form)
{ui->setupUi(this);//将发送区域的组件设置为不可用状态ui->sendBtn->setEnabled(false);ui->msgEdit->setEnabled(false);ui->disConnectBtn->setEnabled(false);//实例化客户端指针socket = new QTcpSocket(this); //此刻就有一个客户端了//如果连接服务器成功,那么该客户端就会自动发射一个connected信号,我们可以将信号连接到槽函数中处理相关逻辑connect(socket,&QTcpSocket::connected,this,&Form::connected_slot);//如果服务器向客户端发送了数据,那么客户端会自动发起一个readyRead信号,我们可以将信号连接到槽函数中处理相关逻辑connect(socket,&QTcpSocket::readyRead,this,&Form::readyRead_slot);//如果成功断开与服务器的连接,那么该套接字就会自动发射一个disconnected的信号connect(socket,&QTcpSocket::disconnected,this,&Form::disconnected_slot);
}Form::~Form()
{delete ui;
}void Form::jump_slot()
{this->show();
}//连接服务器按钮对应的槽函数
void Form::on_connectBtn_clicked()
{//获取ui界面中的信息 connrctToHost参数1username = ui->userNameEdit->text();QString ip = ui->ipEdit->text();quint16 port = ui->portEidt->text().toUInt();//调用connectToHost函数连接服务器socket->connectToHost(ip,port);//如果连接服务器成功,那么该客户端就会自动发射一个connected信号,我们可以将信号连接到槽函数中处理相关逻辑//connect(socket,&QTcpSocket::connected,this,&Widget::connected_slot);
}//自定义处理connected信号的槽函数
void Form::connected_slot()
{//设置组件的可用状态ui->msgEdit->setEnabled(true);ui->sendBtn->setEnabled(true);ui->disConnectBtn->setEnabled(true);ui->userNameEdit->setEnabled(false);ui->ipEdit->setEnabled(false);ui->portEidt->setEnabled(false);ui->connectBtn->setEnabled(false);QString msg = username + ":已进入聊天室"; //准备数据发送给服务器socket->write(msg.toLocal8Bit()); //将数据写入socket套接字
}//自定义处理readyRead信号的槽函数
void Form::readyRead_slot()
{QByteArray msg = socket->readAll(); //读取所有套接字中的数据ui->msgList->addItem(QString::fromLocal8Bit(msg)); //将数据展示在ui界面
}//自定义发送按钮的槽函数
void Form::on_sendBtn_clicked()
{QString m = ui->msgEdit->text(); //获取要发送的信息QString msg = username + ":" + m; //整合要发送给服务器的数据socket->write(msg.toLocal8Bit()); //write的数据应该为QByteArray的,QString类型可以使用toLocal8Bit转换成QByteArray类型ui->msgEdit->clear(); //清空发送框的数据
}//自定义断开服务器按钮的
void Form::on_disConnectBtn_clicked()
{QString msg = username + ":已离开聊天室";socket->write(msg.toLocal8Bit());socket->disconnectFromHost();
}//自定义处理disconnected信号的槽函数
void Form::disconnected_slot()
{QMessageBox::information(this,"退出","退出聊天室");//设置组件的可用状态ui->msgEdit->setEnabled(false);ui->sendBtn->setEnabled(false);ui->disConnectBtn->setEnabled(false);ui->userNameEdit->setEnabled(true);ui->ipEdit->setEnabled(true);ui->portEidt->setEnabled(true);ui->connectBtn->setEnabled(true);
}
3> 效果展示
二、学生管理系统的查找和删除功能
//查找按钮对应的槽函数
void Widget::on_serachBtn_clicked()
{//清空信息ui->tableWidget->clear();//1、获取ui界面的信息(学号、姓名)int numb_ui = ui->numbEdit->text().toUInt();QString name_ui = ui->nameEdit->text();//2、判断是否有漏填数据if(numb_ui == 0 || name_ui.isEmpty()){QMessageBox::information(this,"提示","请将查询信息补充完整");return;}//3、准备sql语句QString sql = QString("select * from myTable WHERE numb = '%1' AND name = '%2'").arg(numb_ui).arg(name_ui);qDebug()<<sql;//4、实例化一个执行者QSqlQuery querry;if(!querry.exec(sql)){QMessageBox::information(this,"失败","查找失败");return;}
// if(!querry.next())
// {
// QMessageBox::information(this,"失败","查找失败,无匹配数据");
// return;
// }int i = 0;//5、遍历查找到的数据,并将数据填充到ui界面中while(querry.next()){for(int j = 0 ;j<querry.record().count()-1;j++){ui->tableWidget->setItem(i,j,new QTableWidgetItem(querry.record().value(j+1).toString()));}}
}//删除按钮对应的槽函数
void Widget::on_deleteBtn_clicked()
{//清空信息ui->tableWidget->clear();//1、从ui界面获取信息(学号、姓名)int numb_ui = ui->numbEdit->text().toUInt();QString name_ui = ui->nameEdit->text();//2、判断数据是否漏填if(numb_ui == 0 || name_ui.isEmpty()){QMessageBox::information(this,"提示","请将删除信息补充完整");return;}//3、准备sql语句QString sql = QString("delete from myTable WHERE numb = '%1' AND name = '%2'").arg(numb_ui).arg(name_ui);//4、实例化一个执行者QSqlQuery querry;if(!querry.exec(sql)){QMessageBox::information(this,"失败","删除失败");return;}else{QMessageBox::information(this,"成功","删除成功");}
}
1> 效果展示
查找
删除
相关文章:
![](https://img-blog.csdnimg.cn/0d012b69db4547e6881eae02e0aa2eb8.png)
【0904作业】QT 完成登陆界面跳转到聊天室+完成学生管理系统的查找和删除功能
一、完成登陆界面跳转到聊天室 1> 项目结构 2> 源码 ① .pro ②main #include "mywnd.h" #include"chatCli.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MyWnd w;w.show();Form f;QObject::co…...
![](https://www.ngui.cc/images/no-images.jpg)
ceph源码阅读 buffer
ceph::buffer是ceph非常底层的实现,负责管理ceph的内存。ceph::buffer的设计较为复杂,但本身没有任何内容,主要包含buffer::list、buffer::ptr、buffer::hash。这三个类都定义在src/include/buffer.h和src/common/http://buffer.cc中。 buffe…...
![](https://img-blog.csdnimg.cn/5519a7c02a5a448798b9d5e120f886b8.jpeg)
基本介绍——数据挖掘
1.数据挖掘的定义 数据挖掘是采用数学的、统计的、人工智能和神经网络等领域的科学方法,如记忆推理、聚类分析、关联分析、决策树、神经网络、基因算法等技术,从大量数据中挖掘出隐含的、先前未知的、对决策有潜在价值的关系、模式和趋势,并…...
![](https://www.ngui.cc/images/no-images.jpg)
Navicat连接postgresql时出现‘datlastsysoid does not exist‘报错
当使用 Navicat 连接 PostgreSQL 数据库时出现 ‘datlastsysoid does not exist’ 的错误报错,这可能是由于 Navicat 版本与 PostgreSQL 版本不兼容所致。 这是因为在较新的 PostgreSQL 版本中移除了 ‘datlastsysoid’ 列,但可能较旧版本的 Navicat 尚…...
![](https://img-blog.csdnimg.cn/b5c02e22b0a54d1cb4e9b36b5011c4c8.png)
冯诺依曼体系结构/什么是OS?
一、体系结构图 示意图 控制器可以控制其它4个硬件,四个硬件直接可以进行数据传输。 5大硬件 但是这些个体需要用“线”连接。 为什么要有存储器? 如果没有,实际速度则为输入、输出设备的速度。 加上后,变为内存的速度。&#…...
![](https://www.ngui.cc/images/no-images.jpg)
SD卡/TF卡简记
文章目录 MicroSD卡与SD卡关系与区别对比NM卡、XQD卡、CFexpress卡SD规格标识FAQ拍摄1080p或2k视频需要什么速度的sd卡?拍摄4k视频需要什么速度的sd卡?拍摄8k视频需要什么速度的sd卡? MicroSD卡与SD卡关系与区别 MicroSD卡原名为Trans-flash…...
![](https://www.ngui.cc/images/no-images.jpg)
Dockerfile COPY的奇怪行为:自动解包一级目录
记录一下今天遇到的坑:Dockerfile 这两天在部署项目的时候,新加进去了一个驱动,需要将2个文件夹以及1个文件COPY进镜像,大刀阔斧一个Dockerfile就写完了,结果COPY进去的文件有问题,Dockerfile的内容如下&am…...
![](https://www.ngui.cc/images/no-images.jpg)
【每日一题Day311】LC1761一个图中连通三元组的最小度数 | 枚举
一个图中连通三元组的最小度数【LC1761】 给你一个无向图,整数 n 表示图中节点的数目,edges 数组表示图中的边,其中 edges[i] [ui, vi] ,表示 ui 和 vi 之间有一条无向边。 一个 连通三元组 指的是 三个 节点组成的集合且这三个点…...
![](https://www.ngui.cc/images/no-images.jpg)
前端日期减一天的笑话
vue日期减一天 给大家讲一个真实的笑话。最近做的一个项目,要统计不同年月日期的关联交易数量,由于和银行内数据对接取得数据都是T-1的,所以在首页根据日期统计一些交易数据量时默认是统计昨日的数据量。所以当时和前端约定好的让前端的妹子做…...
![](https://img-blog.csdnimg.cn/img_convert/44454a42753f7b70197dd78811dad6e7.jpeg)
高效能,一键批量剪辑,AI智剪让创作更轻松
在今天的数字化时代,视频制作已经成为各种行业和领域的必备技能。然而,视频剪辑过程往往繁琐且耗时,大大降低了我们的工作效率。幸运的是,随着人工智能技术的发展,我们有了新的解决方案——AI智剪软件。 AI智剪软件&am…...
![](https://img-blog.csdnimg.cn/7636e7c42af94cd5a574c20f2f2f34c1.png#pic_center)
手写Mybatis:第15章-返回Insert操作自增索引值
文章目录 一、目标:Insert自增索引值二、设计:Insert自增索引值三、实现:Insert自增索引值3.1 工程结构3.2 Insert自增索引值类图3.3 修改执行器3.3.1 修改执行器接口3.3.2 抽象执行器基类 3.4 键值生成器3.4.1 键值生成器接口3.4.2 不用键值…...
![](https://www.ngui.cc/images/no-images.jpg)
【数据结构】动态数组(vector)的基本操作,包括插入、删除、扩容、输出、释放内存等。以下是代码的解释和注释:
这段C代码实现了一个动态数组(vector)的基本操作,包括插入、删除、扩容、输出、释放内存等。以下是代码的解释和注释: // 引入标准输入输出库和标准库函数,用于后续的内存分配和打印输出等操作 #include <stdio.…...
![](https://img-blog.csdnimg.cn/00190330434348ff9d9cb5d6c7ca87a0.gif)
[unity]三角形顶点顺序
序 详见官方文档:Unity - Manual: Mesh data (unity3d.com) Topology:拓扑结构 翻译: 拓扑描述网格具有的面类型。 网格的拓扑定义了索引缓冲区的结构,索引缓冲区又描述了顶点位置如何组合成面。每种类型的拓扑都使用索引数组中…...
![](https://img-blog.csdnimg.cn/802990a0ce1a42e69cf2e5fb7865ed21.png)
【python爬虫】14.Scrapy框架讲解
文章目录 前言Scrapy是什么Scrapy的结构Scrapy的工作原理 Scrapy的用法明确目标与分析过程代码实现——创建项目代码实现——编辑爬虫代码实现——定义数据代码实操——设置代码实操——运行 复习 前言 前两关,我们学习了能提升爬虫速度的进阶知识——协程…...
![](https://img-blog.csdnimg.cn/img_convert/74a913a96c5fc0354bcd425ab8d3ec65.png)
功率放大器主要作用是什么呢
功率放大器是一种电子设备,主要作用是将输入信号的功率增加到更高的水平,以便能够驱动高功率负载。在许多应用中,信号源产生的信号往往具有较低的功率,无法直接满足一些要求较高的设备或系统的需求。而功率放大器则可以增强信号的…...
![](https://www.ngui.cc/images/no-images.jpg)
SpringBoot ApplicationEvent详解
ApplicationStartingEvent 阶段 LoggingApplicationListener#onApplicationStartingEvent 初始化日志工厂,LoggingSystemFactory接口,可以通过spring.factories进行定制 可以通过System.setProperty("org.springframework.boot.logging.LoggingSystem",&q…...
![](https://www.ngui.cc/images/no-images.jpg)
WebSocket 报java.io.IOException: 远程主机强迫关闭了一个现有的连接。
在客户端强制关闭时,或者窗口强制关闭时,后端session没有关闭。 有时还会报:java.io.EOFException: 这个异常 前端心跳没有收到信息,还在心跳。 CloseReason close new CloseReason(CloseReason.CloseCodes.NORMAL_CLOSURE, &…...
![](https://img-blog.csdnimg.cn/cc01b723b3ff4d0aa318ee407d38049b.png)
关于git约定式提交IDEA
背景 因为git提交的消息不规范导致被乱喷,所以领导统一规定了约定式提交 官话 约定式提交官网地址 约定式提交规范是一种基于提交信息的轻量级约定。 它提供了一组简单规则来创建清晰的提交历史; 这更有利于编写自动化工具。 通过在提交信息中描述功能…...
![](https://img-blog.csdnimg.cn/0aab773f8cfd4bfa9f3e6a2be4cde27a.png)
【计算机网络】http协议
目录 前言 认识URL URLEncode和URLDecode http协议格式 http方法 GET POST GET与POST的区别 http状态码 http常见header 简易的http服务器 前言 我们在序列化和反序列化这一章中,实现了一个网络版的计算器。这个里面设计到了对协议的分析与处…...
![](https://www.ngui.cc/images/no-images.jpg)
仓库太大,clone 后,git pull 老分支成功,最新分支失败
由于 git 仓库太大,新加入的小伙伴在拉取时,无法切换到最新的分支,报错如下: fetch-pack: unexpected disconnect while reading sideband packet fatal: early EOF fatal: fetch-pack: invalid index-pack output在此记录解决步…...
![](https://www.ngui.cc/images/no-images.jpg)
javafx Dialog无法关闭
// 生成二维码图片String qrCodeText "https://example.com";DialogPane grid new DialogPane();grid.setPadding(new Insets(5));VBox vBox new VBox();vBox.setAlignment(Pos.CENTER);Image qrCodeImage generateQRCodeImage(qrCodeText);ImageView customImag…...
![](https://img-blog.csdnimg.cn/c2dcee5eda92455699338f97ca5d9fb8.png)
vue3中TCplayer应用
环境win10:vitevue3elementUI 1 安装 npm install tcplayer.js2 使用 <template><div><video id"player-container-id" width"414" height"270" preload"auto" playsinline webkit-playsinline></video>&l…...
![](https://img-blog.csdnimg.cn/9820a0308eb74dcfaaa842084dbbc7ec.png)
算法通关村14关 | 数据流中位数问题
1. 数据流中位数问题 题目 LeetCode295: 中位数是有序列表中间的数,如果列表长度是偶数,中位数是中间两个数的平均值, 例如:[2,3,4]的中位数是3, [2,3]中位数是(23)/ 2 2.5 设计一个数据结构: …...
![](https://www.ngui.cc/images/no-images.jpg)
工厂模式 与 抽象工厂模式 的区别
工厂模式: // 抽象产品接口 interface Product {void showInfo(); }// 具体产品A class ConcreteProductA implements Product {Overridepublic void showInfo() {System.out.println("This is Product A");} }// 具体产品B class ConcreteProductB impl…...
![](https://img-blog.csdnimg.cn/cc16d5fd094d460aa3a0d271ed5d8e5a.png)
安装虚拟机+安装/删除镜像
安装虚拟机 注意,官网可能无法登录,导致无法从官网下载,就自己去网上搜靠谱的下载,我用的16.2.3 删除镜像 Vm虚拟机怎么删除已经创建的系统?Vm虚拟机创建好之后iso删除方法 - 系统之家 (xitongzhijia.net) 安装镜像…...
![](https://img-blog.csdnimg.cn/img_convert/861f6d487b3170d76ff619b9684813df.png)
MySQL的内置函数复合查询内外连接
文章目录 内置函数时间函数字符串函数数学函数其他函数 复合查询多表笛卡尔积自连接在where中使用子查询多列子查询在from中使用子查询 内连接外连接左外连接右外连接 内置函数 时间函数 函数描述current_date()当前日期current_time()当前时间current_timestamp()当前时间戳…...
![](https://img-blog.csdnimg.cn/img_convert/f7d8aec002d78841f72e60c951609f1c.png)
操作系统(OS)与系统进程
操作系统(OS)与系统进程 冯诺依曼体系结构操作系统(Operator System)进程基本概念进程的描述(PCB)查看进程通过系统调用获取进程标示符(PID)通过系统调用创建进程(fork)进程状态&…...
![](https://www.ngui.cc/images/no-images.jpg)
防重复提交:自定义注解 + 拦截器(HandlerInterceptor)
防重复提交:自定义注解 拦截器(HandlerInterceptor) 一、思路: 1、首先自定义注解; 2、创建拦截器实现类(自定义类名称),拦截器(HandlerInterceptor); 3…...
![](https://img-blog.csdnimg.cn/e81b6c864634479db0445c205ad7abe0.png)
Excel中将文本格式的数值转换为数字
在使用excel时,有时需要对数字列进行各种计算,比如求平均值,我们都知道应该使用AVERAGE()函数,但是很多时候结果却“不尽如人意”。 1 问题: 使用AVERAGE函数: 结果: 可以看到单元格左上角有个…...
![](https://img-blog.csdnimg.cn/5d3e953c079e4ba3a11cb6d1f64f4b73.png)
uni-app开发小程序中遇到的map地图的点聚合以及polygon划分区域问题
写一篇文章来记录以下我在开发小程序地图过程中遇到的两个小坑吧,一个是点聚合,用的是joinCluster这个指令,另一个是polygon在地图上划分多边形的问题: 1.首先说一下点聚合问题,由于之前没有做过小程序地图问题&#…...
![](/images/no-images.jpg)
做网站刷东西/营销网店推广的软文
如果存在自增列那就比较麻烦,需要写明需要插入列的具体名称,比较麻烦,可以用下面的语句实现。 --删除主键 ALTER TABLE 表名 DROP constraint 主键约束; --删除ID alter table 表名 drop column ID; --新增ID alter table 表名 add ID in…...
flash网站素材下载/永久免费用的在线客服系统
内核:3.3 平台:rlx 涉及的主要文件有 include/linux/clk.h drivers/clk/clkdev.c drivers/clk/clk.c arch/rlx/bsp/clock.c 1、 clk通用接口 内核定义了一套标准的接口(include/linux/clk.h),用于所有的平台之上。每个时钟源对象使用…...
![](/images/no-images.jpg)
电商网站建设教案/今天时政新闻热点是什么
10月20日,一年一度的数据库技术交流盛会——DTCC 2021(第十二届中国数据库技术大会)在京圆满落幕。 大会以“数造未来”为主题,重点围绕数据架构、人工智能与大数据应用、传统企业数据库实践和国产开源数据库等内容展开分享和探讨…...
![](/images/no-images.jpg)
最新备案网站查询/在线排名优化工具
跨浏览器的本地存储多种方式,例如:1、localStorage:只支持IE8、FireFox、Chrome、Opera等,不支持IE8以下的浏览器。2、浏览器Cookie:支持的数据存储量相对较少,每个domain最多只能有20条cookie,每个cookie长…...
![](https://img-blog.csdnimg.cn/img_convert/5e5615532b4cb87eed66c29cbb8332ad.png)
长沙工程建设管理中心网站/seo专业实战培训
从今年开始除了5G之外,智能手机还迎来了几个重要更新,一个就是UFS 3.1,一个WiFi 6,还有一个就是LPDDR5,也就是第五代低功耗内存版本,手机内存性能提升的同时,大小容量也在不断提升,已…...
![](/images/no-images.jpg)
wordpress区分移动站/企业网站注册
项目场景: element UI 利用指令loading制作局部loading。 问题描述: 需要制作局部loading的页面很长,loading 时可以向下滚动,导致遮罩层遮挡不了页面的下半部分。 解决方案: 在loading时利用overflow: hidden;禁止…...