无法通过单击图像打开新的HTML页面[flask/html/python]

nfzehxib  于 2024-01-05  发布在  Python
关注(0)|答案(1)|浏览(171)

我得到了一个简单的flask服务器,管理登录页面。网页工作正常:登录,注销,注册等登录页面后,有一个“home.html”页面3图像。我试图做的是通过点击图像打开第二个网页。我试图加载的页面被称为“output.html”,它是在文件夹“templates”
文件夹结构:

  • webserver
  • 例如
  • 网站
  • 图像
  • 静态
  • 模板
  • base.html
  • home.html
  • login.html
  • main.html
  • output.html
  • sign_up.html
    *init.py
  • auth.py
  • models.py

Flask脚本:

  1. from flask import Flask, render_template, url_for, redirect, send_from_directory, request
  2. from flask_login import UserMixin, login_user, LoginManager, login_required, logout_user, current_user
  3. from flask_wtf import FlaskForm
  4. from wtforms import StringField, PasswordField, SubmitField
  5. from wtforms.validators import InputRequired, Length, ValidationError
  6. app = create_app()
  7. #app = Flask(__name__, template_folder='templates')
  8. app.config['SECRET_KEY'] = 'thisisasecretkey'
  9. login_manager = LoginManager()
  10. login_manager.init_app(app)
  11. login_manager.login_view = 'login'
  12. class RegisterForm(FlaskForm):
  13. username = StringField(validators=[
  14. InputRequired(), Length(min=4, max=20)], render_kw={"placeholder": "Username"})
  15. password = PasswordField(validators=[
  16. InputRequired(), Length(min=8, max=20)], render_kw={"placeholder": "Password"})
  17. submit = SubmitField('Register')
  18. class LoginForm(FlaskForm):
  19. username = StringField(validators=[
  20. InputRequired(), Length(min=4, max=20)], render_kw={"placeholder": "Username"})
  21. password = PasswordField(validators=[
  22. InputRequired(), Length(min=8, max=20)], render_kw={"placeholder": "Password"})
  23. submit = SubmitField('Login')
  24. #@app.route("/images/<path:filename>")
  25. #def serve_image(filename):
  26. # return send_from_directory("images", filename)
  27. @app.route('/')
  28. def index():
  29. return render_template('home.html')
  30. @app.route('/output', methods=['GET', 'POST'])
  31. def output():
  32. return render_template('output.html')
  33. @app.route('/login', methods=['GET', 'POST'])
  34. def login():
  35. form = LoginForm()
  36. return render_template('login.html', form=form)
  37. @app.route('/dashboard', methods=['GET', 'POST'])
  38. @login_required
  39. def dashboard():
  40. return render_template('dashboard.html')
  41. @app.route('/logout', methods=['GET', 'POST'])
  42. @login_required
  43. def logout():
  44. logout_user()
  45. return redirect(url_for('login'))
  46. @app.route('/register', methods=['GET', 'POST'])
  47. def register():
  48. form = RegisterForm()
  49. return render_template('register.html', form=form)
  50. if __name__ == '__main__':
  51. #app.run()
  52. app.run()

字符串
HTML端:

  1. <div id="Ohm" class="tabcontent">
  2. <h3>Escolha um dos três circuitos</h3>
  3. <p>Clique OK para seguir</p>
  4. <div>
  5. <img
  6. src="../images/circuit_R1.png"
  7. width="30%"
  8. height="auto"
  9. alt="circuito R1"
  10. class="responsive"
  11. onclick="redirecionarPaginaEAcionar('10010101', '/output')"
  12. style="cursor: pointer;" >
  13. <img
  14. src="../images/circuit_R2.png"
  15. width="30%"
  16. height="auto"
  17. alt="circuito R1"
  18. class="responsive"
  19. onclick="accionarReles('01011011')"
  20. style="cursor: pointer;" >
  21. (...)
  22. <script>
  23. function accionarReles(parametro)
  24. {
  25. (...)
  26. }
  27. function redirecionarPaginaEAcionar(parametro, url) {
  28. accionarReles(parametro); // Chama a função accionarReles com o parâmetro especificado
  29. window.location.href = url; // Redireciona para a URL especificada
  30. }
  31. </script>


所以,在我运行服务器并登录后,脚本调用home.html。当点击图像时,另一个html页面应该打开:output.html。然而,由于程序是我得到一个404错误页面找不到。
但是,如果我将输出替换为登录,这是同一个文件夹中的页面,一切都是正确的。
我找不到错误/错误,我不能打开另一个页面,除非是“login.html”,即使我把它移到“模板”之外,所以,我需要一些帮助来找到错误

nfeuvbwi

nfeuvbwi1#

要解决此问题,您应该使用Flask提供的url_for函数来生成output路由的URL

  1. <img
  2. src="../images/circuit_R1.png"
  3. width="30%"
  4. height="auto"
  5. alt="circuito R1"
  6. class="responsive"
  7. onclick="redirecionarPaginaEAcionar('10010101', '{{ url_for('output') }}')"
  8. style="cursor: pointer;">

字符串
通过使用url_for('output'),Flask将为output路由生成正确的URL

相关问题