电子：require未通过mysql连接定义

问题描述

我最近开始学习HTML，CSS和JavaScript。我想到了通过使应用程序在计算机上执行来练习这三种语言的想法。我发现这可以通过Electron框架实现。我选择了一个初学者教程，安装了Node.js，然后使用npm安装了Electronic-forge，在执行了一些npm命令之后，我最终找到了一个文件夹，可以在其中找到带有index.html，index的src目录（除其他文件外） .css和index.js文件。以下代码是index.js文件：

const { app,browserWindow } = require('electron');
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
   const mainWindow = new browserWindow({
    width: 800,height: 600,});

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname,'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready',createWindow);

// Quit when all windows are closed,except on macOS. There,it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed',() => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate',() => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (browserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

我要制作的应用程序基本上是一种用HTML和JavaScript控制的CSS渲染的表单。我在MysqL中创建了一个数据库，该数据库由PHPMyAdmin托管在本地主机中。由于该应用程序仅用于个人目的，所以我认为这已经足够了，我可以通过设计表单，使用JavaScript添加动态组件然后将该应用程序与本地数据库连接来实现目标。

我刚刚创建了另一个名为script.js的文件，在其中添加了控制表单的功能，并将其链接到HTML文件，

<script src="script.js"></script>

我的问题是我无法使用该语句...

var MysqL = require("MysqL"); 

...在项目的任何文件中。就是说，我无法在script.js文件，index.js或index.html（带有脚本标签）中的任何require（“ moduleName”）语句中使用，因为我一直在收到错误消息：Uncaught ReferenceError：require未定义。 / p>

但是我不知道该怎么办，或者我是否需要在项目中添加另一个脚本才能使其正常工作。当我尝试使用具有相同语法的另一个Node.js模块时，我放弃了尝试解决此错误消息的尝试。当我将图像从计算机拖放到应用程序的呈现界面时，我想使用“ node-powershell”执行一些PowerShell命令，但无法解决。我试图在index.js中将webPreferences，nodeIntegration设置为true，但是它对我不起作用。我还尝试使用browserify，但始终出现相同的错误（据我了解，如果.js文件不是服务器代码，似乎不可能使用“ node-powershell”。）

在这种情况下，使用“ MysqL”模块，我不知道为什么会收到此错误消息，因为我在互联网上看到了一些示例，它们在索引中建立了与数据库的连接。 js文件，甚至在HTML文件中添加标签。

我想知道我的项目中是否缺少某些内容，我的意思是，也许我需要添加其他一些充当服务器或类似功能的脚本（但是老实说，我不知道确切的原因，因为我的应用程序与网络无关。它只是个人应用程序，可以在我的PC中使用。如果推理错误，请告知我。）

我正在添加index.html和script.js代码的一部分供您参考：

// other functions above

function addSource() {
  var stit = document.getElementById("sourceTitle");
  var stex = document.getElementById("sourceText");
  var sl = document.getElementById("sourceLink");
  if (stit.value || sl.value || stex.value) {
    stit.value = '';
    stex.value = '';
    sl.value = '';
  }
}

function organizeConceptEntry() {
  var parentConceptsCollection = document.getElementsByClassName("parentConceptButton");
  if (parentConceptsCollection.length != 0) {
    var MysqL = require("MysqL");
    var connection = MysqL.createConnection({
        host: "localhost",user: "root",password: "null",database: "bd-theory-org"
    });
    connection.connect((err) => {
      if (err) {
        return console.log(err.stack);
      }
      console.log("Connection has been established");
    });
    connection.end(() =>{
      console.log("Connection has been closed")
    });

    for (var i = 0; i < parentConceptsCollection.length; i++) {
      alert(parentConceptsCollection[i].innerHTML);
    }
  }
}

function insertConcept() {
  organizeConceptEntry();
}

      <form name="concept" onSubmit="return false;">
        <div>
          <label>Parent Concepts: </label>
          <input id="conceptInput"></input>
          <button id="addParentConceptButton" type="button" onclick="addParentConcept();">Add</button>
          <span id="parentConceptsSelected" name="parentConceptsSelected"></span>
        </div>
        <div>
          <label>Concept Title: </label>
          <input></input>
        </div>
        <div>
          <label>Concept Content: </label>
          <input></input>
        </div>
        <div id="dropZone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
          <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
        </div>
        <div id="droppedImages"></div>
        <div>
          <label>Equation Title: </label>
          <input id="equationTitle"></input>
          <label>Equation Text: </label>
          <input id="equationText"></input>
          <label>Equation Code: </label>
          <input id="equationCode"></input>
          <button id="addEquationButton" type="button" onclick="addEquation();">Add</button>
          <div id="renderedEquation"></div>
        </div>
        <div>
          <label>Source Title: </label>
          <input id="sourceTitle"></input>
          <label>Source Text: </label>
          <input id="sourceText"></input>
          <label>Source Link: </label>
          <input id="sourceLink"></input>
          <button id="addSourceButton" type="button" onclick="addSource();">Add</button>
        </div>
        <div>
          <label>Tags: </label>
          <input id="tagInput"></input>
          <button id="addTagButton" type="button" onclick="addTag();">Add</button>
          <span id="selectedTags"></span>
        </div>
        <div>
          <button id="insertConceptButton" type="button" onclick="insertConcept();">Insert Concept</button>
        </div>
      </form>

感谢您抽出宝贵的时间阅读本文档。抱歉，这么长的时间。如果我不是最好的方式，那么我会对提出问题的方式提出任何建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）