首页 > 解决方案 > Electronjs Mysql数据库提交查询随机访问

问题描述

我在 mysql 交互方面遇到了一些麻烦问题。

我有一个表格。当我尝试单击/提交然后调用我的函数 tata() 对数据库做一些事情(选择或其他)时,connection.query 是随机调用的。有时当我第一次单击函数调用时,有时我需要在按钮上单击 2 或 3 次才能调用函数。我没有日志警告或错误。该函数在 connection.query 之前停止,但我不知道为什么,因为我只需要重试(重新单击)。

示例第一次单击:

"Click myBtn"

alert('14.1')
alert('13')

然后就完成了。

如果我停留在同一页面但我再次单击 ->

alert('14.1')
alert('13')
alert('14.2')

我在 ubuntu 20 上工作。

我的 main.js :

const { app, BrowserWindow, netLog, contentTracing, session } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "Ulrich The Keeper",
    icon: './src/webapp/public/assets/img/menu_icon.png',
    webPreferences: {
      //set to true to have internal nodejs function integration
      nodeIntegration: true,
      //enable remote module for the render script
      enableRemoteModule: true,
      //disable dev tools set to false in PROD
      devTools: true


    }
  }
)
  win.loadFile('index.html');

}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

我的 package.json

  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "main.js",
  "scripts": {
    "postinstall": "install-app-deps",
    "start": "electron . --no-sandbox"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "decache": "^4.6.0",
    "electron": "^10.1.4",
    "electron-builder": "^22.9.1"
      },
  "dependencies": {
    "mysql": "^2.18.1"

  }
}

我的 index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ulrich The Keeper</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">


    <link rel="stylesheet" href="../assets/css/login_style.css">

</head>

<body>

    <div class="login-dark">
        <form id="myForm_index" method="POST">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group"><input id=form_index_login class="form-control" type="text" name="login" placeholder="Login" required></div>
            <div class="form-group"><input id=form_index_password class="form-control" type="password" name="password" placeholder="Password" aria-describedby="PasswordHelp" required></div>
            <small id="PasswordHelp" class="form-text text-muted">Enter your credentials to unlock your vault </small>

            <div class="form-group">
              <button id=myBtn class="btn btn-primary btn-block" type="submit" >Log In</button>
            </div>
            <a href="register.html" class="forgot">Click here to register</a>

        </form>
    </div>
    <!-- Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<script>
document.getElementById("myBtn").addEventListener("click", tata);

function tata(){
  var mysql = require("mysql");
  var db_config = require('../../../server/database_config.js');

  var host = db_config.db_host;
  var user = db_config.db_user;
  var password = db_config.db_password;
  var name_database = db_config.db_name;

  var connection = mysql.createConnection({
    host: host,
    user: user,
    password: password,
    database: name_database
  });
  alert('14.1')
  connection.query('SELECT * FROM `users`', function (error, results, fields) {
    if (error) throw console.log(error);
    alert('14.2');
  });
  alert('13')
  connection.end();

}
</script>
</body>
</html>

标签: javascriptmysqlnode.jsdatabaseelectron

解决方案


我想出了解决方案。

我将“type=submit”移动到“type=button”,它的工作原理!

我不知道为什么,但它的工作原理。

如果您有任何解释,请随意!

<div class="form-group">
              <button id=myBtn class="btn btn-primary btn-block" type="button" >Log In</button>
            </div>

推荐阅读