Вопрос или проблема
function openCreateAccountForm() {
// Размеры всплывающего окна
const width = 500;
const height = 500;
// Вычисляем позицию для центрирования всплывающего окна
const left = (window.innerWidth / 2) - (width / 2);
const top = (window.innerHeight / 2) - (height / 2);
// Открываем всплывающее окно с вычисленной позицией
window.open('../Forms/createAccount.html', 'popup', `width=${width},height=${height},top=${top},left=${left}`);
}
function openSignInForm() {
// Размеры всплывающего окна
const width = 500;
const height = 500;
// Вычисляем позицию для центрирования всплывающего окна
const left = (window.innerWidth / 2) - (width / 2);
const top = (window.innerHeight / 2) - (height / 2);
// Открываем всплывающее окно с вычисленной позицией
window.open('../Forms/signIn.html', 'popup', `width=${width},height=${height},top=${top},left=${left}`);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<link rel="stylesheet" href="http://stackoverflow.com/static/background1.css">
<link rel="stylesheet" href="http://stackoverflow.com/static/signInPage.css">
<div class="musicContainer">
<audio class="loungeMusic" controls loop>
<source src="https://www.dropbox.com/scl/fi/l69tv279l3cn1ulzm4j0l/Enter-Friend.mp3?rlkey=76rteultp73bzlqn5si4m4mnx&st=gjl4htn9&dl=1" type="audio/mpeg">
</audio>
<p class="loungeMessage">Нажмите «Воспроизвести», чтобы расслабиться со мной</p>
</div>
<!-- Цвет и размер заголовков -->
<h1>
<span class="welcome">Здравствуйте и добро пожаловать в:</span>
<span class="redRat"> АРХИВ КРАСНОЙ КРЫСЫ </span>
</h1>
<!-- Текст абзаца -->
<p class="welcomeMessage"> Это коллекция, содержащая самые популярные браузерные игры из Интернета, как старые, так и новые. <br> Надеюсь, вам понравится, и вы поделитесь с друзьями.<br> </p>
<br>
<p class="createAccountMessage"> Пожалуйста, войдите в систему или создайте учетную запись, чтобы получить доступ к веб-сайту</p>
<!-- Кнопки входа -->
<div class="createAccountButton">
<button onclick="openCreateAccountForm()" id="createAccount" type="button" class="btn btn-outline-light">Создать учетную запись</button>
</div>
<div class="signInButton">
<button onclick="openSignInForm()" id="signIn" type="button" class="btn btn-outline-light">Войти</button>
</div>
<!-- Текст абзаца -->
<p class="contactInfo"> напишите мне на [email protected] с любыми отзывами, рекомендациями или ошибками, с которыми вы столкнетесь </p>
<img class="pfp" src="https://wallpapers.com/images/hd/pickle-rick-coming-out-of-portal-33vnk00t94f7eezj.jpg" alt="style" width="640">
<canvas id="projector" width="800" height="600"></canvas>function validateForm(event) {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
if (username === '' || password === '') {
event.preventDefault(); // Предотвратить отправку формы
errorMessage.textContent="Имя пользователя и пароль не могут быть пустыми";
} else {
errorMessage.textContent=""; // Очистить любые предыдущие сообщения об ошибках
}
}body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e374f;
}
form {
border: 1px solid #ced4da;
padding: 20px;
border-radius: 5px;
background-color: rgb(95, 17, 61);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="password"] {
width: 90%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ced4da;
border-radius: 4px;
margin-top: 1px;
}
input[type="submit"] {
background-color: #6f00ff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.error {
color: red;
margin-top: 10px;
}<form method="post" action="../Databases/accountInfo.php" onsubmit="validateForm(event)">
<h2 style="color: rgb(255, 255, 255);">Создать учетную запись</h2>
<label style="color: rgb(255, 255, 255);" for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите ваше имя пользователя" required>
<label style="color: rgb(255, 255, 255);" for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введите ваш пароль" required>
<div id="error-message" class="error"></div>
<input type="submit" name="submit" value="Отправить">
</form>from flask import Flask, app, render_template, request, send_from_directory, render_template_string
app = Flask(__name__)
@app.route("/")
def signin():
return render_template("signInPage.html")
@app.route('/Forms/createAccount')
def createAccount():
return render_template('/Forms/createAccount.html')
Я убедился, что пути к файлам правильные, и что каталоги маршрутов в файле app.py, приведенном выше, указаны верно. Я ожидал, что формы создания учетной записи и входа в систему появятся соответственно при нажатии на кнопки создания учетной записи и входа в систему. Это работает при выполнении сценария, но не на локальном сервере
Ответ или решение
Ваша проблема заключается в том, что при нажатии на кнопки "Создать аккаунт" и "Войти" вы получаете ошибку 404, когда запускаете скрипт на локальном сервере, хотя он работает корректно при непосредственном запуске в браузере. Давайте здесь рассмотрим возможные причины и решения данной ситуации.
1. Проверьте маршруты в Flask
Убедитесь, что маршруты, указанные в вашем файле app.py, правильные и соответствуют путям, используемым в JavaScript. В вашем случае, вы определяете маршруты для форм следующим образом:
@app.route("/Forms/createAccount")
def createAccount():
return render_template('/Forms/createAccount.html')Однако в вашем JavaScript коде вы используете относительный путь ../Forms/createAccount.html. Это может быть причиной вашей ошибки 404. Попробуйте изменить путь в функции openCreateAccountForm() и openSignInForm() следующим образом:
window.open('/Forms/createAccount', 'popup', `width=${width},height=${height},top=${top},left=${left}`);2. Проверьте структуру папок
Убедитесь, что структура ваших папок правильная. Папка Forms должна находиться на том же уровне, что и файл app.py, если вы используете относительные пути. Проверьте, что файлы createAccount.html и signIn.html действительно находятся в папке Forms.
3. Проверка правильности шаблонов
Убедитесь, что файлы HTML (например, createAccount.html и signIn.html) корректно настроены и не содержат ошибок, которые могли бы вызвать проблемы при их рендеринге. Например:
- Убедитесь, что в HTML-коде указаны все необходимые теги и структурные элементы.
- Проверьте, что пути к ресурсам (например, CSS или JS-файлам) в этих файлах также правильные.
4. Использование относительных путей
Если вы предпочитаете использовать относительные пути, убедитесь, что они соответствуют структуре вашего проекта и ведут к нужным страницам. В большинстве случаев вы можете использовать абсолютные пути, начиная с главного URL вашего приложения (например, /Forms/...).
5. Логи и отладка
Запустите свой сервер Flask и внимательно посмотрите на вывод консоли. Если вы получите ошибку 404, проверьте, какое именно URL вызывается при нажатии на кнопки. Это поможет определить, действительно ли проблема заключается в неправильном пути.
Заключение
Выше приведены основные пункты, которые могут помочь вам в решении вашей проблемы с ошибкой 404. Следуя этим рекомендациям и проверяя каждый шаг, вы сможете устранить ошибки и добиться правильной работы вашего приложения на локальном сервере. Если у вас есть дополнительные вопросы или требования, не стесняйтесь спрашивать!