QT C++实践|超详细数据库的连接和增删改查操作|附源码

0:前言

🪧 什么情况需要数据库?

  • 1 大规模的数据需要处理(比如上千上万的数据量)
  • 2 需要把数据信息存储起来,无论是本地还是服务上,而不是断电后数据信息就消失了。

如果不是上面的原因化,一般可以使用数组来处理。

 🪧一般常使用的数据库驱动是MYSQLQSQLITE。二者区别在于,前者用于服务器存储信息,后者用于本地存储信息。并且QSQLITE主要用于嵌入式,占用资源非常低,占用内存小,通常几百k就搞定。’

这里博主因为对MySQL熟悉一些,就使用MySQL来进行数据库的连接

一、Mysql的安装

因为我们项目的方案是程序的运行以及相关数据的存储都在一台主机上,所以不论打不打包。首先要在主机上安装Mysql的。Mysql的安装教程我参考的是这个:MySQL安装和配置教程(超详细版本)

安装好后,利用命令行或其他工具在MySQL中创建一个存储项目数据的数据库,方便之后使用QT用代码对数据库进行连接、建表和增删改查的操作:

  • Win+r打开cmd:输入命令“mysql -u root -p”,按下回车键
  • 输入MySQL密码,按下回车键
  • 创建数据库
create database [if not exists] 数据库名 [default charset 字符集] [collate 排序规则];

注意:不要忘记末尾的分号

二、通过ODBC连接MySQL数据库

官方解释:
ODBC(Open Database Connectivity,开放数据库互连)提供了一种标准的API(应用程序编程接口)方法来访问数据库管理系统(DBMS)。这些API利用SQL来完成其大部分任务。ODBC本身也提供了对SQL语言的支持,用户可以直接将SQL语句送给ODBC。ODBC的设计者们努力使它具有最大的独立性和开放性:与具体的编程语言无关,与具体的数据库系统无关,与具体的操作系统无关。
简单的说就是我的qt中含有ODBC的驱动:
在这里插入图片描述
所以利用ODBC去使用MySQL的数据库

2.1:下载ODBC

官网

在这里插入图片描述

选择和qt编译器相同的字节比如我的qt使用的是64字节的

下载完成后,点卡下载下来的.msi文件并运行:

在这里插入图片描述
下载一直点击next
在这里插入图片描述

选择custom,表示自定义安装(以便修改安装位置)

在这里插入图片描述
在这里插入图片描述

最后一直点击next然后再install即可,等待安装好后即可。

安装好之后,关闭窗口,搜索ODBC,并运行程序:
在这里插入图片描述

2.2:使用ODBC连接MySQL数据库

添加MySQL的DSN

在这里插入图片描述

红色的可以随便填,是自己对于ODBC驱动的描述,粉色的是MySQL的用户名和密码,数据库选择你在MySQL中创建的数据库名字即可:
在这里插入图片描述

点击Test,测试是否能够成功连接;如果出现下图说明连接成功

在这里插入图片描述

然后点击应用确定进行添加:
在这里插入图片描述

2.3:qt通过ODBC连接MySQL

现在main.cpp中加入下面代码测试一下能不能在qt中连接成功:

QSqlDatabase db = QSqlDatabase::addDatabase("QODBC");db.setHostName("127.0.0.1");db.setPort(3306);db.setDatabaseName("是你在ODBC中创建的Data source name");db.setUserName("用户名");db.setPassword("密码");bool ok = db.open();if (ok){QMessageBox::information(this, "infor", "success");}else {QMessageBox::information(this, "infor", "open failed");qDebug()<<"error open database because"<<db.lastError().text();}

Tips:这里可能会报错:VS2019 C1083 无法打开包括文件: “QSqlDatabase”

是vs里面项目配置的问题。
看到这个错误应该是没有dll,然后sql很容易想到数据库,所以在qt模块里添加,比较方便。
在这里插入图片描述
在这里插入图片描述

不出意外运行程序可以成功连接:
在这里插入图片描述

之后在主机进行安装时,除了打包程序,应该还需要安装对应的Mysql和ODBC

2.4:qt通过ODBC操作数据库

连接上数据库一般就是使用数据库,进行对数据库的增删改查。
这里有三种方法。

🪧 首先单独建立一个头文件来处理数据库连接,如建立头文件connection.h:

#ifndef CONNECTION_H
#define CONNECTION_H#include <QMessageBox>
#include <QSqlDatabase>
#include <QSqlQuery>
#include <QDebug>static bool createConnection(){//连接第一个数据库//QMYSQLQSqlDatabase db = QSqlDatabase::addDatabase("QMYSQL", "connection1");//需要使用的数据库驱动和联检建立的名称(方便建立多个数据库连接【使用不同的数据库时】区分)db.setHostName("127.0.0.1");//连接地址db.setUserName("root");//数据库账户db.setPassword("root");//密码db.setPort(8889);//端口//test_majiang.dbdb.setDatabaseName("test_majiang");//需要用到的数据库if (!db.open()) {//如果数据库连接失败,则弹出//critical(QWidget *parent, const QString &title,//const QString &text,//QMessageBox::StandardButtons buttons = Ok,//QMessageBox::StandardButton defaultButton = NoButton)QMessageBox::critical(0, "Cannot open database","Unable to establish a database connection", QMessageBox::Cancel);return false;}return true;
}#endif // CONNECTION_H

如果需要移除一个数据库连接,可以使用:

 QSqlDatabase::close();//关闭数据库QSqlDatabase::removeDatabase();//移除该连接

2.4.1:使用QSqlQuery

头文件

#include "connection.h"
#include <QVariant>
#include <QSqlDriver>
#include <QSqlRecord>
#include <QSqlField>
#include <QSqlError>
  • 使用数据库前的准备:
    //创建数据库连接if(!createConnection()) return 1;//返回情况可以替换,视不同情况而定//指定某个数据库连接QSqlDatabase db2 = QSqlDatabase::database("connection1");
  • 开始对数据进行操作:
    首先创建QSqlQuery 对象,然后进行操作。
    QSqlDatabase db2 = QSqlDatabase::database("connection2");QSqlQuery query2(db2);
  • 进行创表和插入值:
   // qDebug() << "connection2:";//创建表,并插入值query2.exec("create table student (id int primary key,""name varchar(20))");query2.exec("insert into student values(0, 'Mike')");query2.exec("insert into student values(1, 'Lili')");query2.exec("insert into student values(2, 'Jame')");
  • 批量处理
    上面的单条插入语句明显比较麻烦,可以使用批量插入数据:
    query2.exec("insert into student(id,name) values(3,'Qinsong')");//单挑操作//名称绑定query2.prepare("insert into student(id, name) values(:id, :name)");int idValue = 4;QString nameValue = "Songjiang";query2.bindValue(":id", idValue);//绑定数据query2.bindValue(":name", nameValue);query2.exec();//执行//位置绑定query2.prepare("insert into student(id, name) values(?, ?)");int idValue2 = 5;QString nameValue2 = "LingChong";query2.addBindValue(idValue2);//绑定数据query2.addBindValue(nameValue2);if(!query2.execBatch()) qDebug() <<"位置绑定:" <<query2.lastError() <<endl;//如果执行不成功执行//批量处理query2.prepare("insert into student(id, name) values(?,?)");QVariantList ids;ids << 6 << 7 << 8;query2.addBindValue(ids);QVariantList names;names << "Qinghua" << "Nanda" << "Zhongkeda";query2.addBindValue(names);if(!query2.execBatch()) qDebug() << query2.lastError()<< endl;
  • 进行查询并输出查询结果:
    query2.exec("select * from student");//执行sql语句while(query2.next()){qDebug()<< query2.value(0).toInt() << query2.value(1).toString();}
  • 查看数据驱动支持特性
    查看当前数据库是否是支持某特性,比如当前记录的索引数(即结果条数):
    int numRows;if(db2.driver()->hasFeature(QSqlDriver::QuerySize)){//是否该特性qDebug()<< "has feature:query size";numRows = query2.size();}else{qDebug() << "no feature:query size";query2.last();numRows = query2.at() + 1;//使用at,需要之前使用quey2.next()遍历所有select搜索后的结果,而使用query2.size()则不需要}//此处执行上面的查询操作,下面的操作才有意义qDebug() << "row number: " << numRows;//指向索引为1的记录,即第二条记录query2.seek(1);//返回当前索引值qDebug() << "current index:" << query2.at();//获得当前行的记录QSqlRecord record = query2.record();//获得记录中"id"和"name"两个字段的值int id = record.value("id").toInt();QString name = record.value("name").toString();qDebug() <<"id" << id << "name:" <<name;//获得索引为1的字段,即第二个字段QSqlField field = record.field(1);//输出字段名和字段值,结果为"name"和"MaLiang"qDebug() << "second field:" << field.name()<< "field value:" << field.value().toString();
  • 事务(使数据操作变为原子性)
    如果中间有一步sql操作执行出错,则全部sql操作都不执行。
    QSqlDatabase db2 = QSqlDatabase::database("connection2");QSqlDatabase::database().transaction();//开始(类似于mutex线程锁)QSqlQuery query(db2);//此语句必须在上面一条语句的后面//执行sql操作QSqlDatabase::database().commit();//结束

2.4.2:使用QSqlQueryModel查询模型

优势:

  • 这是基于sql查询的只读模型,编写sql语句变得容易。

文件头:

#include <QSqlQueryModel>

核心代码:

  QSqlDatabase db = QSqlDatabase::database("connection1");QSqlQueryModel *model = new QSqlQueryModel(this);model->setQuery("select * from student", db);model->setHeaderData(0, Qt::Horizontal, tr("学号"));model->setHeaderData(1, Qt::Horizontal, tr("姓名"));model->setHeaderData(2, Qt::Horizontal, tr("课程"));QTableView *view = new QTableView(this);view->setModel(model);setCentralWidget(view);

2.4.3:使用QSqlTableModel表格模型⭐

先上结果
在这里插入图片描述

优势:

  • 编译的代码很容易适应其他的数据源,例如后面如果要使用xml文件来存储数据,只需要更换数据模型。

  • 提供了一次只能操作一个sql表的读/写模型,可以浏览和修改独立的sql表,并且只需编写很少的代码,无需了解sql语句。

  • 1 准备
    头文件:

#include <QSqlTableModel>
    QSqlTableModel* model;//创建对象指针
  • 2 进行操作:
    QSqlDatabase db = QSqlDatabase::database("connection1");model = new QSqlTableModel(this, db);//由于在窗口的类中创建对象,因此实例化对象时,使用this指针(指向操作函数的指针)作为父对象model->setTable("student");model->select();//执行//设置编辑策略model->setEditStrategy(QSqlTableModel::OnManualSubmit);//对所有模型改变立即用到数据库ui->tableView->setModel(model);
  • UI设计:
    在这里插入图片描述

  • 对应槽函数:

// 提交修改按钮
void MainWindow::on_pushButton_clicked()
{// 开始事务操作model->database().transaction();if (model->submitAll()) {if(model->database().commit()) // 提交QMessageBox::information(this, tr("tableModel"),tr("数据修改成功!"));} else {model->database().rollback(); // 回滚QMessageBox::warning(this, tr("tableModel"),tr("数据库错误: %1").arg(model->lastError().text()),QMessageBox::Ok);}
}// 撤销修改按钮
void MainWindow::on_pushButton_2_clicked()
{model->revertAll();
}// 查询按钮,进行筛选
void MainWindow::on_pushButton_5_clicked()
{QString name = ui->lineEdit->text();// 根据姓名进行筛选,一定要使用单引号model->setFilter(QString("name = '%1'").arg(name));model->select();
}// 显示全表按钮
void MainWindow::on_pushButton_6_clicked()
{model->setTable("student");model->select();
}// 按id升序排列按钮
void MainWindow::on_pushButton_7_clicked()
{//id字段,即第0列,升序排列model->setSort(0, Qt::AscendingOrder);model->select();}// 按id降序排列按钮
void MainWindow::on_pushButton_8_clicked()
{model->setSort(0, Qt::DescendingOrder);model->select();}
// 删除选中行按钮
void MainWindow::on_pushButton_4_clicked()
{// 获取选中的行int curRow = ui->tableView->currentIndex().row();// 删除该行model->removeRow(curRow);int ok = QMessageBox::warning(this,tr("删除当前行!"),tr("你确定删除当前行吗?"), QMessageBox::Yes, QMessageBox::No);if(ok == QMessageBox::No){ // 如果不删除,则撤销model->revertAll();} else { // 否则提交,在数据库中删除该行model->submitAll();}}
// 添加记录按钮
void MainWindow::on_pushButton_3_clicked()
{// 获得表的行数int rowNum = model->rowCount();int id = 10;// 添加一行model->insertRow(rowNum);model->setData(model->index(rowNum, 0), id);// 可以直接提交//model->submitAll();
}

三、项目实战

connection.h是负责连接数据库和创建表的头文件:

#ifndef CONNECTION_H
#define CONNECTION_H#include <QMessageBox>
#include <QSqlDatabase>
#include <QSqlQuery>
#include <QDebug>
#pragma execution_character_set("utf-8"); static bool createConnection() {//连接第一个数据库//QMYSQLQSqlDatabase db = QSqlDatabase::addDatabase("QODBC", "connection1");//需要使用的数据库驱动和联检建立的名称(方便建立多个数据库连接【使用不同的数据库时】区分)db.setHostName("127.0.0.1");//连接地址db.setUserName("root");//数据库账户db.setPassword("55667788");//密码db.setPort(3306);//端口//test.dbdb.setDatabaseName("test");//需要用到的数据库if (!db.open()) {//如果数据库连接失败,则弹出//critical(QWidget *parent, const QString &title,//const QString &text,//QMessageBox::StandardButtons buttons = Ok,//QMessageBox::StandardButton defaultButton = NoButton)QMessageBox::critical(0, "Cannot open database","Unable to establish a database connection", QMessageBox::Cancel);return false;}else {QMessageBox::information(NULL, "infor", "link success");}//下面来创建表//如果MySQL数据库中已经存在同名的表,则下面代码不会执行QSqlQuery query2(db);// qDebug() << "connection2:";
//创建表,并插入值query2.exec("create table student (id int primary key,""name varchar(20))");query2.exec("insert into student values(0, 'Mike')");query2.exec("insert into student values(1, 'Lili')");query2.exec("insert into student values(2, 'Jame')");}#endif // CONNECTION_H

Admin是操作数据库的管理界面:
在这里插入图片描述
Admin.h:

#pragma once#include <QMainWindow>
#include "ui_Admin.h"
#include <QSqlTableModel>
#pragma execution_character_set("utf-8"); class Admin : public QMainWindow
{Q_OBJECTpublic:Admin(QWidget *parent = nullptr);~Admin();QSqlTableModel* model;//创建对象指针private:Ui::AdminClass ui;private slots:void on_add_clicked();void on_modify_clicked();void on_del_clicked();void on_rollback_clicked();void on_show_all_clicked();
};

Admin.cpp:

#include "Admin.h"
#include <qmessagebox.h>
#include <QSqlDatabase>
#include <QMessageBox>
#include <qsqlerror.h>
#include "connection.h"
#include <QSqlTableModel>Admin::Admin(QWidget *parent): QMainWindow(parent)
{ui.setupUi(this);if (!createConnection()) {return;}QSqlDatabase db = QSqlDatabase::database("connection1");model = new QSqlTableModel(this, db);//由于在窗口的类中创建对象,因此实例化对象时,使用this指针(指向操作函数的指针)作为父对象model->setTable("student");model->select();//执行//设置编辑策略model->setEditStrategy(QSqlTableModel::OnManualSubmit);//对所有模型改变立即用到数据库ui.tableView->setModel(model);}Admin::~Admin()
{}// 添加记录按钮
void Admin::on_add_clicked()
{// 获得表的行数int rowNum = model->rowCount();int id = 10;// 添加一行model->insertRow(rowNum);model->setData(model->index(rowNum, 0), id);// 可以直接提交//model->submitAll();
}// 删除选中行按钮
void Admin::on_del_clicked()
{// 获取选中的行int curRow = ui.tableView->currentIndex().row();// 删除该行model->removeRow(curRow);int ok = QMessageBox::warning(this, tr("删除当前行!"),tr("你确定删除当前行吗?"), QMessageBox::Yes, QMessageBox::No);if (ok == QMessageBox::No){ // 如果不删除,则撤销model->revertAll();}else { // 否则提交,在数据库中删除该行model->submitAll();}}
// 撤销修改按钮
void Admin::on_rollback_clicked()
{model->revertAll();
}// 提交修改按钮
void Admin::on_modify_clicked()
{// 开始事务操作model->database().transaction();if (model->submitAll()) {if (model->database().commit()) // 提交QMessageBox::information(this, tr("tableModel"),tr("数据修改成功!"));}else {model->database().rollback(); // 回滚QMessageBox::warning(this, tr("tableModel"),tr("数据库错误: %1").arg(model->lastError().text()),QMessageBox::Ok);}
}
// 显示全表按钮
void Admin::on_show_all_clicked() {model->setTable("student");model->select();
}

功能正常:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2815695.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Node.js基础---加载机制

模块的加载机制 1. 优先成缓存中加载 模块在第一次加载后会被缓存&#xff0c;意味着多次调用 require() 不会导致模块代码被多次执行 注意&#xff1a;无论是什么模块都会优先从缓存内加载&#xff0c;以提高加载效率 2. 内置模块的加载机制 内置模块是 Node.js官网提供的模块…

Redisson限流算法

引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.12.3</version> </dependency>建议版本使用3.15.5以上 使用 这边写了一个demo示例&#xff0c;定…

编码技巧——Springboot工程加密yml配置/Maven引入本地二方包

1. 背景 基于Springboot的工程项目&#xff0c;通常很多信息都是在application.yml中直接明文配置的&#xff0c;比如数据库链接信息&#xff0c;redis链接信息等&#xff1b; 为了安全考虑&#xff0c;公司打算将yml配置文件中的数据库连接信息的账号&#xff0c;密码进行加…

【两颗二叉树】【递归遍历】【▲队列层序遍历】Leetcode 617. 合并二叉树

【两颗二叉树】【递归遍历】【▲队列层序遍历】Leetcode 617. 合并二叉树 解法1 深度优先 递归 前序解法2 采用队列进行层序遍历 挺巧妙的可以再看 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 解法1 深度优先 递归 前…

搭建LNMP环境并配置个人博客系统

LNMP是Linux&#xff08;操作系统&#xff09;、Nginx&#xff08;Web服务器&#xff09;、MySQL&#xff08;数据库&#xff09;和PHP&#xff08;脚本解释器&#xff09;的组合&#xff0c;常用于部署高性能的动态网站&#xff0c;如WordPress等博客平台 一、安装Linux操作系…

EMR StarRocks实战——猿辅导的OLAP演进之路

目录 一、数据需求产生 二、OLAP选型 2.1 需求 2.2 调研 2.3 对比 三、StarRocks的优势 四、业务场景和技术方案 4.1 整体的数据架构 4.2 BI自助/报表/多维分析 4.3 实时事件分析 4.5 直播教室引擎性能监控 4.4 B端业务后台—斑马 4.5 学校端数据产品—飞象星球 4…

EAP-TLS实验之Ubuntu20.04环境搭建配置(FreeRADIUS3.0)(四)

该篇主要介绍了利用配置ca.cnf、server.cnf、client.cnf在certs路径下生成证书文件&#xff08;非执行bootstrap脚本&#xff0c;网上也有很多直接通过openssl命令方式生成的文章&#xff09;&#xff0c;主要参考&#xff08;概括中心思想&#xff09;官方手册&#xff0c;以及…

【Python笔记-设计模式】备忘录模式

一、说明 备忘录模式是一种行为设计模式&#xff0c;允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。 (一) 解决问题 主要解决在不破坏封装性的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;并在对象之外保存这个状态&#xff0c;以便在需要时恢复对象…

智慧应急:构建全方位、立体化的安全保障网络

一、引言 在信息化、智能化快速发展的今天&#xff0c;传统的应急管理模式已难以满足现代社会对安全保障的需求。智慧应急作为一种全新的安全管理模式&#xff0c;旨在通过集成物联网、大数据、云计算、人工智能等先进技术&#xff0c;实现对应急事件的快速响应、精准决策和高…

尚硅谷(SpringCloudAlibaba微服务分布式)学习代码Eureka部分

1.项目结构 2.cloud2024 pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.a…

网络架构与组网部署——补充

5G网络架构的演进趋势 &#xff08;1&#xff09; MEC&#xff1a;多接入边缘计算。首先MEC可以实现5GC的功能&#xff0c;因为5GC是集中在机房中&#xff0c;所以当有MEC后&#xff0c;就可以把MEC下发到基站旁边&#xff0c;这样减少端到端的延时。便于实现5G中不同场景的实…

【Prometheus】基于Altertmanager发送告警到多个接收方、监控各种服务、pushgateway

基于Altertmanager发送报警到多个接收方 一、配置alertmanager-发送告警到qq邮箱1.1、告警流程1.2、告警设置【1】邮箱配置【2】告警规则配置【3】 部署prometheus【4】部署service 二、配置alertmanager-发送告警到钉钉三、配置alertmanager-发送告警到企业微信3.1、注册企业微…

GO语言环境安装---VScode.2024

目录 一、下载并安装GO 二、配置环境变量 三、VScode环境安装 由于工作原因&#xff0c;需要用到go来写web后端&#xff0c;正好从零记录下环境安装 一、下载并安装GO 首先在官网根据PC系统选择对应的包下载 源地址&#xff1a;https://go.dev/dl/ 打不开的用这个也行&a…

可观测性在威胁检测和取证日志分析中的作用

在网络中&#xff0c;威胁是指可能影响其平稳运行的恶意元素&#xff0c;因此&#xff0c;对于任何希望避免任何财政损失或生产力下降机会的组织来说&#xff0c;威胁检测都是必要的。为了先发制人地抵御来自不同来源的任何此类攻击&#xff0c;需要有效的威胁检测情报。 威胁…

2W字-35页PDF谈谈自己对QT某些知识点的理解

2W字-35页PDF谈谈自己对QT某些知识点的理解 前言与总结总体知识点的概况一些笔记的概况笔记阅读清单 前言与总结 最近&#xff0c;也在对自己以前做的项目做一个知识点的梳理&#xff0c;发现可能自己以前更多的是用某个控件&#xff0c;以及看官方手册&#xff0c;但是没有更…

[云原生] k8s之pod容器

一、pod的相关知识 1.1 Pod基础概念 Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理…

加密与安全_探索常用编码算法

文章目录 概述什么是编码编码分类ASCII码 &#xff08;最多只能有128个字符&#xff09;Unicode &#xff08;用于表示世界上几乎所有的文字和符号&#xff09;URL编码 &#xff08;解决服务器只能识别ASCII字符的问题&#xff09;实现&#xff1a;编码_URLEncoder实现&#xf…

Python3中真真假假True、False、None等含义详解

在Python中&#xff0c;不仅仅和类C一样的真假类似&#xff0c;比如1代表真&#xff0c;0代表假。Python中的真假有着更加广阔的含义范围&#xff0c;Python会把所有的空数据结构视为假&#xff0c;比如 [] (空列表)、 {} &#xff08;空集合&#xff09;、 &#xff08;空字符…

机器学习专项课程03:Unsupervised Learning, Recommenders, Reinforcement Learning笔记 Week01

Week 01 of Unsupervised Learning, Recommenders, Reinforcement Learning 本笔记包含字幕&#xff0c;quiz的答案以及作业的代码&#xff0c;仅供个人学习使用&#xff0c;如有侵权&#xff0c;请联系删除。 课程地址&#xff1a; https://www.coursera.org/learn/unsupervi…

精读《使用 css 变量生成颜色主题》

作者&#xff1a;五灵 本周工作中遇到类似颜色主题的问题&#xff0c;在查资料的时候&#xff0c;看到这个视频&#xff0c;觉得讲得很清楚&#xff0c;而且趣味性丰富&#xff0c;所以想拿出来讲讲这个很有意思的主题。 视频链接&#xff1a; CSSconf EU 2018 | Dag-Inge Aas…