При запуске обычного файла .html - всё работает стабильно:
Нажимаю на кнопку - раскрывается форма.
При запуске app.js (с сервером базы данных mysql) - захожу на localhost:1488 и почему-то сразу же видна кнопка и форма.
Что мне необходимо сделать, чтобы всё работало стабильно? И подскажите как закрыть форму, нажав на эту же кнопку.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
<script src="../app.js"></script>
<title>Заполнение формы</title>
</head>
<body>
<button onclick='openForm()'>Показать форму</button>
<div id='form-wrap'>
<form action="/save" method="POST">
<fieldset>
Пункт проката:
<select name="town" id="s1">
<option value="k1">Проспект Ленина 20</option>
<option value="k2">Зайцева 13</option>
</select>
<br/>
<p>
Выберите дату получения:
<input
type="date"
name="data"
value="2021-12-14"
max="2021-12-29"
min="2021-12-14"
/>
</p>
<p>
Выберите время для получения:
<input
type="time"
name="times"
value="07:00"
min="7:00"
max="21:00"
/>
</p>
<br />
<label for="name">Имя: </label>
<input type="text" id="name" name="name" />
<br />
<label for="tel">Телефон (Пример: 89200243522): </label>
<input type="text" id="tel" name="tel" />
<br />
<input type="submit" value="Зарезервировать велосипед" />
</fieldset>
</form>
</div>
<script>
const formWrap = document.getElementById('form-wrap');
function openForm() {
formWrap.classList.add('open');
}
</script>
</body>
</html>
JS app.js
import mysql from "mysql";
import express from "express";
import { join, dirname } from "path";
import { fileURLToPath } from "url";
import bodyParser from "body-parser";
const getAbsolutePath = (relativePath) => {
return join(dirname(fileURLToPath(import.meta.url)), relativePath);
};
const app = express();
//если строки или массивы, то может анализировать только входящий объект запроса
app.use(bodyParser.urlencoded({ extended: false }));
// Получает информацию о users.html
app.get("/", (_, response) =>
response.sendFile(getAbsolutePath("./layout/users.html"))
);
app.get('/ses', function (req, res) {
res.send('GET request to the homepage');
});
// передаёт информацию
app.post("/save", (request, response) => {
saveMySuperForm(request.body).then(
() => response.redirect("/"),
(err) => response.send(`Unknown err, suck. Try again. : ${err}`)
);
});
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "db",
});
export const saveMySuperForm = async ({ town, data, times, tel, name }) => {
const query =
"INSERT INTO reg (`town`, `data`, `times`, `tel`, `name`) VALUES (?, ?, ?, ?, ?)";
return new Promise((resolve, reject) => {
connection.query(query, [town, data, times, tel, name], (err, result) => {
if (err) return reject(err);
resolve(result);
});
});
};
app.listen(1488, () => console.log("open: http://localhost:1488"));
CSS
#form-wrap {
opacity: 0;
transition: opacity .5s;
}
#form-wrap.open {
transition: opacity .5s;
opacity: 1;
}
Скрины открытия формы через user.html:
Скрин через app.js (с сервером базы данных) на localhost:1488
Возможно я что-то не знаю, только начинаю изучать всё. Не судите меня строго, поясните в чём ошибка и как её исправить?
Средний