Проблемы с import javascript
Я хочу подключиться к БД mysql, но у меня проблемы с импортом библиотеки mysql2. Если написать:
import mysql from 'mysql2';
будет ошибка:
Uncaught TypeError: Спецификатор «mysql2» являлся голым спецификатором, но не был переназначен на что-либо. Связанные спецификаторы модуля должны начинаться с «./», «../» или «/».
Если же указать конкретную папку или файл, то появляется такая ошибка:
Загрузка модуля по адресу «http://127.0.0.1:5500/node_modules/my» была заблокирована из-за неразрешенного MIME-типа («text/html»).
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diagram Editor</title>
<link rel="stylesheet" href="../css/properties-panel.css">
<link rel="stylesheet" href="../css/sidebar.css">
<link rel="stylesheet" href="../css/menubar.css">
<link rel="stylesheet" href="../css/toolbar.css">
<link rel="stylesheet" href="../css/loginForm.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" type="text/css" href="../node_modules/@joint/plus/joint-plus.css">
</head>
<body>
<div class="container">
<div class="slider"></div>
<div class="btn">
<button class="login">Вход</button>
<button class="signup">Регистрация</button>
</div>
<div class="form-section">
<div class="login-box">
<input id="login-email" type="email"
class="email ele"
placeholder="почта">
<input id="login-password" type="password"
class="password ele"
placeholder="пароль">
<button id="loginbtn" class="clkbtn">Вход</button>
</div>
<div class="signup-box">
<input id="name" type="text"
class="name ele"
placeholder="введите ваше имя">
<input id="email" type="email"
class="email ele"
placeholder="введите вашу почту">
<input id="password" type="password"
class="password ele"
placeholder="пароль">
<input id="confirm-password" type="password"
class="password ele"
placeholder="подтвердите пароль">
<button id="regbtn" class="clkbtn">Регистрация</button>
</div>
</div>
</div>
<div class="geHeaderContainer">
<div class="geMenubarContainer">
<a class="geIcon"></a>
<div class="geTextDiv">
<a id="title" class="geItem"></a>
</div>
<img src="./icons/header.png">
<div class="geMenubar">
<a class="geItem">Файл
<div id="file" class="geDropdown">
<div class="geDropdownItem" id="open-option">Открыть</div>
<div class="geDropdownItem" id="save-option">Сохранить</div>
<div class="geDropdownItem" id="exit-option">Выход</div>
</div>
</a>
<a class="geItem">Правка
<div class="geDropdown">
<div id="undo" class="geDropdownItem">Отменить</div>
<div id="redo" class="geDropdownItem">Повторить</div>
<div id="cut" class="geDropdownItem">Вырезать</div>
<div id="copy" class="geDropdownItem">Копировать</div>
<div id="paste" class="geDropdownItem">Вставить</div>
<div id="delete" class="geDropdownItem">Удалить</div>
</div>
</a>
<a class="geItem">Вид
<div class="geDropdown">
<div id="zoom" class="geDropdownItem">Увеличить</div>
<div id="zoom out" class="geDropdownItem">Уменьшить</div>
</div>
</a>
<a class="geItem">Положение
<div class="geDropdown">
<div class="geDropdownItem">Вверх</div>
<div class="geDropdownItem">Вниз</div>
<div class="geDropdownItem">Влево</div>
<div class="geDropdownItem">Вправо</div>
</div>
</a>
<a class="geItem">Дополнительно
<div class="geDropdown">
<div class="geDropdownItem">Настройки</div>
<div class="geDropdownItem">Справка</div>
</div>
</a>
<a class="geItem">Помощь
<div class="geDropdown">
<div class="geDropdownItem">О программе</div>
<div class="geDropdownItem">Поддержка</div>
</div>
</a>
</div>
</div>
<div class="geToolbarContainer">
<div class="geToolbar">
<a id="zoom-scale" class="geLabel" title="Масштаб (Alt+Mousewheel)">
100%
<img src="../icons/arrow.gif">
</a>
<div id="scale-dropdown">
<a class="scale-option" data-scale="0.25">25%</a>
<a class="scale-option" data-scale="0.5">50%</a>
<a class="scale-option" data-scale="0.75">75%</a>
<a class="scale-option" data-scale="1">100%</a>
<a class="scale-option" data-scale="1.25">125%</a>
<a class="scale-option" data-scale="1.5">150%</a>
<a class="scale-option" data-scale="1.75">175%</a>
</div>
<div class="geSeparator"></div>
<a id="zoom-button" class="geLabel" title="Увеличить">
<img src="../icons/glass1.png"></img>
</a>
<a id="unzoom-button" class="geLabel" title="Уменьшить">
<img src="../icons/glass2.png"></img>
</a>
<div class="geSeparator"></div>
<a id='undo-button'class="geLabel" title="Отменить (Ctrl+Z)">
<img src="../icons/undo.png"></img>
</a>
<a id='redo-button' class="geLabel" title="Вернуть (Ctrl+Y)">
<img src="../icons/revert.png"></img>
</a>
<div class="geSeparator"></div>
<a id='delete-button' class="geLabel" title="Удалить (Delete)">
<img src="../icons/delete.png"></img>
</a>
<div class="geSeparator"></div>
<input type="color" id="color-pick-input" title="Цвет сетки" value="#ffffff">
<input type="range" id="line-width-input" title="Размер сетки" min="1" max="100" value="20">
<span id="range-value"></span>
<a id="textBox" class="geLabel" title="Добавить текст">
<img src="../icons/text.png"></img>
</a>
<div class="geSeparator"></div>
<a id="clear-button" class="geLabel" title="очистить">
<img src="../icons/clear.png"></img>
</a>
<a id="save-button" class="geLabel" title="сохранить">
<img src="../icons/save.png"></img>
</a>
<a id="open-button" class="geLabel" title="открыть">
<img src="icons/open.png"></img>
</a>
<div class="geSeparator"></div>
<select id="line-connection-type">
<option value="">Тип соединения</option>
<option value="manhattan">Manhattan</option>
<option value="metro">Metro</option>
<option value="normal">Normal</option>
<option value="orthogonal">Orthogonal</option>
<option value="rightAngle">Orthogonal Router with Given Direction (Right Angle)</option>
</select>
<select id="saveSelect">
<option value="">Сохранить как</option>
<option value="json">JSON</option>
<option value="svg">SVG</option>
<option value="png">PNG</option>
<option value="jpg">JPG</option>
</select>
</div>
</div>
</div>
<div id="sidebar">
<img id="btn-toggle-menu" src="../icons/next.png"></img>
<h3>Фигуры</h3>
<a class="geTitle" >Избранное</a>
<a class="geTitle" >Общие
</a>
<div class="geSidebar">
<a class="geItem" title="прямая линия" data-shape="line">
<img src="../mainFigures/line.png" ></img>
</a>
<a class="geItem" title="прямоугольник" data-shape="rectangle">
<img src="../mainFigures/rectangle.png" ></img>
</a>
<a class="geItem" title="закругленный прямоугольник" data-shape="rounded-rectangle">
<img src="../mainFigures/rounded-rectangle.png" ></img>
</a>
<a class="geItem" title="круг" data-shape="circle">
<img src="../mainFigures/circle.png" ></img>
</a>
<a class="geItem" title="эллипс" data-shape="ellipse">
<img src="../mainFigures/ellipse.png" ></img>
</a>
<a class="geItem" title="треугольник" data-shape="triangle">
<img src="../mainFigures/triangle.png" ></img>
</a>
<a class="geItem" title="трапеция" data-shape="trapezium">
<img src="../mainFigures/trapezium.png" ></img>
</a>
<a class="geItem" title="комментарий" data-shape="90trapezium">
<img src="../mainFigures/90trapezium.png" ></img>
</a>
<a class="geItem" title="ромб" data-shape="rhomb">
<img src="../mainFigures/rhomb.png" ></img>
</a>
<a class="geItem" title="параллелограмм" data-shape="parallelogram">
<img src="../mainFigures/parallelogram.png" ></img>
</a>
<a class="geItem" title="пятиугольник" data-shape="pentagon">
<img src="../mainFigures/pentagon.png" ></img>
</a>
<a class="geItem" title="шестиугольник" data-shape="hexagon">
<img src="../mainFigures/hexagon.png" ></img>
</a>
<a class="geItem" title="цилиндр" data-shape="cylinder">
<img src="../mainFigures/cylinder.png" ></img>
</a>
<a class="geItem" title="односторонняя стрелка" data-shape="arrow">
<img src="../mainFigures/arrows.png" ></img>
</a>
<a class="geItem" title="двусторонняя стрелка" data-shape="double-arrow">
<img src="../mainFigures/double-arrow.png" ></img>
</a>
<a class="geItem" title="криволинейная стрелка" data-shape="curved-arrow" >
<img src="../mainFigures/curve-arrow.png" ></img>
</a>
<a class="geItem" title="изображение" data-shape="image" >
<img src="/icons/image-icon1.svg" ></img>
</a>
</div>
<a class="geTitle" >Блок-схема</a>
<div class="geSidebar">
<a class="geItem" title="процесс" data-shape="process">
<img src="../mainFigures/rectangle.png" ></img>
</a>
<a class="geItem" title="альтернативный процесс" data-shape="alternative process">
<img src="../block diagram/alternative process.png" ></img>
</a>
<a class="geItem" title="решение/условие" data-shape="decision/condition">
<img src="../mainFigures/rhomb.png" ></img>
</a>
<a class="geItem" title="вход/выход" data-shape="inOutput">
<img src="../mainFigures/parallelogram.png" ></img>
</a>
<a class="geItem" title="определенный процесс" data-shape="predefined process">
<img src="../block diagram/predefined process.png" ></img>
</a>
<a class="geItem" title="эллипс" data-shape="internal storage">
<img src="../block diagram/internal data.png" ></img>
</a>
<a class="geItem" title="документ" data-shape="document">
<img src="../block diagram/document.png" ></img>
</a>
<a class="geItem" title="мульти-документ" data-shape="multi-document">
<img src="../block diagram/multi-document.png" ></img>
</a>
<a class="geItem" title="начало/конец" data-shape="start/end">
<img src="../mainFigures/rounded-rectangle.png" ></img>
</a>
<a class="geItem" title="подготовка" data-shape="preparation">
<img src="../block diagram/preparation.png" ></img>
</a>
<a class="geItem" title="сортировка" data-shape="sort">
<img src="../block diagram/sort.png" ></img>
</a>
<a class="geItem" title="ручной ввод" data-shape="manual input">
<img src="../block diagram/manual input.png" ></img>
</a>
<a class="geItem" title="ручная операция" data-shape="manual operation">
<img src="../block diagram/manual operation.png" ></img>
</a>
<a class="geItem" title="узел" data-shape="node">
<img src="../mainFigures/circle.png" ></img>
</a>
<a class="geItem" title="ссылка" data-shape="link">
<img src="../block diagram/link.png" ></img>
</a>
<a class="geItem" title="карточка" data-shape="card">
<img src="../block diagram/card.png" ></img>
</a>
<a class="geItem" title="перфолента" data-shape="tape">
<img src="../block diagram/tape.png" ></img>
</a>
<a class="geItem" title="узел суммирования" data-shape="summing junction">
<img src="../block diagram/summing junction.png" ></img>
</a>
<a class="geItem" title="узел или" data-shape="or" >
<img src="../block diagram/or.png" ></img>
</a>
<a class="geItem" title="сопоставление" data-shape="collate" >
<img src="../block diagram/collate.png" ></img>
</a>
<a class="geItem" title="извлечение" data-shape="exctract/measurement" >
<img src="../mainFigures/triangle.png" ></img>
</a>
<a class="geItem" title="объединение" data-shape="merge/storage" >
<img src="../mainFigures/triangle.png" style="transform: rotate(180deg);" ></img>
</a>
<a class="geItem" title="сохраненные данные" data-shape="stored data" >
<img src="../block diagram/stored data.png" ></img>
</a>
<a class="geItem" title="память с последовательным доступом" data-shape="sequantional data" >
<img src="../block diagram/sequantional data.png" ></img>
</a>
<a class="geItem" title="база данных" data-shape="database" >
<img src="../block diagram/database.png" ></img>
</a>
<a class="geItem" title="память с прямым доступом" data-shape="direct data" >
<img src="../block diagram/direct data.png" ></img>
</a>
<a class="geItem" title="дисплей" data-shape="display" >
<img src="../block diagram/display.png" ></img>
</a>
<a class="geItem" title="annotation1" data-shape="annotation1" >
<img src="../block diagram/annotation1.png" ></img>
</a>
<a class="geItem" title="комментарий2" data-shape="annotation2" >
<img src="../block diagram/annotation2.png" ></img>
</a>
</div>
<a class="geTitle" >UML</a>
<div class="geSidebar">
<a class="geItem" title="класс" data-shape="class">
<img src="mainFigures/line.png" ></img>
</a>
<a class="geItem" title="интерфейс" data-shape="interface">
<img src="mainFigures/rectangle.png" ></img>
</a>
<a class="geItem" title="обьект" data-shape="rounded-rectangle">
<img src="mainFigures/rounded-rectangle.png" ></img>
</a>
<a class="geItem" title="круг" data-shape="circle">
<img src="mainFigures/circle.png" ></img>
</a>
<a class="geItem" title="эллипс" data-shape="ellipse">
<img src="mainFigures/ellipse.png" ></img>
</a>
<a class="geItem" title="треугольник" data-shape="triangle">
<img src="mainFigures/triangle.png" ></img>
</a>
<a class="geItem" title="трапеция" data-shape="trapezium">
<img src="mainFigures/trapezium.png" ></img>
</a>
<a class="geItem" title="комментарий" data-shape="90trapezium">
<img src="mainFigures/90trapezium.png" ></img>
</a>
<a class="geItem" title="ромб" data-shape="rhomb">
<img src="mainFigures/rhomb.png" ></img>
</a>
<a class="geItem" title="параллелограмм" data-shape="parallelogram">
<img src="mainFigures/parallelogram.png" ></img>
</a>
<a class="geItem" title="пятиугольник" data-shape="pentagon">
<img src="mainFigures/pentagon.png" ></img>
</a>
<a class="geItem" title="шестиугольник" data-shape="hexagon">
<img src="mainFigures/hexagon.png" ></img>
</a>
<a class="geItem" title="цилиндр" data-shape="cylinder">
<img src="mainFigures/cylinder.png" ></img>
</a>
<a class="geItem" title="односторонняя стрелка" data-shape="arrow">
<img src="mainFigures/arrows.png" ></img>
</a>
<a class="geItem" title="двусторонняя стрелка" data-shape="double-arrow">
<img src="mainFigures/double-arrow.png" ></img>
</a>
<a class="geItem" title="криволинейная стрелка" data-shape="curved-arrow" >
<img src="mainFigures/curve-arrow.png" ></img>
</a>
</div>
</div>
<div id="diagram-container">
<div id="canvas" >
</div>
<div id="radar" >
</div>
</div>
<div id="properties-panel">
<h2>Стили элемента</h2>
<label for="stroke-color">Цвет контура:</label>
<input type="color" id="stroke-color"><br>
<label for="fill-color">Цвет заливки:</label>
<input type="color" id="fill-color"><br>
<label for="line-width">Толщина линии:</label>
<input type="number" id="line-width" min="1" max="10" value="1"><br>
<label for="width">Длина:</label>
<input type="number" id="width" min="1" max="1000" ><br>
<label for="height">Ширина:</label>
<input type="number" id="height" min="1" max="1000" ><br>
<label for="line-style">Тип линии:</label>
<select id="line-style">
<option value="solid">Сплошная</option>
<option value="dashed">Пунктирная</option>
<option value="dotted">Точечная</option>
</select><br>
<label for="text-content">Текст:</label>
<input type="text" id="text-content"><br>
<label for="text-size">Размер текста:</label>
<input type="number" id="text-size" min="8" max="24" value="12"><br>
<label for="text-font">Шрифт текста:</label>
<select id="text-font">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<!-- Добавьте другие варианты шрифтов по вашему усмотрению -->
</select><br>
<label for="text-weight">Жирность текста:</label>
<select id="text-weight">
<option value="normal">Обычный</option>
<option value="bold">Жирный</option>
</select><br>
<button id="apply-styles">Применить стили</button>
</div>
<script src="node_modules/@joint/plus/joint-plus.js"></script>
<script src="../js/index.js"></script>
<script type="module" src="../js/login.js"></script>
<script src="../js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/sql-wasm.js"></script>
</body>
</html>
login.js:
import mysql from 'mysql2';
let signup = document.querySelector(".signup");
let login = document.querySelector(".login");
let slider = document.querySelector(".slider");
let formSection = document.querySelector(".form-section");
signup.addEventListener("click", () => {
slider.classList.add("moveslider");
formSection.classList.add("form-section-move");
});
login.addEventListener("click", () => {
slider.classList.remove("moveslider");
formSection.classList.remove("form-section-move");
});
const connection = mysql.createConnection({
host: "localhost",
user: "root",
database: "diagramEditor",
password: ""
});
connection.connect(function(err){
if (err) {
console.log("Ошибка: " + err.message);
}
else{
console.log("Подключение к серверу MySQL успешно установлено");
}
});
// закрытие подключения
connection.end(function(err) {
if (err) {
return console.log("Ошибка: " + err.message);
}
console.log("Подключение закрыто");
});
// Обработчик события для кнопки регистрации
document.getElementById('regbtn').addEventListener("click", async () => {
// Получаем данные из полей формы
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirm-password").value;
// Проверка корректности данных
if (!name || !email || !password || !confirmPassword) {
alert("Все поля должны быть заполнены.");
return;
}
if (password !== confirmPassword) {
alert("Пароли не совпадают.");
return;
}
if (!validateEmail(email)) {
alert("Некорректный email.");
return;
}
// Хеширование пароля (опционально)
// const hashedPassword = await hashPassword(password);
// Вставка данных в базу данных
try {
const sql = "INSERT INTO users(name, age) VALUES(?, ?)";
connection.query(sql, user, function(err, results) {
if(err) console.log(err);
else console.log("Данные добавлены");
});
alert("Регистрация успешна!");
} catch (error) {
if (error.message.includes("UNIQUE constraint failed")) {
alert("Email уже зарегистрирован.");
} else {
alert("Ошибка регистрации: " + error.message);
}
}
});
// Обработчик события для кнопки входа
document.getElementById('loginbtn').addEventListener("click", async () => {
// Получаем данные из полей формы
const email = document.getElementById("login-email").value;
const password = document.getElementById("login-password").value;
// Проверка корректности данных
if (!email || !password) {
alert("Все поля должны быть заполнены.");
return;
}
if (!validateEmail(email)) {
alert("Некорректный email.");
return;
}
// Проверка учетных данных
const sql= `SELECT * FROM users WHERE email = ? AND password = ?`;
connection.query(sql, user, function(err, results) {
if(err) console.log(err);
else console.log("Данные добавлены");
});
if (result.length > 0) {
alert("Вход успешен!");
document.querySelector('.container').classList.add('hidden');
} else {
alert("Неверный email или пароль.");
}
});
function validateEmail(email) {
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return re.test(String(email).toLowerCase());
}