恋恋风辰的官方博客

聊天项目(19) 实现搜索框和聊天列表
Posted on 2024-06-01 13:32:26 by 恋恋风辰 | In C++ | 原文链接

搜索框

我们需要实现如下效果

https://cdn.llfc.club/1717211817129.jpg

输入框默认不显示关闭按钮，当输入文字后显示关闭按钮，点击关闭按钮清空文字

添加CustomizeEdit类，头文件

  1. #ifndef CUSTOMIZEEDIT_H
  2. #define CUSTOMIZEEDIT_H
  3. #include <QLineEdit>
  4. #include <QDebug>
  6. class CustomizeEdit: public QLineEdit
  7. {
  8.     Q_OBJECT
  9. public:
  10.     CustomizeEdit(QWidget *parent = nullptr);
  11.     void SetMaxLength(int maxLen);
  12. protected:
  13.     void focusOutEvent(QFocusEvent *event) override
  14.     {
  15.         // 执行失去焦点时的处理逻辑
  16.         //qDebug() << "CustomizeEdit focusout";
  17.         // 调用基类的focusOutEvent()方法，保证基类的行为得到执行
  18.         QLineEdit::focusOutEvent(event);
  19.         //发送失去焦点得信号
  20.         emit sig_foucus_out();
  21.     }
  22. private:
  23.     void limitTextLength(QString text) {
  24.         if(_max_len <= 0){
  25.             return;
  26.         }
  28.         QByteArray byteArray = text.toUtf8();
  30.         if (byteArray.size() > _max_len) {
  31.             byteArray = byteArray.left(_max_len);
  32.             this->setText(QString::fromUtf8(byteArray));
  33.         }
  34.     }
  36.     int _max_len;
  37. signals:
  38.     void sig_foucus_out();
  39. };
  41. #endif // CUSTOMIZEEDIT_H

源文件

  1. #include "customizeedit.h"
  3. CustomizeEdit::CustomizeEdit(QWidget *parent):QLineEdit (parent),_max_len(0)
  4. {
  5.     connect(this, &QLineEdit::textChanged, this, &CustomizeEdit::limitTextLength);
  6. }
  8. void CustomizeEdit::SetMaxLength(int maxLen)
  9. {
  10.     _max_len = maxLen;
  11. }

设计师界面类里将ui->search_edit提升为CustomizeEdit

在ChatDialog的构造函数中设置输入的长度限制以及关闭等图标的配置

  1.     QAction *searchAction = new QAction(ui->search_edit);
  2.     searchAction->setIcon(QIcon(":/res/search.png"));
  3.     ui->search_edit->addAction(searchAction,QLineEdit::LeadingPosition);
  4.     ui->search_edit->setPlaceholderText(QStringLiteral("搜索"));
  7.     // 创建一个清除动作并设置图标
  8.     QAction *clearAction = new QAction(ui->search_edit);
  9.     clearAction->setIcon(QIcon(":/res/close_transparent.png"));
  10.     // 初始时不显示清除图标
  11.     // 将清除动作添加到LineEdit的末尾位置
  12.     ui->search_edit->addAction(clearAction, QLineEdit::TrailingPosition);
  14.     // 当需要显示清除图标时，更改为实际的清除图标
  15.     connect(ui->search_edit, &QLineEdit::textChanged, [clearAction](const QString &text) {
  16.         if (!text.isEmpty()) {
  17.             clearAction->setIcon(QIcon(":/res/close_search.png"));
  18.         } else {
  19.             clearAction->setIcon(QIcon(":/res/close_transparent.png")); // 文本为空时，切换回透明图标
  20.         }
  22.     });
  24.     // 连接清除动作的触发信号到槽函数，用于清除文本
  25.     connect(clearAction, &QAction::triggered, [this, clearAction]() {
  26.         ui->search_edit->clear();
  27.         clearAction->setIcon(QIcon(":/res/close_transparent.png")); // 清除文本后，切换回透明图标
  28.         ui->search_edit->clearFocus();
  29.         //清除按钮被按下则不显示搜索框
  30.         //ShowSearch(false);
  31.     });
  33.     ui->search_edit->SetMaxLength(15);

stylesheet.qss 中修改样式

  1. #search_wid{
  2.      background-color:rgb(247,247,247);
  3. }
  5. #search_edit {
  6.     border: 2px solid #f1f1f1;
  7. }

聊天记录列表

创建C++ 类ChatUserList

  1. #ifndef CHATUSERLIST_H
  2. #define CHATUSERLIST_H
  3. #include <QListWidget>
  4. #include <QWheelEvent>
  5. #include <QEvent>
  6. #include <QScrollBar>
  7. #include <QDebug>
  9. class ChatUserList: public QListWidget
  10. {
  11.     Q_OBJECT
  12. public:
  13.     ChatUserList(QWidget *parent = nullptr);
  14. protected:
  15.     bool eventFilter(QObject *watched, QEvent *event) override;
  17. signals:
  18.     void sig_loading_chat_user();
  19. };
  21. #endif // CHATUSERLIST_H

实现

  1. #include "chatuserlist.h"
  3. ChatUserList::ChatUserList(QWidget *parent):QListWidget(parent)
  4. {
  5.     Q_UNUSED(parent);
  6.      this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  7.      this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  8.     // 安装事件过滤器
  9.     this->viewport()->installEventFilter(this);
  10. }
  12. bool ChatUserList::eventFilter(QObject *watched, QEvent *event)
  13. {
  14.     // 检查事件是否是鼠标悬浮进入或离开
  15.     if (watched == this->viewport()) {
  16.         if (event->type() == QEvent::Enter) {
  17.             // 鼠标悬浮，显示滚动条
  18.             this->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
  19.         } else if (event->type() == QEvent::Leave) {
  20.             // 鼠标离开，隐藏滚动条
  21.             this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  22.         }
  23.     }
  25.     // 检查事件是否是鼠标滚轮事件
  26.     if (watched == this->viewport() && event->type() == QEvent::Wheel) {
  27.         QWheelEvent *wheelEvent = static_cast<QWheelEvent*>(event);
  28.         int numDegrees = wheelEvent->angleDelta().y() / 8;
  29.         int numSteps = numDegrees / 15; // 计算滚动步数
  31.         // 设置滚动幅度
  32.         this->verticalScrollBar()->setValue(this->verticalScrollBar()->value() - numSteps);
  34.         // 检查是否滚动到底部
  35.         QScrollBar *scrollBar = this->verticalScrollBar();
  36.         int maxScrollValue = scrollBar->maximum();
  37.         int currentValue = scrollBar->value();
  38.         //int pageSize = 10; // 每页加载的联系人数量
  40.         if (maxScrollValue - currentValue <= 0) {
  41.             // 滚动到底部，加载新的联系人
  42.             qDebug()<<"load more chat user";
  43.             //发送信号通知聊天界面加载更多聊天内容
  44.             emit sig_loading_chat_user();
  45.          }
  47.         return true; // 停止事件传递
  48.     }
  50.     return QListWidget::eventFilter(watched, event);
  51. }

在设计师界面类里提升ui->chat_user_list为ChatUserList

在ChatDialog构造函数和搜索清除按钮的回调中增加

  1.  ShowSearch(false);

该函数的具体实现

  1. void ChatDialog::ShowSearch(bool bsearch)
  2. {
  3.     if(bsearch){
  4.         ui->chat_user_list->hide();
  5.         ui->con_user_list->hide();
  6.         ui->search_list->show();
  7.         _mode = ChatUIMode::SearchMode;
  8.     }else if(_state == ChatUIMode::ChatMode){
  9.         ui->chat_user_list->show();
  10.         ui->con_user_list->hide();
  11.         ui->search_list->hide();
  12.         _mode = ChatUIMode::ChatMode;
  13.     }else if(_state == ChatUIMode::ContactMode){
  14.         ui->chat_user_list->hide();
  15.         ui->search_list->hide();
  16.         ui->con_user_list->show();
  17.         _mode = ChatUIMode::ContactMode;
  18.     }
  19. }

ChatDialog类中声明添加

  1.     ChatUIMode _mode;
  2.     ChatUIMode _state;
  3.     bool _b_loading;

构造函数的初始化列表初始化这些模式和状态

  1. ChatDialog::ChatDialog(QWidget *parent) :
  2.     QDialog(parent),
  3.     ui(new Ui::ChatDialog),_mode(ChatUIMode::ChatMode),
  4.     _state(ChatUIMode::ChatMode),_b_loading(false){//...}

为了让用户聊天列表更美观，修改qss文件

  1. #chat_user_wid{
  2.     background-color:rgb(0,0,0);
  3. }
  5. #chat_user_list {
  6.     background-color: rgb(247,247,248);
  7.     border: none;
  8. }
  11. #chat_user_list::item:selected {
  12.     background-color: #d3d7d4;
  13.     border: none;
  14.     outline: none;
  15. }
  17. #chat_user_list::item:hover {
  18.     background-color: rgb(206,207,208);
  19.     border: none;
  20.     outline: none;
  21. }
  23. #chat_user_list::focus {
  24.     border: none;
  25.     outline: none;
  26. }

添加聊天item

我们要为聊天列表添加item，每个item包含的样式为

https://cdn.llfc.club/1717215988933.jpg

对于这样的列表元素，我们采用设计师界面类设计非常方便, 新建设计师界面类ChatUserWid, 在ChatUserWid.ui中拖动布局如下

https://cdn.llfc.club/1717217007100.jpg

我们定义一个基类ListItemBase

  1. #ifndef LISTITEMBASE_H
  2. #define LISTITEMBASE_H
  3. #include <QWidget>
  4. #include "global.h"
  6. class ListItemBase : public QWidget
  7. {
  8.     Q_OBJECT
  9. public:
  10.     explicit ListItemBase(QWidget *parent = nullptr);
  11.     void SetItemType(ListItemType itemType);
  13.     ListItemType GetItemType();
  15. private:
  16.     ListItemType _itemType;
  18. public slots:
  20. signals:
  23. };
  25. #endif // LISTITEMBASE_H

我们实现这个基类

  1. #include "listitembase.h"
  3. ListItemBase::ListItemBase(QWidget *parent) : QWidget(parent)
  4. {
  6. }
  8. void ListItemBase::SetItemType(ListItemType itemType)
  9. {
  10.     _itemType = itemType;
  11. }
  13. ListItemType ListItemBase::GetItemType()
  14. {
  15.     return _itemType;
  16. }

我们实现ChatUserWid

  1. #ifndef CHATUSERWID_H
  2. #define CHATUSERWID_H
  4. #include <QWidget>
  5. #include "listitembase.h"
  6. namespace Ui {
  7. class ChatUserWid;
  8. }
  10. class ChatUserWid : public ListItemBase
  11. {
  12.     Q_OBJECT
  14. public:
  15.     explicit ChatUserWid(QWidget *parent = nullptr);
  16.     ~ChatUserWid();
  18.     QSize sizeHint() const override {
  19.         return QSize(250, 70); // 返回自定义的尺寸
  20.     }
  22.     void SetInfo(QString name, QString head, QString msg);
  24. private:
  25.     Ui::ChatUserWid *ui;
  26.     QString _name;
  27.     QString _head;
  28.     QString _msg;
  29. };
  31. #endif // CHATUSERWID_H

具体实现

  1. #include "chatuserwid.h"
  2. #include "ui_chatuserwid.h"
  4. ChatUserWid::ChatUserWid(QWidget *parent) :
  5.     ListItemBase(parent),
  6.     ui(new Ui::ChatUserWid)
  7. {
  8.     ui->setupUi(this);
  9.     SetItemType(ListItemType::CHAT_USER_ITEM);
  10. }
  12. ChatUserWid::~ChatUserWid()
  13. {
  14.     delete ui;
  15. }
  17. void ChatUserWid::SetInfo(QString name, QString head, QString msg)
  18. {
  19.     _name = name;
  20.     _head = head;
  21.     _msg = msg;
  22.     // 加载图片
  23.     QPixmap pixmap(_head);
  25.     // 设置图片自动缩放
  26.     ui->icon_lb->setPixmap(pixmap.scaled(ui->icon_lb->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation));
  27.     ui->icon_lb->setScaledContents(true);
  29.     ui->user_name_lb->setText(_name);
  30.     ui->user_chat_lb->setText(_msg);
  31. }

在ChatDialog里定义一些全局的变量用来做测试

  1. std::vector<QString>  strs ={"hello world !",
  2.                              "nice to meet u",
  3.                              "New year，new life",
  4.                             "You have to love yourself",
  5.                             "My love is written in the wind ever since the whole world is you"};
  7. std::vector<QString> heads = {
  8.     ":/res/head_1.jpg",
  9.     ":/res/head_2.jpg",
  10.     ":/res/head_3.jpg",
  11.     ":/res/head_4.jpg",
  12.     ":/res/head_5.jpg"
  13. };
  15. std::vector<QString> names = {
  16.     "llfc",
  17.     "zack",
  18.     "golang",
  19.     "cpp",
  20.     "java",
  21.     "nodejs",
  22.     "python",
  23.     "rust"
  24. };

这些数据只是测试数据，实际数据是后端传输过来的，我们目前只测试界面功能，用测试数据即可，写一个函数根据上面的数据添加13条item记录

  1. void ChatDialog::addChatUserList()
  2. {
  3.     // 创建QListWidgetItem，并设置自定义的widget
  4.     for(int i = 0; i < 13; i++){
  5.         int randomValue = QRandomGenerator::global()->bounded(100); // 生成0到99之间的随机整数
  6.         int str_i = randomValue%strs.size();
  7.         int head_i = randomValue%heads.size();
  8.         int name_i = randomValue%names.size();
  10.         auto *chat_user_wid = new ChatUserWid();
  11.         chat_user_wid->SetInfo(names[name_i], heads[head_i], strs[str_i]);
  12.         QListWidgetItem *item = new QListWidgetItem;
  13.         //qDebug()<<"chat_user_wid sizeHint is " << chat_user_wid->sizeHint();
  14.         item->setSizeHint(chat_user_wid->sizeHint());
  15.         ui->chat_user_list->addItem(item);
  16.         ui->chat_user_list->setItemWidget(item, chat_user_wid);
  17.     }
  18. }

在ChatDialog构造函数中添加

  1. addChatUserList();

完善界面效果，新增qss

  1. ChatUserWid {
  2.     background-color:rgb(247,247,247);
  3.     border: none;
  4. }
  6. #user_chat_lb{
  7.     color:rgb(153,153,153);
  8.     font-size: 12px;
  9.     font-family: "Microsoft YaHei";
  10. }
  12. #user_name_lb{
  13.     color:rgb(0,0,0);
  14.     font-size: 14px;
  15.     font-weight: normal;
  16.     font-family: "Microsoft YaHei";
  17. }
  19. #time_wid #time_lb{
  20.    color:rgb(140,140,140);
  21.    font-size: 12px;
  22.    font-family: "Microsoft YaHei";
  23. }
  25. QScrollBar:vertical {
  26.     background: transparent; /* 将轨道背景设置为透明 */
  27.     width: 8px; /* 滚动条宽度，根据需要调整 */
  28.     margin: 0px; /* 移除滚动条与滑块之间的间距 */
  29. }
  31. QScrollBar::handle:vertical {
  32.     background: rgb(173,170,169); /* 滑块颜色 */
  33.     min-height: 10px; /* 滑块最小高度，根据需要调整 */
  34.     border-radius: 4px; /* 滑块边缘圆角，调整以形成椭圆形状 */
  35. }
  37. QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
  38.     height: 0px; /* 移除上下按钮 */
  39.     border: none; /* 移除边框 */
  40.     background: transparent; /* 背景透明 */
  41. }
  43. QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
  44.     background: none; /* 页面滚动部分背景透明 */
  45. }

测试效果

https://cdn.llfc.club/1717218961063.jpg

源码链接

https://gitee.com/secondtonone1/llfcchat

视频链接

https://www.bilibili.com/video/BV13Z421W7WA/?spm_id_from=333.788&vd_source=8be9e83424c2ed2c9b2a3ed1d01385e9

热门评论
点击查看更多评论 没有更多评论了,点击收起 展开评论

热门文章

  1. Linux环境搭建和编码
    喜欢(594) 浏览(15238)

  2. MarkDown在线编辑器
    喜欢(514) 浏览(15387)

  3. 聊天项目(28) 分布式服务通知好友申请
    喜欢(507) 浏览(6900)

  4. vscode搭建windows C++开发环境
    喜欢(596) 浏览(95487)

  5. 使用hexo搭建个人博客
    喜欢(533) 浏览(13554)

最新评论

  1. 再谈单例模式 secondtonone1:是的，C++11以后返回局部static变量对象能保证线程安全了。
  2. protobuf配置和使用 熊二:你可以把dll放到系统目录，也可以配置环境变量，还能把dll丢到lib里
  3. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理，无论工作也好生活也罢，最重要的是开心，即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃，所以我还是想去做喜欢的方向。
  4. C++ 并发三剑客future, promise和async Yunfei:大佬您好，如果这个线程池中加入的异步任务的形参如果有右值引用，这个commit中的返回类型推导和bind绑定就会出现问题，请问实际工程中，是不是不会用到这种任务，如果用到了，应该怎么解决？
  5. 答疑汇总(thread,async源码分析) Yagus:如果引用计数为0，则会执行 future 的析构进而等待任务执行完成，那么看到的输出将是 这边应该不对吧，std::future析构只在这三种情况都满足的时候才回block: 1.共享状态是std::async 创造的(类型是_Task_async_state) 2.共享状态没有ready 3.这个future是共享状态的最后一个引用 这边共享状态类型是“_Package_state”，引用计数即使为0也不应该block啊
  6. 聊天项目(13) 重置密码功能 Doraemon:万一一个用户多个邮箱呢 有可能的
  7. 利用栅栏实现同步 Dzher:作者你好！我觉得 std::thread a(write_x); std::thread b(write_y); std::thread c(read_x_then_y); std::thread d(read_y_then_x); 这个例子中的assert fail并不会发生，原子变量设定了非relaxed内存序后一个线程的原子变量被写入，那么之后的读取一定会被同步的，c和d线程中只可能同时发生一个z++未执行的情况，最终z不是1就是2了，我测试了很多次都没有assert，请问我这个观点有什么错误，谢谢！
  8. 利用C11模拟伪闭包实现连接的安全回收 搁浅:看chatgpt说 直接传递 shared_from_this() 更安全 提问： socket_.async_read_some(boost::asio::buffer(data_, BUFFSIZE), // 接收客户端发生来的数据 std::bind(&Session::handle_read, this, std::placeholders::_1, std::placeholders::_2, shared_from_this())); socket_.async_read_some(boost::asio::buffer(data_, BUFFSIZE), std::bind(&Session::handle_read, shared_from_this(), std::placeholders::_1, std::placeholders::_2)); 这两种方式有区别吗？ 回答 ： 第一种方式：this 是裸指针，可能会导致生命周期问题，虽然 shared_from_this() 提供了一定的保护，但 this 依然存在风险。 第二种方式：完全使用 shared_ptr 来管理生命周期，更加安全。 通常，第二种方式更推荐使用，因为它可以确保在异步操作完成之前，Session 对象的生命周期得到完全管理，避免使用裸指针的潜在风险。
  9. 构造函数 secondtonone1:构造函数是类的基础知识，要着重掌握
  10. Linux环境搭建和编码 恋恋风辰:Linux环境下go的安装比较简单，可以不用设置GOPATH环境变量，后期我们学习go mod 之后就拜托了go文件目录的限制了。
  11. boost::asio之socket的创建和连接 项空月:发现一些错别字 :每隔vector存储  是不是是每个. asio::mutable_buffers_1 o或者    是不是多打了个o
  12. 泛型算法的定制操作 secondtonone1:lambda和bind是C11新增的利器，善于利用这两个机制可以极大地提升编程安全性和效率。
  13. 利用指针和容器实现文本查询 越今朝:应该添加一个过滤功能以解决部分单词无法被查询的问题: eg: "I am a teacher."中的teacher无法被查询，因为在示例代码中teacher.被解释为一个单词从而忽略了teacher本身。
  14. string类 WangQi888888:确实错了，应该是！isspace(sind[index]). 否则不进入循环，还是原来的字符串“some string”
  15. 网络编程学习方法和图书推荐 Corleone:啥程度可以找工作
  16. string类 桂学敏:str1="hello world"; bool flag=false; for(decltype(str1.size()) index=0; index
  17. C++ 线程安全的单例模式演变 183******95:单例模式的析构函数何时运行呢? 实际测试里：无论单例模式的析构函数为私有或公有，使用智能指针和辅助回收类，两种方法都无法在main()结束前调用单例的析构函数。
  18. 类和对象 陈宇航:支持！！！！
  19. golang 函数介绍 secondtonone1:函数是go中的一等公民，作为新兴语言，go摒弃了面向对象的一些糟粕，采取接口方式编程，而接口方式编程都是基于函数的，参数为interface，进而达到泛型作用，比如sort排序，只需要传入的参数满足sort所需interface的规定即可，需实现Len, Swap, Less三个方法，只要实现了这三个方法都可以用来做sort排序的参数。
  20. slice介绍和使用 恋恋风辰:切片作为引用类型极大的提高了数据传递的效率和性能，但也要注意切片的浅拷贝隐患，算是一把双刃剑，这世间的常态就是在两极之间寻求一种稳定。
  21. 聊天项目(9) redis服务搭建 pro_lin:redis线程池的析构函数，除了pop出队列，还要free掉redis连接把
  22. interface应用 secondtonone1:interface是万能类型，但是使用时要转换为实际类型来使用。interface丰富了go的多态特性，也降低了传统面向对象语言的耦合性。
  23. 创建项目和编译 secondtonone1:谢谢支持
  24. Qt 对话框 Spade2077:QDialog w(); //这里是不是不需要带括号
  25. C++ 线程池原理和实现 mzx2023:两种方法解决，一种是改排序算法，就是当线程耗尽的时候，使用普通递归，另一种是当在线程池commit的时候，判断线程是否耗尽，耗尽的话就直接当前线程执行task
  26. 堆排序 secondtonone1:堆排序非常实用，定时器就是这个原理制作的。
  27. 聊天项目(15) 客户端实现TCP管理者 lkx:已经在&QTcpSocket::readyRead 回调函数中做了处理了的。
  28. Qt MVC结构之QItemDelegate介绍 胡歌-此生不换:gpt, google
  29. 处理网络粘包问题 zyouth: //消息的长度小于头部规定的长度，说明数据未收全，则先将部分消息放到接收节点里 if (bytes_transferred < data_len) { memcpy(_recv_msg_node->_data + _recv_msg_node->_cur_len, _data + copy_len, bytes_transferred); _recv_msg_node->_cur_len += bytes_transferred; ::memset(_data, 0, MAX_LENGTH); _socket.async_read_some(boost::asio::buffer(_data, MAX_LENGTH), std::bind(&CSession::HandleRead, this, std::placeholders::_1, std::placeholders::_2, shared_self)); //头部处理完成 _b_head_parse = true; return; } 把_b_head_parse = true;放在_socket.async_read_some前面是不是更好
  30. 聊天项目(7) visualstudio配置grpc diablorrr:cmake文件得改一下 find_package(Boost REQUIRED COMPONENTS system filesystem)，要加上filesystem。在target_link_libraries中也同样加上
  31. 无锁并发队列 TenThousandOne:_head  和 _tail  替换为原子变量。那里pop的逻辑，val = _data[h] 可以移到循环外面吗
  32. C++ 运算符重载 李泽刚:哥们，对()重载这里有错啊，后面如果字符相等应该是继续判断而不是直接return
  33. 可变参数模板+异步队列实现异步打印功能 熊二:学到了%%%
  34. 基于锁实现线程安全队列和栈容器 secondtonone1:我是博主，你认真学习的样子的很可爱，哈哈，我画的是链表由空变成1个的情况。其余情况和你思考的类似，只不过我用了一个无效节点表示tail的指向，最初head和tail指向的都是这个节点。
  35. C++ unique_lock,共享锁和递归锁 icaner:很多地方有笔误，unique_lock打成了unique_ptr
  36. visual studio配置boost库 一giao里我离giaogiao:请问是修改成这样吗：.\b2.exe toolset=MinGW
  37. 面试题汇总(一) secondtonone1:看到网络上经常提问的go的问题，做了一下汇总，结合自己的经验给出的答案，如有纰漏，望指正批评。

其他链接

  1. GitHub
  2. 个人博客
  3. 博客园
  4. CSDN

个人公众号

个人微信