全部问题

仅当您单击按钮本身时才会删除菜单。当我单击浏览器窗口中的空白区域时，如何使其消失？又如何让它顺利来去呢？

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

<div class="dropdown buttons_headdiv">
  <a onclick="myFunction()" class="dropbtn">Профиль</a>

  <div id="myDropdown" class="dropdown-content">
    <a href="{{ url_for('personal') }}">Профиль</a>
    <a href="{{ url_for('order') }}">Корзина</a>
    <a href="{{ url_for('trades') }}">Заказы</a>
  </div>
</div>

是否可以通过 Python（即 SQLAlchemy）以某种方式访问​​ MSSQL 上的 1C 数据库（以其纯粹的形式 - 不导出到 Excel 或第三方 DBMS），而不使用 1C 处理程序，只需通过连接参数，或者也许通过文件在您的本地计算机上？

描述

情况很混乱，我会尽力详细解释一下。

第 1 部分

首先，我创建一个创建者Promise函数AbortSignal：

/**
 * @template T
 * @param {(signal: AbortSignal, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} callback
 * @returns {Promise<T>}
 */
Promise.withSignal = async function (callback) {
    const controller = new AbortController();
    const { promise, resolve, reject } = Promise.withResolvers();
    try {
        callback(controller.signal, resolve, reject);
        return await promise;
    } finally {
        controller.abort();
    }
};

请注意，该函数保证完成后Promise，signal状态将为aborted.

第2部分

然后我创建一个异步确认：

const dialogConfirm = document.querySelector(`dialog.pop-up.confirm`);
dialogConfirm.addEventListener(`click`, (event) => {
    if (event.target === dialogConfirm) dialogConfirm.close();
});

/**
 * @returns {Promise<boolean>} 
 */
Window.prototype.confirmAsync = async function () {
    dialogConfirm.showModal();

    const buttonAccept = dialogConfirm.querySelector(`button.highlight`);
    const buttonDecline = dialogConfirm.querySelector(`button.invalid`);

    try {
        return await Promise.withSignal((signal, resolve, reject) => {
            buttonAccept.addEventListener(`click`, (event) => resolve(true), { signal });
            buttonDecline.addEventListener(`click`, (event) => resolve(false), { signal });
            dialogConfirm.addEventListener(`close`, (event) => resolve(false), { signal });
        });
    } finally {
        dialogConfirm.close();
    }
};

我们假设 HTML 附加到页面上

第三部分

下面我创建一个“生成”的类Promise：

/**
 * @template T
 */
class PromiseFactory {
    /**
     * @param {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} executor 
     */
    constructor(executor) {
        this.#executor = executor;
    }
    /** @type {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} */
    #executor;
    /**
     * @returns {Promise<T>}
     */
    async run() {
        const { promise, resolve, reject } = Promise.withResolvers();
        await this.#executor.call(promise, resolve, reject);
        return promise;
    }
    /**
     * @param {(value: T) => boolean} predicate 
     */
    async runUntil(predicate) {
        while (true) {
            try {
                const result = await this.run();
                if (!predicate(result)) continue;
                return result;
            } catch {
                continue;
            }
        }
    }
}

第 4 部分

最后我把它们放在一起：

/** @type {PromiseFactory<boolean>} */
const factory = new PromiseFactory(async (resolve) => resolve(await window.confirmAsync()));

factory.runUntil(result => {
    console.log(result);
    return result;
});

这个设计的重点是创造一些可以“重复”Promise直到达到预期结果的东西。好像这段代码到现在为止还应该打开对话框，直到您单击“接受”。

完整的工作示例：

/**
 * @template T
 * @param {(signal: AbortSignal, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} callback
 * @returns {Promise<T>}
 */
Promise.withSignal = async function (callback) {
  const controller = new AbortController();
  const { promise, resolve, reject } = Promise.withResolvers();
  try {
    callback(controller.signal, resolve, reject);
    return await promise;
  } finally {
    controller.abort();
  }
};

const dialogConfirm = document.querySelector(`dialog.pop-up.confirm`);
dialogConfirm.addEventListener(`click`, (event) => {
  if (event.target === dialogConfirm) dialogConfirm.close();
});

/**
 * @returns {Promise<boolean>} 
 */
Window.prototype.confirmAsync = async function () {
  dialogConfirm.showModal();

  const buttonAccept = dialogConfirm.querySelector(`button.highlight`);
  const buttonDecline = dialogConfirm.querySelector(`button.invalid`);

  try {
    return await Promise.withSignal((signal, resolve, reject) => {
      buttonAccept.addEventListener(`click`, (event) => resolve(true), { signal });
      buttonDecline.addEventListener(`click`, (event) => resolve(false), { signal });
      dialogConfirm.addEventListener(`close`, (event) => resolve(false), { signal });
    });
  } finally {
    dialogConfirm.close();
  }
};

/**
 * @template T
 */
class PromiseFactory {
  /**
   * @param {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} executor 
   */
  constructor(executor) {
    this.#executor = executor;
  }
  /** @type {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} */
  #executor;
  /**
   * @returns {Promise<T>}
   */
  async run() {
    const { promise, resolve, reject } = Promise.withResolvers();
    await this.#executor.call(promise, resolve, reject);
    return promise;
  }
  /**
   * @param {(value: T) => boolean} predicate 
   */
  async runUntil(predicate) {
    while (true) {
      try {
        const result = await this.run();
        if (!predicate(result)) continue;
        return result;
      } catch {
        continue;
      }
    }
  }
}

/** @type {PromiseFactory<boolean>} */
const factory = new PromiseFactory(async (resolve) => resolve(await window.confirmAsync()));

factory.runUntil(result => {
  console.log(result);
  return result;
});

<dialog class="pop-up confirm">
  <button class="highlight">Accept</button>
  <button class="invalid">Decline</button>
</dialog>

问题

问题是，如果按 Decline，就会开始无限循环，尽管程序是异步的并且不会冻结，但它仍然是错误的。
我只是不明白为什么我有一个无限循环。
我仍然不知道如何解决它。

我真的很喜欢在 ngrok 或通过 vs code 上临时托管项目。 node.js 在它们上工作没有问题，但我在 Vue 上有问题。

对于 ngrok 我尝试：

ngrok.exe http 8080

或者

ngrok.exe tcp 8080

无论如何，当我点击他给我的链接时，我得到：

Invalid Host header

对于 VS Code，我创建一个端口：

但是当我去的时候我得到一个错误：

Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

请告诉我如何处理它才能正常启动

编写了简单的客户端和服务器程序。使用本地连接一切正常。一旦您将客户端指向socket->connectToHost(...);您的全局 IP 地址，套接字就会显示错误“连接被拒绝”。。服务器正在监听QHostAddress::Any。尝试通过本地 IP 和全球 IP 进行连接时有什么区别吗？我使用QTcpServer套接字作为服务器QTcpSocket。 IP地址是白色的。

更新：

当客户端从另一台机器连接到另一台路由器时，显示“网络操作超时”

服务器.cpp

Server::Server()
{
    if(listen(QHostAddress::Any, 1234)) {
        qDebug() << "start";
    }
    else {
        qDebug() << "ne start";
    }
}

处理客户端连接：

void Server::incomingConnection(qintptr handle)
{
    socket = new QTcpSocket;
    socket->setSocketDescriptor(handle);
    connect(socket, &QTcpSocket::readyRead, this, &Server::slotReadyRead);
    connect(socket, &QTcpSocket::disconnected, this, &Server::socketDisconnected);
    sockets.push_back(socket);
    qDebug() << "client connected" << handle;
}

客户端.cpp

将套接字连接到服务器

Widget::Widget(QWidget *parent)
    : QWidget(parent),
      socket(new QTcpSocket(this))
{
    connect(socket, &QTcpSocket::readyRead, this, &Widget::slotReadyRead);
    connect(socket, &QTcpSocket::disconnected, socket, &QTcpSocket::deleteLater);
    connect(socket, &QTcpSocket::errorOccurred, this, &Widget::socketError);

    socket->connectToHost("178.65.126.214", 1234);
    socket->waitForConnected();
}

我还附上了网络图（一切看起来都很简单明了）